JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<script src="https://github.com/jherdman/javascript-relative-time-helpers/raw/master/date.extensions.js"></script>
<div id="twitter" class="twitter">
</div>

<div id="hiero" class="twitter">
</div>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #222;
}

p {
    margin-bottom: 0.1em;
}

a {
    color: #a22;
    padding: 0 1px;
}

a:hover {
    color: #fff;
    background-color: #a22;
    text-decoration: none;
}

em {
    font-style: italic;
}

em a {
    color: #555;
    text-decoration: none;
    padding: 0;
    font-size: 0.8em;
}

em a:hover {
    text-decoration: underline;
    background-color: transparent;
    color: #555;
}

.twitter {
    width: 48.5%;
    float: left;
}

.twitter:nth-child(even) {
    float: right;
}

.twitter h2 {
    border-bottom: 2px solid #ccc;
    margin: 0 0 0.5em;
}

.twitter h2 a {
    font-style: italic;
    font-weight: bold;
    font-family: georgia, 'times new roman', times, serif;
    color: #555;
    text-decoration: none;
}

.twitter h2 a:hover {
    background-color: transparent;
    color: #777;
}

.twitter li {
    padding: 0.25em 0.25em;
    margin-bottom: 0.25em;
    border-bottom: 1px dashed #bbb;
}

.twitter .tweet-last {
    margin-bottom: 0;
    border-bottom: 0 none;
}

JavaScript

(function($) {
    /**
     * Twitter prototypes from:
     * http://www.simonwhatley.co.uk/parsing-twitter-usernames-hashtags-and-urls-with-javascript
     */
    String.prototype.parseURL = function() {
        return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(url) {
            return url.link(url);
        });
    };
    String.prototype.parseUsername = function() {
        return this.replace(/[@]+[A-Za-z0-9-_]+/, function(u) {
            var username = u.replace("@","")
            return u.link("http://twitter.com/"+username);
        });
    };
    String.prototype.parseHashtag = function() {
        return this.replace(/[#]+[A-Za-z0-9-_]+/, function(t) {
            var tag = t.replace("#","%23")
            return t.link("http://search.twitter.com/search?q="+tag);
        });
    };
    $.fn.twitter = function(options) {
        var
            options = jQuery.extend({}, {
            user: "HieroIsHere",
            limit: 10,
            speed: 500
        }, options),
            feed = "http://twitter.com/statuses/user_timeline.json?screen_name="+options.user+"&count="+options.limit+"&callback=?",
            permalink = "http://twitter.com/"+options.user+"/status/";
        return this.each(function() {
            var ul = $('<ul id="twitter_feed"></ul>');
            $.getJSON(feed, function(data) {
                $(data).each(function(index) {
                    var
                        li = $('<li class="tweet"></li>').css("opacity", "0"),
                        tweet = data[index];
                    if(index == 0) {
                        li.addClass("tweet-first first");
                    }
                    if(index == data.length-1) {
                        li.addClass("tweet-last last");
                    }
                    ul.append(
                        li.append(
                            $('<p></p>').html(tweet.text.parseURL().parseUsername().parseHashtag()),
               ...