From 90cdfb815456e5b728075cf7a43b03ea46dbe7a1 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 3 May 2024 12:02:53 +0200
Subject: [PATCH] fix(curriculum): highlight "Getting started" in module
 overview

---
 client/src/curriculum/about.tsx    | 1 +
 client/src/curriculum/overview.tsx | 9 +++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/curriculum/about.tsx b/client/src/curriculum/about.tsx
index a587adae6b09..9b8bd84161c7 100644
--- a/client/src/curriculum/about.tsx
+++ b/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 --git a/client/src/curriculum/overview.tsx b/client/src/curriculum/overview.tsx
index 4453f6ea848e..e46932337788 100644
--- a/client/src/curriculum/overview.tsx
+++ b/client/src/curriculum/overview.tsx
@@ -12,7 +12,12 @@ 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}
@@ -20,7 +25,7 @@ export function CurriculumModuleOverview(
     >
       <header>
         <h1>
-          <span>{coloredTitle}</span> {restTitle.join(" ")}
+          <span>{coloredTitle}</span> {restTitle}
         </h1>
       </header>
       <RenderCurriculumBody doc={doc} />