Repository: ireade/inlinetweetjs
Branch: gh-pages
Commit: 391df35d7141
Files: 7
Total size: 12.1 KB
Directory structure:
gitextract_wu9e5ruw/
├── .gitignore
├── README.md
├── gulpfile.js
├── index.html
├── package.json
├── src/
│ └── inline-tweet.js
└── style.css
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules
================================================
FILE: README.md
================================================
# InlineTweet.js
[SEE DEMO](http://ireade.github.io/inlinetweetjs/)
Want to use this in Wordpress? [Check out this plugin](https://github.com/ireade/wp-inlinetweetjs/)
## How to Use
#### 1 - Include Script
[Download the file from here](https://raw.githubusercontent.com/ireade/inlinetweetjs/gh-pages/src/inline-tweet.min.js) and include it in your webpage.
```html
<script src="path/to/inline-tweet.min.js"></script>
```
#### 2 - Wrap Text
Wrap the tweetable text in a container element of your choice (`span` recommended) with the data attribute, `data-inline-tweet`
```html
<span data-inline-tweet>Lorem Khaled Ipsum is a major key to success</span>
```
#### 3 - Additional Options
You can add more data attributes to cutomise the tweeted output -
- `data-inline-tweet-via` — Add a twitter username (without the @) to append to the tweet
- `data-inline-tweet-tags` - Add hashtags to the tweet (comma-separated, no spaces)
- `data-inline-tweet-url` — Tweet a URL different to the current page url
```html
<span data-inline-tweet
data-inline-tweet-via="ireaderinokun"
data-inline-tweet-tags="webdesign,webdev,js,yolo"
data-inline-tweet-url="bitsofco.de">
Lorem Khaled Ipsum is a major key to success
</span>
```
#### 4 - Add Styles
Add the following styles to your stylesheet -
```css
[data-inline-tweet] a {
text-decoration: none;
color: #000;
}
[data-inline-tweet] a span {
border-bottom: 1px dotted rgb(0,172,237);
font-style: italic;
margin-right: 10px;
}
[data-inline-tweet] a:hover span {
background-color: rgba(0,172,237,0.1);
color: rgb(0,172,237);
}
```
## Licence
[GNU GENERAL PUBLIC LICENSE](https://www.gnu.org/licenses/gpl-3.0.en.html)
================================================
FILE: gulpfile.js
================================================
var gulp = require('gulp'),
gutil = require('gulp-util'),
uglify = require('gulp-uglifyjs');
gulp.task('script', function() {
gulp.src('src/inline-tweet.js')
.pipe(
uglify('inline-tweet.min.js')
.on('error', gutil.log)
)
.pipe(gulp.dest('src'));
});
gulp.task('watch', function() {
gulp.watch('src/inline-tweet.js',['script']);
});
gulp.task('default', ['script', 'watch']);
================================================
FILE: index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>InlineTweet.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Source+Code+Pro' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<section>
<h1>InlineTweet.js</h1>
<p class="about"><span data-inline-tweet data-inline-tweet-via="ireaderinokun" data-inline-tweet-url="http://ireade.github.io/inlinetweetjs/" data-inline-tweet-tags="js">InlineTweet.js allows you to easily create tweetable links out of any text on a webpage</span>. Just wrap the tweetable text in a container with <code>data-inline-tweet</code> and you're good to go!</p>
<br>
<iframe src="https://ghbtns.com/github-btn.html?user=ireade&repo=inlinetweetjs&type=star&count=false" frameborder="0" scrolling="0" width="60px" height="20px"></iframe>
<br><br>
<p>
<strong>UPDATE: </strong>
<span data-inline-tweet data-inline-tweet-via="ireaderinokun @CreativeCatApps" data-inline-tweet-url="https://github.com/ireade/wp-inlinetweetjs">You can now use InlineTweet.js in Wordpress with this new plugin!</span>
(<a href="https://github.com/ireade/wp-inlinetweetjs">Check it out</a>)
</p>
</section>
<section class="site-section" id="how-to-use">
<h2>How To Use</h2>
<section>
<h3>1 - Include Script</h3>
<p><a href="https://raw.githubusercontent.com/ireade/inlinetweetjs/gh-pages/src/inline-tweet.min.js">Download the file from here</a> and include it in your webpage.</p>
<pre id="stepOne"><script src="path/to/inline-tweet.min.js"></script></pre>
</section>
<section>
<h3>2 - Wrap Text</h3>
<p>Wrap the tweetable text in a container element of your choice (<code>span</code> recommended) with the data attribute, <code>data-inline-tweet</code></p>
<pre><span data-inline-tweet>Lorem Khaled Ipsum is a major key to success</span></pre>
</section>
<section>
<h3>3 - Additional Options</h3>
<p>You can add more data attributes to cutomise the tweeted output -</p>
<ul class="ul">
<li><code>data-inline-tweet-via</code> — Add a twitter username (without the @) to append to the tweet </li>
<li><code>data-inline-tweet-tags</code> - Add hashtags to the tweet (comma-separated, no spaces)</li>
<li><code>data-inline-tweet-url</code> — Tweet a URL different to the current page url</li>
</ul>
<pre><span data-inline-tweet
data-inline-tweet-via="ireaderinokun"
data-inline-tweet-tags="webdesign,webdev,js,yolo"
data-inline-tweet-url="bitsofco.de">
Lorem Khaled Ipsum is a major key to success
</span></pre>
</section>
<section>
<h3>4 - Add Styles</h3>
<p>Add the following styles to your stylesheet -</p>
<pre id="stepOne">[data-inline-tweet] a {
text-decoration: none;
color: #000;
}
[data-inline-tweet] a span {
border-bottom: 1px dotted rgb(0,172,237);
font-style: italic;
margin-right: 10px;
}
[data-inline-tweet] a:hover span {
background-color: rgba(0,172,237,0.1);
color: rgb(0,172,237);
}</pre>
</section>
</section>
<p>Made with <i class="twa twa-heart"></i> by <a href="https://twitter.com/ireaderinokun" target="_blank">@IreAderinokun</a></p>
</div>
<script src="src/inline-tweet.min.js"></script>
</body>
</html>
================================================
FILE: package.json
================================================
{
"name": "inline-tweet-js",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-util": "^3.0.7",
"gulp-uglifyjs": "^0.6.2"
},
"scripts": {
"start": "gulp"
},
"author": "Ire Aderinokun",
"license": "ISC"
}
================================================
FILE: src/inline-tweet.js
================================================
var inlineTweets = document.querySelectorAll('*[data-inline-tweet]');
if ( inlineTweets ) {
var twitterLogo = '<svg style="height: 0.7em;" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" xmlns:cc="http://creativecommons.org/ns#" viewBox="0 0 182.66667 150.66667" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath20" clipPathUnits="userSpaceOnUse"><path id="path18" d="m0 10.012h1366.9v1110.9h-1366.9z"/></clipPath></defs><g id="g10" transform="matrix(1.3333 0 0 -1.3333 0 150.67)"><g id="g12" transform="scale(.1)"><g id="g14"><g id="g16" clip-path="url(#clipPath20)"><path id="path22" d="m1366.9 989.39c-50.27-22.309-104.33-37.387-161.05-44.18 57.89 34.723 102.34 89.679 123.28 155.15-54.18-32.15-114.18-55.47-178.09-68.04-51.13 54.49-124.02 88.55-204.68 88.55-154.89 0-280.43-125.55-280.43-280.43 0-21.988 2.457-43.398 7.258-63.91-233.08 11.68-439.72 123.36-578.04 293.01-24.141-41.4-37.969-89.567-37.969-140.97 0-97.308 49.489-183.13 124.76-233.44-45.969 1.437-89.218 14.058-127.03 35.078-0.043-1.18-0.043-2.348-0.043-3.52 0-135.9 96.68-249.22 224.96-275-23.512-6.41-48.281-9.8-73.86-9.8-18.089 0-35.628 1.711-52.781 5 35.711-111.41 139.26-192.5 262-194.77-96.058-75.23-216.96-120.04-348.36-120.04-22.621 0-44.961 1.332-66.918 3.91 124.16-79.568 271.55-125.98 429.94-125.98 515.82 0 797.86 427.31 797.86 797.93 0 12.153-0.28 24.223-0.79 36.25 54.77 39.571 102.31 88.95 139.93 145.2" fill="#55ACEE"/></g></g></g></g></svg>';
function buildInlineTweet(inlineTweet) {
var tweetText = inlineTweet.innerHTML;
// TWEET LINK VARIABLES
var tweetTextEncoded = "%22" + encodeURIComponent(tweetText) + "%22";
var pageURL = inlineTweet.dataset.inlineTweetUrl ? inlineTweet.dataset.inlineTweetUrl : window.location.href;
var tweetVia = inlineTweet.dataset.inlineTweetVia ? "&via="+inlineTweet.dataset.inlineTweetVia : "";
var tweetHashtags = inlineTweet.dataset.inlineTweetTags ? "&hashtags="+inlineTweet.dataset.inlineTweetTags : "";
var tweetLink = "https://twitter.com/intent/tweet/?text="+tweetTextEncoded+"&url="+pageURL+tweetVia+tweetHashtags;
// SPAN ELEMENT
var tweetTextContainer = document.createElement('span');
tweetTextContainer.innerHTML = tweetText;
// ANCHOR ELEMENT
var link = document.createElement('a');
link.target = "_blank";
link.href = tweetLink;
link.appendChild(tweetTextContainer);
link.innerHTML += twitterLogo;
inlineTweet.innerHTML = "";
inlineTweet.appendChild(link);
}
for ( var i = 0; i < inlineTweets.length; i++ ) {
buildInlineTweet(inlineTweets[i])
}
}
================================================
FILE: style.css
================================================
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Box sizing */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* ---------------*/
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
line-height: 1.4;
font-family: 'Source Sans Pro', sans-serif;
color: rgb(50, 50, 50);
}
a {
color: inherit;
}
small {
font-size: 1rem;
display: block;
text-align: right;
}
strong {
font-weight: 600;
}
h1 {
font-size: 4rem;
margin-bottom: 20px;
font-weight: 600;
}
p.about {
font-size: 2rem;
margin-bottom: 20px;
}
p {
margin-bottom: 15px;
}
h2 {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 20px;
}
h3 {
font-size: 2rem;
font-weight: 600;
margin-bottom: 20px;
}
.uo {
color: rgb(180, 180, 180);
}
.ul {
display: block;
margin-bottom: 20px;
margin-left: 20px;
}
.ul li {
list-style-type: disc;
list-style-position: inside;
}
.container {
margin: 100px auto;
width: 90%;
max-width: 800px;
}
@media screen and (max-width: 600px) {
.container {
margin: 50px auto;
}
}
section.site-section {
margin-bottom: 50px;
padding-bottom: 30px;
border-bottom: 1px solid rgb(220, 220, 220);
}
section:not(.site-section) {
margin-bottom: 40px;
}
.highlight {
margin-bottom: 15px;
}
pre {
background-color: rgb(220, 220, 220);
padding: 10px;
display: block;
font-family: 'Source Code Pro', monospace;
font-size: 1.2rem;
color: #000;
white-space: pre-line;
word-wrap: break-word;
position: relative;
}
code {
background-color: rgb(220, 220, 220);
font-family: 'Source Code Pro', monospace;
font-size: 1.2rem;
color: #000;
padding: 2px 5px;
}
/* Twemoji Awesome - http://ellekasai.github.io/twemoji-awesome/ */
.twa {
display: inline-block;
height: 1em;
width: 1em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
background-repeat: no-repeat;
background-position: center center;
background-size: 1em 1em; }
.twa-heart {
background-image: url("https://twemoji.maxcdn.com/svg/2764.svg");
}
[data-inline-tweet] a {
text-decoration: none;
color: #000;
}
[data-inline-tweet] a span {
border-bottom: 1px dotted rgb(0,172,237);
font-style: italic;
margin-right: 8px;
}
[data-inline-tweet] a:hover span {
background-color: rgba(0,172,237, 0.1);
color: rgb(0,172,237);
}
gitextract_wu9e5ruw/ ├── .gitignore ├── README.md ├── gulpfile.js ├── index.html ├── package.json ├── src/ │ └── inline-tweet.js └── style.css
SYMBOL INDEX (1 symbols across 1 files)
FILE: src/inline-tweet.js
function buildInlineTweet (line 10) | function buildInlineTweet(inlineTweet) {
Condensed preview — 7 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (14K chars).
[
{
"path": ".gitignore",
"chars": 12,
"preview": "node_modules"
},
{
"path": "README.md",
"chars": 1938,
"preview": "# InlineTweet.js\n\n![InlineTweet.js allows you to easily create tweetable links out of any text on a webpage. Just wrap t"
},
{
"path": "gulpfile.js",
"chars": 442,
"preview": "var gulp = require('gulp'),\n gutil = require('gulp-util'),\n uglify = require('gulp-uglifyjs');\n\ngulp.task('script'"
},
{
"path": "index.html",
"chars": 3643,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n\t<meta charset=\"utf-8\">\n\t<title>InlineTweet.js</title>\n\t\n\t<meta name=\"viewport\" "
},
{
"path": "package.json",
"chars": 297,
"preview": "{\n \"name\": \"inline-tweet-js\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"gulpfile.js\",\n \"devDependencies\": "
},
{
"path": "src/inline-tweet.js",
"chars": 2843,
"preview": "var inlineTweets = document.querySelectorAll('*[data-inline-tweet]');\n\nif ( inlineTweets ) {\n\n\tvar twitterLogo = '<svg s"
},
{
"path": "style.css",
"chars": 3196,
"preview": "html, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, bi"
}
]
About this extraction
This page contains the full source code of the ireade/inlinetweetjs GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 7 files (12.1 KB), approximately 4.2k tokens, and a symbol index with 1 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.