fix(spas): set canonical url (#11033)

Previously, we declared `https://developer.example.com`
as the canonical URL for all static pages.

Author: caugner

Diff for: build/spas.ts

@@ -19,6 +19,7 @@ import {
   CONTRIBUTOR_SPOTLIGHT_ROOT,
   BUILD_OUT_ROOT,
   DEV_MODE,
+  BASE_URL,
 } from "../libs/env/index.js";
 import { isValidLocale } from "../libs/locale-utils/index.js";
 import { DocFrontmatter, DocParent, NewsItem } from "../libs/types/document.js";
@@ -75,7 +76,10 @@ async function buildContributorSpotlight(
     };
     const context = { hyData };
 
-    const html = renderHTML(`/${locale}/${prefix}/${contributor}`, context);
+    const html = renderCanonicalHTML(
+      `/${locale}/${prefix}/${contributor}`,
+      context
+    );
     const outPath = path.join(
       BUILD_OUT_ROOT,
       locale.toLowerCase(),
@@ -111,13 +115,11 @@ export async function buildSPAs(options: {
   let buildCount = 0;
 
   // The URL isn't very important as long as it triggers the right route in the <App/>
-  const url = `/${DEFAULT_LOCALE}/404.html`;
-  const html = renderHTML(url, { pageNotFound: true });
-  const outPath = path.join(
-    BUILD_OUT_ROOT,
-    DEFAULT_LOCALE.toLowerCase(),
-    "_spas"
-  );
+  const locale = DEFAULT_LOCALE;
+  const url = `/${locale}/404.html`;
+  let html = renderHTML(url, { pageNotFound: true });
+  html = setCanonical(html, null);
+  const outPath = path.join(BUILD_OUT_ROOT, locale.toLowerCase(), "_spas");
   fs.mkdirSync(outPath, { recursive: true });
   fs.writeFileSync(path.join(outPath, path.basename(url)), html);
   buildCount++;
@@ -185,7 +187,7 @@ export async function buildSPAs(options: {
           noIndexing,
         };
 
-        const html = renderHTML(url, context);
+        const html = renderCanonicalHTML(url, context);
         const outPath = path.join(BUILD_OUT_ROOT, pathLocale, prefix);
         fs.mkdirSync(outPath, { recursive: true });
         const filePath = path.join(outPath, "index.html");
@@ -222,7 +224,8 @@ export async function buildSPAs(options: {
       const file = filepath.replace(dirpath, "");
       const page = file.split(".")[0];
 
-      const locale = DEFAULT_LOCALE.toLowerCase();
+      const locale = DEFAULT_LOCALE;
+      const pathLocale = locale.toLowerCase();
       const markdown = fs.readFileSync(filepath, "utf-8");
 
       const frontMatter = frontmatter<DocFrontmatter>(markdown);
@@ -242,10 +245,10 @@ export async function buildSPAs(options: {
         pageTitle: `${frontMatter.attributes.title || ""} | ${title}`,
       };
 
-      const html = renderHTML(url, context);
+      const html = renderCanonicalHTML(url, context);
       const outPath = path.join(
         BUILD_OUT_ROOT,
-        locale,
+        pathLocale,
         ...slug.split("/"),
         page
       );
@@ -342,7 +345,7 @@ export async function buildSPAs(options: {
         featuredArticles,
       };
       const context = { hyData };
-      const html = renderHTML(url, context);
+      const html = renderCanonicalHTML(url, context);
       const outPath = path.join(BUILD_OUT_ROOT, localeLC);
       fs.mkdirSync(outPath, { recursive: true });
       const filePath = path.join(outPath, "index.html");
@@ -458,3 +461,24 @@ async function fetchLatestNews() {
     items,
   };
 }
+
+function renderCanonicalHTML(url: string, context: any) {
+  let html = renderHTML(url, context);
+  html = setCanonical(html, url);
+  return html;
+}
+
+function setCanonical(html: string, url: string | null) {
+  html = html.replace(
+    `<link rel="canonical" href="${BASE_URL}"/>`,
+    url ? `<link rel="canonical" href="${BASE_URL}${url}"/>` : ""
+  );
+  // Better safe than sorry.
+  html = html.replace(
+    `<link rel="canonical" href="https://developer.mozilla.org"/>`,
+    url
+      ? `<link rel="canonical" href="https://developer.mozilla.org${url}"/>`
+      : ""
+  );
+  return html;
+}