Merge pull request #5 from carloscuesta/redesign

Material Design - Redesign

package.json

@@ -39,6 +39,7 @@
     "node-fetch": "^1.3.3",
     "node-sass-middleware": "^0.9.7",
     "oauth": "^0.9.14",
+    "serve-static": "^1.10.2",
     "striptags": "^2.1.1",
     "twitter-text": "^1.13.3"
   },

src/app/carloscuesta.js

@@ -3,25 +3,21 @@
 var express = require('express'),
     carloscuesta = express(),
     sassMiddleware = require('node-sass-middleware'),
+    serveStatic = require('serve-static'),
     routes = require('./routes'),
     compression = require('compression');
 
 carloscuesta.use(compression());
-carloscuesta.use(function (req, res, next) {
-    res.setHeader('Cache-Control', 'public, max-age=86400');
-    next();
-});
-carloscuesta.use(express.static(__dirname+'/static/img', {maxAge: 86400000}));
-carloscuesta.use(express.static(__dirname+'/static/js', {maxAge: 86400000}));
-carloscuesta.use(express.static(__dirname + '/static/js', {maxAge: 86400000}));
+carloscuesta.use(serveStatic(__dirname + '/static/img', {maxAge: '1d',}));
+carloscuesta.use(serveStatic(__dirname + '/static/js', {maxAge: '1d',}));
 carloscuesta.set('views', __dirname + '/templates');
 carloscuesta.set('view engine', 'jade');
 carloscuesta.use(sassMiddleware({
     src: __dirname+'/styles',
     dest: __dirname+'/static/css',
     outputStyle: 'compressed'
 }));
-carloscuesta.use(express.static(__dirname+'/static/css', {maxAge: 86400000}));
+carloscuesta.use(serveStatic(__dirname + '/static/css', {maxAge: '1d',}));
 
 carloscuesta.get('/', routes.index);
 carloscuesta.get('/'+process.env.PARAM_CLEAN, routes.cacheClean);

src/app/data/staticdata.js

