Docs | Update meta tags dynamically

docs/data/routes.json

@@ -1,6 +1,7 @@
 {
     "/": {
         "title": "Buefy: lightweight UI components for Vue.js based on Bulma",
+        "subtitle": "Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.",
         "breadTitle": "Home",
         "path": "/"
     },

docs/router/guards.js

@@ -1,7 +1,27 @@
 import Vue from 'vue'
 
 export const afterEachGlobal = (to, from) => {
+    const title = `${to.meta.title} | Buefy`
+    const url = `https://buefy.github.io${to.meta.path}`
+    const description = to.meta.subtitle.replace(/<(.|\n)*?>/g, '')
+    const updates = [
+        { tag: 'meta[name="twitter:title"]', value: title },
+        { tag: 'meta[property="og:title"]', value: title },
+        { tag: 'meta[name="description"]', value: description },
+        { tag: 'meta[property="og:description"]', value: description },
+        { tag: 'meta[name="twitter:description"]', value: description },
+        { tag: 'link[rel="canonical"]', attr: 'href', value: url },
+        { tag: 'meta[property="og:url"]', value: url }
+    ]
+
     window.document.documentElement.scrollTop = 0
-    window.document.title = `${to.meta.title} | Buefy`
+    window.document.title = title
+
+    updates.forEach((item) => {
+        if (!item.value) return
+        document.querySelector(item.tag)
+            .setAttribute(item.attr || 'content', item.value)
+    })
+
     Vue.prototype.$eventHub.$emit('navigate', to.meta)
 }

index.html

@@ -13,6 +13,8 @@
     <link rel="<%= chunk.initial?'preload':'prefetch' %>" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
     <% }}} %>
 
+    <link rel="canonical" href="https://buefy.github.io">
+
     <link rel="apple-touch-icon" sizes="180x180" href="/static/img/icons/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/static/img/icons/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/static/img/icons/favicon-16x16.png">