Switch page title for different pages

README.md

@@ -47,6 +47,7 @@ If an item is overwritten in a new release, the attributes from the new item are
 -  [x] Implement search
 -  [ ] Finalize CSS
 -  [ ] Get contents for how-to-use page
--  [ ] Show item history on details
+-  [ ] Show item history on details (relevant with 2nd release)
 -  [ ] Better semantic and SEO
 -  [ ] Make mobile friendly
+-  [ ] Create more react components for already existing CSS comps

js/client.js

@@ -44,9 +44,13 @@ delete window.__TECHRADAR__;
 // Create Redux store with initial state
 const store = createStore(appReducer, preloadedState, applyMiddleware(historyManager))
 
+const handleSetTitle = (title) => {
+  document.title = `${title} | AOE Technology Radar`;
+};
+
 render(
   <Provider store={store}>
-    <App />
+    <App onSetTitle={handleSetTitle} />
   </Provider>,
   document.getElementById('root')
 )

js/components/PageHelp.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import HeroHeadline from './HeroHeadline';
 import Fadeable from './Fadeable';
+import SetTitle from './SetTitle';
 
-export default function PageHelp({ leaving, onLeave }) {
+export default function PageHelp({ leaving, onLeave, ...props }) {
   return (
     <Fadeable leaving={leaving} onLeave={onLeave}>
+      <SetTitle {...props} title="How to use AOE Technology Radar" />
       <HeroHeadline>How to use AOE Technology Radar</HeroHeadline>
     </Fadeable>
   );

js/components/PageIndex.js

@@ -2,10 +2,12 @@ import React from 'react';
 import HeroHeadline from './HeroHeadline';
 import QuadrantGrid from './QuadrantGrid';
 import Fadeable from './Fadeable';
+import SetTitle from './SetTitle';
 
-export default function PageIndex({ leaving, onLeave, items, navigate }) {
+export default function PageIndex({ leaving, onLeave, items, navigate, ...props }) {
   return (
     <Fadeable leaving={leaving} onLeave={onLeave}>
+      <SetTitle {...props} title="Technology Radar" />
       <div className="headline-group">
         <HeroHeadline alt="Mar 2017">AOE Technology Radar (beta)</HeroHeadline>
       </div>

js/components/PageItem.js

@@ -4,6 +4,7 @@ import Badge from './Badge';
 import ItemList from './ItemList';
 import Link from './Link';
 import Fadeable from './Fadeable';
+import SetTitle from './SetTitle';
 import { createAnimation, createAnimationRunner } from '../animation';
 
 import { translate } from '../../common/config';
@@ -150,6 +151,7 @@ class PageItem extends React.Component {
     const itemsInRing = this.getItemsInRing(this.props);
     return (
       <div>
+        <SetTitle {...this.props} title={item.title} />
         <div className="item-page">
           <div className="item-page__nav">
             <div className="item-page__nav__inner">

js/components/PageOverview.js

@@ -6,6 +6,7 @@ import Badge from './Badge';
 import Link from './Link';
 import Search from './Search';
 import Fadeable from './Fadeable';
+import SetTitle from './SetTitle';
 import { groupByFirstLetter } from '../../common/model';
 import { translate } from '../../common/config';
 
@@ -83,6 +84,7 @@ class PageOverview extends React.Component {
 
     return (
       <Fadeable leaving={this.props.leaving} onLeave={this.props.onLeave}>
+        <SetTitle {...this.props} title="Technologies Overview" />
         <HeadlineGroup>
           <HeroHeadline>Technologies Overview</HeroHeadline>
         </HeadlineGroup>

js/components/PageQuadrant.js

@@ -3,14 +3,16 @@ import HeroHeadline from './HeroHeadline';
 import HeadlineGroup from './HeadlineGroup';
 import QuadrantSection from './QuadrantSection';
 import Fadeable from './Fadeable';
+import SetTitle from './SetTitle';
 
 import { translate } from '../../common/config';
 import { groupByQuadrants } from '../../common/model';
 
-export default function PageQuadrant({ leaving, onLeave, pageName, items }) {
+export default function PageQuadrant({ leaving, onLeave, pageName, items, ...props }) {
   const groups = groupByQuadrants(items);
   return (
     <Fadeable leaving={leaving} onLeave={onLeave}>
+      <SetTitle {...props} title={translate(pageName)} />
       <HeadlineGroup>
         <HeroHeadline>{translate(pageName)}</HeroHeadline>
       </HeadlineGroup>

js/components/SetTitle.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+class SetTitle extends React.Component {
+  constructor(props) {
+    super(props);
+    if (typeof props.onSetTitle === 'function' && props.title) {
+      props.onSetTitle(props.title);
+    }
+  }
+
+  render() {
+    return null;
+  }
+}
+
+export default SetTitle;

js/server.js

@@ -14,10 +14,12 @@ export const renderPage = (radar, pageName) => {
     pageState: {},
   });
 
+  let pageTitle;
+
   // Render the component to a string
   const html = renderToString(
     <Provider store={store}>
-      <App />
+      <App onSetTitle={(title) => { pageTitle = title; }} />
     </Provider>
   )
 
@@ -25,14 +27,14 @@ export const renderPage = (radar, pageName) => {
   const preloadedState = store.getState()
 
   // Send the rendered page back to the client
-  return renderFullPage(html, preloadedState);
+  return renderFullPage(html, pageTitle, preloadedState);
 }
 
-const renderFullPage = (html, preloadedState) => {
+const renderFullPage = (html, pageTitle, preloadedState) => {
   return `
   <html>
     <head>
-      <title>AOE Technology Radar</title>
+      <title>${pageTitle} | AOE Technology Radar</title>
       <link rel="stylesheet" href="/styles.css"/>
     </head>
     <body>