diff --git a/src/app/[versionSlug]/[...pagePath]/page.tsx b/src/app/[versionSlug]/[...pagePath]/page.tsx index 375da9d..bbb456c 100644 --- a/src/app/[versionSlug]/[...pagePath]/page.tsx +++ b/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 && } + + ); } diff --git a/src/components/nav/GuidePageTitle.tsx b/src/components/nav/GuidePageTitle.tsx new file mode 100644 index 0000000..94407a5 --- /dev/null +++ b/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; diff --git a/src/components/nav/GuidePageTitleProvider.tsx b/src/components/nav/GuidePageTitleProvider.tsx new file mode 100644 index 0000000..1bdadc7 --- /dev/null +++ b/src/components/nav/GuidePageTitleProvider.tsx @@ -0,0 +1,13 @@ +"use client"; + +import { createContext, useContext } from "react"; + +type GuidePageTitleSetter = (title: string) => void; + +const context = createContext(() => {}); + +export function useGuidePageTitleSetter() { + return useContext(context); +} + +export const GuidePageTitleProvider = context.Provider; diff --git a/src/components/nav/GuideShell.tsx b/src/components/nav/GuideShell.tsx index 129aef0..25965b1 100644 --- a/src/components/nav/GuideShell.tsx +++ b/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) { - const pageTitle = ""; + const [pageTitle, setPageTitle] = useState(""); const [menuExpanded, setMenuExpanded] = useState(false); const toggleMenu = useCallback(() => { setMenuExpanded((expanded) => !expanded); @@ -43,11 +44,15 @@ function GuideShell({ -
{pageTitle}
+
{pageTitle &&

{pageTitle}

}
-
{children}
+
+ + {children} + +
Minecraft {gameVersion} [change]