Add canonical URL to build (#3662)

Author: hamishwillee

.vitepress/config.mjs

@@ -86,10 +86,6 @@ export default defineConfig({
       // other locale specific properties...
     },
   },
-  //Logs every page loaded on build. Good way to catch errors not caught by other things.
-  async transformPageData(pageData, { siteConfig }) {
-    console.log(pageData.filePath);
-  },
 
   //
 
@@ -171,6 +167,58 @@ export default defineConfig({
     ],
   },
 
+  //Logs every page loaded on build. Good way to catch errors not caught by other things.
+  async transformPageData(pageData, { siteConfig }) {
+    console.log(pageData.filePath);
+  },
+
+  async transformHead({ pageData }) {
+    // Start with an empty array to accumulate all head tags
+    const head = [];
+
+    let canonicalUrlToAdd; // This will be undefined initially
+
+    // Get value from frontmatter if defined
+    // Assumed to be an absolute URL in the frontmatter
+    const frontmatterCanonicalUrl = pageData.frontmatter?.canonicalUrl;
+    if (frontmatterCanonicalUrl) {
+      canonicalUrlToAdd = frontmatterCanonicalUrl;
+    } else {
+      // No frontmatter override, generate default based on site config
+      // Hostname and base path used for adding canonical URLs to pages
+      const hostname = "https://docs.px4.io/main/";
+
+      let path = pageData.relativePath.replace(/\.md$/, "");
+
+      if (path === "index") {
+        path = ""; // For the homepage (index.md), the path is empty
+      } else if (path.endsWith("/index")) {
+        path = path.slice(0, -"/index".length); // For directory index pages (e.g., /my-folder/index.md -> /my-folder/)
+      }
+
+      // Ensure fullPath does not start with a slash (makes it relative to the root)
+      const fullPath = path.startsWith("/") ? path.slice(1) : path;
+      // Construct the default canonical URL using hostname with main base and path
+      try {
+        const url = new URL(fullPath, hostname);
+        canonicalUrlToAdd = url.href;
+      } catch (error) {
+        // Fallback, though less robust
+        canonicalUrlToAdd = `${hostname}${fullPath}`;
+      }
+    }
+
+    // Add canonical link to accumulated head array
+    if (canonicalUrlToAdd) {
+      head.push(["link", { rel: "canonical", href: canonicalUrlToAdd }]);
+    }
+
+    // Add any other custom head tags you might want later
+
+    // Return head that will be merged.
+    return head;
+  },
+
   head: [
     [
       "script",