Add MDX page templates

Author: hasparus

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);
+};

website/next.config.js

@@ -6,9 +6,6 @@ export default withGuildDocs({
   eslint: {
     ignoreDuringBuilds: true,
   },
-  experimental: {
-    typedRoutes: true,
-  },
   eslint: {
     ignoreDuringBuilds: true,
     turbo: {

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",

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 (
+    <Wrapper toc={toc} metadata={metadata}>
+      <MDXContent params={params} />
+      <ConfiguredGiscus />
+    </Wrapper>
+  );
+}

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 (
+    <Wrapper toc={toc} metadata={metadata}>
+      <MDXContent params={params} />
+      <ConfiguredGiscus />
+    </Wrapper>
+  );
+}

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 (
+    <Giscus
+      // ensure giscus is reloaded when client side route is changed
+      key={route}
+      repo="ardatan/graphql-mesh"
+      repoId="MDEwOlJlcG9zaXRvcnkyMzM1OTc1MTc="
+      category="Docs Discussions"
+      categoryId="DIC_kwDODexqTc4CSDDQ"
+      mapping="pathname"
+    />
+  );
+}

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 (
+    <Anchor
+      // we remove `text-underline-position` from default Nextra link styles
+      className={cn(
+        'hive-focus dark:text-primary/90 dark:focus-visible:ring-primary/50 -mx-1 -my-0.5 rounded px-1 py-0.5 font-medium text-blue-700 underline underline-offset-[2px] hover:no-underline focus-visible:no-underline focus-visible:ring-current focus-visible:ring-offset-blue-200',
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+export const docsMDXComponents = {
+  a: Link,
+};

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"