landing about

client/src/curriculum/about.tsx

@@ -2,7 +2,7 @@ import useSWR from "swr";
 
 import { HydrationData } from "../../../libs/types/hydration";
 import { CurriculumDoc, ModuleData } from "../../../libs/types/curriculum";
-import { HTTPError, RenderDocumentBody } from "../document";
+import { HTTPError } from "../document";
 import { PLACEMENT_ENABLED, WRITER_MODE } from "../env";
 import { SidePlacement } from "../ui/organisms/placement";
 
@@ -15,6 +15,7 @@ import { ArticleActionsContainer } from "../ui/organisms/article-actions-contain
 import { topic2css, useDocTitle } from "./utils";
 import { SidebarContainer } from "../document/organisms/sidebar";
 import { TOC } from "../document/organisms/toc";
+import { RenderCurriculumBody } from "./body";
 
 export function CurriculumAbout(props: HydrationData<any, CurriculumDoc>) {
   const dataURL = `./index.json`;
@@ -77,7 +78,7 @@ export function CurriculumAbout(props: HydrationData<any, CurriculumDoc>) {
                   <span>{coloredTitle}</span> {restTitle.join(" ")}
                 </h1>
               </header>
-              <RenderDocumentBody doc={doc} />
+              <RenderCurriculumBody doc={doc} />
             </article>
           </main>
         </>

client/src/curriculum/body.tsx

@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+import { DisplayH2, DisplayH3 } from "../document/ingredients/utils";
+import { CurriculumDoc } from "../../../libs/types/curriculum";
+import { Section } from "../../../libs/types/document";
+
+function Render({ section }) {
+  const { id } = section;
+  const html = useMemo(() => ({ __html: section.content }), [section.content]);
+
+  if (!id) {
+    return (
+      <div
+        key={section.id}
+        className="section-content"
+        dangerouslySetInnerHTML={html}
+      />
+    );
+  }
+
+  const DisplayHx = section.isH3 ? DisplayH3 : DisplayH2;
+
+  return (
+    <section aria-labelledby={id} key={section.id}>
+      <DisplayHx
+        id={id}
+        title={section.title}
+        titleAsText={section.titleAsText}
+      />
+      <div className="section-content" dangerouslySetInnerHTML={html} />
+    </section>
+  );
+}
+
+export function RenderCurriculumBody({
+  doc,
+  renderer = () => null,
+}: {
+  doc: CurriculumDoc;
+  renderer?: (section: Section, i: number) => null | JSX.Element;
+}) {
+  return doc.body.map((section, i) => {
+    return renderer(section, i) || <Render section={section.value} />;
+  });
+}