Merge branch 'main' into explain-yes-compatibility-mode

.github/workflows/auto-merge.yml

@@ -8,7 +8,7 @@ on:
 jobs:
   auto-merge:
     runs-on: ubuntu-latest
-    if: github.actor == 'dependabot[bot]'
+    if: github.event.pull_request.user.login == 'dependabot[bot]'
 
     steps:
       - name: Dependabot metadata

.github/workflows/dev-build.yml

@@ -131,6 +131,8 @@ jobs:
           REACT_APP_DISABLE_AUTH: true
 
         run: |
+          set -eo pipefail
+
           # Info about which CONTENT_* environment variables were set and to what.
           echo "CONTENT_ROOT=$CONTENT_ROOT"
           echo "CONTENT_TRANSLATED_ROOT=$CONTENT_TRANSLATED_ROOT"

.github/workflows/prod-build.yml

@@ -255,6 +255,7 @@ jobs:
           REACT_APP_AI_FEEDBACK_GITHUB_REPO: mdn/ai-feedback
 
         run: |
+          set -eo pipefail
 
           # Info about which CONTENT_* environment variables were set and to what.
           echo "CONTENT_ROOT=$CONTENT_ROOT"
@@ -348,6 +349,8 @@ jobs:
       - name: Deploy Function
         if: ${{ ! vars.SKIP_FUNCTION }}
         run: |-
+          set -eo pipefail
+
           for region in europe-west1 us-west1 asia-east1; do
             gcloud beta functions deploy mdn-prod-prod-$region \
             --gen2 \

.github/workflows/stage-build.yml

@@ -269,6 +269,7 @@ jobs:
           SENTRY_RELEASE: ${{ github.sha }}
 
         run: |
+          set -eo pipefail
 
           # Info about which CONTENT_* environment variables were set and to what.
           echo "CONTENT_ROOT=$CONTENT_ROOT"
@@ -364,6 +365,8 @@ jobs:
       - name: Deploy Function
         if: ${{ ! vars.SKIP_FUNCTION }}
         run: |-
+          set -eo pipefail
+
           for region in europe-west1 us-west1 asia-east1; do
             gcloud beta functions deploy mdn-nonprod-stage-$region \
             --gen2 \

.github/workflows/test-build.yml

@@ -160,6 +160,7 @@ jobs:
           # Observatory
           REACT_APP_OBSERVATORY_API_URL: https://observatory-api.mdn.allizom.net
         run: |
+          set -eo pipefail
 
           # Info about which CONTENT_* environment variables were set and to what.
           echo "CONTENT_ROOT=$CONTENT_ROOT"
@@ -244,6 +245,8 @@ jobs:
       - name: Deploy Function
         if: ${{ ! vars.SKIP_FUNCTION }}
         run: |-
+          set -eo pipefail
+
           for region in europe-west3; do
             gcloud beta functions deploy mdn-nonprod-test-$region \
             --gen2 \
@@ -263,13 +266,15 @@ jobs:
             --set-env-vars="ORIGIN_PLAY=test.mdnyalp.dev" \
             --set-env-vars="SOURCE_CONTENT=https://storage.googleapis.com/${{ vars.GCP_BUCKET_NAME }}/main/" \
             --set-env-vars="SOURCE_API=https://api.developer.allizom.org/" \
+            --set-env-vars="BSA_ENABLED=true" \
             --set-env-vars="SENTRY_DSN=${{ secrets.SENTRY_DSN_CLOUD_FUNCTION }}" \
             --set-env-vars="SENTRY_ENVIRONMENT=test" \
             --set-env-vars="SENTRY_TRACES_SAMPLE_RATE=${{ vars.SENTRY_TRACES_SAMPLE_RATE }}" \
             --set-env-vars="SENTRY_RELEASE=${{ github.sha }}" \
             --set-secrets="KEVEL_SITE_ID=projects/${{ secrets.GCP_PROJECT_NAME }}/secrets/stage-kevel-site-id/versions/latest" \
             --set-secrets="KEVEL_NETWORK_ID=projects/${{ secrets.GCP_PROJECT_NAME }}/secrets/stage-kevel-network-id/versions/latest" \
             --set-secrets="SIGN_SECRET=projects/${{ secrets.GCP_PROJECT_NAME }}/secrets/stage-sign-secret/versions/latest" \
+            --set-secrets="BSA_ZONE_KEYS=projects/${{ secrets.GCP_PROJECT_NAME }}/secrets/stage-bsa-zone-keys/versions/latest" \
             2>&1 | sed "s/^/[$region] /" &
             pids+=($!)
           done

.gitignore

