Merge remote-tracking branch 'origin/main' into bundlesize-compare

.github/workflows/prod-build.yml

@@ -349,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

@@ -365,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

@@ -245,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 \
@@ -264,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.62.0"
+  ".": "2.63.1"
 }

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.

client/config/webpack.config.js

@@ -395,31 +395,16 @@ function config(webpackEnv) {
     },
     plugins: [
       // Generates an `index.html` file with the <script> injected.
-      new HtmlWebpackPlugin(
-        Object.assign(
-          {},
-          {
-            inject: true,
-            template: paths.appHtml,
-          },
-          isEnvProduction
-            ? {
-                minify: {
-                  removeComments: true,
-                  collapseWhitespace: true,
-                  removeRedundantAttributes: true,
-                  useShortDoctype: true,
-                  removeEmptyAttributes: true,
-                  removeStyleLinkTypeAttributes: true,
-                  keepClosingSlash: true,
-                  minifyJS: true,
-                  minifyCSS: true,
-                  minifyURLs: true,
-                },
-              }
-            : undefined
-        )
-      ),
+      isEnvDevelopment &&
+        new HtmlWebpackPlugin(
+          Object.assign(
+            {},
+            {
+              inject: true,
+              template: paths.appHtml,
+            }
+          )
+        ),
       // Makes some environment variables available to the JS code, for example:
       // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
       // It is absolutely essential that NODE_ENV is set to production