From 6ac2040920d93c5841942e960904b34084e53d1c Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 10 Dec 2024 19:09:31 +0100 Subject: [PATCH] Add MDX page templates --- website/mdx-components.js | 6 +++ website/next.config.js | 3 -- website/package.json | 2 +- .../docs/[[...mdxPath]]/page.tsx | 40 +++++++++++++++++++ .../v1/[[...mdxPath]]/page.tsx | 40 +++++++++++++++++++ website/src/components/configured-giscus.tsx | 20 ++++++++++ .../src/components/docs-mdx-components.tsx | 19 +++++++++ yarn.lock | 10 ++--- 8 files changed, 131 insertions(+), 9 deletions(-) create mode 100644 website/mdx-components.js create mode 100644 website/src/app/(content-pages)/docs/[[...mdxPath]]/page.tsx create mode 100644 website/src/app/(content-pages)/v1/[[...mdxPath]]/page.tsx create mode 100644 website/src/components/configured-giscus.tsx create mode 100644 website/src/components/docs-mdx-components.tsx diff --git a/website/mdx-components.js b/website/mdx-components.js new file mode 100644 index 0000000000000..4caafad8b8d53 --- /dev/null +++ b/website/mdx-components.js @@ -0,0 +1,6 @@ +import { useMDXComponents as getDocsMDXComponents } from '@theguild/components/server'; +import { docsMDXComponents } from './src/components/docs-mdx-components'; + +export const useMDXComponents = () => { + return getDocsMDXComponents(docsMDXComponents); +}; diff --git a/website/next.config.js b/website/next.config.js index d4c41476485c1..87351c722fb4f 100644 --- a/website/next.config.js +++ b/website/next.config.js @@ -6,9 +6,6 @@ export default withGuildDocs({ eslint: { ignoreDuringBuilds: true, }, - experimental: { - typedRoutes: true, - }, eslint: { ignoreDuringBuilds: true, turbo: { diff --git a/website/package.json b/website/package.json index 45dd0566a0063..802aa29bb17c5 100644 --- a/website/package.json +++ b/website/package.json @@ -11,7 +11,7 @@ "start": "next start" }, "dependencies": { - "@theguild/components": "8.0.0-alpha-20241206100653-e3101f5b94712d9fed27f767b4190b4167baa82e", + "@theguild/components": "8.0.0-alpha-20241210180007-0c38d3328d098a4dbb572c0142b7801d993cee1f", "next": "^15.0.0", "next-sitemap": "^4.2.3", "pagefind": "^1.2.0", diff --git a/website/src/app/(content-pages)/docs/[[...mdxPath]]/page.tsx b/website/src/app/(content-pages)/docs/[[...mdxPath]]/page.tsx new file mode 100644 index 0000000000000..2479892baa426 --- /dev/null +++ b/website/src/app/(content-pages)/docs/[[...mdxPath]]/page.tsx @@ -0,0 +1,40 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { generateStaticParamsFor, importPage } from 'nextra/pages'; +import { NextPageProps } from '@theguild/components'; +import { useMDXComponents } from '../../../../../mdx-components.js'; +import { ConfiguredGiscus } from '../../../../components/configured-giscus'; + +/** + * You might have an urge to try to refactor this to a separate file and reuse between product-updates and docs. + * I had the same urge. It's absurdly finicky. I warned you. + * + * BTW, even if we moved the product updates to page.mdx pattern, we still need this nesting to fix links in sidebar. + */ +export const generateStaticParams = async () => { + const pages = await generateStaticParamsFor('mdxPath')(); + return pages + .map(page => (page.mdxPath[0] === 'docs' ? { mdxPath: page.mdxPath.slice(1) } : null)) + .filter(Boolean); +}; + +export async function generateMetadata(props: NextPageProps<'...mdxPath'>) { + const params = await props.params; + const { metadata } = await importPage(['docs', ...(params.mdxPath || [])]); + return metadata; +} + +const Wrapper = useMDXComponents().wrapper; + +export default async function Page(props: NextPageProps<'...mdxPath'>) { + const params = await props.params; + + const result = await importPage(['docs', ...(params.mdxPath || [])]); + const { default: MDXContent, toc, metadata } = result; + + return ( + + + + + ); +} diff --git a/website/src/app/(content-pages)/v1/[[...mdxPath]]/page.tsx b/website/src/app/(content-pages)/v1/[[...mdxPath]]/page.tsx new file mode 100644 index 0000000000000..2479892baa426 --- /dev/null +++ b/website/src/app/(content-pages)/v1/[[...mdxPath]]/page.tsx @@ -0,0 +1,40 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { generateStaticParamsFor, importPage } from 'nextra/pages'; +import { NextPageProps } from '@theguild/components'; +import { useMDXComponents } from '../../../../../mdx-components.js'; +import { ConfiguredGiscus } from '../../../../components/configured-giscus'; + +/** + * You might have an urge to try to refactor this to a separate file and reuse between product-updates and docs. + * I had the same urge. It's absurdly finicky. I warned you. + * + * BTW, even if we moved the product updates to page.mdx pattern, we still need this nesting to fix links in sidebar. + */ +export const generateStaticParams = async () => { + const pages = await generateStaticParamsFor('mdxPath')(); + return pages + .map(page => (page.mdxPath[0] === 'docs' ? { mdxPath: page.mdxPath.slice(1) } : null)) + .filter(Boolean); +}; + +export async function generateMetadata(props: NextPageProps<'...mdxPath'>) { + const params = await props.params; + const { metadata } = await importPage(['docs', ...(params.mdxPath || [])]); + return metadata; +} + +const Wrapper = useMDXComponents().wrapper; + +export default async function Page(props: NextPageProps<'...mdxPath'>) { + const params = await props.params; + + const result = await importPage(['docs', ...(params.mdxPath || [])]); + const { default: MDXContent, toc, metadata } = result; + + return ( + + + + + ); +} diff --git a/website/src/components/configured-giscus.tsx b/website/src/components/configured-giscus.tsx new file mode 100644 index 0000000000000..3e00eefd52738 --- /dev/null +++ b/website/src/components/configured-giscus.tsx @@ -0,0 +1,20 @@ +'use client'; + +import { usePathname } from 'next/navigation'; +import { Giscus } from '@theguild/components'; + +export function ConfiguredGiscus() { + const route = usePathname(); + + return ( + + ); +} diff --git a/website/src/components/docs-mdx-components.tsx b/website/src/components/docs-mdx-components.tsx new file mode 100644 index 0000000000000..5b39c051fb24b --- /dev/null +++ b/website/src/components/docs-mdx-components.tsx @@ -0,0 +1,19 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { Anchor } from 'nextra/components'; +import { cn } from '@theguild/components'; + +export const Link: typeof Anchor = ({ className, ...props }) => { + return ( + + ); +}; +export const docsMDXComponents = { + a: Link, +}; diff --git a/yarn.lock b/yarn.lock index ff22d579bb041..8da7e5f94e0ad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12429,9 +12429,9 @@ __metadata: languageName: node linkType: hard -"@theguild/components@npm:8.0.0-alpha-20241206100653-e3101f5b94712d9fed27f767b4190b4167baa82e": - version: 8.0.0-alpha-20241206100653-e3101f5b94712d9fed27f767b4190b4167baa82e - resolution: "@theguild/components@npm:8.0.0-alpha-20241206100653-e3101f5b94712d9fed27f767b4190b4167baa82e" +"@theguild/components@npm:8.0.0-alpha-20241210180007-0c38d3328d098a4dbb572c0142b7801d993cee1f": + version: 8.0.0-alpha-20241210180007-0c38d3328d098a4dbb572c0142b7801d993cee1f + resolution: "@theguild/components@npm:8.0.0-alpha-20241210180007-0c38d3328d098a4dbb572c0142b7801d993cee1f" dependencies: "@giscus/react": "npm:3.0.0" "@next/bundle-analyzer": "npm:15.0.3" @@ -12449,7 +12449,7 @@ __metadata: next: ^13 || ^14 || ^15.0.0 react: ^18.2.0 react-dom: ^18.2.0 - checksum: 10c0/c627f32a21a08f8d54d270dacd3c5fcfe97a37f58513cf3d4b97539ce091217a83b7251c01e113a862eb48e731eccd6c150635645e456856f904e2048ee36479 + checksum: 10c0/3b20b282cd98a97be01c6a2463822d25be95329dfa1299387a990659f505cd7cf1c24468682fe24d5b578783158342249892302996e19f1ce111ce4cead8caff languageName: node linkType: hard @@ -36726,7 +36726,7 @@ __metadata: version: 0.0.0-use.local resolution: "website@workspace:website" dependencies: - "@theguild/components": "npm:8.0.0-alpha-20241206100653-e3101f5b94712d9fed27f767b4190b4167baa82e" + "@theguild/components": "npm:8.0.0-alpha-20241210180007-0c38d3328d098a4dbb572c0142b7801d993cee1f" "@theguild/tailwind-config": "npm:0.6.1" "@types/node": "npm:22.10.1" "@types/react": "npm:19.0.1"