Add page object with top-level routes

src/App.js

@@ -16,6 +16,7 @@ import { Header } from './Header';
 import { NavList, TagNav } from './Nav';
 import { NotFound } from './NotFound';
 import { Post, Posts } from './Post';
+import { Page } from './Page';
 
 
 class App extends Component {
@@ -40,13 +41,14 @@ class App extends Component {
                 <Column width="eight">
                   <Switch>
                     <Route exact path="/" component={Posts} />
-                    { /* Page routes */ }
-                    <Route path="/about" component={About} />
 
                     { /* Post routes */ }
                     <Route path="/page/:page" component={Posts} />
                     <Route path="/:year/:month/:slug" component={Post} />
 
+                    { /* Page routes */ }
+                    <Route path="/:slug" component={Page} />
+
                     { /* 404 fallback */ }
                     <Route component={NotFound} />
                   </Switch>
@@ -85,22 +87,5 @@ class ScrollToTop extends Component {
 }
 ScrollToTop = withRouter(ScrollToTop);
 
-// Dummy About page just for playing around with ReactRouter
-class About extends Component {
-  render () {
-    return (
-      <article>
-        <header>
-          <h1>About me</h1>
-        </header>
-        <section>
-          <p>
-            Wowzers, this is an about page!
-          </p>
-        </section>
-      </article>
-    )
-  }
-}
 
 export default App;

src/Article.js

@@ -48,7 +48,6 @@ class Article extends Component {
   }
 
   meta() {
-    // TODO: Fill this in with real metadata.
     // Also should this be hidden for pages? That will require some CSS tweaks
     let time_text = "Posted"
     if (this.props.is_page) {
@@ -65,7 +64,7 @@ class Article extends Component {
 
   tags() {
     let tags = this.props.article.tags;
-    if (tags.length === 0) {
+    if (!tags || tags.length === 0) {
       return;
     } else {
       return (

src/Page.js

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import Markdown from 'react-markdown';
+import slugify from 'slugify';
+
+import { NotFound } from './NotFound';
+
+
+class Page extends Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.params = props.match.params;
+
+    this.state = {
+      page: null,
+      notFound: false,
+    }
+  }
+
+  fetchPage() {
+    fetch('/site.json')
+      .then(resp => resp.json())
+      .then(blob => {
+        for (let page of blob.pages) {
+          let slug = page.slug;
+          if (!slug) {
+            slug = slugify(page.title).toLowerCase();
+          }
+
+          if (slug === this.params.slug) {
+            this.setState({
+              page: page,
+              notFound: false,
+            })
+            return
+          }
+        }
+
+        this.setState({
+          page: null,
+          notFound: true,
+        });
+      });
+  }
+
+  componentDidMount() {
+    this.fetchPage();
+  }
+
+  componentWillReceiveProps(props) {
+    this.params = props.match.params;
+    this.fetchPage();
+  }
+
+  render() {
+    if (this.state.notFound) {
+      return <NotFound />
+    }
+
+    if (this.state.page) {
+      return (
+        <article>
+          <header>
+            <h1>{ this.state.page.title }</h1>
+          </header>
+          <section>
+            <Markdown source={ this.state.page.body } />
+          </section>
+        </article>
+      )
+    } else {
+      return <p></p>
+    }
+  }
+}
+
+export { Page };