From 169bfc74ec3c6860c17aab86d63707ea3402f8cd Mon Sep 17 00:00:00 2001 From: Tom Raithel Date: Tue, 21 Mar 2017 21:30:03 +0100 Subject: [PATCH] Switch page title for different pages --- README.md | 3 ++- js/client.js | 6 +++++- js/components/PageHelp.js | 4 +++- js/components/PageIndex.js | 4 +++- js/components/PageItem.js | 2 ++ js/components/PageOverview.js | 2 ++ js/components/PageQuadrant.js | 4 +++- js/components/SetTitle.js | 16 ++++++++++++++++ js/server.js | 10 ++++++---- 9 files changed, 42 insertions(+), 9 deletions(-) create mode 100644 js/components/SetTitle.js diff --git a/README.md b/README.md index 5151cc1..d349942 100644 --- a/README.md +++ b/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 diff --git a/js/client.js b/js/client.js index b78d5e8..e508a01 100644 --- a/js/client.js +++ b/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( - + , document.getElementById('root') ) diff --git a/js/components/PageHelp.js b/js/components/PageHelp.js index 74a1178..3d2670f 100644 --- a/js/components/PageHelp.js +++ b/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 ( + How to use AOE Technology Radar ); diff --git a/js/components/PageIndex.js b/js/components/PageIndex.js index c02aacc..78139dd 100644 --- a/js/components/PageIndex.js +++ b/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 ( +
AOE Technology Radar (beta)
diff --git a/js/components/PageItem.js b/js/components/PageItem.js index 423e47d..cd8e2c0 100644 --- a/js/components/PageItem.js +++ b/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 (
+
diff --git a/js/components/PageOverview.js b/js/components/PageOverview.js index 115b9ac..c917a41 100644 --- a/js/components/PageOverview.js +++ b/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 ( + Technologies Overview diff --git a/js/components/PageQuadrant.js b/js/components/PageQuadrant.js index b4091fb..5ebaa1c 100644 --- a/js/components/PageQuadrant.js +++ b/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 ( + {translate(pageName)} diff --git a/js/components/SetTitle.js b/js/components/SetTitle.js new file mode 100644 index 0000000..6d69e40 --- /dev/null +++ b/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; diff --git a/js/server.js b/js/server.js index 4b08726..bd6bc7e 100644 --- a/js/server.js +++ b/js/server.js @@ -14,10 +14,12 @@ export const renderPage = (radar, pageName) => { pageState: {}, }); + let pageTitle; + // Render the component to a string const html = renderToString( - + { pageTitle = title; }} /> ) @@ -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 ` - AOE Technology Radar + ${pageTitle} | AOE Technology Radar