Front matter

src/components/Blog.js

@@ -20,7 +20,10 @@ export default class Blog extends Component {
       )
     }
 
-    let posts = this.props.posts.map((post) =>
+    let posts = this.props.posts.sort((a, b) => {
+      return a.data - b.date
+    })
+    let postsHTML = posts.map((post) =>
       <tr className={styles.postListItem} key={post.title}>
         <td>
           <span className={styles.postDate}>{post.published}</span>
@@ -38,7 +41,7 @@ export default class Blog extends Component {
         <div className={contentStyle.content}>
           <table>
             <tbody className={styles.postsWrapper}>
-              {posts}
+              {postsHTML}
             </tbody>
           </table>
         </div>

src/components/Post.js

@@ -5,6 +5,7 @@ import '../static/stylesheets/globals.scss'
 import contentStyle from '../static/stylesheets/content.scss'
 import styles from './Post.scss'
 import MarkdownIt from 'markdown-it'
+import fm from 'front-matter'
 
 export default class Post extends Component {
   static propTypes = {
@@ -14,7 +15,10 @@ export default class Post extends Component {
 
   render () {
     const md = MarkdownIt()
-    const result = md.render(this.props.post)
+    const content = fm(this.props.post)
+    const title = content.attributes.title
+    const date = content.attributes.date
+    const body = md.render(content.body)
 
     if (this.props.isLoading) {
       return (
@@ -28,12 +32,12 @@ export default class Post extends Component {
       <div>
         <Navbar />
         <div className={contentStyle.contentWrapper}>
-          <Header header={this.props.post.title} />
+          <Header header={title} />
           <div className={contentStyle.content}>
             <div className={styles.postDate}>
-              <h3>{this.props.post.published}</h3>
+              <h3>{date}</h3>
             </div>
-            <div className={styles.postContent} dangerouslySetInnerHTML={{ __html: result }}>
+            <div className={styles.postContent} dangerouslySetInnerHTML={{ __html: body }}>
             </div>
           </div>
         </div>