fix(curriculum): highlight "Getting started" in module overview (#11051)

Author: caugner

Diff for: client/src/curriculum/about.tsx

@@ -9,6 +9,7 @@ import "./about.scss";
 
 export function CurriculumAbout(props: HydrationData<any, CurriculumDoc>) {
   const doc = useCurriculumDoc(props);
+  // [["About"], ["the", "MDN", "Curriculum"]]
   const [coloredTitle, ...restTitle] = doc?.title?.split(" ") || [];
   return (
     <CurriculumLayout

Diff for: client/src/curriculum/overview.tsx

@@ -12,15 +12,20 @@ export function CurriculumModuleOverview(
   props: HydrationData<any, CurriculumDoc>
 ) {
   const doc = useCurriculumDoc(props as CurriculumData);
-  const [coloredTitle, ...restTitle] = doc?.title?.split(" ") || [];
+  // ["Getting", "started", "modules"]
+  const titleParts = doc?.title?.split(" ") || [];
+  // "Getting started"
+  const coloredTitle = titleParts.slice(0, -1).join(" ");
+  // "modules"
+  const restTitle = titleParts.at(-1);
   return (
     <CurriculumLayout
       doc={doc}
       extraClasses={["curriculum-overview", `topic-${topic2css(doc?.topic)}`]}
     >
       <header>
         <h1>
-          <span>{coloredTitle}</span> {restTitle.join(" ")}
+          <span>{coloredTitle}</span> {restTitle}
         </h1>
       </header>
       <RenderCurriculumBody doc={doc} />