fix: add default canonical links to pages (#458)

* Remove non functioning canonical plugin

* Add custom plugin to add the canonical tag to blog posts

* refactor: simplify canonical plugin for all cases

* pass in CANONICAL_BASE as option to plugin

* Remove empty page

* Add a trailing slash to canonical url if not present

* match zero or more trailing slashes

* up comment

Co-authored-by: Daniel N <2color@users.noreply.github.com>
Co-authored-by: Chris Waring <106938+cwaring@users.noreply.github.com>

package-lock.json

@@ -59,7 +59,6 @@
         "tailwindcss-touch": "^1.0.1",
         "vue": "^2.6.12",
         "vuepress": "^1.8.2",
-        "vuepress-plugin-canonical": "^1.0.0",
         "vuepress-plugin-chunkload-redirect": "^1.0.3",
         "vuepress-plugin-clean-urls": "^1.1.2",
         "vuepress-plugin-ipfs": "^1.0.2",
@@ -23095,12 +23094,6 @@
         "object.getownpropertydescriptors": "^2.0.3"
       }
     },
-    "node_modules/vuepress-plugin-canonical": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/vuepress-plugin-canonical/-/vuepress-plugin-canonical-1.0.0.tgz",
-      "integrity": "sha512-R2mcc+bp9VbKBQ3YIbCqUbWcWfmWSp1NIEyNGiLKkrcZmyUF/+0D48BqMCTx61AgJzWPW5DJzB6VkmpjbMIDbA==",
-      "dev": true
-    },
     "node_modules/vuepress-plugin-chunkload-redirect": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/vuepress-plugin-chunkload-redirect/-/vuepress-plugin-chunkload-redirect-1.0.3.tgz",
@@ -43959,12 +43952,6 @@
         }
       }
     },
-    "vuepress-plugin-canonical": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/vuepress-plugin-canonical/-/vuepress-plugin-canonical-1.0.0.tgz",
-      "integrity": "sha512-R2mcc+bp9VbKBQ3YIbCqUbWcWfmWSp1NIEyNGiLKkrcZmyUF/+0D48BqMCTx61AgJzWPW5DJzB6VkmpjbMIDbA==",
-      "dev": true
-    },
     "vuepress-plugin-chunkload-redirect": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/vuepress-plugin-chunkload-redirect/-/vuepress-plugin-chunkload-redirect-1.0.3.tgz",

package.json

@@ -55,7 +55,6 @@
     "tailwindcss-touch": "^1.0.1",
     "vue": "^2.6.12",
     "vuepress": "^1.8.2",
-    "vuepress-plugin-canonical": "^1.0.0",
     "vuepress-plugin-chunkload-redirect": "^1.0.3",
     "vuepress-plugin-clean-urls": "^1.1.2",
     "vuepress-plugin-ipfs": "^1.0.2",

src/.vuepress/config.js

@@ -38,8 +38,7 @@ const themeConfigDefaults = {
     },
     {
       text: 'Security',
-      link:
-        'https://github.com/ipfs/community/blob/master/CONTRIBUTING.md#security-issues',
+      link: 'https://github.com/ipfs/community/blob/master/CONTRIBUTING.md#security-issues',
     },
   ],
   footerLegal: '',
@@ -106,13 +105,11 @@ module.exports = {
           { text: 'Press', link: 'https://ipfs.tech/media/' },
           {
             text: 'Code of conduct',
-            link:
-              'https://github.com/ipfs/community/blob/master/code-of-conduct.md',
+            link: 'https://github.com/ipfs/community/blob/master/code-of-conduct.md',
           },
           {
             text: 'Security',
-            link:
-              'https://github.com/ipfs/community/blob/master/CONTRIBUTING.md#security-issues',
+            link: 'https://github.com/ipfs/community/blob/master/CONTRIBUTING.md#security-issues',
           },
         ],
         headerLinks: [
@@ -145,16 +142,8 @@ module.exports = {
         notFoundPath: '/ipfs-404.html',
       },
     ],
-    [
-      'vuepress-plugin-canonical',
-      CANONICAL_BASE
-        ? {
-            baseURL: CANONICAL_BASE,
-            stringExtension: true,
-          }
-        : false,
-    ],
     [require('./plugins/pageData')],
+    [require('./plugins/canonical'), { CANONICAL_BASE }],
     [require('./plugins/vuepress-plugin-trigger-scroll')],
     [
       '@vuepress/blog',

src/.vuepress/plugins/canonical.js

@@ -0,0 +1,13 @@
+//                                                         👇 ensure one trailing slash is present
+const normalizePath = (path) => path.replace('/_blog', '').replace(/\/*$/, '/')
+
+module.exports = ({ CANONICAL_BASE } = {}) => ({
+  name: 'vuepress-default-canonical',
+  extendPageData({ frontmatter, path }) {
+    // If no canonicalUrl is explicitly defined in the frontmatter, construct it from the permaLink or $page.path
+    if (!frontmatter.canonicalUrl && CANONICAL_BASE) {
+      frontmatter.canonicalUrl =
+        CANONICAL_BASE + normalizePath(frontmatter.permalink || path || '')
+    }
+  },
+})

src/README.md

@@ -1,5 +0,0 @@
-# Hello World
-
-Welcome to the VuePress website starter kit
-
-{{ $site }}