Add mechanism for arbitrary head tags (mainmatter#659)

marcoow · pichfl · commit b70f70f284be · 2019-07-30T14:28:03.000+02:00
* dedicated class for writing head tags
* render head tags in SSR build
* add static meta tags
* add og:title meta tag
* add canonical url tag
* fix object iteration
* add article published time meta tag
* render meta date for blog posts
* format
* fix prerender build
diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,3 @@
-lib/generate-blog-components/lib/files/**/*
+lib/generate-blog/lib/templates/**/*
 lib/global-css/css/vendor/normalize.css
 src/ui/components/Header/template.hbs
diff --git a/ember-cli-build.js b/ember-cli-build.js
@@ -156,7 +156,7 @@ class SimplabsApp extends GlimmerApp {
     });
     let ssrTree = this.ssrTree();
 
-    let appTree = new MergeTrees([jsTree, ssrTree]);
+    let appTree = new MergeTrees([jsTree, ssrTree], { overwrite: true });
     return new Rollup(appTree, {
       rollup: {
         input: 'ssr/index.js',
diff --git a/lib/component-generation/prepare-templates.js b/lib/component-generation/prepare-templates.js
@@ -16,8 +16,11 @@ module.exports = function prepareTemplates(folder) {
     .reduce((acc, folder) => {
       let component = path.basename(folder);
       acc[component] = ['template', 'stylesheet'].reduce((acc, template) => {
-        let source = fs.readFileSync(path.join(folder, `${template}.hbs`)).toString();
-        acc[template] = handlebars.compile(source);
+        let file = path.join(folder, `${template}.hbs`);
+        if (fs.existsSync(file)) {
+          let source = fs.readFileSync(file).toString();
+          acc[template] = handlebars.compile(source);
+        }
         return acc;
       }, {});
       return acc;
diff --git a/lib/generate-blog/lib/components-builder.js b/lib/generate-blog/lib/components-builder.js
@@ -73,14 +73,12 @@ module.exports = class ComponentsBuilder extends BaseComponentsBuilder {
 
   _writePostComponent(post, related) {
     let data = this._preparePostTemplateData(post);
+    data.componentName = post.componentName;
     if (related) {
       data.related = this._preparePostTemplateData(related);
     }
     let componentTemplate = this.templates.post.template(data);
 
-    data = {
-      componentName: post.componentName,
-    };
     let componentCssBlock = this.templates.post.stylesheet(data);
 
     this.writeComponent(post.componentName, componentTemplate, componentCssBlock);
diff --git a/lib/generate-blog/lib/templates/post/template.hbs b/lib/generate-blog/lib/templates/post/template.hbs
@@ -1,4 +1,5 @@
 <div>
+  <HeadTag @name='meta' @keys=\{{hash property="article:published_time"}} @values=\{{hash content="{{isoDate}}"}} />
   <script type="application/ld+json">
     {
     "@type": "BlogPosting",
diff --git a/lib/head-data/index.js b/lib/head-data/index.js
@@ -13,6 +13,9 @@ module.exports = {
         <meta name="language" content="en" />
         <meta name="content-language" content="en" />
         <meta name="publisher" content="simplabs GmbH" />
+        <meta property="fb:admins" content="699569440119973" />
+        <meta property="og:site_name" content="simplabs" />
+        <meta name="twitter:site" content="@simplabs">
         <link type="application/atom+xml" rel="alternate" href="https://simplabs.com/feed.xml" title="simplabs Blog" />
       `;
     } else {
diff --git a/scripts/prerender.js b/scripts/prerender.js
@@ -71,10 +71,10 @@ 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, title } = await renderer.render(origin, req.url);
+    let { body, head } = await renderer.render(origin, req.url);
     let shoeboxBundlePreloads = buildShoeboxBundlePreloads(body);
     let html = HTML.replace('<div id="app"></div>', body)
-      .replace(/<title>[^<]*<\/title>/, `<title>${title}</title>`)
+      .replace(/<head>/, `<head>\n${head}`)
       .replace('<link', `${shoeboxBundlePreloads}\n<link`);
     res.send(html);
   } else {
diff --git a/src/index.ts b/src/index.ts
@@ -2,6 +2,8 @@ import { classnames } from '@css-blocks/glimmer/dist/cjs/src/helpers/classnames'
 import { concat } from '@css-blocks/glimmer/dist/cjs/src/helpers/concat';
 import { ComponentManager, setPropertyDidChange } from '@glimmer/component';
 import App from './main';
+import HeadTags from './utils/head-tags';
+import hash from './utils/helpers/hash';
 
 const containerElement = document.getElementById('app');
 const hasSSRBody = !!document.querySelector('[data-has-ssr-response]');
@@ -53,13 +55,24 @@ app.registerInitializer({
       'lazyRegistration',
       `utils:/${app.rootName}/lazy-registration/main`,
     );
+
+    registry.register(
+      `utils:/${app.appName}/head-tags/main`,
+      HeadTags
+    );
+    registry.registerInjection(
+      `component`,
+      'headTags',
+      `utils:/${app.appName}/head-tags/main`,
+    );
   }
 });
 
 app.registerInitializer({
   initialize(registry) {
     register(registry, `helper:/${app.rootName}/components/-css-blocks-classnames`, classnames);
     register(registry, `helper:/${app.rootName}/components/-css-blocks-concat`, concat);
+    register(registry, `helper:/${app.rootName}/components/hash`, hash);
   }
 });
 
diff --git a/src/ui/components/HeadTag/component.ts b/src/ui/components/HeadTag/component.ts
@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+
+export default class HeadTag extends Component {
+  constructor(options) {
+    super(options);
+
+    this.setMetaTags();
+  }
+
+  public willDestroy() {
+    this.headTags.remove(this.args.name, this.args.keys);
+  }
+
+  private setMetaTags() {
+    this.headTags.write(this.args.name, this.args.keys, this.args.values, this.args.content);
+  }
+}
diff --git a/src/ui/components/HeadTag/stylesheet.css b/src/ui/components/HeadTag/stylesheet.css
@@ -0,0 +1,3 @@
+:scope {
+  block-name: HeadTag;
+}
diff --git a/src/ui/components/HeadTag/template.hbs b/src/ui/components/HeadTag/template.hbs
diff --git a/src/ui/components/Simplabs/component.ts b/src/ui/components/Simplabs/component.ts
@@ -90,6 +90,7 @@ export default class Simplabs extends Component {
       let options: INavigoHooks = {
         after: () => {
           this._setPageTitle(title);
+          this._setCanonicalUrl(path);
           if (!this.appState.isSSR) {
             window.scrollTo(0, 0);
           }
@@ -206,11 +207,21 @@ export default class Simplabs extends Component {
   }
 
   private _setPageTitle(title) {
-    if (this.appState.isSSR) {
-      this.document.title = formatPageTitle(title);
-    } else {
-      document.title = formatPageTitle(title);
-    }
+    this.headTags.write('title', {}, {}, formatPageTitle(title));
+    this.headTags.write('meta', {
+      name: 'twitter:title',
+      property: 'og:title',
+    }, {
+      content: title,
+    });
+  }
+
+  private _setCanonicalUrl(path) {
+    this.headTags.write('meta', {
+      property: 'og:url',
+    }, {
+      content: `https://simplabs.com${path}`,
+    });
   }
 
   private _injectActiveComponentState() {
diff --git a/src/utils/head-tags.ts b/src/utils/head-tags.ts
@@ -0,0 +1,49 @@
+export default class HeadTags {
+
+
+  public static create(): HeadTags {
+    return new HeadTags();
+  }
+  private document: HTMLDocument = window.document;
+
+  public write(tagName, keyAttrs = {}, contentAttrs = {}, textContent = null) {
+    let element = this.getElement(tagName, keyAttrs);
+
+    let attrs = {
+      ...keyAttrs,
+      ...contentAttrs
+    };
+    for (let attr of Object.keys(attrs)) {
+      element.setAttribute(attr, attrs[attr]);
+    }
+    if (textContent) {
+      element.textContent = textContent;
+    }
+
+    this.document.head.appendChild(element);
+  }
+
+  public remove(tagName, keyAttrs = {}) {
+    let element = this.getElement(tagName, keyAttrs);
+
+    this.document.head.removeChild(element);
+  }
+
+  private getElement(tagName, keyAttrs): Element {
+    let selector = buildSelector(tagName, keyAttrs);
+    let element = this.document.querySelector(selector);
+    if (!element) {
+      element = this.document.createElement(tagName);
+    }
+    return element;
+  }
+}
+
+function buildSelector(tagName, attrs): string {
+  let selector = `head > ${tagName}`;
+  if (Object.keys(attrs).length > 0) {
+    let attrSelectors = Object.keys(attrs).map((attr) => `[${attr}="${attrs[attr]}"]`);
+    selector = `${selector}${attrSelectors.join('')}`;
+  }
+  return selector;
+}
diff --git a/src/utils/helpers/hash.ts b/src/utils/helpers/hash.ts
@@ -0,0 +1,3 @@
+export default function(params, named) {
+  return named;
+}
diff --git a/ssr/ssr-application.ts b/ssr/ssr-application.ts
@@ -1,6 +1,8 @@
 import DynamicScope from './dynamic-scope';
 import SSRComponentManager from './ssr-component-manager';
 import SSRDOMTreeConstruction from './ssr-dom-tree-construction';
+import SSRHeadTags from './ssr-head-tags';
+import hash from '../src/utils/helpers/hash';
 
 import { classnames } from '@css-blocks/glimmer/dist/cjs/src/helpers/classnames';
 import { concat } from '@css-blocks/glimmer/dist/cjs/src/helpers/concat';
@@ -59,6 +61,10 @@ export default class SSRApplication extends Application {
           `helper:/${rootName}/components/-css-blocks-concat`
         ] = concat;
 
+        registry._resolver.registry._entries[
+          `helper:/${rootName}/components/hash`
+        ] = hash;
+
         // inject appendOperations into environment in order to get working createElement and setAttribute.
         registry.register(
           `domTreeConstruction:/${rootName}/main/main`,
@@ -92,6 +98,20 @@ export default class SSRApplication extends Application {
           `component-manager:/${rootName}/component-managers/main`,
           SSRComponentManager
         );
+        registry.register(
+          `utils:/${rootName}/head-tags/main`,
+          SSRHeadTags
+        );
+        registry.registerInjection(
+          `utils:/${rootName}/head-tags/main`,
+          'document',
+          `document:/${rootName}/main/main`
+        );
+        registry.registerInjection(
+          `component`,
+          'headTags',
+          `utils:/${rootName}/head-tags/main`,
+        );
       },
     });
     this.initialize();
@@ -134,7 +154,7 @@ export default class SSRApplication extends Application {
     let document = this.document as any;
     return {
       body: this.serializer.serializeChildren(document.body) as string,
-      title: document.title as string
+      head: this.serializer.serializeChildren(document.head) as string
     };
   }
 }
diff --git a/ssr/ssr-head-tags.ts b/ssr/ssr-head-tags.ts
@@ -0,0 +1,34 @@
+// tslint:disable-next-line:no-var-requires
+const SimpleDOM = require('simple-dom');
+
+export default class SSRHeadTags {
+  private document: SimpleDOM.Document;
+
+  constructor(options) {
+    this.document = options.document;
+  }
+
+  public static create(options): SSRHeadTags {
+    return new SSRHeadTags(options);
+  }
+
+  public write(tagName, keyAttrs = {}, contentAttrs = {}, textContent = null) {
+    let element = this.document.createElement(tagName);
+    
+    let attrs = {
+      ...keyAttrs,
+      ...contentAttrs
+    };
+    for (let attr in attrs) {
+      element.setAttribute(attr, attrs[attr]);
+    }
+
+    if (textContent) {
+      let text = this.document.createTextNode(textContent);
+      element.appendChild(text);
+    }
+
+    this.document.head.appendChild(element);
+  }
+  }
+}
diff --git a/tests/index.html b/tests/index.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Simplabs</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`<div>`
	`2`	`+ <HeadTag @name='meta' @keys=\{{hash property="article:published_time"}} @values=\{{hash content="{{isoDate}}"}} />`
`2`	`3`	`<script type="application/ld+json">`
`3`	`4`	`{`
`4`	`5`	`"@type": "BlogPosting",`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+:scope {`
	`2`	`+ block-name: HeadTag;`
	`3`	`+}`