Merge remote-tracking branch 'origin/main' into MP-1369-new-community…

…-page

.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

.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "2.60.1"
+  ".": "2.62.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/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: {
@@ -307,9 +329,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.
  *

client/pwa/package.json

@@ -12,7 +12,7 @@
     "dev": "webpack-cli --watch"
   },
   "dependencies": {
-    "@zip.js/zip.js": "2.7.51",
+    "@zip.js/zip.js": "2.7.52",
     "dexie": "4.0.8"
   },
   "devDependencies": {

client/pwa/yarn.lock

@@ -233,10 +233,10 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
-"@zip.js/[email protected].51":
-  version "2.7.51"
-  resolved "https://registry.yarnpkg.com/@zip.js/zip.js/-/zip.js-2.7.51.tgz#a434e285048b951a5788d3d2d59aa68f209e7141"
-  integrity sha512-RKHaebzZZgQkUuzb49/qweN69e8Np9AUZ9QygydDIrbG1njypSAKwkeqIVeuf2JVGBDyB7Z9HKvzPgYrSlv9gw==
+"@zip.js/[email protected].52":
+  version "2.7.52"
+  resolved "https://registry.yarnpkg.com/@zip.js/zip.js/-/zip.js-2.7.52.tgz#bc11de93b41f09e03155bc178e7f9c2e2612671d"
+  integrity sha512-+5g7FQswvrCHwYKNMd/KFxZSObctLSsQOgqBSi0LzwHo3li9Eh1w5cF5ndjQw9Zbr3ajVnd2+XyiX85gAetx1Q==
 
 acorn-import-attributes@^1.9.5:
   version "1.9.5"
@@ -270,7 +270,7 @@ ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
-braces@^3.0.1:
+braces@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
   integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
@@ -571,12 +571,12 @@ merge-stream@^2.0.0:
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
 micromatch@^4.0.0:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
-  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
   dependencies:
-    braces "^3.0.1"
-    picomatch "^2.2.3"
+    braces "^3.0.3"
+    picomatch "^2.3.1"
 
 [email protected]:
   version "1.51.0"
@@ -646,7 +646,7 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.2.3:
+picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==

client/src/advertising/with_us/index.scss

@@ -25,10 +25,10 @@ main.advertise-with-us {
     }
 
     h1 {
-      @include mify;
       font-size: 3rem;
       margin-top: 8rem;
       text-align: center;
+      @include mify;
 
       &::before {
         background-color: var(--mdn-color-ads);

client/src/contributor-spotlight/index.scss

@@ -50,4 +50,15 @@
       padding: 0.2rem 0.4rem;
     }
   }
+
+  h2 {
+    a {
+      color: var(--text-primary);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
 }

client/src/contributor-spotlight/index.tsx

@@ -11,6 +11,7 @@ import "./index.scss";
 import { useLocale } from "../hooks";
 import { PageNotFound } from "../page-not-found";
 import { Loading } from "../ui/atoms/loading";
+import { Prose } from "../document/ingredients/prose";
 
 type ContributorDetails = {
   sections: [string];
@@ -83,12 +84,14 @@ export function ContributorSpotlight(props: HydrationData<ContributorDetails>) {
           </a>
         </section>
         <section
-          dangerouslySetInnerHTML={{ __html: hyData.sections[0] }}
+          dangerouslySetInnerHTML={{ __html: hyData.sections[0].value.content }}
         ></section>
         <Quote name={hyData.contributorName}>{hyData.quote}</Quote>
 
-        {hyData.sections.slice(1).map((section) => {
-          return <section dangerouslySetInnerHTML={{ __html: section }} />;
+        {hyData.sections.slice(1).map((section, index) => {
+          return (
+            <Prose key={section.value.id || index} section={section.value} />
+          );
         })}
       </main>
       <GetInvolved />

client/src/curriculum/index.scss

@@ -112,6 +112,8 @@
 
 .curriculum-content-container {
   > .curriculum-content {
+    max-width: 100%;
+
     h1,
     h2,
     h3,

client/src/curriculum/landing.scss

@@ -311,15 +311,17 @@
 
       > #stairway1-container {
         --fs: clamp(1rem, calc(3 * calc(100vw / 100)), 1.75rem);
-        @media (min-width: $screen-lg) {
-          --fs: clamp(1rem, calc(2 * calc(100vw / 100)), 1.75rem);
-        }
+
         grid-area: a;
         margin: 0;
         position: relative;
         transform: translateX(2vw);
         width: 100%;
 
+        @media (min-width: $screen-lg) {
+          --fs: clamp(1rem, calc(2 * calc(100vw / 100)), 1.75rem);
+        }
+
         #stairway1 {
           font-size: var(--fs);
           left: 32%;
@@ -341,13 +343,15 @@
 
       > #stairway2-container {
         --fs: clamp(0.75rem, calc(1.25 * calc(100vw / 100)), 1rem);
-        @media (min-width: $screen-md) {
-          --fs: clamp(0.75rem, calc(100vw / 100), 0.825rem);
-        }
+
         grid-area: b;
         position: relative;
         transform: translateX(-5vw);
 
+        @media (min-width: $screen-md) {
+          --fs: clamp(0.75rem, calc(100vw / 100), 0.825rem);
+        }
+
         #stairway2 {
           font-size: var(--fs);
           height: 100%;

client/src/curriculum/landing.tsx

@@ -42,12 +42,15 @@ export function CurriculumLanding(appProps: HydrationData<any, CurriculumDoc>) {
           }
           if (section.value.id === "modules") {
             const { title, id } = (section as ProseSection).value;
+            console.log(title);
             return (
               <>
                 <section key={`${id}-1`} className="modules">
                   {title && <DisplayH2 id={id} title={title} />}
                   {doc?.modules && <ModulesListList modules={doc.modules} />}
                 </section>
+                <PartnerBanner />
+
                 <section key={`${id}-2`} className="landing-stairway">
                   <div>
                     <div id="stairway1-container">
@@ -100,7 +103,6 @@ export function CurriculumLanding(appProps: HydrationData<any, CurriculumDoc>) {
           return null;
         }}
       />
-      <PartnerBanner />
     </CurriculumLayout>
   );
 }