Merge branch 'main' into MP-1242-redirect-to-preferred-locale

.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

@@ -225,10 +225,10 @@ jobs:
           REACT_APP_MDN_PLUS_10Y_PLAN: price_1KeG02JNcmPzuWtRlrSiLTI6
 
           # Surveys.
-          REACT_APP_SURVEY_START_DISCOVERABILITY_AUG_2023: 1691409600000 # new Date("2023-08-07 12:00:00Z").getTime()
-          REACT_APP_SURVEY_END_DISCOVERABILITY_AUG_2023: 1691841600000 # new Date("2023-08-12 12:00:00Z").getTime()
-          REACT_APP_SURVEY_RATE_FROM_DISCOVERABILITY_AUG_2023: 0.0
-          REACT_APP_SURVEY_RATE_TILL_DISCOVERABILITY_AUG_2023: 0.10 # 10%
+          REACT_APP_SURVEY_START_WEB_APP_AUGUST_2024: 1722816000000 # new Date("2024-08-05Z").getTime()
+          REACT_APP_SURVEY_END_WEB_APP_AUGUST_2024: 1723593600000 # new Date("2024-08-14Z").getTime()
+          REACT_APP_SURVEY_RATE_FROM_WEB_APP_AUGUST_2024: 0.0
+          REACT_APP_SURVEY_RATE_TILL_WEB_APP_AUGUST_2024: 0.05 # 5%
 
           # Telemetry.
           REACT_APP_GLEAN_CHANNEL: prod
@@ -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"

.github/workflows/stage-build.yml

@@ -242,10 +242,10 @@ jobs:
           REACT_APP_MDN_PLUS_10Y_PLAN: price_1K6X8VKb9q6OnNsLFlUcEiu4
 
           # Surveys.
-          REACT_APP_SURVEY_START_DISCOVERABILITY_AUG_2023: 0 # stage
-          REACT_APP_SURVEY_END_DISCOVERABILITY_AUG_2023: 1691841600000 # new Date("2023-08-12 12:00:00Z").getTime()
-          REACT_APP_SURVEY_RATE_FROM_DISCOVERABILITY_AUG_2023: 0.0
-          REACT_APP_SURVEY_RATE_TILL_DISCOVERABILITY_AUG_2023: 0.10 # 10%
+          REACT_APP_SURVEY_START_WEB_APP_AUGUST_2024: 0 # stage
+          REACT_APP_SURVEY_END_WEB_APP_AUGUST_2024: 1723593600000 # new Date("2024-08-14Z").getTime()
+          REACT_APP_SURVEY_RATE_FROM_WEB_APP_AUGUST_2024: 0.0
+          REACT_APP_SURVEY_RATE_TILL_WEB_APP_AUGUST_2024: 0.05 # 5%
 
           # Telemetry.
           REACT_APP_GLEAN_CHANNEL: stage
@@ -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"

.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"

.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "2.60.0"
+  ".": "2.63.0"
 }

.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/index.ts

@@ -43,7 +43,7 @@ import {
   postProcessExternalLinks,
   postProcessSmallerHeadingIDs,
 } from "./utils.js";
-import { getWebFeatureStatus } from "./web-features.js";
+import { addBaseline } from "./web-features.js";
 export { default as SearchIndex } from "./search-index.js";
 export { gather as gatherGitHistory } from "./git-history.js";
 export { buildSPAs } from "./spas.js";
@@ -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"]) {
@@ -550,54 +552,6 @@ export async function buildDocument(
   return { doc: doc as Doc, liveSamples, fileAttachmentMap, plainHTML };
 }
 
