JSFiddle - React, Tailwind, and code Playground

by sarim

HTML

<section>
  <h1>Latest Tweets</h1>
  <ul id="tweets">
      Loading tweets by @gittumia . . .
	<div id="hiddentweet">
	  	<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/gittumia" data-chrome="nofooter noheader" data-widget-id="375613472869859328" data-tweet-limit="7"></a>
		<script id="twitter-wjs" src="http://platform.twitter.com/widgets.js" async onload="parsetwitter()"></script>
	</div>
  </ul>
</section>

CSS

#hiddentweet { position : fixed ; top : -5000px ; }

.tweetdate {
float: right;
font-size: .7em;
}

JavaScript

function parsetwitter(){
    frms = document.getElementsByTagName("iframe");
    for (i=0;i<frms.length;++i){
        if (frms[i].id.search("twitter-widget-") != -1){
            tweets = frames[frms[i].id].document.body.getElementsByClassName("e-entry-content");
            if (tweets.length == 0) return setTimeout(parsetwitter,500);
            
            tweetmeta = frames[frms[i].id].document.body.getElementsByClassName("permalink");
            content = "";
            
            for (p=0;p<tweets.length;++p){
                txt = tweets[p].innerText;
                link = tweetmeta[p].href;
                ttime = tweetmeta[p].innerText;
                content += '<li>'+'<p>'+'<a class="tweetdate" href="' + link + '">'+ ttime +'</a>'+ linkifyTweet(txt.replace(/\n/g, '<br>')) +'</p>'+'</li>';
                
            }
            
            document.getElementById('tweets').innerHTML = content;
        }
    }
}


function linkifyTweet(text) {
  // Linkify urls, usernames
  text = text.replace(/(https?:\/\/)([\w\-:;?&=+.%#\/]+)/gi, '<a href="$1$2">$2</a>')
    .replace(/(^|\W)@(\w+)/g, '$1<a href="http://twitter.com/$2">@$2</a>');
  
  return text;
}