Integrating content data

content/pages/contact.json

@@ -0,0 +1 @@
+{"title":"Contact","body":"# 🍉 HyperStatic\n\nA not-so-static site boilerplate:\n\n* **Create React App** for simplicity\n* **Styled Components** for component-based css\n* **React Router** for routing (v4)\n* **React Helmet** for document titles, descriptions, meta\n* **React Snapshot** for pre-rendering to static html so it works without Javascript ⭐️\n* [**Netlify CMS**](https://netlifycms.org)"}

package.json

@@ -39,7 +39,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-markdown.js",
+    "parse-content": "node ./utils/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

@@ -8,8 +8,6 @@ import About from './views/About'
 import Contact from './views/Contact'
 import NoMatch from './views/NoMatch'
 import Nav from './components/Nav'
-import NavLink from './components/NavLink'
-import Logo from './components/Logo'
 import GithubCorner from './components/GithubCorner'
 import ServiceWorkerNotifications from './components/ServiceWorkerNotifications'
 import globalStyles from './globalStyles'
@@ -18,25 +16,6 @@ import data from './data.json'
 
 export const siteTitle = 'HyperStatic'
 
-const routes = [
-  {
-    path: '/',
-    comp: Home,
-    exact: true,
-    page: data.pages.home
-  }, {
-    title: 'About',
-    path: '/about/',
-    comp: About,
-    exact: true
-  }, {
-    title: 'Contact',
-    path: '/contact/',
-    comp: Contact,
-    exact: true
-  }
-]
-
 class App extends Component {
   componentWillMount () {
     globalStyles()
@@ -47,27 +26,20 @@ class App extends Component {
       <Router>
         <div>
           <ScrollToTop />
-          <ServiceWorkerNotifications
-            readyMessage='This message is displayed when the SW is registered'
-          />
+          <ServiceWorkerNotifications />
           <GithubCorner url='https://github.com/Jinksi/hyperstatic' />
           <Helmet titleTemplate={`${siteTitle} | %s`} />
-          <Nav>
-            <Logo>
-              <span role='img' aria-label='Watermelon'>🍉</span>
-            </Logo>
-            {routes.map((route, i) => (
-              <NavLink key={i} {...route} />
-            ))}
-          </Nav>
+          <Nav />
           <Switch>
-            {routes.map((route, i) => (
-              <Route
-                {...route}
-                key={i}
-                render={() => <route.comp {...route} />}
-              />
-            ))}
+            <Route path='/' exact
+              render={(props) => <Home page={data.pages.home} {...props} />}
+            />
+            <Route path='/about/' exact
+              render={(props) => <About page={data.pages.about} {...props} />}
+            />
+            <Route path='/contact/' exact
+              render={(props) => <Contact page={data.pages.contact} {...props} />}
+            />
             <Route component={NoMatch} />
           </Switch>
         </div>

src/components/Nav.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import styled from 'styled-components'
 import { Container, Flex } from './common'
+import NavLink from './NavLink'
+import Logo from './Logo'
 
 const Nav = styled.div`
   background: white;
@@ -11,7 +13,14 @@ const Nav = styled.div`
 export default (props) => (
   <Nav>
     <Container>
-      <Flex alignCenter {...props} />
+      <Flex alignCenter>
+        <Logo>
+          <span role='img' aria-label='Watermelon'>🍉</span>
+        </Logo>
+        <NavLink to='/' exact>Home</NavLink>
+        <NavLink to='/about/' exact>About</NavLink>
+        <NavLink to='/contact/' exact>Contact</NavLink>
+      </Flex>
     </Container>
   </Nav>
 )

src/components/NavLink.js

@@ -20,10 +20,10 @@ const NavLink = styled.span`
   }
 `
 
-export default ({ path, exact, ...props }) => (
-  <Route path={path} exact={exact} children={({match}) => (
+export default ({ to, exact, match, children }) => (
+  <Route path={to} exact={exact} children={({match}) => (
     <NavLink active={match}>
-      <Link to={path}>{props.title}</Link>
+      <Link to={to}>{children}</Link>
     </NavLink>
   )} />
 )

src/views/About.js

@@ -4,9 +4,12 @@ import Page from '../components/Page'
 import PageHeader from '../components/PageHeader'
 import { Container, Section } from '../components/common'
 
-export default ({ title }) => (
+export default ({ page }) => (
   <Page>
-    <PageHeader title={title} subtitle='<About />' />
+    <Helmet>
+      <title>{page.title}</title>
+    </Helmet>
+    <PageHeader title={page.title} subtitle={page.subtitle} />
     <Section thin>
       <Container>
         <h1>Hello World!</h1>
@@ -19,8 +22,5 @@ export default ({ title }) => (
         <p>A sem vel nec sodales mi vivamus senectus sed potenti a parturient nascetur tincidunt nisi pulvinar rhoncus a. Risus imperdiet taciti suspendisse facilisi a per metus cubilia varius a nostra adipiscing amet ultrices quisque ac mi a. Dictumst a ultrices mi a dignissim ad fermentum eget a nam et a blandit scelerisque. Taciti lorem tempor quam vestibulum dis habitasse vestibulum diam vel est ut proin dis auctor. Suscipit scelerisque orci magna interdum vel bibendum duis netus a consectetur dui magnis ac aliquet sem posuere tincidunt vestibulum.</p>
       </Container>
     </Section>
-    <Helmet>
-      <title>{title}</title>
-    </Helmet>
   </Page>
 )

src/views/Contact.js

@@ -18,9 +18,9 @@ const content = `
   Find out more in the [Netlify Docs](https://www.netlify.com/docs/form-handling/).
 `
 
-export default ({ title }) => (
+export default ({ page }) => (
   <Page>
-    <PageHeader title={title} subtitle='<Contact />' />
+    <PageHeader title={page.title} subtitle='<Contact />' />
     <Section thin>
       <Container>
         <Marked source={content} />
@@ -33,7 +33,7 @@ export default ({ title }) => (
       </Container>
     </Section>
     <Helmet>
-      <title>{title}</title>
+      <title>{page.title}</title>
     </Helmet>
   </Page>
 )

src/views/Home.js

@@ -1,17 +1,19 @@
 import React from 'react'
 import Helmet from 'react-helmet'
-
+import Marked from 'react-markdown'
 import Page from '../components/Page'
 import { Container, Section } from '../components/common'
 import PageHeader from '../components/PageHeader'
 
 export default ({ page }) => {
-  const { title, subtitle } = page.data
+  const { title, subtitle } = page
   return (
     <Page>
       <PageHeader title={title} subtitle={subtitle} />
       <Section thin>
-        <Container dangerouslySetInnerHTML={{__html: page.contents}} />
+        <Container>
+          <Marked source={page.body} />
+        </Container>
       </Section>
       <Helmet>
         <title>{title}</title>

utils/parse-content.js

@@ -23,7 +23,7 @@ const getFileContents = filePath =>
   readFile(filePath, 'utf8')
     .then(data => {
       let obj = {}
-      _set(obj, getNestedKey(filePath), data)
+      _set(obj, getNestedKey(filePath), JSON.parse(data))
       return obj
     })