Better page titles

src/app/[versionSlug]/[...pagePath]/page.tsx

@@ -2,7 +2,8 @@ import pagePaths from "../../../../data/page_paths.json";
 import { getGuide, getPageIdFromSlugs } from "../../../build-data";
 import { compilePage } from "@component/page-compiler/compilePage";
 import { ReactElement } from "react";
-import { Metadata, ResolvingMetadata } from "next"; // Return a list of `params` to populate the [slug] dynamic segment
+import { Metadata } from "next";
+import GuidePageTitle from "@component/nav/GuidePageTitle.tsx"; // Return a list of `params` to populate the [slug] dynamic segment
 
 // Return a list of `params` to populate the [slug] dynamic segment
 export async function generateStaticParams() {
@@ -48,6 +49,11 @@ export default async function Page({ params: { pagePath, versionSlug } }: any) {
   const guide = await getGuide(versionSlug);
   const pageId = await getPageIdFromSlugs(versionSlug, pagePath);
   const page = guide.getPage(pageId);
-  const { content } = compilePage(guide, pageId, page);
-  return <>{content}</>;
+  const { title, content } = compilePage(guide, pageId, page);
+  return (
+    <>
+      {content}
+      {title && <GuidePageTitle title={getTextContent(title)} />}
+    </>
+  );
 }

src/components/nav/GuidePageTitle.tsx

@@ -0,0 +1,20 @@
+"use client";
+import { useEffect } from "react";
+import { useGuidePageTitleSetter } from "@component/nav/GuidePageTitleProvider.tsx";
+
+export interface GuidePageTitleProps {
+  title: string;
+}
+
+function GuidePageTitle({ title }: GuidePageTitleProps) {
+  const setPageTitle = useGuidePageTitleSetter();
+  useEffect(() => {
+    setPageTitle(title);
+    return () => {
+      setPageTitle("");
+    };
+  }, [setPageTitle, title]);
+  return null;
+}
+
+export default GuidePageTitle;

src/components/nav/GuidePageTitleProvider.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+type GuidePageTitleSetter = (title: string) => void;
+
+const context = createContext<GuidePageTitleSetter>(() => {});
+
+export function useGuidePageTitleSetter() {
+  return useContext(context);
+}
+
+export const GuidePageTitleProvider = context.Provider;

src/components/nav/GuideShell.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import Image from "next/image";
 import logo from "@assets/logo_00.png";
 import GuideNavBar, { NavBarNode } from "@component/nav/GuideNavBar.tsx";
+import { GuidePageTitleProvider } from "@component/nav/GuidePageTitleProvider.tsx";
 
 export interface GuideShellProps {
   gameVersion: String;
@@ -17,7 +18,7 @@ function GuideShell({
   gameVersion,
   navigationNodes,
 }: PropsWithChildren<GuideShellProps>) {
-  const pageTitle = "";
+  const [pageTitle, setPageTitle] = useState<string>("");
   const [menuExpanded, setMenuExpanded] = useState(false);
   const toggleMenu = useCallback(() => {
     setMenuExpanded((expanded) => !expanded);
@@ -43,11 +44,15 @@ function GuideShell({
           <span aria-hidden="true"></span>
         </a>
       </div>
-      <div className={css.pageTitle}>{pageTitle}</div>
+      <div className={css.pageTitle}>{pageTitle && <h1>{pageTitle}</h1>}</div>
       <aside onClick={() => setMenuExpanded(false)}>
         <GuideNavBar rootNodes={navigationNodes} />
       </aside>
-      <article>{children}</article>
+      <article>
+        <GuidePageTitleProvider value={setPageTitle}>
+          {children}
+        </GuidePageTitleProvider>
+      </article>
       <div className={css.versionPicker}>
         Minecraft {gameVersion} [<Link href="/">change</Link>]
       </div>