chore(docs): add canonical url to head section (#5198)

tmorehouse · jacobmllr95 · web-flow · commit 7a3291fa5374 · 2020-04-21T10:04:36.000+02:00
* chore(docs): add canonical url to head section

* Update default.js

* Update default.js

* Update themes.vue

* Move common variables to `constants.js`

Co-authored-by: Jacob Müller &lt;jacob.mueller.elz@gmail.com&gt;
diff --git a/docs/components/header.vue b/docs/components/header.vue
@@ -175,6 +175,7 @@
 </style>
 
 <script>
+import { BASE_URL, BASE_URL_DEV, NETLIFY_URL } from '~/constants'
 import { version } from '~/content'
 
 export default {
@@ -187,13 +188,13 @@ export default {
   },
   computed: {
     prodURL() {
-      return 'https://bootstrap-vue.org/'
+      return BASE_URL
     },
     devURL() {
       if (this.isNetlify) {
-        return 'https://bootstrap-vue.netlify.app/'
+        return NETLIFY_URL
       }
-      return 'https://dev.bootstrap-vue.org/'
+      return BASE_URL_DEV
     },
     isNetlify() {
       return Boolean(process.env.NETLIFY)
diff --git a/docs/constants.js b/docs/constants.js
@@ -0,0 +1,7 @@
+export const BASE_URL = 'https://bootstrap-vue.org'
+export const BASE_URL_DEV = 'https://dev.bootstrap-vue.org'
+export const NETLIFY_URL = 'https://bootstrap-vue.netlify.app'
+
+export const GA_TRACKING_ID = 'UA-89526435-1'
+
+export const TWITTER_HANDLE = '@BootstrapVue'
diff --git a/docs/layouts/default.js b/docs/layouts/default.js
@@ -1,8 +1,23 @@
+import { BASE_URL } from '~/constants'
 import Footer from '~/components/footer'
 import Header from '~/components/header'
 
 export default {
   name: 'BVDefaultLayout',
-  functional: true,
-  render: h => [h(Header), h('nuxt'), h(Footer)]
+  render(h) {
+    return h('div', [h(Header), h('nuxt'), h(Footer)])
+  },
+  head() {
+    // Add canonical URL so all site variations are
+    // indexed to the same primary URL
+    return {
+      link: [
+        {
+          hid: 'canonical',
+          rel: 'canonical',
+          href: `${BASE_URL}${this.$route.path}`
+        }
+      ]
+    }
+  }
 }
diff --git a/docs/layouts/docs.js b/docs/layouts/docs.js
@@ -1,3 +1,4 @@
+import { BASE_URL } from '~/constants'
 import BVBreadcrumbs from '~/components/breadcrumbs'
 import BVFeedback from '~/components/feedback'
 import BVFooter from '~/components/footer'
@@ -73,5 +74,18 @@ export default {
     const $footer = h(BVFooter, { props: { isDocs: true } })
 
     return h('div', [$header, $container, $footer])
+  },
+  head() {
+    // Add canonical URL so all site variations are
+    // indexed to the same primary URL
+    return {
+      link: [
+        {
+          hid: 'canonical',
+          rel: 'canonical',
+          href: `${BASE_URL}${this.$route.path}`
+        }
+      ]
+    }
   }
 }
diff --git a/docs/nuxt.config.js b/docs/nuxt.config.js
@@ -2,6 +2,7 @@ const fs = require('fs')
 const path = require('path')
 const marked = require('marked')
 const hljs = require('highlight.js/lib/highlight.js')
+const { BASE_URL, GA_TRACKING_ID, TWITTER_HANDLE } = require('./constants')
 
 // Import only the languages we need from "highlight.js"
 hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'))
@@ -247,11 +248,11 @@ module.exports = {
     },
     meta: {
       // `ogHost` is required for `og:image` to be populated
-      ogHost: 'https://bootstrap-vue.org',
+      ogHost: BASE_URL,
       ogImage: true,
       twitterCard: 'summary',
-      twitterSite: '@BootstrapVue',
-      twitterCreator: '@BootstrapVue'
+      twitterSite: TWITTER_HANDLE,
+      twitterCreator: TWITTER_HANDLE
     }
   },
 
@@ -271,7 +272,7 @@ module.exports = {
   modules: ['@nuxtjs/pwa'],
 
   'google-analytics': {
-    id: 'UA-89526435-1',
+    id: GA_TRACKING_ID,
     autoTracking: {
       exception: true
     }
diff --git a/docs/pages/themes.vue b/docs/pages/themes.vue
@@ -75,7 +75,7 @@
             documentaton for licensing information.
           </li>
           <li>
-            BootstrapVue does not guaantee that all coustom components provided by a theme are
+            BootstrapVue does not guarantee that all coustom components provided by a theme are
             WIA-ARIA compliant. Refer to the provider documentation for details.
           </li>
           <li>
