first version of working feed

src/js/components/feed.jsx

@@ -8,6 +8,7 @@ var transformers = require('../util');
 
 function throwError(err) {
   setTimeout(() => {
+    console.log(err.stack);
     throw err;
   });
 }
@@ -29,7 +30,7 @@ module.exports = React.createClass({
       }
 
       this.setState({
-        messages: messages
+        messages: _(messages).sortBy('timestamp').reverse().value()
       });
     }).catch(throwError);
   },
@@ -59,18 +60,3 @@ module.exports = React.createClass({
     )
   }
 });
-        // <div className="message">
-        //   <img className="message__image" src={message.image} />
-        //   <div className="message__content">
-        //     <div className="message__body">{message.body}</div>
-        //     <div className="message__icon">
-        //       <i className={`fa fa-${message.type}`}></i>
-        //     </div>
-        //     <div className="message__details">
-        //       <span className="message__timestamp">
-        //         {require('timeago')(message.timestamp)}
-        //       </span>
-        //       <span className="message__meta">{message.meta}</span>
-        //     </div>
-        //   </div>
-        // </div>

src/js/util.js

@@ -1,19 +1,35 @@
 'use strict';
 
+var _           = require('lodash');
 var githubEvent = require('parse-github-event');
 var twitterText = require('twitter-text');
 
 module.exports = {
   github(item) {
-    var message = githubEvent.parse(item);
-    console.log(item);
-    console.log(message.data);
+
+    _.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
+
+    var template = _.template(githubEvent.parse(item).text);
+
+    var repository = `https://github.com/${item.repo.name}`;
+
+    var branch;
+    if(item.payload.ref) {
+      branch = item.payload.ref.replace('refs/heads/', '');
+    }
+
+    var message = template({
+      repository: `<a target="_blank" href="${repository}">${item.repo.name}</a>`,
+      branch: branch,
+      number: item.payload.number,
+      ref_type: item.payload.ref
+    });
+
     return {
       image: item.actor.avatar_url,
-      body: `${item.actor.login} ${message.text}`,
-      timestamp: item.created_at,
+      body: `${item.actor.login} ${message}`,
+      timestamp: new Date(item.created_at),
       url: message.url,
-      highlights: message.data,
       type: 'github'
     };
   },
@@ -21,7 +37,7 @@ module.exports = {
     return {
       image: item.user.profile_image_url,
       body: twitterText.autoLink(item.text),
-      timestamp: item.created_at,
+      timestamp: new Date(item.created_at),
       type: 'twitter'
     };
   }

src/styles/style.styl

@@ -86,6 +86,7 @@ section:first-child
 
 .column
   float left
+  overflow auto
   padding 0 1em
   box-sizing border-box
   @media screen and (max-width: 700px)
@@ -95,6 +96,9 @@ section:first-child
   width 50%
   @media screen and (max-width: 700px)
     width 100%
+    margin-top 1em
+    &:first-child
+      margin-top 0
 
 .invite-form
   position relative
@@ -142,7 +146,7 @@ section:first-child
 
 .members
   margin-top 1em
-
+  margin-bottom 1em
 .member
   width 57px
   vertical-align middle
@@ -158,6 +162,7 @@ footer
     margin 0 0.30em
     font-size 1.5em
     color #fff
+
 .feed
   width feedWidth
   height 100%
@@ -171,11 +176,16 @@ footer
   &::-webkit-scrollbar
       display none
 
+@media screen and (max-width: 980px)
+  .feed
+    width 0
+  .content
+    padding-right 0
+
 .message
-  padding 1em
+  padding 0.5em 1em
   padding-right 2em
-  padding-bottom 0.5em
-  padding-top 0.6em
+  padding-left 4.5em
 
   border-top 1px solid #E5E5E5
   position relative
@@ -186,10 +196,10 @@ footer
   font-size 16px
 
 .message__image
-  margin-top 4px
-  margin-right 10px
-  float left
-  width 50px
+  width 2.5em
+  position absolute
+  left 1em
+  top 0.8em
 
 .message__icon
   margin 6px
@@ -206,9 +216,7 @@ footer
 
 .message__details
   font-size 0.8em
-  margin-top 5px
-
-
+  margin-top 0.3em
 .message__meta
   margin-left 0.5em