chore(site): Add page title to server render

montogeek · skipjack · commit 0bab34dd2126 · 2018-04-19T02:20:35.000-04:00
- Created a simple hash object to save paths and page titles
- Use previous object for SSGPlugin since crawl wasn't working, it fails
to collect all links ignoring 'configuration' section entirely.
diff --git a/src/server.jsx b/src/server.jsx
@@ -11,10 +11,7 @@ import Favicon from './favicon.ico';
 
 // Define bundles (previously used `Object.values(locals.assets)`) but
 // can't retrieve from there anymore due to separate compilation.
-const bundles = [
-  '/vendor.bundle.js',
-  '/index.bundle.js'
-];
+const bundles = ['/vendor.bundle.js', '/index.bundle.js'];
 
 // Export method for `StaticSiteGeneratorPlugin`
 // CONSIDER: How high can we mount `Site` into the DOM hierarchy? If
@@ -23,34 +20,35 @@ const bundles = [
 // description, etc).
 export default locals => {
   let { assets } = locals.webpackStats.compilation;
+  let title = locals.paths[locals.path];
 
   return ReactDOMServer.renderToString(
-    <StaticRouter location={ locals.path } context={{}}>
+    <StaticRouter location={locals.path} context={{}}>
       <html>
         <head>
-          <meta charSet="UTF-8" />
+          <meta charset='utf-8' />
           <meta name="theme-color" content="#2B3A42" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <title>{/* TODO */} | webpack</title>
-          <meta name="description" content="webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset." />
-          <link rel="icon" type="image/x-icon" href={ Favicon } />
-          { Object.keys(assets).filter(asset => /\.css$/.test(asset)).map(path => (
-            <link key={ path } rel="stylesheet" href={ `/${path}` } />
-          ))}
+          <title>{title} | webpack</title>
+          <meta
+            name="description"
+            content="webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset."
+          />
+          <link rel="icon" type="image/x-icon" href={Favicon} />
+          {Object.keys(assets)
+            .filter(asset => /\.css$/.test(asset))
+            .map(path => <link key={path} rel="stylesheet" href={`/${path}`} />)}
         </head>
         <body>
           <div id="root">
             <Route
               path="/"
-              render={ props => (
-                <Site
-                  { ...props }
-                  import={ path => require(`./content/${path}`) } />
-              )} />
+              render={props => (
+                <Site {...props} import={path => require(`./content/${path}`)} />
+              )}
+            />
           </div>
-          { bundles.map(path => (
-            <script key={ path } src={ path } />
-          ))}
+          {bundles.map(path => <script key={path} src={path} />)}
         </body>
       </html>
     </StaticRouter>
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -8,6 +8,23 @@ const RedirectWebpackPlugin = require('redirect-webpack-plugin');
 
 // Load Common Configuration
 const common = require('./webpack.common.js');
+const Content = require('./src/_content.json');
+
+const paths = Content.children.reduce((paths, page) => {
+  if (page.type === 'directory') {
+    paths = Object.assign(
+      paths,
+      page.children.reduce((childPaths, child) => {
+        childPaths[child.url] = child.title;
+        return childPaths;
+      }, {})
+    );
+  } else {
+    paths[page.url] = page.title;
+  }
+
+  return paths;
+}, {});
 
 // ...
 const prod = {
@@ -17,7 +34,7 @@ const prod = {
       'process.env.NODE_ENV': JSON.stringify('production')
     })
   ]
-}
+};
 
 // Export both SSG and SPA configurations
 module.exports = env => [
@@ -28,7 +45,8 @@ module.exports = env => [
     },
     plugins: [
       new SSGPlugin({
-        crawl: true,
+        paths: Object.keys(paths),
+        locals: { paths },
         globals: {
           window: {}
         }
@@ -77,8 +95,8 @@ module.exports = env => [
     plugins: [
       new webpack.optimize.CommonsChunkPlugin({
         name: 'vendor',
-        chunks: [ 'index' ]
+        chunks: ['index']
       })
     ]
   })
-]
+];
