blog rendering, but not posts

Author: Taylor Griffith

2018-02-15-test-post.md

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^0.16.2",
+    "gray-matter": "^3.1.1",
     "klaw": "^2.1.1",
     "marked": "^0.3.12",
     "react": "^16.0.0",

package-lock.json

@@ -1,4 +1,3 @@
-
 import React from 'react'
 import { withRouteData, Link } from 'react-static'
 //
@@ -10,10 +9,10 @@ export default withRouteData(({ posts }) => (
     All Posts:
     <ul>
       {posts.map(post => (
-        <li key={post.id}>
-          <Link to={`/blog/post/${post.id}/`}>{post.title}</Link>
+        <li key={post.data.slug}>
+          <Link to={`/blog/post/${post.data.slug}`}>{post.data.title}</Link>
         </li>
       ))}
     </ul>
   </div>
-))
+))

package.json

@@ -6,7 +6,7 @@ export default withRouteData(({ post }) => (
   <div>
     <Link to="/blog/">{'<'} Back</Link>
     <br />
-    <h3>{post.title}</h3>
-    <p>{post.body}</p>
+    {/* <h3>{post.data.title}</h3> */}
+    {/* <p>{post.content}</p> */}
   </div>
 ))

src/containers/Blog.js

@@ -3,48 +3,37 @@ const fs = require('fs');
 const klaw = require('klaw')
 const marked = require('marked');
 const path = require('path')
+const matter = require('gray-matter');
 
-// Filter function to retrieve .md files //
+export default {
+  getSiteData: () => ({
+    title: 'React Static with Netlify CMS',
+  }),
+  getRoutes: async () => {
 
-let filterFn = function(item) {
-  return path.extname(item) === ".md";
-}
+      // Walk ("klaw") through posts directory and push file paths into posts array //
 
-// Walk (klaw) through posts directory and push file paths into items array //
-const items = []
-klaw('./src/posts')
-  .on('readable', function () {
-    let item
-    while ((item = this.read())) {
-      if (filterFn(item.path)) {
-        items.push(item.path)        
+      // Filter function to retrieve .md files //
+      let filterFn = function (item) {
+        return path.extname(item) === ".md";
       }
-    }
-  })
-  .on('error', (err, item) => {
-    console.log(err.message)
-    console.log(item.path) // the file the error occurred on
-  })
-  .on('end', () => {
-    // Loop through items array and read each post //
-    for (let post of items ) {
-      try {  
-        var data = fs.readFileSync(post, 'utf8');
-        console.log(data);    
-      } catch(e) {
-        console.log('Error:', e.stack);
-      }
-    }
-  }) 
 
+      const posts = []
 
+      await klaw('./src/posts')
+        .on('data', item => {
+          if (filterFn(item.path)) {
+            // If markdown file, read contents //
+            let data = fs.readFileSync(item.path, 'utf8')
+            // Convert to frontmatter object and markdown content //
+            let dataObj = matter(data)
+            dataObj.content = marked(dataObj.content)
+            // Create slug for URL //
+            dataObj.data.slug = dataObj.data.title.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, '')
+            posts.push(dataObj)
+          }
+        })
 
-export default {
-  getSiteData: () => ({
-    title: 'React Static with Netlify CMS',
-  }),
-  getRoutes: async () => {
-    const { data: posts } = await axios.get('https://jsonplaceholder.typicode.com/posts')
     return [
       {
         path: '/',
@@ -61,7 +50,7 @@ export default {
           posts,
         }),
         children: posts.map(post => ({
-          path: `/post/${post.id}`,
+          path: `/post/${post.data.slug}`,
           component: 'src/containers/Post',
           getData: () => ({
             post,