A Node.js module that renders @'s in the DOM's text to social media profile links
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>
mentionify is a Node.js module published to npm:
$ npm install mentionify
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 }
.
Runs the mentionify module using the specified options, which are described below.
The following options can be passed into Mentionify.run()
The id
of the element to find and render "@user" text to a
tags. Default: container
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 }
The specified CSS class
name. Default: mentionified
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>
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>
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!
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! 😸
ISC