Replace ember-cli-head and correct generation of canonical URL

Author: kategengler

app/components/in-head.gjs

@@ -0,0 +1,9 @@
+function getHead() {
+  return document.head;
+}
+
+<template>
+  {{#in-element (getHead) insertBefore=null}}
+    {{yield}}
+  {{/in-element}}
+</template>

app/services/head-data.js

@@ -5,7 +5,6 @@ export default class HeadDataService extends Service {
   @tracked title;
   @tracked isRelease;
   @tracked compactVersion;
-  @tracked urlVersion;
   @tracked canonicalUrl;
   @tracked description;
   @tracked cdnDomain;

app/templates/application.gjs

@@ -1,22 +1,48 @@
 import pageTitle from 'ember-page-title/helpers/page-title';
-import HeadLayout from 'ember-cli-head/components/head-layout';
+import InHead from 'ember-api-docs/components/in-head';
 import EsHeader from 'ember-styleguide/components/es-header';
 import ApiSearch from 'ember-api-docs/components/api-search';
 import EsFooter from 'ember-styleguide/components/es-footer';
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
 import BasicDropdownWormhole from 'ember-basic-dropdown/components/basic-dropdown-wormhole';
-<template>
-  {{pageTitle "Ember API Documentation"}}
+import config from 'ember-api-docs/config/environment';
 
-  <HeadLayout />
+export default class Application extends Component {
+  @service headData;
+  @service router;
 
-  <EsHeader>
-    <ApiSearch />
-  </EsHeader>
+  get canonicalUrl() {
+    let path = this.router.currentURL;
+    let version = new RegExp(this.headData.compactVersion, 'g');
+    return `${config.APP.domain}/${path.replace(version, 'release')}`;
+  }
 
-  <main>
-    {{outlet}}
-  </main>
+  <template>
+    {{pageTitle "Ember API Documentation"}}
 
-  <EsFooter />
-  <BasicDropdownWormhole />
-</template>
+    <InHead>
+      <link rel="dns-prefetch" href="{{this.headData.cdnDomain}}" />
+
+      {{#if this.headData.description}}
+        <meta name="description" content={{this.headData.description}} />
+        <meta property="og:description" content={{this.headData.description}} />
+      {{/if}}
+
+      {{#unless this.headData.isRelease}}
+        <link rel="canonical" href={{this.canonicalUrl}} />
+      {{/unless}}
+    </InHead>
+
+    <EsHeader>
+      <ApiSearch />
+    </EsHeader>
+
+    <main>
+      {{outlet}}
+    </main>
+
+    <EsFooter />
+    <BasicDropdownWormhole />
+  </template>
+}