Init

components/BlogPost/index.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import moment from 'moment'
+import { RouteHandler, Link } from 'react-router'
+import DocumentTitle from 'react-document-title'
+import { link } from 'gatsby-helpers'
+import access from 'safe-access'
+import ReadNext from '../ReadNext'
+import { config } from 'config'
+
+import './style.sss'
+
+import '../../static/css/highlight.css'
+
+class BlogPost extends React.Component {
+  render() {
+    const { route } = this.props
+    const post = route.page.data
+    const home = (
+      <div>
+        <Link
+          className='gohome'
+          to={link('/')}
+        >
+          All Articles
+        </Link>
+      </div>
+    )
+
+    return (
+        <div>
+          {home}
+          <div className='blog-single'>
+            <div className='text'>
+              <h1>{post.title}</h1>
+                <div dangerouslySetInnerHTML={{__html: post.body}}/>
+                <div className='date-published'>
+                  <em>Published {moment(post.datePublished).format('D MMM YYYY')}</em>
+                </div>
+            </div>
+            <div className='footer'>
+              <ReadNext post={post} {...this.props}/>
+              <hr></hr>
+              <p>
+                {config.siteDescr} <a href={config.twitter}><br></br> <strong>{config.authorName}</strong> on Twitter</a>
+              </p>
+            </div>
+          </div>
+        </div>
+    );
+  }
+}
+
+
+BlogPost.propTypes = {
+  post: React.PropTypes.object.isRequired,
+  pages: React.PropTypes.array,
+}
+
+export default BlogPost

components/BlogPost/style.sss

@@ -0,0 +1,108 @@
+.blog-post
+  margin-bottom: 30px
+
+.blog-post:last-child
+  margin-bottom: 10px
+
+.blog-post h2
+  margin-top: 10px
+  line-height: 30px
+  margin-bottom: 20px
+
+.blog-post h2 a:hover
+  border-bottom: 1px solid
+
+.blog-post p
+  font-size: 16px
+  line-height: 26px
+  margin-bottom: 26px
+
+.blog-post time
+  font-size: 14px
+  color: #222
+  font-weight: 600
+  text-transform: uppercase
+  letter-spacing: 0.04rem
+  font-family: "Roboto", Helvetica, Arial, sans-serif
+
+.blog-post .blog-category
+  font-size: 14px
+  color: #f7a046
+  font-weight: 600
+  text-transform: uppercase
+  letter-spacing: 0.04rem
+  font-family: "Roboto", Helvetica, Arial, sans-serif
+
+.blog-post .readmore
+  font-size: 16px
+  color: #5d93ff
+  font-weight: 600
+  font-family: 'Raleway', Helvetica, Arial, sans-serif
+
+.blog-post .readmore:hover
+  border-bottom: 1px solid
+
+.blog-single h1
+  text-align: center
+  margin-top: 30px
+
+.blog-single .text
+  line-height: 31px
+  line-height: 1.722222222222222rem
+  margin-bottom: 31px
+  margin-bottom: 1.722222222222222rem
+
+.blog-single h1,
+.blog-single .date-published,
+.blog-single .text div :not(figure)
+  max-width: 35rem
+  margin-left: auto
+  margin-right: auto
+
+.blog-single .text img
+  max-width: 100%
+  height: auto
+
+.blog-single .footer
+  max-width: 35rem
+  margin-left: auto
+  margin-right: auto
+  line-height: 31px
+  line-height: 1.722222222222222rem
+  margin-bottom: 31px
+  margin-bottom: 1.722222222222222rem
+
+.gohome
+  font-family: 'Raleway', Helvetica, Arial, sans-serif
+  font-size: 16px
+  text-align: center
+  color: #343e47
+  font-weight: 600
+  position: fixed
+  left: 20px
+  top: 20px
+  opacity: 0.5
+  padding: 8px 18px
+  border: 2px solid #343e47 !important
+  border-radius: 3px
+
+.gohome:hover
+  color: #201e28
+  opacity: 1
+
+@media (max-width: 900px)
+  .blog-single h1
+    margin-top: 15px
+  .blog-single .text,
+  .blog-single .footer
+    padding: 0 15px
+    line-height: 26px
+    line-height: 1.625rem
+    margin: 0px 0px 26px
+    margin: 0rem 0rem 1.625rem
+  .gohome
+    position: static
+    margin: 20px auto 0
+    text-align: center
+    width: 85px
+    display: block