Better handling of title tag and related meta tags (mainmatter#662)

* rename Header @title to @Headline
* write title tags from page components' header
* rename pageTitle arg to documentTitle
* fix tests
* fix formatting
* restore blog index page title

config/routes-map.js

@@ -8,7 +8,6 @@ module.exports = function() {
   let blogPostRoutes = posts.reduce((acc, post) => {
     acc[`/blog/${post.queryPath}`] = {
       component: post.componentName,
-      title: `${post.meta.title} | Blog`,
       bundle: {
         asset: `/blog/${post.queryPath}.js`,
         module: `__blog-${post.queryPath}__`,
@@ -23,7 +22,6 @@ module.exports = function() {
   let blogAuthorsRoutes = authors.reduce((acc, author) => {
     acc[`/blog/author/${author.twitter}`] = {
       component: author.componentName,
-      title: `Posts by ${author.name} | Blog`,
       bundle: {
         asset: `/blog/author-${author.twitter}.js`,
         module: `__blog-author-${author.twitter}__`,
@@ -39,46 +37,41 @@ module.exports = function() {
     ...blogPostRoutes,
     ...blogAuthorsRoutes,
     '/': { component: 'PageHomepage' },
-    '/404': { component: 'Page404', title: 'Not found' },
-    '/blog': { component: 'PageBlog', title: 'Blog', bundle: { asset: '/blog.js', module: '__blog__' } },
+    '/404': { component: 'Page404' },
+    '/blog': { component: 'PageBlog', bundle: { asset: '/blog.js', module: '__blog__' } },
     '/calendar': {
       component: 'PageCalendar',
-      title: 'Calendar',
       bundle: { asset: '/calendar.js', module: '__calendar__' },
     },
-    '/cases/ddwrt': { component: 'PageCaseDdWrt', title: 'DD-WRT NXT | Work' },
-    '/cases/expedition': { component: 'PageCaseStudyExpedition', title: 'Expedition | Work' },
-    '/cases/timify': { component: 'PageCaseStudyTimify', title: 'Timify | Work' },
-    '/cases/trainline': { component: 'PageCaseStudyTrainline', title: 'Trainline | Work' },
-    '/contact': { component: 'PageContact', title: 'Contact' },
-    '/expertise/ember': { component: 'PageEmberExpertise', title: 'Europe’s leading Ember experts' },
-    '/expertise/elixir-phoenix': { component: 'PageElixirExpertise', title: 'Elixir & Phoenix' },
+    '/cases/ddwrt': { component: 'PageCaseDdWrt' },
+    '/cases/expedition': { component: 'PageCaseStudyExpedition' },
+    '/cases/timify': { component: 'PageCaseStudyTimify' },
+    '/cases/trainline': { component: 'PageCaseStudyTrainline' },
+    '/contact': { component: 'PageContact' },
+    '/expertise/ember': { component: 'PageEmberExpertise' },
+    '/expertise/elixir-phoenix': { component: 'PageElixirExpertise' },
     '/imprint': {
       component: 'PageLegalImprint',
-      title: 'Imprint',
       bundle: { asset: '/legal.js', module: '__legal__' },
     },
     '/playbook': {
       component: 'PagePlaybook',
-      title: 'Playbook',
       bundle: { asset: '/playbook.js', module: '__playbook__' },
     },
     '/privacy': {
       component: 'PageLegalPrivacy',
-      title: 'Privacy Policy',
       bundle: { asset: '/legal.js', module: '__legal__' },
     },
-    '/services': { component: 'PageServices', title: 'Services' },
+    '/services': { component: 'PageServices' },
     '/services/full-stack-engineering': {
       component: 'PageFullStackEngineering',
-      title: 'Full Stack Engineering | Services',
     },
-    '/services/team-augmentation': { component: 'PageTeamAugmentation', title: 'Team Augmentation | Services' },
-    '/services/tutoring': { component: 'PageTutoring', title: 'Tutoring | Services' },
-    '/talks': { component: 'PageTalks', title: 'Talks', bundle: { asset: '/talks.js', module: '__talks__' } },
-    '/why-simplabs': { component: 'PageWhySimplabs', title: 'Why simplabs' },
-    '/work': { component: 'PageWork', title: 'Work' },
-    '/webinars/modern-web': { component: 'PageLandingPwaWebinar', title: 'Webinar: Modern Web Applications' },
+    '/services/team-augmentation': { component: 'PageTeamAugmentation' },
+    '/services/tutoring': { component: 'PageTutoring' },
+    '/talks': { component: 'PageTalks', bundle: { asset: '/talks.js', module: '__talks__' } },
+    '/why-simplabs': { component: 'PageWhySimplabs' },
+    '/work': { component: 'PageWork' },
+    '/webinars/modern-web': { component: 'PageLandingPwaWebinar' },
   };
 
   return routes;

lib/generate-blog/lib/templates/author/template.hbs

@@ -1,5 +1,5 @@
 <div>
-  <Header @active="blog" @flex-content="true">
+  <Header @active="blog" @flex-content="true" @title="Posts by {{name}}" @documentTitle="Posts by {{name}} | Blog">
     <div class="blog-post.badge">
       <div class="blog-post.badge-image">
         <img class="fluid-image.image" src="/assets/images/authors/{{twitter}}.jpg" alt="photo of {{name}}" />

lib/generate-blog/lib/templates/post/template.hbs

@@ -64,7 +64,7 @@
     "@context": "http://schema.org"
   }
   </script>
-  <Header @active="blog" @flex-content="true">
+  <Header @active="blog" @flex-content="true" @title="{{title}}" @documentTitle="{{title}} | Blog">
     <div class="blog-post.badge">
       <div class="blog-post.badge-image">
         <img

lib/generate-blog/lib/templates/start-page/template.hbs

@@ -28,7 +28,7 @@
     "@context": "http://schema.org"
   }
   </script>
-  <Header @active="blog" @title="Blog" />
+  <Header @active="blog" @headline="Blog" @title="Blog" />
   <ShapeBlog>
     <article>
       <span class="typography.tag">

lib/generate-calendar/lib/templates/page/template.hbs

@@ -1,5 +1,5 @@
 <div>
-  <Header @title="Calendar">
+  <Header @headline="Calendar" @title="Calendar">
     <p class="typography.lead">
       Find out about upcoming events, conferences and meetups we will be attending or organizing.
     </p>

lib/generate-talks-archive/lib/templates/page/template.hbs

@@ -1,5 +1,5 @@
 <div>
-  <Header @title="Talks">
+  <Header @headline="Talks" @title="Talks">
     <p class="typography.lead">
       We strongly believe in the value of sharing our expertise and experience with others. Here are a collection of talks that members of our team have given at various conferences all over the world in the past years.
     </p>

src/index.ts

@@ -20,6 +20,15 @@ function register(registry, key: string, object: any) {
   }
 }
 
+function readRoutesMap() {
+  let script: HTMLElement | null = document.querySelector('[data-shoebox-routes]');
+  if (script) {
+    return JSON.parse(script.innerText);
+  } else {
+    return {};
+  }
+}
+
 app.registerInitializer({
   initialize(registry) {
     function registerBundle(module) {
@@ -37,6 +46,25 @@ app.registerInitializer({
       public registerBundle(module) {
         registerBundle(module);
       }
+
+    // tslint:disable-next-line:max-classes-per-file
+    class AppState {
+
+      public static create() {
+        return new AppState();
+      }
+
+      public isSSR: boolean;
+      public route: string;
+      public origin: string;
+      public routesMap: IRoutesMap;
+
+      constructor() {
+        this.isSSR = false;
+        this.route = window.location.pathname;
+        this.origin = window.location.origin;
+        this.routesMap = readRoutesMap();
+      }
     }
 
     document.querySelectorAll('[data-shoebox]').forEach((shoebox: HTMLElement) => {
@@ -65,6 +93,16 @@ app.registerInitializer({
       'headTags',
       `utils:/${app.appName}/head-tags/main`,
     );
+
+    registry.register(
+      `app-state:/${app.appName}/main/main`,
+      AppState
+    );
+    registry.registerInjection(
+      `component`,
+      'appState',
+      `app-state:/${app.appName}/main/main`
+    );
   }
 });
 

src/ui/components/HeadTag/component.ts

@@ -1,10 +1,19 @@
 import Component from '@glimmer/component';
 
 export default class HeadTag extends Component {
+  private appState: IAppState;
+
   constructor(options) {
     super(options);
 
-    this.setMetaTags();
+    if (this.appState.isSSR) {
+      this.setMetaTags();
+    } else {
+      // when changing routes, the willDestroy of a component previously in the DOM
+      // will be called *after* the constructor of one rendered *after* the route
+      // change, so we have to delay writing the tag…
+      window.setTimeout(() => this.setMetaTags());
+    }
   }
 
   public willDestroy() {

src/ui/components/Header/component.ts

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+
+export default class Header extends Component {
+  constructor(options) {
+    super(options);
+
+    let documentTitle = this.args.documentTitle === undefined ? this.args.title : this.args.documentTitle;
+    this.documentTitle = formatformatDocumentTitle(documentTitle);
+  }
+}
+
+function formatformatDocumentTitle(title) {
+  return `${title ? `${title} | ` : ''}simplabs`;
+}

src/ui/components/Header/template.hbs

@@ -1,4 +1,6 @@
 <header>
+  <HeadTag @name="title" @content={{this.documentTitle}} />
+  <HeadTag @name="meta" @keys={{hash property="og:title" name="twitter:title"}} @values={{hash content=@title}} />
   <input id="toggle" type="checkbox" hidden="true" />
   <div class="navbar" data-menu>
     <div class="wrapper">
@@ -48,14 +50,14 @@
     </div>
   </div>
   <div class="content" state:flex-content={{@flex-content}}>
-    {{#if @title}}
+    {{#if @headline}}
       <h1 class="typography.display">
         {{#if @label}}
           <small class="typography.small">
             {{@label}}<span class="typography.hidden">:</span>
           </small>
         {{/if}}
-        {{@title}}
+        {{@headline}}
       </h1>
     {{/if}}
     {{yield}}

src/ui/components/Page404/template.hbs

@@ -1,5 +1,5 @@
 <div>
-  <Header>
+  <Header @title="Not found">
     <div class="block">
       <h1 class="typography.display headline">
         We can't find the page you are looking for.

src/ui/components/PageCaseDdWrt/template.hbs

@@ -1,5 +1,12 @@
 <div>
-  <Header @active="work" @label="embeDD Case Study" @title="A modern UI for an open-source router firmware" />
+  <Header
+    @active="work"
+    @label="DD-WRT NXT Case Study"
+    @headline="A modern UI for an open-source router firmware"
+    @title="DD-WRT NXT Case Study"
+    @documentTitle="DD-WRT NXT Case Study | Work"
+   />
+
   <div class="layout.main offset.after-21">
     <p class="typography.lead">
       DD-WRT is a Linux based firmware for wireless routers. Originally designed for the Linksys WRT54G series, it now runs on a wide variety of models and is installed on millions of devices worldwide.

src/ui/components/PageCaseStudyExpedition/template.hbs

@@ -1,5 +1,12 @@
 <div>
-  <Header @active="work" @label="Expedition Case Study" @title="An online travel magazine for global citizens" />
+  <Header
+    @active="work"
+    @label="Expedition Case Study"
+    @headline="An online travel magazine for global citizens"
+    @title="Expedition Case Study"
+    @documentTitle="Expedition Case Study | Work"
+   />
+
   <div class="layout.main offset.after-21">
     <p class="typography.lead">
       Expedition approached simplabs when they needed help laying the foundation for advanced features in their Elixir and Phoenix based API as well as making sure their Ember.js based client was following best practices.

src/ui/components/PageCaseStudyTimify/template.hbs

@@ -1,5 +1,12 @@
 <div>
-  <Header @active="work" @label="Timify Case Study" @title="Modern online appointment scheduling" />
+  <Header
+    @active="work"
+    @label="Timify Case Study"
+    @headline="Modern online appointment scheduling"
+    @title="Timify Case Study"
+    @documentTitle="Timify Case Study | Work"
+   />
+
   <div class="layout.main">
     <p class="typography.lead">
       Timify is an online appointment scheduling service that connects service providers with clients.

src/ui/components/PageCaseStudyTrainline/template.hbs

@@ -1,5 +1,12 @@
 <div>
-  <Header @active="work" @label="Trainline Case Study" @title="A mobile train ticket counter" />
+  <Header
+    @active="work"
+    @label="Trainline Case Study"
+    @headline="A mobile train ticket counter"
+    @title="Trainline Case Study"
+    @documentTitle="Trainline Case Study | Work"
+   />
+
   <div class="layout.main">
     <p class="typography.lead">
       simplabs worked closely with Trainline’s in-house engineering team and built a mobile web app to accompany the existing desktop app. A dedicated site for mobile devices allowed Trainline to better serve customers on the go and leverage the full market potential.

src/ui/components/PageContact/template.hbs

@@ -1,5 +1,5 @@
 <div>
-  <Header @active="contact" @title="Contact Us" />
+  <Header @active="contact" @headline="Contact Us" @title="Contact" />
   <div class="layout.main offset.after-21">
     <p class="typography.lead offset.after-12">
       Whatever you're planning, we'd be excited to hear more. We can turn your ideas into successful digital products, improve existing ones or increase your team's effectiveness.

src/ui/components/PageElixirExpertise/template.hbs

@@ -1,5 +1,5 @@
 <div>
-  <Header @title="The best of all worlds">
+  <Header @headline="The best of all worlds" @title="Elixir & Phoenix">
     <p class="typography.lead">
       Elixir combines the expressiveness and simplicity of Ruby with the performance and stability of the Erlang VM. Phoenix builds on the concepts first introduced by Ruby on Rails, combining them with a number of architectural improvements to take the architecture into the future.
     </p>

src/ui/components/PageEmberExpertise/template.hbs

@@ -1,5 +1,5 @@
 <div>
-  <Header @title="Europe's leading Ember experts">
+  <Header @headline="Europe's leading Ember experts" @title="Europe's leading Ember experts">
     <p class="typography.lead">
       simplabs has unique expertise and insights into Ember.js with a good part of our engineering team being on the Ember.js core team and maintaining widely adopted add-ons.
     </p>

src/ui/components/PageFullStackEngineering/template.hbs

@@ -1,5 +1,12 @@
 <div>
-  <Header @active="services" @label="Services" @title="Full-Stack Engineering" />
+  <Header
+    @active="services"
+    @label="Services"
+    @headline="Full-Stack Engineering"
+    @title="Full-Stack Engineering"
+    @documentTitle="Full-Stack Engineering | Services"
+   />
+
   <div class="layout.main offset.after-21">
     <h2>
       Ambitious software solutions – From Idea to Release

src/ui/components/PageHomepage/template.hbs

@@ -1,5 +1,5 @@
 <div>
-  <Header @title="Solid Solutions for Ambitious Projects">
+  <Header @headline="Solid Solutions for Ambitious Projects" @title="simplabs" @documentTitle="">
     <p class="typography.lead">
       We deliver ambitious digital products on the web and mobile for our clients to rely on. Our expert team manages projects from idea to release, covering strategy, design and engineering.
     </p>

src/ui/components/PageLandingPwaWebinar/template.hbs

@@ -1,5 +1,8 @@
 <div>
-  <Header @title="The ultimate marketers guide to modern web apps and why users are demanding more">
+  <Header
+    @headline="The ultimate marketers guide to modern web apps and why users are demanding more"
+    @title="Webinar: the ultimate marketers guide to modern web apps"
+  >
     <p class="typography.lead">
       Want to know how forward looking marketing departments are taking advantage of modern web apps to capture new demand with incredible online experiences?
     </p>

src/ui/components/PageLegalImprint/template.hbs

@@ -1,5 +1,5 @@
 <div>
-  <Header @label="Legal Info" @title="Imprint" />
+  <Header @label="Legal Info" @headline="Imprint" @title="Imprint" />
   <div class="layout.full offset.after-21">
     <h2>
       Publisher information according to §6 Teledienstgesetz (TDG)

src/ui/components/PageLegalPrivacy/template.hbs

@@ -1,5 +1,5 @@
 <div>
-  <Header @label="Legal Info" @title="Privacy Policy" />
+  <Header @label="Legal Info" @headline="Privacy Policy" @title="Privacy Policy" />
   <div class="layout.full offset.after-21">
     <p>
       We are very delighted that you have shown interest in our enterprise. Data protection is of a particularly high priority for the management of the simplabs GmbH. The use of the Internet pages of the simplabs GmbH is possible without any indication of personal data; however, if a data subject wants to use special enterprise services via our website, processing of personal data could become necessary. If the processing of personal data is necessary and there is no statutory basis for such processing, we generally obtain consent from the data subject.

src/ui/components/PagePlaybook/template.hbs

@@ -1,5 +1,5 @@
 <div>
-  <Header @title="Playbook">
+  <Header @headline="Playbook" @title="Playbook">
     <p class="typography.lead">
       We maintain a lean process that supports the team rather than stand in its way. It ensures the right tasks are being worked on at the right time and provides a reasonable level of short term predictability. At the same time it remains flexible enough to adapt to unexpected events. Our process does not depend on specific tools and works for projects and teams in all environments.
     </p>

src/ui/components/PageServices/template.hbs

@@ -2,7 +2,8 @@
   <Header
     @active="services"
     @label="Services"
-    @title="We turn ideas into products and help tech teams move faster with confidence"
+    @headline="We turn ideas into products and help tech teams move faster with confidence"
+    @title="Services"
    />
 
   <section class="layout.main offset.after-21">

src/ui/components/PageTeamAugmentation/template.hbs

@@ -1,5 +1,12 @@
 <div>
-  <Header @active="services" @label="Services" @title="Team Augmentation" />
+  <Header
+    @active="services"
+    @label="Services"
+    @headline="Team Augmentation"
+    @title="Team Augmentation"
+    @documentTitle="Team Augmentation | Services"
+   />
+
   <div class="layout.main offset.after-21">
     <h2>
       Bring in the experts when you need them