@@ -46,9 +46,6 @@ yarn-error.log*
 /server/*.js
 /server/*.js.map
 /ssr/dist/
-/ssr/*.js
-!/ssr/mozilla.dnthelper.min.js
-!/ssr/webpack.config.js
 /ssr/*.js.map
 /tool/*.js
 /tool/*.js.map

.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "2.60.1"
+  ".": "2.63.1"
 }

.stylelintrc.json

@@ -22,6 +22,7 @@
       [
         "custom-properties",
         "dollar-variables",
+        "declarations",
         {
           "type": "at-rule",
           "name": "extend"
@@ -31,7 +32,6 @@
           "name": "include",
           "hasBlock": false
         },
-        "declarations",
         {
           "type": "at-rule",
           "name": "include",

build/blog.ts

@@ -28,7 +28,7 @@ import {
   postProcessSmallerHeadingIDs,
 } from "./utils.js";
 import { slugToFolder } from "../libs/slug-utils/index.js";
-import { syntaxHighlight } from "./syntax-highlight.js";
+import { wrapCodeExamples } from "./code-headers.js";
 import { wrapTables } from "./wrap-tables.js";
 import { Doc } from "../libs/types/document.js";
 import { extractSections } from "./extract-sections.js";
@@ -391,7 +391,7 @@ export async function buildPost(
     doc.hasMathML = true;
   }
   $("div.hidden").remove();
-  syntaxHighlight($, doc);
+  wrapCodeExamples($);
   injectNoTranslate($);
   injectLoadingLazyAttributes($);
   postProcessExternalLinks($);

build/code-headers.ts

@@ -0,0 +1,45 @@
+import * as cheerio from "cheerio";
+
+// Over the years we have accumulated some weird <pre> tags whose
+// brush is more or less "junk".
+// TODO: Perhaps, if you have a doc with <pre> tags that matches
+// this, it should become a flaw.
+const IGNORE = new Set(["none", "text", "plain", "unix"]);
+
+/**
+ * Mutate the `$` instance by adding headers to <pre> tags containing code blocks.
+ *
+ */
+export function wrapCodeExamples($: cheerio.CheerioAPI) {
+  // Our content will be like this: `<pre class="brush:js">` or
+  // `<pre class="brush: js">` so we're technically not looking for an exact
+  // match. The wildcard would technically match `<pre class="brushetta">`
+  // too. But within the loop, we do a more careful regex on the class name
+  // and only proceed if it's something sensible.
+  $("pre[class*=brush]").each((_, element) => {
+    // The language is whatever string comes after the `brush(:)`
+    // portion of the class name.
+    const $pre = $(element);
+
+    const className = $pre.attr("class").toLowerCase();
+    const match = className.match(/brush:?\s*([\w_-]+)/);
+    if (!match) {
+      return;
+    }
+    const name = match[1].replace("-nolint", "");
+    if (IGNORE.has(name)) {
+      // Seems to exist a couple of these in our docs. Just bail.
+      return;
+    }
+    const code = $pre.text();
+    $pre.wrapAll(`<div class='code-example'></div>`);
+    if (!$pre.hasClass("hidden")) {
+      $(
+        `<div class='example-header'><span class="language-name">${name}</span></div>`
+      ).insertBefore($pre);
+    }
+    const $code = $("<code>").text(code);
+
+    $pre.empty().append($code);
+  });
+}

build/curriculum.ts

@@ -9,7 +9,7 @@ import { DocParent } from "../libs/types/document.js";
 import { CURRICULUM_TITLE, DEFAULT_LOCALE } from "../libs/constants/index.js";
 import * as kumascript from "../kumascript/index.js";
 import LANGUAGES_RAW from "../libs/languages/index.js";
