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'] }) ] })