chore(rebuild): populate page titles (#2040)

montogeek · skipjack · commit c22bfbd02388 · 2018-05-06T23:09:10.000-04:00
Utilize new `content-utils` to populate the `title` for static rendering as
well as during client-side SPA rendering and routing.
diff --git a/package.json b/package.json
@@ -111,6 +111,7 @@
     "prop-types": "^15.5.10",
     "react": "^16.2.0",
     "react-banner": "^1.0.0-rc.0",
+    "react-document-title": "^2.0.3",
     "react-dom": "^16.2.0",
     "react-hot-loader": "^4.0.0-beta.12",
     "react-router": "^4.2.0",
diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx
@@ -2,9 +2,10 @@
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 import { hot as Hot } from 'react-hot-loader';
+import DocumentTitle from 'react-document-title';
 
 // Import Utilities
-import { ExtractPages, ExtractSections } from '../../utilities/content-utils';
+import { ExtractPages, ExtractSections, GetPageTitle } from '../../utilities/content-utils';
 
 // Import Components
 import NotificationBar from '../NotificationBar/NotificationBar';
@@ -40,6 +41,8 @@ class Site extends React.Component {
 
     return (
       <div className="site">
+        <DocumentTitle title={ GetPageTitle(Content, location.pathname) } />
+
         <NotificationBar />
 
         <Navigation
diff --git a/src/server.jsx b/src/server.jsx
@@ -3,12 +3,18 @@ import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { StaticRouter, Route } from 'react-router-dom';
 
+// Import Utilities
+import { GetPageTitle } from './utilities/content-utils';
+
 // Import Components
 import Site from './components/Site/Site';
 
 // Import Images
 import Favicon from './favicon.ico';
 
+// Import Content Tree
+import Content from './_content.json';
+
 // Define bundles (previously used `Object.values(locals.assets)`) but
 // can't retrieve from there anymore due to separate compilation.
 const bundles = [
@@ -19,15 +25,16 @@ const bundles = [
 // Export method for `SSGPlugin`
 export default locals => {
   let { assets } = locals.webpackStats.compilation;
+  let title = GetPageTitle(Content, 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>
+          <title>{title}</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 => (
diff --git a/src/utilities/content-utils.js b/src/utilities/content-utils.js
@@ -63,3 +63,27 @@ export const ExtractSections = tree => {
 export const ExtractPages = tree => {
   return FlattenContent(tree).filter(item => item.extension === '.md');
 };
+
+/**
+ * Retrieve the page title from the given `tree` based on the given `path`
+ *
+ * @param  {object} tree - Any node in the content tree
+ * @param  {string} path - The pathname (aka route) for which to find a title
+ * @return {string}      - The title specified by that page or a fallback
+ */
+export const GetPageTitle = (tree, path) => {
+  let page = FindInContent(tree, item => item.url === path);
+  let title;
+
+  if ( !page ) {
+    if ( !path.endsWith('/') ) path += '/';
+    title = path.replace(/.*\/(.+)\//g, '$1');
+    title = title.replace(/-/g, ' ');
+
+  } else if ( path === '/' ) {
+    title = page.title;
+
+  } else title =`${page.title} | webpack`;
+
+  return title;
+};
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -77,7 +77,7 @@ module.exports = env => [
     plugins: [
       new webpack.optimize.CommonsChunkPlugin({
         name: 'vendor',
-        chunks: [ 'index' ]
+        chunks: ['index']
       })
     ]
   })

Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,7 @@ module.exports = env => [`
`77`	`77`	`plugins: [`
`78`	`78`	`new webpack.optimize.CommonsChunkPlugin({`
`79`	`79`	`name: 'vendor',`
`80`		`- chunks: [ 'index' ]`
	`80`	`+ chunks: ['index']`
`81`	`81`	`})`
`82`	`82`	`]`
`83`	`83`	`})`