feat: configurable radar name

common/config.js

@@ -1,3 +1,6 @@
+export const radarName = 'AOE Technology Radar';
+export const radarNameShort = 'Technology Radar';
+
 export const quadrants = [
   'languages-and-frameworks',
   'methods-and-patterns',

js/client.js

@@ -7,7 +7,7 @@ import createHistory from 'history/createBrowserHistory';
 import App from './components/App';
 import appReducer from './reducer';
 import actions, { NAVIGATE } from './actions';
-import { isMobileViewport } from '../common/config';
+import { isMobileViewport, radarName } from '../common/config';
 import { track } from './analytics';
 
 // Remove .html and map / to index
@@ -63,7 +63,7 @@ const store = createStore(
 );
 
 const handleSetTitle = title => {
-  document.title = `${title} | AOE Technology Radar`;
+  document.title = `${title} | ${radarName}`;
   track();
 };
 

js/components/Header.js

@@ -7,6 +7,7 @@ import Link from './Link';
 import LogoLink from './LogoLink';
 import Search from './Search';
 import actions from '../actions';
+import { radarNameShort } from '../../common/config';
 
 class Header extends React.Component {
   constructor(...args) {
@@ -66,7 +67,7 @@ class Header extends React.Component {
         <div className="nav">
           <div className="nav__item">
             <Link pageName="help-and-about-tech-radar" className="icon-link">
-              <span className="icon icon--question icon-link__icon"></span>How to Use Technology Radar?
+              <span className="icon icon--question icon-link__icon"></span>How to Use {radarNameShort}?
             </Link>
           </div>
           <div className="nav__item">

js/components/LogoLink.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import Link from './Link';
-import { assetUrl } from '../../common/config';
+import { assetUrl, radarNameShort } from '../../common/config';
 
 export default function LogoLink({ small=false }) {
   return (
@@ -10,7 +10,7 @@ export default function LogoLink({ small=false }) {
       <span className="logo-link__slide">
         <img className="logo-link__img" src={assetUrl('logo.svg')} width="150px" height="60px" />
         <span className="logo-link__text">
-          Technology Radar
+          {radarNameShort}
         </span>
       </span>
     </Link>

js/components/PageHelp.js

@@ -2,19 +2,20 @@ import React from 'react';
 import HeroHeadline from './HeroHeadline';
 import Fadeable from './Fadeable';
 import SetTitle from './SetTitle';
+import { radarName } from '../../common/config';
 
 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>
+      <SetTitle {...props} title={ "How to use the " + radarName } />
+      <HeroHeadline>How to use the {radarName}</HeroHeadline>
       <div className="fullpage-content">
         <h3>Introduction</h3>
         <p>Technology is moving fast and new technologies and innovations appear continuously.</p>
         <p>It's essential for a development and technology company such as AOE to constantly improve and keep track with the latest useful innovations.
         It is important to openly look for innovations and new technologies and to question established technologies and methods every now and then.</p>
         <p>But, it is also important to wisely choose which technologies to use in our daily work and in the different projects we are carrying out. As we all know: There is no silver bullet.</p>
-        <h3>What is the AOE Tech Radar</h3>
+        <h3>What is the {radarName}</h3>
         <p>The Tech Radar is an overview of different technologies - from languages, frameworks, tools and patterns to platforms - that we consider "new or mentionable".
           The radar therefore doesn't provide an overview of all established technologies - but it focuses on items that have recently gained in importance or changed.
         </p>

js/components/PageIndex.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { formatRelease } from '../date';
-
 import { featuredOnly } from '../../common/model';
 import HeroHeadline from './HeroHeadline';
 import QuadrantGrid from './QuadrantGrid';
 import Fadeable from './Fadeable';
 import SetTitle from './SetTitle';
+import { radarName, radarNameShort } from '../../common/config';
 
 export default function PageIndex({
   leaving,
@@ -18,10 +18,10 @@ export default function PageIndex({
   const numberOfReleases = props.releases.length;
   return (
     <Fadeable leaving={leaving} onLeave={onLeave}>
-      <SetTitle {...props} title="Technology Radar" />
+      <SetTitle {...props} title={ radarNameShort } />
       <div className="headline-group">
         <HeroHeadline alt={`Version #${numberOfReleases}`}>
-          AOE Technology Radar
+          {radarName}
         </HeroHeadline>
       </div>
       <QuadrantGrid items={featuredOnly(items)} />

js/server.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { renderToString } from 'react-dom/server';
 import { createStore } from 'redux';
 import { Provider } from 'react-redux';
-import {assetUrl} from '../common/config'
+import { assetUrl, radarName } from '../common/config'
 
 import App from './components/App';
 import appReducer from './reducer';
@@ -36,13 +36,13 @@ const renderFullPage = (html, pageTitle, preloadedState) => {
   <html>
     <head>
       <meta charset="utf-8">
-      <title>${pageTitle} | AOE Technology Radar</title>
+      <title>${pageTitle} | ${radarName}</title>
       <link rel="stylesheet" href="${assetUrl('css/styles.css')}"/>
       <link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?c2sn1i">
       <link rel="shortcut icon" href="${assetUrl('favicon.ico')}" type="image/x-icon">
       <meta name="format-detection" content="telephone=no">
       <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0">
-      <meta property="og:title" content="${pageTitle} | AOE Technology Radar" />
+      <meta property="og:title" content="${pageTitle} | ${radarName}" />
       <meta property="og:image" content="${assetUrl('logo.svg')}" />
     </head>
     <body>