From a578271fdcdf704ecdc05d3795c22be0bb2863aa Mon Sep 17 00:00:00 2001 From: Jinksi Date: Fri, 13 Oct 2017 22:37:04 +1000 Subject: [PATCH] Integrating content data --- content/pages/contact.json | 1 + package.json | 2 +- src/App.js | 50 +++++++++----------------------------- src/components/Nav.js | 11 ++++++++- src/components/NavLink.js | 6 ++--- src/views/About.js | 10 ++++---- src/views/Contact.js | 6 ++--- src/views/Home.js | 8 +++--- utils/parse-content.js | 2 +- 9 files changed, 40 insertions(+), 56 deletions(-) create mode 100644 content/pages/contact.json diff --git a/content/pages/contact.json b/content/pages/contact.json new file mode 100644 index 0000000..469b3c2 --- /dev/null +++ b/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)"} diff --git a/package.json b/package.json index a879710..5be0319 100644 --- a/package.json +++ b/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" diff --git a/src/App.js b/src/App.js index 96393b7..607872f 100644 --- a/src/App.js +++ b/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 {
- + - +
diff --git a/src/components/Nav.js b/src/components/Nav.js index a69b786..df2eebb 100644 --- a/src/components/Nav.js +++ b/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) => ( ) diff --git a/src/components/NavLink.js b/src/components/NavLink.js index 093a5b9..0f34342 100644 --- a/src/components/NavLink.js +++ b/src/components/NavLink.js @@ -20,10 +20,10 @@ const NavLink = styled.span` } ` -export default ({ path, exact, ...props }) => ( - ( +export default ({ to, exact, match, children }) => ( + ( - {props.title} + {children} )} /> ) diff --git a/src/views/About.js b/src/views/About.js index 0fb7f6d..13ee661 100644 --- a/src/views/About.js +++ b/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.title} + +

Hello World!

@@ -19,8 +22,5 @@ export default ({ title }) => (

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.
- - {title} - ) diff --git a/src/views/Contact.js b/src/views/Contact.js index 8263d0d..f38e18c 100644 --- a/src/views/Contact.js +++ b/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 }) => ( - +
@@ -33,7 +33,7 @@ export default ({ title }) => (
- {title} + {page.title} ) diff --git a/src/views/Home.js b/src/views/Home.js index 365d1f9..b2901ac 100644 --- a/src/views/Home.js +++ b/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 (
- + + +
{title} diff --git a/utils/parse-content.js b/utils/parse-content.js index 689c4bf..eba261a 100644 --- a/utils/parse-content.js +++ b/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 })