chore(site) Move page title generation to server.jsx

montogeek · skipjack · commit 75c357208ce1 · 2018-05-06T19:36:00.000-04:00
diff --git a/src/server.jsx b/src/server.jsx
@@ -11,40 +11,55 @@ 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'
+];
+
+const Content = require('./_content.json');
+
+const paths = Content.children.reduce((paths, page) => {
+  if (page.type === 'directory') {
+    page.children.forEach(child => (paths[child.url] = child.title));
+  } else {
+    paths[page.url] = page.title;
+  }
+
+  return paths;
+}, {});
 
 // Export method for `SSGPlugin`
 export default locals => {
   let { assets } = locals.webpackStats.compilation;
-  let title = locals.paths[locals.path];
+  let title = paths[locals.path];
 
   return ReactDOMServer.renderToString(
     <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>{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}`} />)}
+          <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,17 +8,6 @@ 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') {
-    page.children.forEach(child => (paths[child.url] = child.title));
-  } else {
-    paths[page.url] = page.title;
-  }
-
-  return paths;
-}, {});
 
 // ...
 const prod = {
@@ -39,8 +28,7 @@ module.exports = env => [
     },
     plugins: [
       new SSGPlugin({
-        paths: Object.keys(paths),
-        locals: { paths },
+        crawl: true,
         globals: {
           window: {}
         }
