feat(curriculum): update curriculum (#11426)

* feat(curriculum): update curriculum

build/curriculum.ts

@@ -333,6 +333,7 @@ export async function buildCurriculumPage(
   doc.parents = metadata.parents;
   doc.topic = metadata.topic;
   doc.group = metadata.group;
+  doc.template = metadata.template || Template.Default;
 
   return doc as CurriculumDoc;
 }
@@ -406,9 +407,9 @@ function setCurriculumTypes($: CheerioAPI) {
 
   $("p.curriculum-resources + ul > li").each((_, child) => {
     const li = $(child);
-
-    if (li.find("a.external").length) {
-      li.addClass("external");
+    const externalLinks = li.find("a.external");
+    if (externalLinks.length) {
+      li.addClass("curriculum-external-li");
     }
   });
 

client/src/curriculum/default.tsx

@@ -0,0 +1,25 @@
+import { HydrationData } from "../../../libs/types/hydration";
+import { CurriculumDoc } from "../../../libs/types/curriculum";
+import { topic2css, useCurriculumDoc } from "./utils";
+import { RenderCurriculumBody } from "./body";
+import { CurriculumLayout } from "./layout";
+
+import "./index.scss";
+
+export function CurriculumDefault(props: HydrationData<any, CurriculumDoc>) {
+  const doc = useCurriculumDoc(props);
+  const [coloredTitle, ...restTitle] = doc?.title?.split(" ") || [];
+  return (
+    <CurriculumLayout
+      doc={doc}
+      extraClasses={["curriculum-module", `topic-${topic2css(doc?.topic)}`]}
+    >
+      <header>
+        <h1>
+          <span>{coloredTitle}</span> {restTitle.join(" ")}
+        </h1>
+      </header>
+      <RenderCurriculumBody doc={doc} />
+    </CurriculumLayout>
+  );
+}

client/src/curriculum/index.tsx

@@ -1,26 +1,27 @@
-import { Route, Routes } from "react-router-dom";
-
 import { HydrationData } from "../../../libs/types/hydration";
-import { CurriculumModuleOverview } from "./overview";
+import { CurriculumOverview } from "./overview";
 import { CurriculumModule } from "./module";
 import { CurriculumAbout } from "./about";
 import { CurriculumLanding } from "./landing";
 
 import "./index.scss";
+import { CurriculumData, CurriculumDoc } from "../../../libs/types/curriculum";
+import { Template, useCurriculumDoc } from "./utils";
+import { CurriculumDefault } from "./default";
 
-export function Curriculum(appProps: HydrationData) {
-  return (
-    <Routes>
-      <Route path="/" element={<CurriculumLanding {...appProps} />} />
-      <Route
-        path="/about-curriculum/"
-        element={<CurriculumAbout {...appProps} />}
-      />
-      <Route
-        path="/:module/"
-        element={<CurriculumModuleOverview {...appProps} />}
-      />
-      <Route path="/:module/*" element={<CurriculumModule {...appProps} />} />
-    </Routes>
-  );
+export function Curriculum(appProps: HydrationData<any, CurriculumDoc>) {
+  const doc = useCurriculumDoc(appProps as CurriculumData);
+  switch (doc?.template) {
+    case Template.Landing:
+      return <CurriculumLanding {...appProps} />;
+    case Template.Overview:
+      return <CurriculumOverview {...appProps} />;
+    case Template.Module:
+      return <CurriculumModule {...appProps} />;
+    case Template.About:
+      return <CurriculumAbout {...appProps} />;
+    case Template.Default:
+    default:
+      return <CurriculumDefault {...appProps} />;
+  }
 }

client/src/curriculum/landing.scss

@@ -111,27 +111,30 @@
         "h2"
         "p1"
         "p2"
-        "p3";
+        "p3"
+        "p4"
+        "scrim";
       grid-template-columns: 1fr;
       margin: 0 auto 3rem;
       max-width: min(var(--max-width), 74rem);
-      @media (min-width: $screen-md) {
+      @media (min-width: $screen-lg) {
+        column-gap: 1rem;
         grid-template-areas:
-          "li li "
-          "h2 . "
-          ".  p1 "
-          ".  p2"
-          ".  p3";
-        grid-template-columns: 1fr 1fr;
+          "li li    li "
+          "h2 .     scrim"
+          "p1 .     scrim"
+          "p2 .     scrim"
+          "p3 arrow scrim"
+          "p4 arrow scrim";
+        grid-template-columns: 1fr 7rem 24rem;
       }
 
       h2 {
         grid-area: h2;
-        margin: 1rem 0 0;
-        text-align: center;
+        margin: 1rem 0;
       }
 
-      > div {
+      > div.about-content {
         display: contents;
 
         ul {
@@ -203,6 +206,8 @@
           color: var(--text-secondary);
           display: grid;
           grid-template-columns: auto auto;
+          justify-content: start;
+          margin: 1rem 0;
 
           &::before {
             align-self: start;
@@ -230,6 +235,14 @@
           &:nth-child(4) {
             grid-area: p3;
 
+            &::before {
+              content: var(--curriculum-landing-about-bullet);
+            }
+          }
+
+          &:nth-child(5) {
+            grid-area: p4;
+
             a {
               color: var(--text-primary);
               font-weight: var(--font-body-strong-weight);
@@ -244,6 +257,24 @@
           }
         }
       }
+
+      > div.arrow {
+        background-image: var(--curriculum-landing-arrow);
+        background-position: center;
+        background-repeat: no-repeat;
+        grid-area: arrow;
+      }
+
+      .scrim {
+        grid-area: scrim;
+        justify-self: center;
+        margin-top: 1rem;
+
+        @media (min-width: $screen-lg) {
+          justify-self: end;
+          margin-top: 0;
+        }
+      }
     }
   }
 

client/src/curriculum/landing.tsx

@@ -14,6 +14,8 @@ import { CurriculumLayout } from "./layout";
 import "./index.scss";
 import "./landing.scss";
 import { ProseSection } from "../../../libs/types/document";
+import { PartnerBanner } from "./partner-banner";
+import { ScrimIframe } from "./scrim";
 
 export function CurriculumLanding(appProps: HydrationData<any, CurriculumDoc>) {
   const doc = useCurriculumDoc(appProps as CurriculumData);
@@ -98,6 +100,7 @@ export function CurriculumLanding(appProps: HydrationData<any, CurriculumDoc>) {
           return null;
         }}
       />
+      <PartnerBanner />
     </CurriculumLayout>
   );
 }
@@ -119,14 +122,32 @@ function Header({ section, h1 }: { section: any; h1?: string }) {
   );
 }
 
+const SCRIM_URL = "https://v2.scrimba.com/s06icdv";
+
 function About({ section }) {
   const { title, content, id } = section.value;
   const html = useMemo(() => ({ __html: content }), [content]);
   return (
     <section key={id} className="landing-about-container">
       <div className="landing-about">
         <DisplayH2 id={id} title={title} />
-        <div dangerouslySetInnerHTML={html}></div>
+        <div className="about-content" dangerouslySetInnerHTML={html}></div>
+        <div className="arrow"></div>
+        <ScrimIframe url={SCRIM_URL}>
+          <p>
+            Learn our curriculum with high quality, interactive courses from our
+            partner{" "}
+            <a
+              href="https://scrimba.com/?via=mdn"
+              className="external"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Scrimba
+            </a>
+            {" !"}
+          </p>
+        </ScrimIframe>
       </div>
     </section>
   );