Refactor content parse

functions/parse-content.js

@@ -20,7 +20,7 @@ const getCollectionType = filePath => {
   return `${objectKey}`
 }
 
-const getDocumentKey = filePath => {
+const getDocumentName = filePath => {
   const pathParsed = path.parse(filePath)
   return `${pathParsed.name}`
 }
@@ -28,10 +28,9 @@ const getDocumentKey = filePath => {
 const getFileContents = filePath => {
   return readFile(filePath, 'utf8')
     .then(data => {
+      let documentData = JSON.parse(data)
+      documentData.name = getDocumentName(filePath)
       let obj = {}
-      let documentData = {
-        [getDocumentKey(filePath)]: JSON.parse(data)
-      }
       _set(obj, getCollectionType(filePath), [documentData])
       console.log(`✨  Processed ${filePath}`)
       return obj

package.json

@@ -32,7 +32,7 @@
   "scripts": {
     "start": "npm run parse-content && react-scripts start",
     "build": "npm run parse-content && react-scripts build && react-snapshot && npm run sw",
-    "parse-content": "node ./utils/parse-content.js",
+    "parse-content": "node ./functions/parse-content.js",
     "sw": "sw-precache --config='sw-precache-config.js'",
     "test": "standard | snazzy && react-scripts test --env=jsdom",
     "eject": "react-scripts eject"

src/App.js

@@ -11,17 +11,25 @@ import Nav from './components/Nav'
 import GithubCorner from './components/GithubCorner'
 import ServiceWorkerNotifications from './components/ServiceWorkerNotifications'
 import globalStyles from './globalStyles'
-
 import data from './data.json'
 
 export const siteTitle = 'HyperStatic'
 
 class App extends Component {
+  state = {
+    data
+  }
+
   componentWillMount () {
     globalStyles()
     import('./netlifyIdentity')
   }
 
+  getDocument = (collection, name) =>
+    this.state.data[collection] && this.state.data[collection].filter(page => page.name === name)[0]
+
+  getDocuments = (collection) => this.state.data[collection]
+
   render () {
     return (
       <Router>
@@ -33,13 +41,13 @@ class App extends Component {
           <Nav />
           <Switch>
             <Route path='/' exact
-              render={(props) => <Home page={data.pages.home} {...props} />}
+              render={(props) => <Home page={this.getDocument('pages', 'home')} {...props} />}
             />
             <Route path='/about/' exact
-              render={(props) => <About page={data.pages.about} {...props} />}
+              render={(props) => <About page={this.getDocument('pages', 'about')} {...props} />}
             />
             <Route path='/contact/' exact
-              render={(props) => <Contact page={data.pages.contact} {...props} />}
+              render={(props) => <Contact page={this.getDocument('pages', 'contact')} {...props} />}
             />
             <Route component={NoMatch} />
           </Switch>

utils/parse-markdown.js

@@ -1,61 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-const _set = require('lodash/set')
-const globCb = require('glob')
-const util = require('util')
-const unified = require('unified')
-const parse = require('remark-parse')
-const frontmatter = require('remark-frontmatter')
-const vfile = require('to-vfile')
-const report = require('vfile-reporter')
-const html = require('remark-html')
-const yaml = require('yamljs')
-
-const glob = util.promisify(globCb)
-
-const options = {
-  markdownDir: './content/',
-  outputFile: './src/data.json'
-}
-
-const addYamlData = () => (data, file) => {
-  const yamlData = data.children.find(item => item.type === 'yaml')
-  file.data = yaml.parse(yamlData.value)
-}
-
-const parseFile = path => new Promise((resolve, reject) => {
-  unified()
-    .use(parse)
-    .use(frontmatter, ['yaml'])
-    .use(addYamlData)
-    .use(html)
-    .process(vfile.readSync(path), (err, file) => {
-      if (err) reject(report(err || file))
-      resolve(file)
-    })
-})
-
-const parseFiles = async files => {
-  const results = await Promise.all(files.map(parseFile))
-  return results
-}
-
-const makeJSON = async () => {
-  const paths = await glob(`${options.markdownDir}/**/**.md`)
-  const results = await parseFiles(paths)
-  let data = {}
-  results.map(item => {
-    const pathParsed = path.parse(item.history[0])
-    const objectKey = pathParsed.dir.replace(options.markdownDir, '').replace(/\//g, '.')
-    const nest = `${objectKey}.${pathParsed.name}`
-    _set(data, nest, {...item})
-  })
-  return JSON.stringify(data, null, 2)
-}
-
-const markdownToJson = async () => {
-  const json = await makeJSON()
-  fs.writeFileSync(options.outputFile, json)
-}
-
-markdownToJson()