feat(curriculum): add numbers to modules and fixes (#10805)

* feat(curriculum): add numbers to modules and fixes

This resolves:
- MP-948 Supporting numbers in the titles
- MP 949 Make sure to use modules instead of module
- MP-971 Add the group label on module pages
- #10734 and #10719 Makeing the whole module card a link
- Steamline one of the dark background colors

* change break point for module header + note color

* Update build/curriculum.ts

Co-authored-by: Claas Augner <[email protected]>

---------

Co-authored-by: Claas Augner <[email protected]>

build/curriculum.ts

@@ -191,7 +191,7 @@ async function readCurriculumPage(
   const raw = await fs.readFile(file, "utf-8");
   const { attributes, body: rawBody } = frontmatter<CurriculumFrontmatter>(raw);
   const filename = file.replace(CURRICULUM_ROOT, "").replace(/^\/?/, "");
-  let title = rawBody.match(/^[\w\n]*#+(.*\n)/)[1]?.trim() || "";
+  const title = rawBody.match(/^[\w\n]*#+(.*\n)/)[1]?.trim() || "";
   const body = rawBody.replace(/^[\w\n]*#+(.*\n)/, "");
 
   const slug = fileToSlug(file);
@@ -202,6 +202,7 @@ async function readCurriculumPage(
 
   let modules: CurriculumIndexEntry[];
   let prevNext: PrevNext;
+  let group: string;
   if (!options?.forIndex) {
     if (attributes.template === Template.Landing) {
       modules = (await buildCurriculumIndex())?.filter(
@@ -220,11 +221,12 @@ async function readCurriculumPage(
 
     sidebar = await buildCurriculumSidebar();
     parents = await buildParents(url);
-  } else {
-    title = title
-      .replace(/^\d+\s+/, "") // Strip number prefix.
-      .replace(/ modules$/, "") // Strip "modules" suffix.
-      .replace(/Extension \d+:/, ""); // Strip "Extension" prefix.
+    if (parents.length > 1) {
+      const title = parents.at(-2)?.title;
+      if (title?.endsWith(" modules")) {
+        group = title;
+      }
+    }
   }
 
   return {
@@ -237,6 +239,7 @@ async function readCurriculumPage(
       modules,
       parents,
       prevNext,
+      group,
       ...attributes,
     },
     body,
@@ -284,7 +287,7 @@ export async function buildCurriculumPage(
   $("[data-token]").removeAttr("data-token");
   $("[data-flaw-src]").removeAttr("data-flaw-src");
 
-  doc.title = metadata.title.replace(/^\d+\s+/, "");
+  doc.title = metadata.title;
   doc.mdn_url = document.url;
   doc.locale = metadata.locale;
   doc.native = LANGUAGES_RAW[DEFAULT_LOCALE]?.native;
@@ -323,14 +326,13 @@ export async function buildCurriculumPage(
     : CURRICULUM_TITLE;
 
   doc.noIndexing = false;
-  doc.toc = makeTOC(doc, true).map(({ text, id }) => {
-    return { text: text.replace(/^[\d.]+\s+/, ""), id };
-  });
+  doc.toc = makeTOC(doc, true);
   doc.sidebar = metadata.sidebar;
   doc.modules = metadata.modules;
   doc.prevNext = metadata.prevNext;
   doc.parents = metadata.parents;
   doc.topic = metadata.topic;
+  doc.group = metadata.group;
 
   return doc as CurriculumDoc;
 }

client/src/curriculum/module.scss

@@ -5,8 +5,16 @@
     > header {
       column-gap: 1.5rem;
       display: grid;
-      grid-template-areas: "icon heading" "icon category";
+      grid-template-areas:
+        ". group"
+        "icon heading"
+        "icon category";
       justify-content: flex-start;
+      @media screen and (min-width: $screen-md) {
+        grid-template-areas:
+          "icon heading group"
+          "icon category .";
+      }
 
       .topic-icon {
         --background-primary: var(--curriculum-bg-color-topic);
@@ -21,7 +29,7 @@
         }
       }
 
-      p {
+      p.module-topic {
         color: var(--curriculum-color-topic);
         font-size: var(--type-smaller-font-size);
         grid-area: category;
@@ -32,6 +40,20 @@
           content: "Category: ";
         }
       }
+
+      p.module-group {
+        align-self: center;
+        background-color: var(--curriculum-module-label-bg-color);
+        border-radius: var(--elem-radius);
+        color: var(--curriculum-module-label-color);
+        font-size: var(--type-smaller-font-size);
+        grid-area: group;
+        height: max-content;
+        margin: 0;
+        margin-bottom: 0.25rem;
+        padding: 0.125rem 0.5rem;
+        width: fit-content;
+      }
     }
 
     p.curriculum-resources {

client/src/curriculum/module.tsx

@@ -19,7 +19,8 @@ export function CurriculumModule(props: HydrationData<any, CurriculumDoc>) {
       <header>
         {doc?.topic && <TopicIcon topic={doc?.topic} />}
         <h1>{doc?.title}</h1>
-        {doc?.topic && <p>{doc?.topic}</p>}
+        {doc?.topic && <p className="module-topic">{doc.topic}</p>}
+        {doc?.group && <p className="module-group">{doc.group}</p>}
       </header>
       <RenderCurriculumBody doc={doc} />
       <PrevNext doc={doc} />

client/src/curriculum/modules-list.scss

@@ -127,8 +127,6 @@
     }
 
     ol.modules-list {
-      container-name: module-list;
-      container-type: inline-size;
       display: grid;
       flex-wrap: wrap;
       gap: 1rem;
@@ -148,41 +146,40 @@
       }
 
       li.module-list-item {
-        background-color: var(--curriculum-bg-color-list-item-body);
-        border: 1px solid var(--curriculum-border-color-list-item);
-        border-radius: var(--elem-radius);
-        box-shadow: var(--curriculum-shadow);
-        display: flex;
-        flex-direction: column;
-        justify-self: center;
-        max-width: 20rem;
-        min-width: 15rem;
-        overflow: auto;
-        padding: 0;
-        scroll-snap-align: center;
-        width: 100%;
+        display: block;
 
-        @media screen and (min-width: $screen-md) {
-          min-width: initial;
-        }
+        > a {
+          background-color: var(--curriculum-bg-color-list-item-body);
+          border: 1px solid var(--curriculum-border-color-list-item);
+          border-radius: var(--elem-radius);
+          box-shadow: var(--curriculum-shadow);
+          display: flex;
+          flex-direction: column;
+          justify-self: center;
+          max-width: 20rem;
+          min-width: 15rem;
+          overflow: auto;
+          padding: 0;
+          scroll-snap-align: center;
+          text-decoration: none;
+          width: 100%;
+
+          &:hover {
+            border-color: var(--curriculum-border-color-list-item-hover);
+            text-decoration: none;
+          }
 
-        &:hover {
-          border-color: var(--curriculum-border-color-list-item-hover);
-        }
+          @media screen and (min-width: $screen-md) {
+            min-width: initial;
+          }
 
-        > header {
-          a {
+          > header {
             align-items: center;
             background-color: var(--curriculum-bg-color-list-item-header);
             display: flex;
             flex-direction: column;
             height: 10rem;
-            padding: 1rem 2rem;
-            text-decoration: none;
-
-            &:hover {
-              text-decoration: underline;
-            }
+            padding: 1rem;
 
             svg.topic-icon {
               height: 4rem;
@@ -204,26 +201,26 @@
               text-align: center;
             }
           }
-        }
 
-        > section {
-          align-items: center;
-          display: flex;
-          flex-direction: column;
-          font-size: var(--type-smaller-font-size);
-          height: 11rem;
-          justify-content: space-between;
-          padding: 1rem 1.5rem;
-
-          p {
-            color: var(--text-secondary);
-            margin: 0;
-            text-align: center;
-          }
+          > section {
+            align-items: center;
+            display: flex;
+            flex-direction: column;
+            font-size: var(--type-smaller-font-size);
+            height: 11rem;
+            justify-content: space-between;
+            padding: 1rem 1.5rem;
+
+            p {
+              color: var(--text-secondary);
+              margin: 0;
+              text-align: center;
+            }
 
-          p:last-child {
-            color: var(--curriculum-color-topic);
-            font-weight: 600;
+            p:last-child {
+              color: var(--curriculum-color-topic);
+              font-weight: 600;
+            }
           }
         }
       }

client/src/curriculum/modules-list.tsx

@@ -29,7 +29,9 @@ export function ModulesListList({
               checked={i === tab}
               onChange={() => setTab(i)}
             />
-            <label htmlFor={`module-${i}`}>{modulesList.title}</label>
+            <label htmlFor={`module-${i}`}>
+              {modulesList.title.replace(/ modules$/, "")}
+            </label>
             {modulesList.children?.length && (
               <>
                 <ModulesList modules={modulesList.children} />
@@ -59,16 +61,16 @@ export function ModulesList({ modules }: { modules: CurriculumIndexEntry[] }) {
             key={`ml-${j}`}
             className={`module-list-item topic-${topic2css(module.topic)}`}
           >
-            <header>
-              <a href={module.url}>
+            <a href={module.url}>
+              <header>
                 {module.topic && <TopicIcon topic={module.topic} />}
                 <span>{module.title}</span>
-              </a>
-            </header>
-            <section>
-              <p>{module.summary}</p>
-              <p>{module.topic}</p>
-            </section>
+              </header>
+              <section>
+                <p>{module.summary}</p>
+                <p>{module.topic}</p>
+              </section>
+            </a>
           </li>
         );
       })}

client/src/curriculum/sidebar.tsx

@@ -28,13 +28,13 @@ export function Sidebar({
                   entry.url === current
                 }
               >
-                <summary>{entry.title} module</summary>
+                <summary>{entry.title}</summary>
                 <ol>
                   <li>
                     <SidebarLink
                       current={current}
                       url={entry.url}
-                      title={`${entry.title} overview`}
+                      title={`${entry.title.replace(/ modules$/, "")} overview`}
                     />
                   </li>
                   {entry.children.map((subEntry, j) => {