fix(curriculum): set document.title

mdn · Jan 31, 2024 · ef8a090 · ef8a090
1 parent 3e46674
commit ef8a090
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/client/src/curriculum/index.tsx b/client/src/curriculum/index.tsx
@@ -15,7 +15,7 @@ import { CurriculumModule } from "./module";
 import "./index.scss";
 import { TopNavigation } from "../ui/organisms/top-navigation";
 import { ArticleActionsContainer } from "../ui/organisms/article-actions-container";
-import { topic2css } from "./utils";
+import { topic2css, useDocTitle } from "./utils";
 
 export function Curriculum(appProps: HydrationData) {
   return (
@@ -56,6 +56,7 @@ export function CurriculumLanding(props: HydrationData<any, CurriculumDoc>) {
     }
   );
   const { doc }: { doc?: CurriculumDoc } = data || props || {};
+  useDocTitle(doc);
   return (
     <>
       {doc && (

diff --git a/client/src/curriculum/module.tsx b/client/src/curriculum/module.tsx
@@ -10,7 +10,7 @@ import { Sidebar } from "./sidebar";
 import { TopNavigation } from "../ui/organisms/top-navigation";
 import { ArticleActionsContainer } from "../ui/organisms/article-actions-container";
 import { TopicIcon } from "./topic-icon";
-import { topic2css } from "./utils";
+import { topic2css, useDocTitle } from "./utils";
 
 export function CurriculumModule(props: HydrationData<any, CurriculumDoc>) {
   const dataURL = `./index.json`;
@@ -38,6 +38,8 @@ export function CurriculumModule(props: HydrationData<any, CurriculumDoc>) {
     }
   );
   const { doc }: { doc?: CurriculumDoc } = data || props || {};
+  useDocTitle(doc);
+
   return (
     <>
       {doc && (

diff --git a/client/src/curriculum/overview.tsx b/client/src/curriculum/overview.tsx
@@ -9,7 +9,7 @@ import { Sidebar } from "./sidebar";
 import { ModulesList } from "./modules-list";
 import { TopNavigation } from "../ui/organisms/top-navigation";
 import { ArticleActionsContainer } from "../ui/organisms/article-actions-container";
-import { topic2css } from "./utils";
+import { topic2css, useDocTitle } from "./utils";
 
 export function CurriculumModuleOverview(
   props: HydrationData<any, CurriculumDoc>
@@ -39,6 +39,7 @@ export function CurriculumModuleOverview(
     }
   );
   const { doc }: { doc?: CurriculumDoc } = data || props || {};
+  useDocTitle(doc);
   return (
     <>
       {doc && (

diff --git a/client/src/curriculum/utils.ts b/client/src/curriculum/utils.ts
@@ -1,4 +1,8 @@
 // Using this import fails the build...
+
+import { useEffect } from "react";
+import { CurriculumDoc } from "../../../libs/types/curriculum";
+
 //import { Topic } from "../../../libs/types/curriculum";
 export enum Topic {
   WebStandards = "Web Standards & Semantics",
@@ -24,3 +28,16 @@ export function topic2css(topic?: Topic) {
       return "none";
   }
 }
+
+const TITLE_SUFFIX = "MDN Curriculum";
+export function useDocTitle(doc?: CurriculumDoc) {
+  useEffect(() => {
+    if (!doc) {
+      return;
+    }
+    document.title =
+      doc.title && doc.title !== TITLE_SUFFIX
+        ? `${doc.title} | MDN Curriculum`
+        : "MDN Curriculum";
+  }, [doc]);
+}