From fdafd1bce3c6d478d2dab7e5049bc2ad8f147112 Mon Sep 17 00:00:00 2001 From: Colin Murphy Date: Fri, 20 Dec 2024 11:16:56 +0000 Subject: [PATCH 1/3] Added component to load the title from the metadata --- src/components/docs-layout.jsx | 2 ++ src/components/docs-title.jsx | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 src/components/docs-title.jsx diff --git a/src/components/docs-layout.jsx b/src/components/docs-layout.jsx index 4f9d04cd..ed121e71 100644 --- a/src/components/docs-layout.jsx +++ b/src/components/docs-layout.jsx @@ -4,6 +4,7 @@ import { DisclosurePanel, } from "@headlessui/react"; import { ChevronRightIcon, ChevronDownIcon } from "@heroicons/react/24/outline"; +import DocsPageTitle from "./docs-title"; import OnThisPageNav from "./on-this-page-nav"; import DocsNav from "@/components/docs-nav"; import routes from "@/pages/docs/nav.json"; @@ -33,6 +34,7 @@ export default function DocumentPage({ children }) { {children}
+ {children}
diff --git a/src/components/docs-title.jsx b/src/components/docs-title.jsx new file mode 100644 index 00000000..48dda8c7 --- /dev/null +++ b/src/components/docs-title.jsx @@ -0,0 +1,34 @@ +import { useRouter } from "next/router"; +import React, { useState, useEffect } from "react"; + +export default function DocsPageTitle() { + const [metadata, setMetadata] = useState(); + const router = useRouter(); + + useEffect(() => { + const fetchMetadata = async () => { + try { + const path = router.asPath.replace("/docs", "").replace(/\/$/, ""); + + const pageData = await import(`../pages/docs${path}/index.mdx`).then( + (module) => module.metadata, + ); + setMetadata(pageData); + } catch (error) { + console.error("Failed to load metadata:", error); + + return

Docs

; + } + }; + + if (router.isReady) { + fetchMetadata(); + } + }, [router.isReady, router.asPath]); + + if (!metadata) { + return

Docs

; + } + + return

{metadata.title}

; +} From d41cec9f533d024b5d430325b83b313267e4ceea Mon Sep 17 00:00:00 2001 From: Colin Murphy Date: Mon, 30 Dec 2024 17:14:41 +0000 Subject: [PATCH 2/3] Used plugin instead to get the metadata title Used this plugin instead to retrieve the page title - https://github.com/remcohaszing/recma-nextjs-static-props --- next.config.mjs | 2 ++ package.json | 1 + pnpm-lock.yaml | 28 ++++++++++++++++++++++++++++ src/components/docs-layout.jsx | 7 ++++--- src/components/docs-title.jsx | 34 ---------------------------------- 5 files changed, 35 insertions(+), 37 deletions(-) delete mode 100644 src/components/docs-title.jsx diff --git a/next.config.mjs b/next.config.mjs index 017d7c80..7c5884af 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -3,6 +3,7 @@ import { withFaust, getWpHostname } from "@faustwp/core"; import createMDX from "@next/mdx"; import { transformerNotationDiff } from "@shikijs/transformers"; import { createSecureHeaders } from "next-secure-headers"; +import recmaNextjsStaticProps from "recma-nextjs-static-props"; import rehypeCallouts from "rehype-callouts"; import rehypeMdxImportMedia from "rehype-mdx-import-media"; import { rehypePrettyCode } from "rehype-pretty-code"; @@ -70,6 +71,7 @@ const nextConfig = { const withMDX = createMDX({ options: { + recmaPlugins: [recmaNextjsStaticProps], remarkPlugins: [remarkGfm], rehypePlugins: [ rehypeMdxImportMedia, diff --git a/package.json b/package.json index de5f4510..ee169e85 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "next": "^15.1.1", "react": "^19.0.0", "react-dom": "^19.0.0", + "recma-nextjs-static-props": "^2.0.1", "rehype-callouts": "^1.3.0", "rehype-mdx-import-media": "^1.2.0", "rehype-pretty-code": "^0.14.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 166ed7c8..f8281ee4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -74,6 +74,9 @@ importers: react-dom: specifier: ^19.0.0 version: 19.0.0(react@19.0.0) + recma-nextjs-static-props: + specifier: ^2.0.1 + version: 2.0.1 rehype-callouts: specifier: ^1.3.0 version: 1.3.0 @@ -3184,6 +3187,9 @@ packages: resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==} engines: {node: '>=0.10.0'} + is-reference@3.0.3: + resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==} + is-regex@1.2.1: resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==} engines: {node: '>= 0.4'} @@ -3941,6 +3947,9 @@ packages: peberminta@0.9.0: resolution: {integrity: sha512-XIxfHpEuSJbITd1H3EeQwpcZbTLHc+VVr8ANI9t5sit565tsI4/xK3KWTUFE2e6QiangUkh3B0jihzmGnNrRsQ==} + periscopic@3.1.0: + resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==} + picocolors@1.1.1: resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} @@ -4200,6 +4209,9 @@ packages: recma-jsx@1.0.0: resolution: {integrity: sha512-5vwkv65qWwYxg+Atz95acp8DMu1JDSqdGkA2Of1j6rCreyFUE/gp15fC8MnGEuG1W68UKjM6x6+YTWIh7hZM/Q==} + recma-nextjs-static-props@2.0.1: + resolution: {integrity: sha512-XNQmiJYLcIzm130clZM0rzcGnAz9xhO6YX1z7vJIoE6Ve//+vxOtvES++MvwPpnGoIpPVP4V3nGCgt6ROsq2gw==} + recma-parse@1.0.0: resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==} @@ -8941,6 +8953,10 @@ snapshots: dependencies: isobject: 3.0.1 + is-reference@3.0.3: + dependencies: + '@types/estree': 1.0.6 + is-regex@1.2.1: dependencies: call-bound: 1.0.3 @@ -9985,6 +10001,12 @@ snapshots: peberminta@0.9.0: {} + periscopic@3.1.0: + dependencies: + '@types/estree': 1.0.6 + estree-walker: 3.0.3 + is-reference: 3.0.3 + picocolors@1.1.1: {} picomatch@2.3.1: {} @@ -10188,6 +10210,12 @@ snapshots: transitivePeerDependencies: - acorn + recma-nextjs-static-props@2.0.1: + dependencies: + '@types/estree': 1.0.6 + periscopic: 3.1.0 + unified: 11.0.5 + recma-parse@1.0.0: dependencies: '@types/estree': 1.0.6 diff --git a/src/components/docs-layout.jsx b/src/components/docs-layout.jsx index ed121e71..60f4caca 100644 --- a/src/components/docs-layout.jsx +++ b/src/components/docs-layout.jsx @@ -4,13 +4,12 @@ import { DisclosurePanel, } from "@headlessui/react"; import { ChevronRightIcon, ChevronDownIcon } from "@heroicons/react/24/outline"; -import DocsPageTitle from "./docs-title"; import OnThisPageNav from "./on-this-page-nav"; import DocsNav from "@/components/docs-nav"; import routes from "@/pages/docs/nav.json"; import "rehype-callouts/theme/vitepress"; -export default function DocumentPage({ children }) { +export default function DocumentPage({ children, ...props }) { return ( <> {children}
- + {props.metadata && props.metadata.title && ( +

{props.metadata.title}

+ )} {children}
diff --git a/src/components/docs-title.jsx b/src/components/docs-title.jsx deleted file mode 100644 index 48dda8c7..00000000 --- a/src/components/docs-title.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import { useRouter } from "next/router"; -import React, { useState, useEffect } from "react"; - -export default function DocsPageTitle() { - const [metadata, setMetadata] = useState(); - const router = useRouter(); - - useEffect(() => { - const fetchMetadata = async () => { - try { - const path = router.asPath.replace("/docs", "").replace(/\/$/, ""); - - const pageData = await import(`../pages/docs${path}/index.mdx`).then( - (module) => module.metadata, - ); - setMetadata(pageData); - } catch (error) { - console.error("Failed to load metadata:", error); - - return

Docs

; - } - }; - - if (router.isReady) { - fetchMetadata(); - } - }, [router.isReady, router.asPath]); - - if (!metadata) { - return

Docs

; - } - - return

{metadata.title}

; -} From 88a7f6ec04b1d329098c882b3d28d4851ac378f6 Mon Sep 17 00:00:00 2001 From: Alex Moon Date: Mon, 30 Dec 2024 09:33:24 -0800 Subject: [PATCH 3/3] refactor: just simplifying code --- src/components/docs-layout.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/docs-layout.jsx b/src/components/docs-layout.jsx index 60f4caca..9ea471a3 100644 --- a/src/components/docs-layout.jsx +++ b/src/components/docs-layout.jsx @@ -9,7 +9,7 @@ import DocsNav from "@/components/docs-nav"; import routes from "@/pages/docs/nav.json"; import "rehype-callouts/theme/vitepress"; -export default function DocumentPage({ children, ...props }) { +export default function DocumentPage({ children, metadata }) { return ( <> {children}
- {props.metadata && props.metadata.title && ( -

{props.metadata.title}

+ {metadata?.title && ( +

{metadata.title}

)} {children}