Merge remote-tracking branch 'upstream/MP-739-curriculum-builder' int…

…o next

build/curriculum.ts

@@ -32,6 +32,8 @@ import {
 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";
 
 export const allFiles = memoize(async () => {

client/src/curriculum/index.tsx

@@ -1,6 +1,7 @@
 import useSWR from "swr";
 import { Route, Routes } from "react-router-dom";
 
+import { ReactComponent as LandingSVG } from "../../public/assets/curriculum/cur-landing-top.svg";
 import { HydrationData } from "../../../libs/types/hydration";
 import { CurriculumDoc, ModuleData } from "../../../libs/types/curriculum";
 import { HTTPError, RenderDocumentBody } from "../document";
@@ -13,6 +14,8 @@ import { CurriculumModuleOverview } from "./overview";
 import { CurriculumModule } from "./module";
 
 import "./index.scss";
+import "./no-side.scss";
+
 import { TopNavigation } from "../ui/organisms/top-navigation";
 import { ArticleActionsContainer } from "../ui/organisms/article-actions-container";
 import { topic2css, useDocTitle } from "./utils";
@@ -25,7 +28,7 @@ export function Curriculum(appProps: HydrationData) {
         path="/:module"
         element={<CurriculumModuleOverview {...appProps} />}
       />
-      <Route path="/*" element={<CurriculumModule {...appProps} />} />
+      <Route path="/:module/*" element={<CurriculumModule {...appProps} />} />
     </Routes>
   );
 }
@@ -66,29 +69,22 @@ export function CurriculumLanding(props: HydrationData<any, CurriculumDoc>) {
             <ArticleActionsContainer doc={doc} />
           </div>
           <main
-            className={`curriculum-content-container container topic-${topic2css(doc.topic)}`}
+            className={`curriculum-content-container container curriculum-no-side topic-${topic2css(doc.topic)}`}
           >
             <div className="sidebar-container">
               <div className="toc-container">
-                <aside className="toc">
-                  <nav>
-                    {doc.toc && !!doc.toc.length && <TOC toc={doc.toc} />}
-                  </nav>
-                </aside>
                 {PLACEMENT_ENABLED && <SidePlacement />}
               </div>
-              {doc.sidebar && (
-                <Sidebar current={doc.mdn_url} sidebar={doc.sidebar} />
-              )}
             </div>
             <article className="curriculum-content" lang={doc?.locale}>
               <header>
+                <LandingSVG />
                 <h1>{doc?.title}</h1>
                 {doc?.topic && <p>{doc.topic}</p>}
               </header>
               <RenderDocumentBody doc={doc} />
               <section className="modules">
-                <h2>Modules:</h2>
+                <h2>Modules</h2>
                 {doc.modules && <ModulesListList modules={doc.modules} />}
               </section>
             </article>

client/src/curriculum/module.scss

@@ -69,6 +69,7 @@
       justify-content: flex-start;
 
       .topic-icon {
+        --background-primary: var(--cur-bg-color-topic);
         align-self: flex-start;
         grid-area: icon;
         height: 4rem;

client/src/curriculum/modules-list.scss

@@ -1,3 +1,5 @@
+@use "../ui/vars" as *;
+
 .curriculum-content-container {
   .curriculum-content {
     .modules {
@@ -10,56 +12,146 @@
       h2 {
         width: 100%;
       }
+    }
 
-      ol {
-        display: flex;
-        flex-wrap: wrap;
+    ol.modules-list-list {
+      display: grid;
+      grid-template-areas:
+        "a b c spacer"
+        "h h h h"
+        "x x x x";
+      grid-template-columns: max-content max-content max-content auto;
+      margin: 0;
+      padding: 0;
 
-        .module-list-item {
-          border: 0;
-          border-radius: var(--elem-radius);
-          box-shadow: var(--shadow-02);
-          display: flex;
-          flex-direction: column;
-          margin: 0.5rem;
-          max-width: 100%;
-          min-width: 10rem;
-          width: 30%;
+      hr {
+        border: none;
+        border-top: 1px solid var(--text-primary);
+        grid-area: h;
+        margin: 0 0 1.5rem;
+        width: 100%;
+      }
+
+      li {
+        display: contents;
+
+        > input:checked + label {
+          text-decoration-color: var(--cur-color);
+          text-decoration-line: underline;
+          text-decoration-thickness: 0.25rem;
+          text-underline-offset: 0.4rem;
+        }
+
+        > label {
+          color: var(--text-secondary);
+          cursor: pointer;
+        }
 
-          > header {
+        &:nth-child(2) {
+          > label,
+          > input {
+            grid-area: a;
+          }
+        }
+
+        &:nth-child(3) {
+          > label,
+          > input {
+            grid-area: b;
+            margin-left: 2rem;
+          }
+        }
+
+        &:nth-child(4) {
+          > label,
+          > input {
+            grid-area: c;
+            margin-left: 2rem;
+          }
+        }
+
+        > ol {
+          grid-area: x;
+          margin: 0;
+          padding: 0;
+        }
+      }
+    }
+
+    ol.modules-list {
+      container-name: module-list;
+      container-type: inline-size;
+      display: grid;
+      flex-wrap: wrap;
+      gap: 1rem;
+      margin: 0;
+      padding: 0;
+      @media screen and (min-width: $screen-sm) {
+        grid-template-columns: 1fr;
+      }
+      @media screen and (min-width: $screen-md) {
+        grid-template-columns: 1fr 1fr;
+      }
+      @media screen and (min-width: $screen-xl) {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+
+      @container module-list (width >= 25rem) {
+        grid-template-columns: 1fr 1fr;
+      }
+      @container module-list (width >= 38rem) {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+
+      .module-list-item {
+        border: 0;
+        border-radius: var(--elem-radius);
+        box-shadow: var(--shadow-02);
+        display: flex;
+        flex-direction: column;
+        justify-self: center;
+        max-width: 20rem;
+        width: 100%;
+
+        > header {
+          a {
             align-items: center;
             background-color: var(--cur-bg-color-topic);
             display: flex;
             flex-direction: column;
-            height: 20rem;
-            padding: 1rem;
+            height: 12rem;
+            padding: 1rem 2rem;
 
             .topic-icon {
-              height: 6rem;
-              width: 6rem;
+              height: 5rem;
+              width: 5rem;
             }
 
-            > a {
+            > span {
               color: var(--text-primary);
               font-weight: var(--font-body-strong-weight);
-              margin-top: 1rem;
+              margin: auto;
               text-align: center;
             }
           }
+        }
 
-          > section {
-            align-items: center;
-            display: flex;
-            flex-direction: column;
-            font-size: var(--type-smaller-font-size);
-            height: 100%;
-            justify-content: space-between;
-            padding: 0.5rem 1rem;
+        > 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:last-child {
-              color: var(--cur-color-topic);
-              text-align: center;
-            }
+          p {
+            margin: 0;
+          }
+
+          p:last-child {
+            color: var(--cur-color-topic);
+            text-align: center;
           }
         }
       }

client/src/curriculum/modules-list.tsx

@@ -3,15 +3,25 @@ import { TopicIcon } from "./topic-icon";
 import { topic2css } from "./utils";
 
 import "./modules-list.scss";
+import { useState } from "react";
 
 export function ModulesListList({ modules }: { modules: ModuleIndexEntry[] }) {
+  const [tab, setTab] = useState(1);
   return (
-    <ol>
+    <ol className="modules-list-list">
+      <hr />
       {modules.map((c, i) => {
         return (
           <li>
+            <input
+              className="visually-hidden"
+              id={`module-${i}`}
+              name="selected"
+              type="radio"
+              checked={i === tab}
+              onChange={() => setTab(i)}
+            />
             <label htmlFor={`module-${i}`}>{c.title}</label>
-            <input id={`module-${i}`} name="selected" type="radio" />
             {c.children && <ModulesList modules={c.children} />}
           </li>
         );
@@ -22,16 +32,18 @@ export function ModulesListList({ modules }: { modules: ModuleIndexEntry[] }) {
 
 export function ModulesList({ modules }: { modules: ModuleIndexEntry[] }) {
   return (
-    <ol>
+    <ol className="modules-list">
       {modules.map((c, j) => {
         return (
           <li
             key={j}
             className={`module-list-item topic-${topic2css(c.topic)}`}
           >
             <header>
-              {c.topic && <TopicIcon topic={c.topic} />}
-              <a href={c.url}>{c.title}</a>
+              <a href={c.url}>
+                {c.topic && <TopicIcon topic={c.topic} />}
+                <span>{c.title}</span>
+              </a>
             </header>
             <section>
               <p>{c.summary}</p>

client/src/curriculum/no-side.scss

@@ -0,0 +1,23 @@
+@use "../ui/vars" as *;
+
+.curriculum-content-container.curriculum-no-side {
+  @media screen and (min-width: $screen-md) {
+    display: grid;
+    gap: 3rem;
+    grid-template-areas: "main toc";
+    grid-template-columns: minmax(0, 1fr) minmax(0, 12rem);
+    padding-left: 1.5rem;
+    padding-right: 3rem;
+  }
+
+  @media screen and (min-width: $screen-xl) {
+    display: grid;
+    gap: 3rem;
+    grid-template-areas: "main toc";
+    grid-template-columns: minmax(0, 62rem) minmax(0, 12rem);
+    margin: 0 auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    width: fit-content;
+  }
+}

client/src/curriculum/overview.scss

@@ -0,0 +1,16 @@
+.curriculum-content-container .curriculum-content.curriculum-overview {
+  > header > h1 {
+    margin-bottom: 1rem;
+
+    > span {
+      color: var(--cur-color);
+    }
+  }
+
+  .module-contents {
+    > h2 {
+      margin-bottom: 2rem;
+      margin-top: 4rem;
+    }
+  }
+}