-function addBaseline(doc: Partial<Doc>) {
-  if (doc.browserCompat && !doc.mdn_url?.includes("/docs/MDN/")) {
-    const filteredBrowserCompat = doc.browserCompat.filter(
-      (query) =>
-        // temporary blocklist while we wait for per-key baseline statuses
-        // or another solution to the baseline/bcd table discrepancy problem
-        ![
-          // https://github.com/web-platform-dx/web-features/blob/cf718ad/feature-group-definitions/async-clipboard.yml
-          "api.Clipboard.read",
-          "api.Clipboard.readText",
-          "api.Clipboard.write",
-          "api.Clipboard.writeText",
-          "api.ClipboardEvent",
-          "api.ClipboardEvent.ClipboardEvent",
-          "api.ClipboardEvent.clipboardData",
-          "api.ClipboardItem",
-          "api.ClipboardItem.ClipboardItem",
-          "api.ClipboardItem.getType",
-          "api.ClipboardItem.presentationStyle",
-          "api.ClipboardItem.types",
-          "api.Navigator.clipboard",
-          "api.Permissions.permission_clipboard-read",
-          // https://github.com/web-platform-dx/web-features/blob/cf718ad/feature-group-definitions/custom-elements.yml
-          "api.CustomElementRegistry",
-          "api.CustomElementRegistry.builtin_element_support",
-          "api.CustomElementRegistry.define",
-          "api.Window.customElements",
-          "css.selectors.defined",
-          "css.selectors.host",
-          "css.selectors.host-context",
-          "css.selectors.part",
-          // https://github.com/web-platform-dx/web-features/blob/cf718ad/feature-group-definitions/input-event.yml
-          "api.Element.input_event",
-          "api.InputEvent.InputEvent",
-          "api.InputEvent.data",
-          "api.InputEvent.dataTransfer",
-          "api.InputEvent.getTargetRanges",
-          "api.InputEvent.inputType",
-          // https://github.com/web-platform-dx/web-features/issues/1038
-          // https://github.com/web-platform-dx/web-features/blob/64d2cfd/features/screen-orientation-lock.dist.yml
-          "api.ScreenOrientation.lock",
-          "api.ScreenOrientation.unlock",
-        ].includes(query)
-    );
-    return getWebFeatureStatus(...filteredBrowserCompat);
-  }
-}
-
 interface BuiltLiveSamplePage {
   id: string;
   html: string | null;

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,

build/syntax-highlight.ts

@@ -32,6 +32,7 @@ const loadAllLanguages = lazy(() => {
     "diff",
     "django",
     "glsl",
+    "go",
     "handlebars",
     "http",
     "ignore",

build/utils.ts

@@ -148,40 +148,6 @@ export function getImageminPlugin(fileName: string) {
   throw new Error(`No imagemin plugin for ${extension}`);
 }
 
-export function splitSections(rawHTML) {
-  const $ = cheerio.load(`<div id="_body">${rawHTML}</div>`);
-  const blocks = [];
-  const toc = [];
-
-  const section = cheerio
-    .load("<div></div>", { decodeEntities: false })("div")
-    .eq(0);
-
-  const iterable = [...($("#_body")[0] as cheerio.Element).childNodes];
-  let c = 0;
-  iterable.forEach((child) => {
-    if ("tagName" in child && child.tagName === "h2") {
-      if (c) {
-        blocks.push(section.clone());
-        section.empty();
-        c = 0;
-      }
-      const text = $(child).text();
-      const id = text.replace(/[ .,!?]+/g, "-").toLowerCase();
-      toc.push({ id, text });
-      child.attribs = { ...(child.attribs || {}), id };
-    }
-    c++;
-    section.append(child);
-  });
-  if (c) {
-    blocks.push(section.clone());
-  }
-
-  const sections = blocks.map((block) => block.html().trim());
-  return { sections, toc };
-}
-
 /**
  * Return an array of all images that are inside the documents source folder.
  *

build/web-features.ts

@@ -1,16 +1,41 @@
-import webFeatures from "web-features";
+import { features } from "web-features";
+import { computeBaseline } from "compute-baseline";
 
-export function getWebFeatureStatus(...features: string[]) {
-  if (features.length === 0) {
-    return;
+import type { Doc } from "../libs/types/document.js";
+
+export function addBaseline(doc: Partial<Doc>) {
+  if (
+    doc.browserCompat &&
+    doc.browserCompat.length == 1 &&
+    !doc.mdn_url?.includes("/docs/MDN/")
+  ) {
+    const bcdKey = doc.browserCompat[0];
+    const { featureStatus, keyStatus } = getStatuses(bcdKey);
+
+    if (!featureStatus) {
+      return;
+    }
+
+    if (featureStatus.baseline !== keyStatus.baseline) {
+      return;
+    }
+
+    return featureStatus;
   }
+}
 
-  for (const feature of Object.values(webFeatures)) {
-    if (
-      feature.status &&
-      feature.compat_features?.some((feature) => features.includes(feature))
-    ) {
-      return feature.status;
+function getStatuses(bcdKey: string) {
+  for (const feature of Object.values(features)) {
+    if (feature.status && feature.compat_features?.includes(bcdKey)) {
+      try {
+        return {
+          featureStatus: feature.status,
+          keyStatus: computeBaseline({ compatKeys: [bcdKey] }),
+        };
+      } catch (e) {
+        console.error(e);
+      }
     }
   }
+  return {};
 }