set page title correctly (mainmatter#354)

jayjayjpg · Apr 24, 2019 · 0fc1597 · 0fc1597
1 parent ae032f4
commit 0fc1597
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 21 deletions.
diff --git a/config/routes-map.js b/config/routes-map.js
@@ -9,6 +9,7 @@ module.exports = function() {
   let blogPostRoutes = blogPosts.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,20 +24,21 @@ module.exports = function() {
   let routes = {
     ...blogPostRoutes,
     '/': { component: 'Homepage' },
-    '/services': { component: 'Services' },
-    '/services/software-engineering': { component: 'SoftwareEngineering' },
-    '/services/team-augmentation': { component: 'TeamAugmentation' },
-    '/services/training': { component: 'Training' },
-    '/cases/trainline': { component: 'TrainlineCaseStudy' },
-    '/cases/expedition': { component: 'ExpeditionCaseStudy' },
-    '/about': { component: 'About' },
-    '/expertise/ember': { component: 'EmberExpertise' },
-    '/work': { component: 'Work' },
-    '/talks': { component: 'Talks' },
-    '/calendar': { component: 'Calendar' },
-    '/playbook': { component: 'Playbook' },
-    '/contact': { component: 'Contact' },
-    '/blog': { component: 'Blog', bundle: { asset: '/blog.js', module: '__blog__' } },
+    '/services': { component: 'Services', title: 'Services' },
+    '/services/software-engineering': { component: 'SoftwareEngineering', title: 'Full Stack Engineering' },
+    '/services/team-augmentation': { component: 'TeamAugmentation', title: 'Team Augmentation' },
+    '/services/training': { component: 'Training', title: 'Tutoring' },
+    '/cases/trainline': { component: 'TrainlineCaseStudy', title: 'Trainline Case Study' },
+    '/cases/expedition': { component: 'ExpeditionCaseStudy', title: 'Expedition Case Study' },
+    '/about': { component: 'About', title: 'About' },
+    // eslint-disable-next-line quotes
+    '/expertise/ember': { component: 'EmberExpertise', title: "Europe's leading Ember experts" },
+    '/work': { component: 'Work', title: 'Work' },
+    '/talks': { component: 'Talks', title: 'Talks' },
+    '/calendar': { component: 'Calendar', title: 'Calendar' },
+    '/playbook': { component: 'Playbook', title: 'Playbook' },
+    '/contact': { component: 'Contact', title: 'Contact' },
+    '/blog': { component: 'Blog', title: 'Blog', bundle: { asset: '/blog.js', module: '__blog__' } },
   };
 
   return routes;

diff --git a/scripts/prerender.js b/scripts/prerender.js
@@ -52,8 +52,8 @@ let server = express();
 server.get('*', async function(req, res, next) {
   if (req.headers.accept && req.headers.accept.includes('text/html')) {
     let origin = `${req.protocol}://${req.headers.host}`;
-    let body = await renderer.render(origin, req.url);
-    let html = HTML.replace('<div id="app"></div>', body);
+    let { body, title } = await renderer.render(origin, req.url);
+    let html = HTML.replace('<div id="app"></div>', body).replace(/<title>[^<]*<\/title>/, `<title>${title}</title>`);
     res.send(html);
   } else {
     next();

diff --git a/src/ui/components/Simplabs/component.ts b/src/ui/components/Simplabs/component.ts
@@ -46,8 +46,10 @@ export default class Simplabs extends Component {
     this.router = new Navigo(this.appState.origin);
 
     Object.keys(this.routesMap).forEach((path) => {
-      let { component, bundle, parentBundle } = this.routesMap[path];
-      let options = {};
+      let { component, title = '', bundle, parentBundle } = this.routesMap[path];
+      let options = {
+        after: () => this._setPageTitle(title)
+      };
       if (bundle && !this.appState.isSSR) {
         options.before = async (done) => {
           await this._loadBundle(bundle, parentBundle);
@@ -129,6 +131,14 @@ export default class Simplabs extends Component {
     this.document.body.appendChild(script);
   }
 
+  private _setPageTitle(title) {
+    if (this.appState.isSSR) {
+      this.document.title = formatPageTitle(title);
+    } else {
+      document.title = formatPageTitle(title)
+    }
+  }
+
   private _injectActiveComponentState() {
     let script = this.document.createElement('script');
     script.setAttribute('data-shoebox', true);
@@ -145,3 +155,7 @@ export default class Simplabs extends Component {
     }
   }
 }
+
+function formatPageTitle(title) {
+  return `${title ? `${title} | ` : ''}simplabs`;
+}
diff --git a/ssr/index.ts b/ssr/index.ts
@@ -18,7 +18,7 @@ export default class GlimmerRenderer {
   // tslint:disable-next-line:no-empty
   constructor() {}
 
-  render(origin: string, route: string): Promise<string> {
+  render(origin: string, route: string): Promise<{ body: string, title: string }> {
     const document = new Document();
 
     const mountEl = document.createElement('div');

diff --git a/ssr/ssr-application.ts b/ssr/ssr-application.ts
@@ -97,7 +97,7 @@ export default class SSRApplication extends Application {
   // tslint:disable-next-line:no-empty
   scheduleRerender() {}
 
-  async renderToString(): Promise<string> {
+  async renderToString(): Promise<{ body: string, title: string }> {
     let { env } = this;
 
     let builder = this.builder.getBuilder(env);
@@ -127,6 +127,10 @@ export default class SSRApplication extends Application {
       throw err;
     }
 
-    return this.serializer.serializeChildren(this.document.body);
+    let document = this.document as any;
+    return {
+      body: this.serializer.serializeChildren(document.body) as string,
+      title: document.title as string
+    };
   }
 }