mentionify

A Node.js module that renders @'s in the DOM's text to social media profile links

See demo

mentionify is Node.js module that looks for all intances of @'s in the DOM's text nodes and injects an HTML a tag that links to that user's social media profile.

For example, if your document has something like:

<p id="twitter">
    My Twitter handle is @jcvno!
<p>

You can use the mentionify Node.js module and run it with some options:

import mentionify from 'mentionify';

mentionify.run({
    elementId: 'twitter'
    site: 'twitter'
});

Your document will then be rendered as:

<p id="twitter">
    My Twitter handle is
    <a href="//twitter.com/jcvno" class="mentionified">@jcvno</a>!
</p>

Installation

mentionify is a Node.js module published to npm:

$ npm install mentionify

Usage

You can use the mentionify as a Node.js module:

index.html:

<div id="container">
    <p>
        My Twitter handle is @jcvno!
    <p>
</div>

app.js:

import mentionify from 'mentionify';

mentionify.run({
    site: 'twitter'
});

The default site option is twitter which links to the user's Twitter profile, but can be overridden:

index.html:

<div id="container">
    <p>
        My Twitter handle is @earthican!
    <p>
</div>

app.js:

import mentionify from 'mentionify';

mentionify.run({
    site: 'github'
});

The above HTML will be rendered as:

<div id="container">
    <p>
        My GitHub handle is
        <a href="//github.com/earthican" class="mentionified">@earthican</a>!
    </p>
</div>

In fact, the site option can any site that has the URL format http://${ site }.com/${ username }.

API

mentionify.run()

Runs the mentionify module using the specified options, which are described below.

Options

The following options can be passed into Mentionify.run()

elementId (string)

The id of the element to find and render "@user" text to a tags. Default: container

site (string)

The social media site to link to. Default: twitter

Any social media site can be used to link to its web profile, provided that it has the following URL format:

http://${ site }.com/${ username }

className (string)

The specified CSS class name. Default: mentionified

Additional site support

mentionify now also supports linkedin and reddit sites:

index.html:

<ul>
    <li id="reddit">reddit: /u/canoj</li>
    <li id="linkedin">LinkedIn: /in/justincano</li>
</ul>

app.js

import metionify from 'mentionify';

mentionify.run({
    elementId: "reddit",
    site: "reddit"
});
mentionify.run({
    elementId: "linkedin",
    site: "linkedin"
});

Rendered DOM:

<ul>
    <li id="reddit">reddit: <a href="//reddit.com/u/canoj" class="mentionified">/u/canoj</a></li>
    <li id="linkedin">LinkedIn: <a href="//linkedin.com/in/justincano" class="mentionified">/in/justincano</a></li>
</ul>

Automated mention identifiers

mentionify now has support for identifiers as part of the mention using the auto account option:

index.html:

<div id="mentions">
    Reddit: @canoj(reddit)
    LinkedIn: @justincano(linkedin)
</div>

app.js

import mentionify from 'mentionify';

mentionify.run({
    elementId: "mentions",
    site: "auto"
});

Rendered DOM:

<div id="mentions">
    Reddit: <a href="//reddit.com/u/canoj" class="mentionified">@canoj(reddit)</a>
    LinkedIn: <a href="//linkedin.com/in/justincano" class="mentionified">@justincano(linkedin)</a>
</div>

Contributing

Build

Fork this repository and clone to your local machine. Make sure node and npm are installed, then cd into project dir and run:

$ npm install

Any pull requests that relate to a new or existing feature, please write unit tests for your implementation. It's good practice!

Future

I am planning for a v0.1.0 release. To do so, I am creating/collecting tickets that would be beneficial to include for the release - see here.

If you have a feature request you would like to see in v0.1.0, please file an issue, and we can discuss. Pull requests are welcomed, too! 😸

License

ISC