Add routing for SSR

components/App.js

@@ -1,126 +1,18 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
-function App({ items, releses, pageName }) {
+import Header from './Header';
+import Router from './Router';
+
+function App(props) {
   return (
     <div className="js--body">
       <div className="page">
         <div className="page__header">
-          <div className="branding">
-            <a className="branding__logo" href="/"><img src="/assets/logo.svg"/></a>
-            <div className="branding__content">
-              <div className="nav">
-                <div className="nav__item"><a className="icon-link" href="/howto.html"><span className="icon icon--question icon-link__icon"></span>How to Use Technology Radar?</a></div>
-                <div className="nav__item"><a className="icon-link" href="/overview.html"><span className="icon icon--overview icon-link__icon"></span>Technologies Overview</a></div>
-                <div className="nav__item"><a className="icon-link" href="#todo"><span className="icon icon--search icon-link__icon"></span>Search</a></div>
-              </div>
-            </div>
-          </div>
+          <Header />
         </div>
         <div className="page__content">
-          <div className="headline-group">
-            <div className="hero-headline">Technology Radar<span className="hero-headline__alt"> Mar 2017</span></div>
-          </div>
-          <div className="quadrant-grid">
-            <div className="quadrant-grid__quadrant">
-              <div className="quadrant-section">
-                <div className="quadrant-section__header">
-                  <div className="split">
-                    <div className="split__left">
-                      <h4 className="headline">Platforms and AOE Services</h4>
-                    </div>
-                    <div className="split__right"><a className="icon-link" href="/platforms-and-aoe-services.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
-                  </div>
-                </div>
-                <div className="quadrant-section__rings">
-                  <div className="quadrant-section__ring">
-                    <div className="ring-list">
-                      <div className="ring-list__header"><span className="badge badge--assess">assess</span></div>
-                      <span className="ring-list__item"><a className="link" href="/platforms-and-aoe-services/bar.html">Bar</a></span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="quadrant-grid__quadrant">
-              <div className="quadrant-section">
-                <div className="quadrant-section__header">
-                  <div className="split">
-                    <div className="split__left">
-                      <h4 className="headline">Methods &amp; Patterns</h4>
-                    </div>
-                    <div className="split__right"><a className="icon-link" href="/methods-and-patterns.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
-                  </div>
-                </div>
-                <div className="quadrant-section__rings">
-                  <div className="quadrant-section__ring">
-                    <div className="ring-list">
-                      <div className="ring-list__header"><span className="badge badge--trial">trial</span></div>
-                      <span className="ring-list__item"><a className="link" href="/methods-and-patterns/foo.html">Foo</a></span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="quadrant-grid__quadrant">
-              <div className="quadrant-section">
-                <div className="quadrant-section__header">
-                  <div className="split">
-                    <div className="split__left">
-                      <h4 className="headline">Tools</h4>
-                    </div>
-                    <div className="split__right"><a className="icon-link" href="/tools.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
-                  </div>
-                </div>
-                <div className="quadrant-section__rings">
-                  <div className="quadrant-section__ring">
-                    <div className="ring-list">
-                      <div className="ring-list__header"><span className="badge badge--hold">hold</span></div>
-                      <span className="ring-list__item"><a className="link" href="/tools/grunt.html">Grunt 2</a></span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="quadrant-grid__quadrant">
-              <div className="quadrant-section">
-                <div className="quadrant-section__header">
-                  <div className="split">
-                    <div className="split__left">
-                      <h4 className="headline">Languages &amp; Frameworks</h4>
-                    </div>
-                    <div className="split__right"><a className="icon-link" href="/languages-and-frameworks.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
-                  </div>
-                </div>
-                <div className="quadrant-section__rings">
-                  <div className="quadrant-section__ring">
-                    <div className="ring-list">
-                      <div className="ring-list__header"><span className="badge badge--trial">trial</span></div>
-                      <span className="ring-list__item"><a className="link" href="/languages-and-frameworks/react.html">React</a></span>
-                    </div>
-                  </div>
-                  <div className="quadrant-section__ring">
-                    <div className="ring-list">
-                      <div className="ring-list__header"><span className="badge badge--assess">assess</span></div>
-                      <span className="ring-list__item"><a className="link" href="/languages-and-frameworks/react123.html">This is a long title</a></span><span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue123.html">Vue 123</a></span>
-                    </div>
-                  </div>
-                  <div className="quadrant-section__ring">
-                    <div className="ring-list">
-                      <div className="ring-list__header"><span className="badge badge--adopt">adopt</span></div>
-                      <span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue.html">Vue</a></span>
-                    </div>
-                  </div>
-                  <div className="quadrant-section__ring">
-                    <div className="ring-list">
-                      <div className="ring-list__header"><span className="badge badge--hold">hold</span></div>
-                      <span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue1230.html">Something else</a></span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+          <Router {...props} />
         </div>
         <div className="page__footer">
           <div className="branding">

components/Header.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function() {
+  return (
+    <div className="branding">
+      <a className="branding__logo" href="/"><img src="/assets/logo.svg"/></a>
+      <div className="branding__content">
+        <div className="nav">
+          <div className="nav__item"><a className="icon-link" href="/help.html"><span className="icon icon--question icon-link__icon"></span>How to Use Technology Radar?</a></div>
+          <div className="nav__item"><a className="icon-link" href="/overview.html"><span className="icon icon--overview icon-link__icon"></span>Technologies Overview</a></div>
+          <div className="nav__item"><a className="icon-link" href="#todo"><span className="icon icon--search icon-link__icon"></span>Search</a></div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/HeroHeadline.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function({ children, alt }) {
+  return (
+    <div className="hero-headline">
+      {children}
+      <span className="hero-headline__alt"> {alt}</span>
+    </div>
+  );
+}

components/PageHelp.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import HeroHeadline from './HeroHeadline';
+
+export default function PageHelp() {
+  return (
+    <div>
+      <HeroHeadline>How to use AOE Technology Radar</HeroHeadline>
+    </div>
+  );
+}

components/PageIndex.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import HeroHeadline from './HeroHeadline';
+
+export default function PageIndex() {
+  return (
+    <div>
+      <div className="headline-group">
+        <HeroHeadline alt="Mar 2017">AOE Technology Radar</HeroHeadline>
+      </div>
+      <div className="quadrant-grid">
+        <div className="quadrant-grid__quadrant">
+          <div className="quadrant-section">
+            <div className="quadrant-section__header">
+              <div className="split">
+                <div className="split__left">
+                  <h4 className="headline">Platforms and AOE Services</h4>
+                </div>
+                <div className="split__right"><a className="icon-link" href="/platforms-and-aoe-services.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
+              </div>
+            </div>
+            <div className="quadrant-section__rings">
+              <div className="quadrant-section__ring">
+                <div className="ring-list">
+                  <div className="ring-list__header"><span className="badge badge--assess">assess</span></div>
+                  <span className="ring-list__item"><a className="link" href="/platforms-and-aoe-services/bar.html">Bar</a></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="quadrant-grid__quadrant">
+          <div className="quadrant-section">
+            <div className="quadrant-section__header">
+              <div className="split">
+                <div className="split__left">
+                  <h4 className="headline">Methods &amp; Patterns</h4>
+                </div>
+                <div className="split__right"><a className="icon-link" href="/methods-and-patterns.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
+              </div>
+            </div>
+            <div className="quadrant-section__rings">
+              <div className="quadrant-section__ring">
+                <div className="ring-list">
+                  <div className="ring-list__header"><span className="badge badge--trial">trial</span></div>
+                  <span className="ring-list__item"><a className="link" href="/methods-and-patterns/foo.html">Foo</a></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="quadrant-grid__quadrant">
+          <div className="quadrant-section">
+            <div className="quadrant-section__header">
+              <div className="split">
+                <div className="split__left">
+                  <h4 className="headline">Tools</h4>
+                </div>
+                <div className="split__right"><a className="icon-link" href="/tools.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
+              </div>
+            </div>
+            <div className="quadrant-section__rings">
+              <div className="quadrant-section__ring">
+                <div className="ring-list">
+                  <div className="ring-list__header"><span className="badge badge--hold">hold</span></div>
+                  <span className="ring-list__item"><a className="link" href="/tools/grunt.html">Grunt 2</a></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="quadrant-grid__quadrant">
+          <div className="quadrant-section">
+            <div className="quadrant-section__header">
+              <div className="split">
+                <div className="split__left">
+                  <h4 className="headline">Languages &amp; Frameworks</h4>
+                </div>
+                <div className="split__right"><a className="icon-link" href="/languages-and-frameworks.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
+              </div>
+            </div>
+            <div className="quadrant-section__rings">
+              <div className="quadrant-section__ring">
+                <div className="ring-list">
+                  <div className="ring-list__header"><span className="badge badge--trial">trial</span></div>
+                  <span className="ring-list__item"><a className="link" href="/languages-and-frameworks/react.html">React</a></span>
+                </div>
+              </div>
+              <div className="quadrant-section__ring">
+                <div className="ring-list">
+                  <div className="ring-list__header"><span className="badge badge--assess">assess</span></div>
+                  <span className="ring-list__item"><a className="link" href="/languages-and-frameworks/react123.html">This is a long title</a></span><span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue123.html">Vue 123</a></span>
+                </div>
+              </div>
+              <div className="quadrant-section__ring">
+                <div className="ring-list">
+                  <div className="ring-list__header"><span className="badge badge--adopt">adopt</span></div>
+                  <span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue.html">Vue</a></span>
+                </div>
+              </div>
+              <div className="quadrant-section__ring">
+                <div className="ring-list">
+                  <div className="ring-list__header"><span className="badge badge--hold">hold</span></div>
+                  <span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue1230.html">Something else</a></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/PageOverview.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import HeroHeadline from './HeroHeadline';
+
+export default function PageOverview() {
+  return (
+    <div>
+      Overview
+    </div>
+  );
+}

components/Router.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PageIndex from './PageIndex';
+import PageOverview from './PageOverview';
+import PageHelp from './PageHelp';
+
+export default function Router({ pageName, ...props}) {
+  let Comp;
+  switch (pageName) {
+    case 'index':
+      Comp = PageIndex;
+      break;
+    case 'overview':
+      Comp = PageOverview;
+      break;
+    case 'help':
+      Comp = PageHelp;
+      break;
+    default:
+      Comp = 'div';
+      break;
+  }
+
+  return <Comp {...props} />;
+}

tasks/build.js

@@ -11,7 +11,7 @@ import {
 (async () => {
   try {
     const radar = await createRadar();
-    renderApp(radar, 'index');
+    renderApp(radar);
     // outputRadar(radar);
 
     // const radarByQuadrants = groupByQuadrants(radar);

tasks/static.js

@@ -11,7 +11,21 @@ const appReducer = (state = {}, action) => {
   return state;
 }
 
-export const renderApp = (radar, pageName) => {
+const getPageNames = (radar) => {
+  return [
+    'index',
+    'overview',
+    'help',
+    'foo/bar',
+  ]
+}
+
+export const renderApp = (radar) => {
+    const pageNames = getPageNames(radar);
+    pageNames.map(pageName => renderPage(radar, pageName))
+}
+
+export const renderPage = (radar, pageName) => {
   // Create a new Redux store instance
   const store = createStore(appReducer, {
     ...radar,