mentionify v0.0.12
mentionify
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>
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! :smile_cat:
License
ISC