Skip to content

chore(rebuild): populate page titles #2040

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
May 7, 2018
Merged

chore(rebuild): populate page titles #2040

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5160ea7
chore(site): Add page title to server render
montogeek Mar 27, 2018
7b754f9
chore(site): Simplify paths generation
montogeek Mar 27, 2018
75c3572
chore(site) Move page title generation to server.jsx
montogeek Apr 14, 2018
18fd324
fix(site) Add exception to homepage title
montogeek Apr 17, 2018
4ae8a04
chore(rebuild): add todo and update title generation to account for `…
skipjack Apr 19, 2018
6cba951
refactor: abstract and simplify title retrieval
skipjack May 7, 2018
ceb9411
chore(rebuild): add client-side title changing
skipjack May 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 4 additions & 1 deletion src/components/Site/Site.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -40,6 +41,8 @@ class Site extends React.Component {

return (
<div className="site">
<DocumentTitle title={ GetPageTitle(Content, location.pathname) } />

<NotificationBar />

<Navigation
Expand Down
13 changes: 10 additions & 3 deletions src/server.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand All @@ -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 => (
Expand Down
24 changes: 24 additions & 0 deletions src/utilities/content-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
2 changes: 1 addition & 1 deletion webpack.prod.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ module.exports = env => [
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
chunks: [ 'index' ]
chunks: ['index']
})
]
})
Expand Down