Read and display resume

src/components/Resume.js

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import { Spinner, Header } from '.'
+import { Spinner, Navbar, Wrapper, Header } from '.'
 import '../stylesheets/globals.scss'
 import contentStyle from '../stylesheets/content.scss'
 import style from './Resume.scss'
 import MarkdownIt from 'markdown-it'
+import fm from 'front-matter'
 
 export default class About extends Component {
   static propTypes = {
@@ -14,7 +15,9 @@ export default class About extends Component {
 
   render () {
     const md = MarkdownIt()
-    const result = md.render(this.props.about)
+    const content = fm(this.props.resume)
+    const title = content.attributes.title
+    const body = md.render(content.body)
 
     if (this.props.isLoading) {
       return (
@@ -30,7 +33,7 @@ export default class About extends Component {
         <Wrapper>
           <div className={`${contentStyle.content} ${style.column}`}>
             <Header header={title} role="heading" aria-level="2" />
-            <div className={style.content} dangerouslySetInnerHTML={{ __html: result }} role="article">
+            <div className={style.content} dangerouslySetInnerHTML={{ __html: body }} role="article">
             </div>
           </div>
         </Wrapper>

src/components/index.js

@@ -11,3 +11,4 @@ export { default as Navbar } from './Navbar'
 export { default as App } from './App'
 export { default as SocialLinks } from './SocialLinks'
 export { default as Column } from './Column'
+export { default as Resume } from './Resume'

src/containers/ContentContainer.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Post, NotFoundPage } from '../components'
+import { Post, Resume } from '../components'
 
-export default class PostContainer extends Component {
+export default class ContentContainer extends Component {
   static propTypes = {
     staticContext: PropTypes.object.isRequired
   }
@@ -21,24 +21,27 @@ export default class PostContainer extends Component {
 
     this.state = {
       isLoading: !data,
-      error: false,
-      post: data[0],
+      type: data[0]['type'],
+      content: data[0]['data'],
       config: data[1]
     }    
   }
 
   render () {
-    if (this.state.error) {
+    if (this.state.type == 'resume') {
       return (
-        <NotFoundPage />
+        <Resume
+          isLoading={this.state.isLoading}
+          resume={this.state.content}
+          config={this.state.config} />
       )
-    }
-
+    } else {
       return (
         <Post
           isLoading={this.state.isLoading}
-        post={this.state.post}
+          post={this.state.content}
           config={this.state.config} />
       )
     }
   }
+}

src/containers/index.js

@@ -1,2 +1,2 @@
 export { default as MainContainer } from './MainContainer'
-export { default as PostContainer } from './PostContainer'
+export { default as ContentContainer } from './ContentContainer'

src/utils/api.js

@@ -5,16 +5,22 @@ import path from 'path'
 export function getData (reqPath = '') {
   if (reqPath === '') {
     return readJson(path.join(process.cwd(), 'data.json'))
+  } else if (reqPath === 'resume') {
+    const fileName = path.join(process.cwd(), 'content', reqPath + '.md')
+    return readFile(fileName, 'resume', 'utf8')
   } else {
     const fileName = path.join(process.cwd(), 'content', reqPath + '.md')
-    return readFile(fileName, 'utf8')
+    return readFile(fileName, 'post', 'utf8')
   }
 };
 
-function readFile (fileName, options) {
+function readFile (fileName, type, options) {
   return new Promise(function (resolve, reject) {
     fs.readFile(fileName, options, (err, data) => {
-      err ? reject(err) : resolve(data)
+      err ? reject(err) : resolve({
+        'type': type,
+        'data': data
+      })
     })
   })
 }

src/utils/routes.js

@@ -1,4 +1,4 @@
-import { MainContainer, PostContainer } from '../containers'
+import { MainContainer, ContentContainer } from '../containers'
 import { getData } from './api'
 
 const routes = [
@@ -12,7 +12,14 @@ const routes = [
   },
   {
     path: '/post/:postname',
-    component: PostContainer,
+    component: ContentContainer,
+    getData: (path = '') => getData(
+      path.split('/').pop()
+    )
+  },
+  {
+    path: '/resume',
+    component: ContentContainer,
     getData: (path = '') => getData(
       path.split('/').pop()
     )