half-assed attempt to futz around with react-router

public/index.html

@@ -22,9 +22,9 @@
     <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css" />
     <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet" type="text/css" />
 
-    <link href="css/normalize.css" rel="stylesheet" />
+    <link href="%PUBLIC_URL%/css/normalize.css" rel="stylesheet" />
-    <link href="css/skeleton.css" rel="stylesheet" />
+    <link href="%PUBLIC_URL%/css/skeleton.css" rel="stylesheet" />
-    <link href="css/font-awesome.css" rel="stylesheet" />
+    <link href="%PUBLIC_URL%/css/font-awesome.css" rel="stylesheet" />
 
     <title>Nick Pegg</title>
   </head>

src/App.js

@@ -1,60 +1,102 @@
 import React, { Component } from 'react';
+import {
+  BrowserRouter as Router,
+  Link,
+  Route,
+  Switch
+} from 'react-router-dom';
+
 import hljs from 'highlight.js';
 import 'highlight.js/styles/github-gist.css';
 
 import { Container, Row, Column } from './skeleton';
 
-import { Article } from './Article';
+import { Articles, RoutedArticle } from './Article';
 import { Footer } from './Footer';
 import { Header } from './Header';
-import { NavList, TagNav, HistoryNav } from './Nav';
+import { NavList, TagNav, HistoryNav, HistoryNavStart } from './Nav';
 
 
 class App extends Component {
   render() {
     return (
-      <div className="App">
+      <Router>
-        <Header />
+        <div className="App">
+          <Header />
 
-        <Container>
+          <Container>
-          <Row>
+            <Row>
-            <Column width="two" className="nav">
+              <Column width="two" className="nav">
-              <NavList />
+                <NavList />
-              <TagNav />
+                <TagNav />
-            </Column>
+              </Column>
-            <Column width="eight">
+              <Column width="eight">
-              { this.articles() }
+                <Switch>
-            </Column>
+                  <Route exact path="/" component={Articles} />
-          </Row>
+                  { /* Page routes */ }
+                  <Route path="/about" component={About} />
 
-          <HistoryNav />
+                  { /* Article routes */ }
-        </Container>
+                  <Route path="/page/:page" component={Articles} />
+                  <Route path="/:year/:month/:title.html" component={RoutedArticle} />
 
-        <Footer />
+                  { /* 404 fallback */ }
-      </div>
+                  <Route component={FourOhFour} />
+                </Switch>
+              </Column>
+            </Row>
+
+            { /* Display HistoryNav if this is a series of articles */ }
+            <Route exact path="/" component={HistoryNavStart} />
+            <Route exact path="/page/:page" component={HistoryNav} />
+          </Container>
+
+          <Footer />
+
+        </div>
+      </Router>
     );
   }
 
-  articles() {
-    // TODO: This is the thing that'll fetch the articles from the JSON blob
-    // based on the URL that's hit. This will return one or more Articles
-    return [
-      <Article
-        title="This is where a blog post would go"
-        date="1970-01-01"
-      />,
-      <Article
-        title="This is another blog post!"
-        date="1970-01-01"
-        is_page
-      />
-    ];
-  }
-
   componentDidMount() {
     // Auto-highlight all <pre><code> blocks
     hljs.initHighlightingOnLoad();
   }
 }
 
+// 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>
+    )
+  }
+}
+
+class FourOhFour extends Component {
+  render () {
+    return (
+      <article>
+        <header>
+          <h1>404 Oh No!</h1>
+        </header>
+        <section>
+          <p>
+            You're lost, bud. Why not try going back <Link to="/">Home</Link>?
+          </p>
+        </section>
+      </article>
+    )
+  }
+}
+
 export default App;

src/Article.js

@@ -63,4 +63,29 @@ class Article extends Component {
   }
 }
 
-export { Article };
+
+const RoutedArticle = ({match}) => (
+  <Article title={match.params.title} />
+)
+
+
+const Articles = ({match}) => (
+  // TODO: This is the thing that'll fetch the articles from the JSON blob
+  // based on the URL that's hit. This will return one or more Articles
+  <div>
+    <Article
+      title="This is where a blog post would go"
+      date="1970-01-01"
+    />
+    <Article
+      title="This is another blog post!"
+      date="1970-01-01"
+      is_page
+    />
+    <p>
+      This is page number: {match.params.page}
+    </p>
+  </div>
+)
+
+export { Article, Articles, RoutedArticle };

src/Header.js

@@ -1,13 +1,14 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 
 class Header extends Component {
   render() {
     return (
       <div className="page-header">
         <div className="container">
-          <a href="/">
+          <Link to="/">
             <h1>nickpegg.com</h1>
-          </a>
+          </Link>
         </div>
       </div>
     );

src/Nav.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 
 import Icon from 'react-fontawesome';
 
@@ -18,14 +19,29 @@ class ListLink extends Component {
   }
 }
 
+class RouterListLink extends Component {
+  render () {
+    let icon = null;
+    if (this.props.icon) {
+      icon = <Icon name={ this.props.icon } />
+    }
+
+    return (
+      <li> <Link to={ this.props.href }>{ icon } { this.props.name }</Link> </li>
+    );
+  }
+}
+
 class NavList extends Component {
   render() {
+    // TODO: populate these dynamically based on root page names
+    // but keep Home first and RSS at the end
     return (
       <Row>
         <ul>
-          <ListLink name="Home" href="/" />
+          <RouterListLink name="Home" href="/" />
-          <ListLink name="About" href="/about" />
+          <RouterListLink name="About" href="/about" />
-          <ListLink name="Projects" href="/projects" />
+          <RouterListLink name="Projects" href="/projects" />
           <ListLink name="RSS" href="/rss.xml" icon="rss-square" />
         </ul>
       </Row>
@@ -57,12 +73,18 @@ class TagNav extends Component {
 
 class HistoryNav extends Component {
   render() {
+    let left = "";
+    if (!this.props.newest) {
+      left = (
+          <a href="">
+            <Icon name="arrow-left" />
+            <span> newer posts</span>
+          </a>
+      )
+    }
     return (
       <Row>
-        <a href="">
+        { left }
-          <Icon name="arrow-left" />
-          <span> newer posts</span>
-        </a>
         <a className="u-pull-right" href="">
           <span>older posts </span>
           <Icon name="arrow-right" />
@@ -72,4 +94,8 @@ class HistoryNav extends Component {
   }
 }
 
-export { ListLink, NavList, TagNav, HistoryNav };
+const HistoryNavStart = ({match}) => (
+  <HistoryNav newest />
+)
+
+export { ListLink, NavList, TagNav, HistoryNav, HistoryNavStart };