Update twitterapiclient, styles and templates

Update twitterapiclient #1 improved the tweet parsing with cache, added retweet_count and favorite_count to the template. Added retweet and like icon to _icons, updated styles.
carloscuesta · Jan 1, 2016 · 525547b · 525547b
1 parent 24390c3
commit 525547b
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 16 deletions.
diff --git a/src/app/scripts/twitterapiclient.js b/src/app/scripts/twitterapiclient.js
@@ -4,7 +4,8 @@ require('dotenv').load();
 
 var ApiClient = require('./apiclient'),
 	twitterParse = require('twitter-text'),
-	CacheApiClient = require('./cache');
+	CacheApiClient = require('./cache'),
+	nodeCache = require('memory-cache');
 
 var TwitterApiClient = (function() {
 
@@ -26,13 +27,18 @@ var TwitterApiClient = (function() {
 	};
 
 	var parseTweets = function(tweets) {
-		var jsonTweets = [];
-
-		for (var i = 0; i < tweets.length; i++) {
-			jsonTweets.push(twitterParse.autoLink(tweets[i].text));
+		var _cacheTime =  86400000,
+			_dataCache = nodeCache.get('parsedTweetText');
+
+		if (!_dataCache) {
+			for (var i = 0; i < tweets.length; i++) {
+				tweets[i].text = twitterParse.autoLink(tweets[i].text);
+			}
+			nodeCache.put('parsedTweetText', tweets, _cacheTime);
+			return tweets;
+		} else {
+			return _dataCache;
 		}
-
-		return jsonTweets;
 	};
 
 	return {

diff --git a/src/app/static/css/style.css b/src/app/static/css/style.css
diff --git a/src/app/styles/_partials/_vars.scss b/src/app/styles/_partials/_vars.scss
@@ -4,6 +4,7 @@ $accentlight: #64B5F6;
 $accentgray: #B0BEC5;
 $yellow: #FFD600;
 $pink: #EC407A;
+$green: #4CAF50;
 $text: #616161; // 263238
 $whitesection: #f8f8f8;
 $blacksection: #232323;

diff --git a/src/app/styles/style.scss b/src/app/styles/style.scss
@@ -20,12 +20,6 @@
 	height: 1.8em;
 }
 
-.icon {
-	padding: .5em;
-	fill: rgba(255, 255, 255, .7);
-	transition: fill .2s ease-in-out;
-}
-
 .social {
 	margin-top: 1em;
 
@@ -42,6 +36,12 @@ header.site-header {
 	background-size: cover;*/
 	color: $white;
 	padding: 9.5em;
+
+	.icon {
+		padding: .5em;
+		fill: rgba(255, 255, 255, .7);
+		transition: fill .2s ease-in-out;
+	}
 }
 
 .heart {
@@ -82,7 +82,7 @@ header.site-header {
 
 	.icon-fork {
 		fill: $text;
-		margin-left: .25em;
+		margin-left: .35em;
 	}
 
 	a.btn {
@@ -136,6 +136,21 @@ header.site-header {
 	.tweet {
 		margin:2em 0;
 	}
+
+	.icon {
+		width: .9em;
+		height: .9em;
+		padding: 0 .25em 0 0;
+	}
+
+	.icon-heart {
+		fill: $pink;
+		margin-left: .35em;
+	}
+
+	.icon-retweet {
+		fill: $green;
+	}
 }
 
 .contact {

diff --git a/src/app/templates/_includes/_icons.jade b/src/app/templates/_includes/_icons.jade
@@ -15,3 +15,13 @@ svg(style='position: absolute; width: 0; height: 0;', width='0', height='0', ver
     symbol#icon-fork(viewbox='0 0 585 1024')
       title fork
       path.fork(d='M164.571 841.143q0-22.857-16-38.857t-38.857-16-38.857 16-16 38.857 16 38.857 38.857 16 38.857-16 16-38.857zM164.571 182.857q0-22.857-16-38.857t-38.857-16-38.857 16-16 38.857 16 38.857 38.857 16 38.857-16 16-38.857zM530.286 256q0-22.857-16-38.857t-38.857-16-38.857 16-16 38.857 16 38.857 38.857 16 38.857-16 16-38.857zM585.143 256q0 29.714-14.857 55.143t-40 39.714q-1.143 164-129.143 236.571-38.857 21.714-116 46.286-73.143 22.857-96.857 40.571t-23.714 57.143v14.857q25.143 14.286 40 39.714t14.857 55.143q0 45.714-32 77.714t-77.714 32-77.714-32-32-77.714q0-29.714 14.857-55.143t40-39.714v-468.571q-25.143-14.286-40-39.714t-14.857-55.143q0-45.714 32-77.714t77.714-32 77.714 32 32 77.714q0 29.714-14.857 55.143t-40 39.714v284q30.857-14.857 88-32.571 31.429-9.714 50-16.857t40.286-17.714 33.714-22.571 23.143-29.143 16-39.714 4.857-52.286q-25.143-14.286-40-39.714t-14.857-55.143q0-45.714 32-77.714t77.714-32 77.714 32 32 77.714z')
+    symbol#icon-retweet(viewbox='0 0 1097 1024')
+      title retweet
+      path.retweet(d='M731.429 859.429q0 7.429-5.429 12.857t-12.857 5.429h-548.571q-4.571 0-7.714-1.143t-5.143-4-3.143-4.571-1.714-6.571-0.571-6.571v-342.857h-109.714q-14.857 0-25.714-10.857t-10.857-25.714q0-13.714 8.571-23.429l182.857-219.429q10.857-12.571 28-12.571t28 12.571l182.857 219.429q8.571 9.714 8.571 23.429 0 14.857-10.857 25.714t-25.714 10.857h-109.714v219.429h329.143q9.143 0 14.286 6.286l91.429 109.714q4 6.286 4 12zM1097.143 621.714q0 13.714-8.571 23.429l-182.857 219.429q-11.429 13.143-28 13.143t-28-13.143l-182.857-219.429q-8.571-9.714-8.571-23.429 0-14.857 10.857-25.714t25.714-10.857h109.714v-219.429h-329.143q-9.143 0-14.286-6.857l-91.429-109.714q-4-5.143-4-11.429 0-7.429 5.429-12.857t12.857-5.429h548.571q4.571 0 7.714 1.143t5.143 4 3.143 4.571 1.714 6.571 0.571 6.571v342.857h109.714q14.857 0 25.714 10.857t10.857 25.714z')
+    symbol#icon-heart(viewbox='0 0 768 1024')
+      title heart
+      path.heart(d='M384 864c399-314 384-425 384-512s-72-192-192-192-192 128-192 128-72-128-192-128-192 105-192 192-15 198 384 512z')
+
+
+
+
diff --git a/src/app/templates/_includes/_sections/_twitter.jade b/src/app/templates/_includes/_sections/_twitter.jade
@@ -5,4 +5,11 @@ section.twitter
                 h3 I'm #[a(href='https://twitter.com/crloscuesta') @crloscuesta] on twitter.
             -each tweet in twitterData
                 article.tweet.col-xs-12.col-sm-6
-                    h5 !{tweet}
+                    h5 !{tweet.text}
+                    div
+                      svg.icon.icon-retweet
+                        use(xlink:href="#icon-retweet")
+                      span #{tweet.retweet_count}
+                      svg.icon.icon-heart
+                        use(xlink:href="#icon-heart")
+                      span #{tweet.favorite_count}