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

Author: marcoow

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}}