[ { "path": ".gitignore", "content": "node_modules" }, { "path": "README.md", "content": "# InlineTweet.js\n\n![InlineTweet.js allows you to easily create tweetable links out of any text on a webpage. Just wrap the tweetable text in a container with data-inline-tweet and you're good to go!](screenshot.png)\n\n[SEE DEMO](http://ireade.github.io/inlinetweetjs/)\n\nWant to use this in Wordpress? [Check out this plugin](https://github.com/ireade/wp-inlinetweetjs/)\n\n\n## How to Use\n\n\n#### 1 - Include Script\n\n[Download the file from here](https://raw.githubusercontent.com/ireade/inlinetweetjs/gh-pages/src/inline-tweet.min.js) and include it in your webpage.\n\n```html\n\n```\n\n\n#### 2 - Wrap Text\n\nWrap the tweetable text in a container element of your choice (`span` recommended) with the data attribute, `data-inline-tweet`\n\n\n```html\nLorem Khaled Ipsum is a major key to success\n```\n\n\n#### 3 - Additional Options\n\nYou can add more data attributes to cutomise the tweeted output -\n\n- `data-inline-tweet-via` — Add a twitter username (without the @) to append to the tweet\n- `data-inline-tweet-tags` - Add hashtags to the tweet (comma-separated, no spaces)\n- `data-inline-tweet-url` — Tweet a URL different to the current page url\n\n```html\n \n\tLorem Khaled Ipsum is a major key to success \n\n```\n\n\n#### 4 - Add Styles\n\nAdd the following styles to your stylesheet -\n\n```css\n[data-inline-tweet] a { \n\ttext-decoration: none; \n\tcolor: #000; \n} \n[data-inline-tweet] a span { \n\tborder-bottom: 1px dotted rgb(0,172,237); \n\tfont-style: italic; \n\tmargin-right: 10px; \n} \n[data-inline-tweet] a:hover span { \n\tbackground-color: rgba(0,172,237,0.1); \n\tcolor: rgb(0,172,237); \n}\n```\n\n\n## Licence\n\n[GNU GENERAL PUBLIC LICENSE](https://www.gnu.org/licenses/gpl-3.0.en.html)\n\n" }, { "path": "gulpfile.js", "content": "var gulp = require('gulp'),\n gutil = require('gulp-util'),\n uglify = require('gulp-uglifyjs');\n\ngulp.task('script', function() {\n gulp.src('src/inline-tweet.js')\n .pipe(\n uglify('inline-tweet.min.js')\n .on('error', gutil.log)\n )\n .pipe(gulp.dest('src'));\n});\n\ngulp.task('watch', function() {\n gulp.watch('src/inline-tweet.js',['script']); \n});\n\ngulp.task('default', ['script', 'watch']);" }, { "path": "index.html", "content": "\n\n\n\t\n\tInlineTweet.js\n\t\n\t\n\t\n\t\n\t\n\t\n\n\n\t
\n\n\t\t
\n\t\t\n\t\t

InlineTweet.js

\n\n\t\t

InlineTweet.js allows you to easily create tweetable links out of any text on a webpage. Just wrap the tweetable text in a container with data-inline-tweet and you're good to go!

\n\n\t\t
\n\t\t\n\n\n\t\t

\n\n\t\t

\n\t\t\tUPDATE: \n\t\t\tYou can now use InlineTweet.js in Wordpress with this new plugin!\n\n\t\t\t(Check it out)\n\t\t

\n\t\t\n\t\t\n\t\t
\n\n\t\t\n\t\t
\n\t\t\t

How To Use

\n\n\t\t\t
\n\t\t\t\t

1 - Include Script

\n\n\t\t\t\t

Download the file from here and include it in your webpage.

\n
<script src=\"path/to/inline-tweet.min.js\"></script>
\n\t\t\t
\n\n\n\t\t\t
\n\t\t\t\t

2 - Wrap Text

\n\n\t\t\t\t

Wrap the tweetable text in a container element of your choice (span recommended) with the data attribute, data-inline-tweet

\n\n
<span data-inline-tweet>Lorem Khaled Ipsum is a major key to success</span>
\n\t\t\t
\n\n\n\t\t\t
\n\t\t\t\t

3 - Additional Options

\n\n\t\t\t\t

You can add more data attributes to cutomise the tweeted output -

\n\t\t\t\t
    \n\t\t\t\t\t
  • data-inline-tweet-via — Add a twitter username (without the @) to append to the tweet
    • \n\t\t\t\t\t
  • data-inline-tweet-tags - Add hashtags to the tweet (comma-separated, no spaces)
    • \n\t\t\t\t\t
  • data-inline-tweet-url — Tweet a URL different to the current page url
    • \n\t\t\t\t
\n
<span data-inline-tweet\n      data-inline-tweet-via=\"ireaderinokun\"\n      data-inline-tweet-tags=\"webdesign,webdev,js,yolo\"\n      data-inline-tweet-url=\"bitsofco.de\">\n  Lorem Khaled Ipsum is a major key to success\n</span>
\n\t\t\t
\n\n\n\t\t\t
\n\t\t\t\t

4 - Add Styles

\n\t\t\t\t

Add the following styles to your stylesheet -

\n\n
[data-inline-tweet] a {\n  text-decoration: none;\n  color: #000;\n}\n[data-inline-tweet] a span {\n  border-bottom: 1px dotted rgb(0,172,237);\n  font-style: italic;\n  margin-right: 10px;\n}\n[data-inline-tweet] a:hover span {\n  background-color: rgba(0,172,237,0.1);\n  color: rgb(0,172,237);\n}
\n\t\t\t
\n\n\n\t\t
\n\n\n\t\t

Made with by @IreAderinokun

\n\n\t
\n\n\n\t\n\n" }, { "path": "package.json", "content": "{\n \"name\": \"inline-tweet-js\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"gulpfile.js\",\n \"devDependencies\": {\n \"gulp\": \"^3.9.1\",\n \"gulp-util\": \"^3.0.7\",\n \"gulp-uglifyjs\": \"^0.6.2\"\n },\n \"scripts\": {\n \"start\": \"gulp\"\n },\n \"author\": \"Ire Aderinokun\",\n \"license\": \"ISC\"\n}\n" }, { "path": "src/inline-tweet.js", "content": "var inlineTweets = document.querySelectorAll('*[data-inline-tweet]');\n\nif ( inlineTweets ) {\n\n\tvar twitterLogo = 'image/svg+xml';\n\n\n\n\n\tfunction buildInlineTweet(inlineTweet) {\n\n\t\tvar tweetText = inlineTweet.innerHTML;\n\n\n\t\t// TWEET LINK VARIABLES\n\t\tvar tweetTextEncoded = \"%22\" + encodeURIComponent(tweetText) + \"%22\";\n\t\tvar pageURL = inlineTweet.dataset.inlineTweetUrl ? inlineTweet.dataset.inlineTweetUrl : window.location.href;\n\t\tvar tweetVia = inlineTweet.dataset.inlineTweetVia ? \"&via=\"+inlineTweet.dataset.inlineTweetVia : \"\";\n\t\tvar tweetHashtags = inlineTweet.dataset.inlineTweetTags ? \"&hashtags=\"+inlineTweet.dataset.inlineTweetTags : \"\";\n\t\tvar tweetLink = \"https://twitter.com/intent/tweet/?text=\"+tweetTextEncoded+\"&url=\"+pageURL+tweetVia+tweetHashtags;\n\n\n\t\t// SPAN ELEMENT\n\t\tvar tweetTextContainer = document.createElement('span');\n\t\ttweetTextContainer.innerHTML = tweetText;\n\n\n\t\t// ANCHOR ELEMENT\n\t\tvar link = document.createElement('a');\n\t\tlink.target = \"_blank\";\n\t\tlink.href = tweetLink;\n\t\tlink.appendChild(tweetTextContainer);\n\t\tlink.innerHTML += twitterLogo;\n\n\n\t\tinlineTweet.innerHTML = \"\";\n\t\tinlineTweet.appendChild(link);\n\n\t}\n\n\n\tfor ( var i = 0; i < inlineTweets.length; i++ ) {\n\t\tbuildInlineTweet(inlineTweets[i])\n\t}\n\n}\n\n\n\n\n" }, { "path": "style.css", "content": "html, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed,\nfigure, figcaption, footer, header, hgroup,\nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont: inherit;\n\tfont-size: 100%;\n\tvertical-align: baseline;\n}\n\narticle, aside, details, figcaption, figure,\nfooter, header, hgroup, menu, nav, section {\n\tdisplay: block;\n}\nul {\n\tlist-style: none;\n}\nblockquote, q {\n\tquotes: none;\n}\nblockquote:before, blockquote:after,\nq:before, q:after {\n\tcontent: '';\n\tcontent: none;\n}\ntable {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n}\n\n/* Box sizing */\n\nhtml {\n box-sizing: border-box;\n}\n\n*, *:before, *:after {\n box-sizing: inherit;\n}\n\n\n\n\n/* ---------------*/\n\n\n\nhtml {\n font-size: 62.5%;\n}\nbody {\n font-size: 1.6rem;\n line-height: 1.4;\n font-family: 'Source Sans Pro', sans-serif;\n color: rgb(50, 50, 50);\n\n}\na {\n color: inherit; \n}\n\nsmall {\n\tfont-size: 1rem;\n\tdisplay: block;\n\ttext-align: right;\n}\nstrong {\n\tfont-weight: 600;\n}\n\nh1 {\n\tfont-size: 4rem;\n\tmargin-bottom: 20px;\n\tfont-weight: 600;\n}\n\n\n\n\np.about {\n\tfont-size: 2rem;\n\tmargin-bottom: 20px;\n}\n\np {\n\tmargin-bottom: 15px;\n}\n\nh2 {\n\tfont-size: 2.5rem;\n\tfont-weight: 600;\n\tmargin-bottom: 20px;\n}\n\n\nh3 {\n\tfont-size: 2rem;\n\tfont-weight: 600;\n\tmargin-bottom: 20px;\n}\n\n.uo {\n\tcolor: rgb(180, 180, 180);\n}\n\n\n.ul {\n\tdisplay: block;\n\tmargin-bottom: 20px;\n\tmargin-left: 20px;\n\n}\n\n.ul li {\n\tlist-style-type: disc;\n\tlist-style-position: inside;\n}\n\n.container {\n\tmargin: 100px auto;\n\twidth: 90%;\n\tmax-width: 800px;\n}\n\n@media screen and (max-width: 600px) {\n\t.container {\n\t\tmargin: 50px auto;\n\t}\n}\n\n\n\nsection.site-section {\n\tmargin-bottom: 50px;\n\tpadding-bottom: 30px;\n\tborder-bottom: 1px solid rgb(220, 220, 220);\n}\nsection:not(.site-section) {\n\tmargin-bottom: 40px;\n}\n\n.highlight {\n\tmargin-bottom: 15px;\n}\n\npre {\n\tbackground-color: rgb(220, 220, 220);\n\tpadding: 10px;\n\tdisplay: block;\n\tfont-family: 'Source Code Pro', monospace;\n\tfont-size: 1.2rem;\n\tcolor: #000;\n\t\n\twhite-space: pre-line;\n\tword-wrap: break-word;\n\tposition: relative;\n}\n\ncode {\n\tbackground-color: rgb(220, 220, 220);\n\tfont-family: 'Source Code Pro', monospace;\n\tfont-size: 1.2rem;\n\tcolor: #000;\n\tpadding: 2px 5px;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Twemoji Awesome - http://ellekasai.github.io/twemoji-awesome/ */\n .twa {\n display: inline-block;\n height: 1em;\n width: 1em;\n margin: 0 .05em 0 .1em;\n vertical-align: -0.1em;\n background-repeat: no-repeat;\n background-position: center center;\n background-size: 1em 1em; }\n\n.twa-heart {\n background-image: url(\"https://twemoji.maxcdn.com/svg/2764.svg\"); \n}\n\n\n\n\n\n\n\n\n[data-inline-tweet] a {\n\ttext-decoration: none;\n\tcolor: #000;\n}\n[data-inline-tweet] a span {\n\tborder-bottom: 1px dotted rgb(0,172,237);\n\tfont-style: italic;\n\tmargin-right: 8px;\n}\n[data-inline-tweet] a:hover span {\n\tbackground-color: rgba(0,172,237, 0.1);\n\tcolor: rgb(0,172,237);\n}\n\n\n\n\n\n" } ]