Page Titles

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

@@ -1,17 +1,53 @@
 import pagePaths from "../../../../data/page_paths.json";
 import { getGuide, getPageIdFromSlugs } from "../../../build-data";
 import { compilePage } from "@component/page-compiler/compilePage";
-import { ReactNode } from "react"; // Return a list of `params` to populate the [slug] dynamic segment
+import { ReactElement } from "react";
+import { Metadata, ResolvingMetadata } from "next"; // 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() {
   return pagePaths;
 }
 
+function getTextContent(elem: ReactElement | string): string {
+  if (typeof elem === "string") {
+    return elem;
+  } else if (!elem.props) {
+    return "";
+  }
+
+  const { children } = elem.props;
+  if (typeof children === "string") {
+    return children;
+  } else if (Array.isArray(children)) {
+    return children.map(getTextContent).join("");
+  } else {
+    return "";
+  }
+}
+
+export async function generateMetadata({
+  params: { pagePath, versionSlug },
+}: any): Promise<Metadata> {
+  const guide = await getGuide(versionSlug);
+  const pageId = await getPageIdFromSlugs(versionSlug, pagePath);
+  const page = guide.getPage(pageId);
+  const { title } = compilePage(guide, pageId, page);
+
+  if (title) {
+    return {
+      title:
+        getTextContent(title) + " - AE2 Players Guide for " + guide.gameVersion,
+    };
+  } else {
+    return {};
+  }
+}
+
 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 { title, content } = compilePage(guide, pageId, page);
+  const { content } = compilePage(guide, pageId, page);
   return <>{content}</>;
 }

src/app/[versionSlug]/layout.tsx

@@ -1,26 +1,9 @@
-import React, { PropsWithChildren, ReactElement } from "react";
+import React, { PropsWithChildren } from "react";
 import { NavBarNode } from "@component/nav/GuideNavBar.tsx";
 import GuideShell from "@component/nav/GuideShell.tsx";
 import { getGuide, getPagePath } from "../../build-data";
 import { Guide, NavigationNode } from "../../build-data/Guide.ts";
 
-function getTextContent(elem: ReactElement | string): string {
-  if (typeof elem === "string") {
-    return elem;
-  } else if (!elem.props) {
-    return "";
-  }
-
-  const { children } = elem.props;
-  if (typeof children === "string") {
-    return children;
-  } else if (Array.isArray(children)) {
-    return children.map(getTextContent).join("");
-  } else {
-    return "";
-  }
-}
-
 function buildNavigationNode(guide: Guide, node: NavigationNode): NavBarNode {
   let href: string | undefined;
   let icon: string | undefined;
@@ -59,18 +42,6 @@ async function GuidePageLayout({
     guide.index.navigationRootNodes,
   );
 
-  // TODO Update the window-title based on the current page title
-  // useEffect(() => {
-  //   const initialTitle = document.title;
-  //
-  //   if (pageTitle) {
-  //     document.title = initialTitle + " - " + getTextContent(pageTitle);
-  //   }
-  //
-  //   return () => {
-  //     document.title = initialTitle;
-  //   };
-  // }, [pageTitle]);
   return (
     <GuideShell
       navigationNodes={navigationNodes}

src/app/layout.tsx

@@ -3,7 +3,7 @@ import "./index.css";
 import { PropsWithChildren } from "react";
 
 export const metadata: Metadata = {
-  title: "Applied Energistics 2 - Players Guide",
+  title: "AE2 Players Guide",
 };
 
 export default function RootLayout({ children }: PropsWithChildren) {