-import { syntaxHighlight } from "./syntax-highlight.js";
+import { wrapCodeExamples } from "./code-headers.js";
 import {
   escapeRegExp,
   injectLoadingLazyAttributes,
@@ -321,7 +321,7 @@ export async function buildCurriculumPage(
     doc.hasMathML = true;
   }
   $("div.hidden").remove();
-  syntaxHighlight($, doc);
+  wrapCodeExamples($);
   injectNoTranslate($);
   injectLoadingLazyAttributes($);
   postProcessCurriculumLinks($, (p: string | undefined) => {

build/index.ts

@@ -28,7 +28,7 @@ import {
 } from "./flaws/index.js";
 import { checkImageReferences, checkImageWidths } from "./check-images.js";
 import { getPageTitle } from "./page-title.js";
-import { syntaxHighlight } from "./syntax-highlight.js";
+import { wrapCodeExamples } from "./code-headers.js";
 import { formatNotecards } from "./format-notecards.js";
 import buildOptions from "./build-options.js";
 import LANGUAGES_RAW from "../libs/languages/index.js";
@@ -456,8 +456,8 @@ export async function buildDocument(
     plainHTML = $.html();
   }
 
-  // Apply syntax highlighting all <pre> tags.
-  syntaxHighlight($, doc);
+  // Add headers to all <pre> tags with code.
+  wrapCodeExamples($);
 
   // Post process HTML so that the right elements gets tagged so they
   // *don't* get translated by tools like Google Translate.
@@ -529,6 +529,8 @@ export async function buildDocument(
 
   doc.other_translations = document.translations || [];
 
+  doc.pageType = metadata["page-type"] || "unknown";
+
   injectSource(doc, document, metadata);
 
   if (document.metadata["short-title"]) {

build/spas.ts

@@ -7,6 +7,7 @@ import { fdir, PathsOutput } from "fdir";
 import got from "got";
 
 import { m2h } from "../markdown/index.js";
+import * as kumascript from "../kumascript/index.js";
 
 import {
   VALID_LOCALES,
@@ -24,26 +25,28 @@ import {
 } from "../libs/env/index.js";
 import { isValidLocale } from "../libs/locale-utils/index.js";
 import { DocFrontmatter, DocParent, NewsItem } from "../libs/types/document.js";
-import { getSlugByBlogPostUrl, splitSections } from "./utils.js";
+import { getSlugByBlogPostUrl, makeTOC } from "./utils.js";
 import { findByURL } from "../content/document.js";
 import { buildDocument } from "./index.js";
 import { findPostBySlug } from "./blog.js";
 import { buildSitemap } from "./sitemaps.js";
 import { type Locale } from "../libs/types/core.js";
 import { HydrationData } from "../libs/types/hydration.js";
+import { extractSections } from "./extract-sections.js";
+import { wrapTables } from "./wrap-tables.js";
 
 const FEATURED_ARTICLES = [
+  "blog/mdn-scrimba-partnership/",
   "blog/learn-javascript-console-methods/",
   "blog/introduction-to-web-sustainability/",
   "docs/Web/API/CSS_Custom_Highlight_API",
-  "docs/Web/CSS/color_value",
 ];
 
 const LATEST_NEWS: (NewsItem | string)[] = [
+  "blog/mdn-scrimba-partnership/",
   "blog/mdn-http-observatory-launch/",
   "blog/mdn-curriculum-launch/",
   "blog/baseline-evolution-on-mdn/",
-  "blog/introducing-the-mdn-playground/",
 ];
 
 const PAGE_DESCRIPTIONS = Object.freeze({
@@ -59,17 +62,31 @@ async function buildContributorSpotlight(
 ) {
   const prefix = "community/spotlight";
   const profileImg = "profile-image.jpg";
+  let featuredContributorFrontmatter: DocFrontmatter;
 
   for (const contributor of fs.readdirSync(contributorSpotlightRoot)) {
-    const markdown = fs.readFileSync(
-      `${contributorSpotlightRoot}/${contributor}/index.md`,
-      "utf-8"
-    );
+    const file = `${contributorSpotlightRoot}/${contributor}/index.md`;
+    const markdown = fs.readFileSync(file, "utf-8");
+    const url = `/${locale}/${prefix}/${contributor}`;
 
     const frontMatter = frontmatter<DocFrontmatter>(markdown);
     const contributorHTML = await m2h(frontMatter.body, { locale });
+    const d = {
+      url,
+      rawBody: contributorHTML,
+      metadata: {
+        locale: DEFAULT_LOCALE,
+        slug: `${prefix}/${contributor}`,
+        url,
+      },
 
-    const { sections } = splitSections(contributorHTML);
+      isMarkdown: true,
+      fileInfo: {
+        path: file,
+      },
+    };
+    const [$] = await kumascript.render(url, {}, d);
+    const [sections] = await extractSections($);
 
     const hyData = {
       sections: sections,
@@ -102,14 +119,19 @@ async function buildContributorSpotlight(
     if (options.verbose) {
       console.log("Wrote", jsonFilePath);
     }
+
     if (frontMatter.attributes.is_featured) {
-      return {
-        contributorName: frontMatter.attributes.contributor_name,
-        url: `/${locale}/${prefix}/${frontMatter.attributes.folder_name}`,
-        quote: frontMatter.attributes.quote,
-      };
+      featuredContributorFrontmatter = frontMatter.attributes;
     }
   }
+
+  return featuredContributorFrontmatter
+    ? {
+        contributorName: featuredContributorFrontmatter.contributor_name,
+        url: `/${locale}/${prefix}/${featuredContributorFrontmatter.folder_name}`,
+        quote: featuredContributorFrontmatter.quote,
+      }
+    : undefined;
 }
 
 export async function buildSPAs(options: {
@@ -277,9 +299,26 @@ export async function buildSPAs(options: {
       const frontMatter = frontmatter<DocFrontmatter>(markdown);
       const rawHTML = await m2h(frontMatter.body, { locale });
 
-      const { sections, toc } = splitSections(rawHTML);
-
       const url = `/${locale}/${slug}/${page}`;
+      const d = {
+        url,
+        rawBody: rawHTML,
+        metadata: {
+          locale: DEFAULT_LOCALE,
+          slug: `${slug}/${page}`,
+          url,
+        },
+
+        isMarkdown: true,
+        fileInfo: {
+          path: file,
+        },
+      };
+      const [$] = await kumascript.render(url, {}, d);
+      wrapTables($);
+      const [sections] = await extractSections($);
+      const toc = makeTOC({ body: sections });
+
       const hyData = {
         id: page,
         ...frontMatter.attributes,