@@ -3,8 +3,8 @@
 var staticData = {
 	me: {
 		name: 'Carlos Cuesta',
-		bio: 'Front End Developer',
-		aboutme: 'Front End developer based in Barcelona, Spain. Working at <a href="http://mediatic.cat" target="_blank" onmousedown="ga(\'send\', \'event\', \'Link\', \'Company\');",>Mediàtic</a>. Coding addicted that enjoys building things with code, I like design, tecnhology and I <span class="heart">♥</span> OpenSource.',
+		job: 'Front End Developer',
+		aboutme: 'Front End developer based in Barcelona, Spain. Working at <a href="http://mediatic.cat" target="_blank" onmousedown="ga(\'send\', \'event\', \'Link\', \'Company\');",>Mediàtic</a>. Coding addicted that enjoys building things with code, I like design, tecnhology and I <span class="heart">&#9829;</span> OpenSource.',
 		mail: '[email protected]',
 		avatar: 'carloscuesta.jpeg'
 	},
@@ -18,7 +18,12 @@ var staticData = {
 
 	site: {
 		title: 'Carlos Cuesta | Front End Developer',
-		description: 'Carlos Cuesta, Front End developer based in Barcelona, Spain. Coding addicted that enjoys building things with code, I like design, tecnhology and OpenSource.'
+		description: 'Carlos Cuesta, Front End developer based in Barcelona, Spain. Coding addicted that enjoys building things with code, I like design, tecnhology and OpenSource.',
+		pages: {
+			home: 'https://carloscuesta.me',
+			blog: 'https://carloscuesta.me/blog',
+			contact: 'mailto:[email protected]'
+		}
 	}
 };
 

src/app/routes.js

@@ -11,7 +11,8 @@ var GithubApiClient = require('./scripts/githubapiclient'),
 	staticData = require('./data/staticdata');
 
 exports.index = function(req, res) {
-	res.header('Cache-Control', 'public, max-age=86400');
+
+	res.setHeader('Cache-Control', 'public, max-age=86400');
 
 	var ghUserCCStars = GithubApiClient.getSearch({
 		q: 'user:carloscuesta',
@@ -23,7 +24,7 @@ exports.index = function(req, res) {
 
 	var userTimeline = TwitterApiClient.getUserTimeline({
 		screen_name: 'crloscuesta',
-		count: 4,
+		count: 1,
 		exclude_replies: false,
 		include_rts: true
 	});
@@ -47,7 +48,7 @@ exports.index = function(req, res) {
 			me: staticData.me,
 			site: staticData.site,
 			social: staticData.social,
-			cache: true
+			cache: false
 		});
 	});
 };

src/app/scripts/ghostapiclient.js

@@ -22,7 +22,7 @@ var GhostApiClient = (function() {
 			_dataCache = nodeCache.get('parsedPosts');
 		if (!_dataCache) {
 			for (var i = 0; i < postData.posts.length; i++) {
-				postData.posts[i].published_at = moment(postData.posts[i].published_at).startOf('day').fromNow();
+				postData.posts[i].published_at = moment(postData.posts[i].updated_at).startOf('hour').fromNow();
 				postData.posts[i].html = striptags(postData.posts[i].html).substring(0,120)+' ...';
 			}
 			nodeCache.put('parsedPosts', postData, _cacheTime);

src/app/scripts/twitterapiclient.js

@@ -4,6 +4,7 @@ require('dotenv').load();
 
 var ApiClient = require('./apiclient'),
 	twitterParse = require('twitter-text'),
+	moment = require('moment'),
 	CacheApiClient = require('./cache'),
 	nodeCache = require('memory-cache');
 
@@ -28,14 +29,21 @@ var TwitterApiClient = (function() {
 
 	var parseTweets = function(tweets) {
 		var _cacheTime =  86400000,
-			_dataCache = nodeCache.get('parsedTweetText');
+			_dataCache = nodeCache.get('parsedTweets');
 
 		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;
+			var twits = tweets.map(function(tweet){
+				var media = tweet.entities.media;
+				var parsedText = twitterParse.autoLink(tweet.text);
+
+				return Object.assign({
+					image: (media && media.length > 0) ? media[0].media_url_https : '',
+					text_parsed: parsedText
+				}, tweet);
+			});
+
+			nodeCache.put('parsedTweets', twits, _cacheTime);
+			return twits;
 		} else {
 			return _dataCache;
 		}

src/app/styles/_partials/_defaults.scss

@@ -1,34 +1,39 @@
 html, body {
 	margin: 0;
     padding: 0;
-    text-rendering: optimizeLegibility;
-    font-family: 'opensans','helvetica';
+    font-family: 'Montserrat','Helvetica';
     font-size: 16px;
     line-height: 1.5;
     font-weight: 300;
+    background-color: $white;
     color: $text;
     overflow-x: hidden;
+    font-weight: 300;
 }
 
 a {
 	text-decoration: none;
 	color: $accent;
-	transition: color .1s ease-in-out;
 }
 
-a:hover {
-	color: $accentlight;
+p a {
+	color: $accent;
+	transition: color .2s ease-out;
+}
+
+p a:hover {
+	color: $web;
 }
 
 h1, h2, h3,  h4, h5, h6 {
-    line-height: 1.15;
+    line-height: 1.5;
     margin-top: 0;
-    margin-bottom: .5rem
+    margin-bottom: .5rem;
 }
 
 h1 {
     font-size: 4em;
-    font-weight: 400;
+    font-weight: 700;
 }
 
 h2 {
@@ -60,3 +65,12 @@ p {
 section {
 	padding: 3em 1.5em;
 }
+
+ul, li {
+	margin: 0;
+	padding: 0;
+}
+
+li {
+	list-style: none;
+}