feedback 1

mdn · Feb 23, 2024 · aa44f4a · aa44f4a
1 parent 3d8dbb4
commit aa44f4a
Show file tree

Hide file tree

Showing 13 changed files with 90 additions and 95 deletions.
diff --git a/build/curriculum.ts b/build/curriculum.ts
@@ -1,4 +1,9 @@
+import path from "node:path";
+import fs from "node:fs/promises";
+
 import { fdir } from "fdir";
+import frontmatter from "front-matter";
+
 import { BUILD_OUT_ROOT, CURRICULUM_ROOT } from "../libs/env/index.js";
 import { Doc, DocParent } from "../libs/types/document.js";
 import { DEFAULT_LOCALE } from "../libs/constants/index.js";
@@ -17,8 +22,6 @@ import {
 } from "./utils.js";
 import { wrapTables } from "./wrap-tables.js";
 import { extractSections } from "./extract-sections.js";
-import path from "node:path";
-import fs from "node:fs/promises";
 import {
   CurriculumFrontmatter,
   CurriculumData,
@@ -30,12 +33,12 @@ import {
   ReadCurriculum,
   CurriculumBuildData,
 } from "../libs/types/curriculum.js";
-import frontmatter from "front-matter";
 import { HydrationData } from "../libs/types/hydration.js";
 import { memoize, slugToFolder } from "../content/utils.js";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { renderHTML } from "../ssr/dist/main.js";
+import { CheerioAPI } from "cheerio";
 
 export const allFiles = memoize(async () => {
   const api = new fdir()
@@ -62,7 +65,7 @@ export const buildIndex = memoize(async () => {
   return modules;
 });
 
-export function fileToSlug(file) {
+export function fileToSlug(file: string) {
   return file
     .replace(`${CURRICULUM_ROOT}/`, "")
     .replace(/(\d+-|\.md$|\/0?-?README)/g, "");
@@ -116,7 +119,7 @@ async function buildCurriculumSidebar(): Promise<CurriculumIndexEntry[]> {
   return index;
 }
 
-function prevNextFromIndex(i, index): PrevNext {
+function prevNextFromIndex(i: number, index): PrevNext {
   const prev = i > 0 ? index[i - 1] : undefined;
   const next = i < index.length - 1 ? index[i + 1] : undefined;
 
@@ -239,16 +242,14 @@ async function readCurriculumPage(
 export async function findCurriculumPageBySlug(
   slug: string
 ): Promise<CurriculumData | null> {
-  let file = await slugToFile(slug);
-  if (!file) {
-    file = await slugToFile(`${slug}${slug ? "/" : ""}README`);
-  }
-  let module;
+  const file =
+    (await slugToFile(slug)) || (await slugToFile(path.join(slug, "README")));
+  let module: ReadCurriculum;
   try {
     module = await readCurriculumPage(file, { forIndex: false });
   } catch (e) {
     console.error(`No file found for ${slug}: ${e}`);
-    return;
+    return null;
   }
   const { body, meta } = module;
 
@@ -272,10 +273,9 @@ export async function buildCurriculumPage(
   const { metadata } = document;
 
   const doc = { locale: DEFAULT_LOCALE } as Partial<CurriculumDoc>;
-  let $ = null;
 
   const renderUrl = document.url.replace(/\/$/, "");
-  [$] = await kumascript.render(renderUrl, {}, document as any);
+  const [$] = await kumascript.render(renderUrl, {}, document as any);
 
   $("[data-token]").removeAttr("data-token");
   $("[data-flaw-src]").removeAttr("data-flaw-src");
@@ -369,7 +369,7 @@ export async function buildCurriculum(options: {
 
     await fs.mkdir(outPath, { recursive: true });
 
-    const html = renderHTML(`/${locale}/${meta.slug}/`, context);
+    const html: string = renderHTML(`/${locale}/${meta.slug}/`, context);
 
     const filePath = path.join(outPath, "index.html");
     const jsonFilePath = path.join(outPath, "index.json");
@@ -384,7 +384,7 @@ export async function buildCurriculum(options: {
   }
 }
 
-function setCurriculumTypes($) {
+function setCurriculumTypes($: CheerioAPI) {
   $("p").each((_, child) => {
     const p = $(child);
     const text = p.text();

diff --git a/build/utils.ts b/build/utils.ts
@@ -245,11 +245,11 @@ export function postProcessExternalLinks($) {
 
 /**
  * For every `<a href="... curriculum ... .md ...">` remove the ".md"
- *
- * @param {Cheerio document instance} $
- * @param {current url} url
  */
-export function postProcessCurriculumLinks($, toUrl) {
+export function postProcessCurriculumLinks(
+  $: cheerio.CheerioAPI,
+  toUrl: (x?: string) => string
+) {
   // expand relative links
   $("a[href^=.]").each((_, element) => {
     const $a = $(element);
@@ -259,20 +259,20 @@ export function postProcessCurriculumLinks($, toUrl) {
   // remove trailing .md for /en-US/curriculum/*
   $("a[href^=/en-US/curriculum]").each((_, element) => {
     const $a = $(element);
-    $a.attr("href", $a.attr("href").replace(/(.*)\.md(#.*|$)/, "$1/$2"));
+    $a.attr("href", $a.attr("href")?.replace(/(.*)\.md(#.*|$)/, "$1/$2"));
   });
 
   // remove trailing .md and add locale for /curriculum/*
   $("a[href^=/curriculum]").each((_, element) => {
     const $a = $(element);
-    $a.attr("href", $a.attr("href").replace(/(.*)\.md(#.*|$)/, "/en-US$1/$2"));
+    $a.attr("href", $a.attr("href")?.replace(/(.*)\.md(#.*|$)/, "/en-US$1/$2"));
   });
 
   // remove leading numbers for /en-US/curriculum/*
   // /en-US/curriculum/2-core/ -> /en-US/curriculum/core/
   $("a[href^=/en-US/curriculum]").each((_, element) => {
     const $a = $(element);
-    const [head, hash] = $a.attr("href").split("#");
+    const [head, hash] = $a.attr("href")?.split("#") || [];
     $a.attr("href", `${head.replace(/\d+-/g, "")}${hash ? `#${hash}` : ""}`);
   });
 }

diff --git a/client/src/curriculum/about.tsx b/client/src/curriculum/about.tsx
@@ -11,20 +11,16 @@ export function CurriculumAbout(props: HydrationData<any, CurriculumDoc>) {
   const doc = useCurriculumDoc(props as CurriculumData);
   const [coloredTitle, ...restTitle] = doc?.title?.split(" ") || [];
   return (
-    <>
-      {doc && (
-        <CurriculumLayout
-          doc={doc}
-          extraClasses={["curriculum-about", `topic-${topic2css(doc.topic)}`]}
-        >
-          <header>
-            <h1>
-              <span>{coloredTitle}</span> {restTitle.join(" ")}
-            </h1>
-          </header>
-          <RenderCurriculumBody doc={doc} />
-        </CurriculumLayout>
-      )}
-    </>
+    <CurriculumLayout
+      doc={doc}
+      extraClasses={["curriculum-about", `topic-${topic2css(doc?.topic)}`]}
+    >
+      <header>
+        <h1>
+          <span>{coloredTitle}</span> {restTitle.join(" ")}
+        </h1>
+      </header>
+      <RenderCurriculumBody doc={doc} />
+    </CurriculumLayout>
   );
 }
diff --git a/client/src/curriculum/body.tsx b/client/src/curriculum/body.tsx
@@ -6,10 +6,10 @@ export function RenderCurriculumBody({
   doc,
   renderer = () => null,
 }: {
-  doc: CurriculumDoc;
+  doc?: CurriculumDoc;
   renderer?: (section: Section, i: number) => null | JSX.Element;
 }) {
-  return doc.body.map((section, i) => {
+  return doc?.body.map((section, i) => {
     return (
       renderer(section, i) || (
         <Prose key={section.value.id} section={section.value} />

diff --git a/client/src/curriculum/landing.scss b/client/src/curriculum/landing.scss
@@ -309,7 +309,7 @@
       }
 
       > #stairway2-container {
-        --fs: clamp(0.825rem, calc(1.25 * calc(100vw / 100)), 1rem);
+        --fs: clamp(0.75rem, calc(1.25 * calc(100vw / 100)), 1rem);
         @media screen and (min-width: $screen-md) {
           --fs: clamp(0.75rem, calc(100vw / 100), 0.825rem);
         }

diff --git a/client/src/curriculum/landing.tsx b/client/src/curriculum/landing.tsx
@@ -43,7 +43,7 @@ export function CurriculumLanding(appProps: HydrationData<any, CurriculumDoc>) {
               <>
                 <section key={`${section.value.id}-1`} className="modules">
                   <DisplayH2 id={id} title={title} titleAsText={titleAsText} />
-                  {doc.modules && <ModulesListList modules={doc.modules} />}
+                  {doc?.modules && <ModulesListList modules={doc.modules} />}
                 </section>
                 <section
                   key={`${section.value.id}-2`}

diff --git a/client/src/curriculum/overview.tsx b/client/src/curriculum/overview.tsx
@@ -14,28 +14,21 @@ export function CurriculumModuleOverview(
   const doc = useCurriculumDoc(props as CurriculumData);
   const [coloredTitle, ...restTitle] = doc?.title?.split(" ") || [];
   return (
-    <>
-      {doc && (
-        <CurriculumLayout
-          doc={doc}
-          extraClasses={[
-            "curriculum-overview",
-            `topic-${topic2css(doc.topic)}`,
-          ]}
-        >
-          <header>
-            <h1>
-              <span>{coloredTitle}</span> {restTitle.join(" ")}
-            </h1>
-          </header>
-          <RenderCurriculumBody doc={doc} />
-          <section className="module-contents">
-            <h2>Module Contents</h2>
-            {doc.modules && <ModulesList modules={doc.modules} />}
-          </section>
-          <PrevNext doc={doc} />
-        </CurriculumLayout>
-      )}
-    </>
+    <CurriculumLayout
+      doc={doc}
+      extraClasses={["curriculum-overview", `topic-${topic2css(doc?.topic)}`]}
+    >
+      <header>
+        <h1>
+          <span>{coloredTitle}</span> {restTitle.join(" ")}
+        </h1>
+      </header>
+      <RenderCurriculumBody doc={doc} />
+      <section className="module-contents">
+        <h2>Module Contents</h2>
+        {doc?.modules && <ModulesList modules={doc.modules} />}
+      </section>
+      <PrevNext doc={doc} />
+    </CurriculumLayout>
   );
 }
diff --git a/client/src/curriculum/prev-next.tsx b/client/src/curriculum/prev-next.tsx
@@ -3,27 +3,18 @@ import { Button } from "../ui/atoms/button";
 
 import "./prev-next.scss";
 
-export function PrevNext({ doc }: { doc: CurriculumDoc }) {
+export function PrevNext({ doc }: { doc?: CurriculumDoc }) {
+  const { prev, next } = doc?.prevNext || {};
   return (
     <section className="curriculum-prev-next">
-      {doc.prevNext?.prev && (
-        <Button
-          type="primary"
-          target="_self"
-          icon="cur-prev"
-          href={doc.prevNext?.prev?.url}
-        >
-          Previous: {doc.prevNext?.prev?.title}
+      {prev && (
+        <Button type="primary" target="_self" icon="cur-prev" href={prev?.url}>
+          Previous: {prev?.title}
         </Button>
       )}
-      {doc.prevNext?.next && (
-        <Button
-          type="primary"
-          target="_self"
-          icon="cur-next"
-          href={doc.prevNext?.next?.url}
-        >
-          Next: {doc.prevNext?.next?.title}
+      {next && (
+        <Button type="primary" target="_self" icon="cur-next" href={next?.url}>
+          Next: {next?.title}
         </Button>
       )}
     </section>

diff --git a/client/src/curriculum/sidebar.tsx b/client/src/curriculum/sidebar.tsx
@@ -16,41 +16,46 @@ export function Sidebar({
       data-current={current}
     >
       <ol>
-        {sidebar.map((o, i) => (
+        {sidebar.map((entry, i) => (
           <li
-            className={o.children && o.children?.length ? "toggle" : ""}
+            className={entry.children && entry.children?.length ? "toggle" : ""}
             key={`sb-${i}`}
           >
-            {o.children && o.children?.length ? (
+            {entry.children && entry.children?.length ? (
               <details
                 open={
-                  o.children.some((c) => c.url === current) || o.url === current
+                  entry.children.some((c) => c.url === current) ||
+                  entry.url === current
                 }
               >
-                <summary>{o.title} module</summary>
+                <summary>{entry.title} module</summary>
                 <ol>
                   <li>
                     <SidebarLink
                       current={current}
-                      url={o.url}
-                      title={`${o.title} overview`}
+                      url={entry.url}
+                      title={`${entry.title} overview`}
                     />
                   </li>
-                  {o.children.map((c, j) => {
+                  {entry.children.map((subEntry, j) => {
                     return (
                       <li key={`sb-${i}-${j}`}>
                         <SidebarLink
                           current={current}
-                          url={c.url}
-                          title={c.title}
+                          url={subEntry.url}
+                          title={subEntry.title}
                         />
                       </li>
                     );
                   })}
                 </ol>
               </details>
             ) : (
-              <SidebarLink current={current} url={o.url} title={o.title} />
+              <SidebarLink
+                current={current}
+                url={entry.url}
+                title={entry.title}
+              />
             )}
           </li>
         ))}

diff --git a/client/src/curriculum/utils.ts b/client/src/curriculum/utils.ts
@@ -44,7 +44,9 @@ export function useDocTitle(doc?: CurriculumDoc) {
   }, [doc]);
 }
 
-export function useCurriculumDoc(appProps: CurriculumData) {
+export function useCurriculumDoc(
+  appProps: CurriculumData
+): CurriculumDoc | undefined {
   const dataURL = `./index.json`;
   const { data } = useSWR<CurriculumDoc>(
     dataURL,

diff --git a/client/src/placement-context.tsx b/client/src/placement-context.tsx
@@ -21,7 +21,7 @@ export interface PlacementContextData
 }
 
 const PLACEMENT_MAP: Record<PlacementType, RegExp> = {
-  side: /\/[^/]+\/(observatory|play|docs\/|blog\/|curriculum\/[^$]|search$)/i,
+  side: /\/[^/]+\/(play|docs\/|blog\/|curriculum\/[^$]|search$)/i,
   top: /\/[^/]+\/(?!$|_homepage$).*/i,
   hpMain: /\/[^/]+\/($|_homepage$)/i,
   hpFooter: /\/[^/]+\/($|_homepage$)/i,

diff --git a/client/src/ui/molecules/main-menu/index.tsx b/client/src/ui/molecules/main-menu/index.tsx
@@ -82,7 +82,9 @@ export default function MainMenu({ isOpenOnMobile }) {
             toggleMenu={toggleMenu}
           />
         )}
-        <TopLevelMenuLink to="/en-US/curriculum/">Curriculum</TopLevelMenuLink>
+        <TopLevelMenuLink to="/en-US/curriculum/">
+          Curriculum<sup className="new">New</sup>
+        </TopLevelMenuLink>
         <TopLevelMenuLink to="/en-US/blog/">Blog</TopLevelMenuLink>
         <TopLevelMenuLink to={`/${locale}/play`}>Play</TopLevelMenuLink>
         <TopLevelMenuLink to="/en-US/plus/ai-help">

diff --git a/docs/envvars.md b/docs/envvars.md
@@ -44,6 +44,12 @@ https://github.com/mdn/translated-content.
 Path to the contributor spotlight content, cloned from
 https://github.com/mdn/mdn-contributor-spotlight.
 
+### `CURRICULUM_ROOT`
+
+**Default: `../curriculum`**
+
+Path to the curriculum content, cloned from https://github.com/mdn/curriculum.
+
 ### `BUILD_FOLDERSEARCH`
 
 **Default: ``** (meaning, none)