diff --git a/package.json b/package.json
index be2ecf9d3efa..1a78360f57ed 100644
--- 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
index 290e5bf6509f..79cbcd891bcd 100644
--- 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 (
+
+
{
let { assets } = locals.webpackStats.compilation;
+ let title = GetPageTitle(Content, locals.path)
return ReactDOMServer.renderToString(
-
+
-
+
- {/* TODO */} | webpack
+ {title}
{ Object.keys(assets).filter(asset => /\.css$/.test(asset)).map(path => (
diff --git a/src/utilities/content-utils.js b/src/utilities/content-utils.js
index 2bae423d4d22..343f18ec07cc 100644
--- 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
index 91261c5dfd12..4f6368908e3b 100644
--- 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']
})
]
})