chore(spas): re-use section from docs for spas (#11742)

* chore(spas): re-use section from docs for spas

We were using custom section for SPAS. Now we use the same as
everywhere.

* lint

* lint

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,13 +25,15 @@ 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/",
@@ -61,15 +64,28 @@ async function buildContributorSpotlight(
   const profileImg = "profile-image.jpg";
 
   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,
@@ -277,9 +293,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/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/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/homepage/static-page/index.tsx

@@ -3,15 +3,16 @@ import useSWR from "swr";
 import { DEV_MODE, PLACEMENT_ENABLED } from "../../env";
 import { SidebarContainer } from "../../document/organisms/sidebar";
 import { TOC } from "../../document/organisms/toc";
-import { Toc } from "../../../../libs/types/document";
+import { Section, Toc } from "../../../../libs/types/document";
 import { PageNotFound } from "../../page-not-found";
 import { Loading } from "../../ui/atoms/loading";
 import { SidePlacement } from "../../ui/organisms/placement";
+import { Prose } from "../../document/ingredients/prose";
 
 interface StaticPageDoc {
   id: string;
   title: string;
-  sections: string[];
+  sections: Section[];
   toc: Toc[];
 }
 
@@ -86,10 +87,7 @@ function StaticPage({
         <main id="content" className="main-content" role="main">
           <article className={`main-page-content ${extraClasses || ""}`}>
             {hyData.sections.map((section, index) => (
-              <section
-                key={index}
-                dangerouslySetInnerHTML={{ __html: section }}
-              ></section>
+              <Prose key={section.value.id || index} section={section.value} />
             ))}
             {children}
           </article>

libs/types/document.ts

@@ -228,7 +228,7 @@ export interface BuildData {
   url: string;
   rawBody: string;
   metadata: { locale: Locale };
-  isMarkdown: true;
+  isMarkdown: boolean;
   fileInfo: {
     path: string;
   };