Nextra 4 Migration 3: layouts and fixes

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-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

website/next.config.js

@@ -6,6 +6,12 @@ export default withGuildDocs({
   eslint: {
     ignoreDuringBuilds: true,
   },
+  eslint: {
+    ignoreDuringBuilds: true,
+    turbo: {
+      treeShaking: true,
+    },
+  },
   redirects: () =>
     Object.entries({
       '/api': '/docs',

website/package.json

@@ -6,13 +6,15 @@
   "scripts": {
     "analyze": "cross-env ANALYZE=true next build",
     "build": "next build && next-sitemap",
-    "dev": "next",
+    "dev": "next --turbopack",
+    "postbuild": "pagefind --site .next/server/app --output-path out/_pagefind",
     "start": "next start"
   },
   "dependencies": {
     "@theguild/components": "^8.0.0",
     "next": "^15.0.0",
     "next-sitemap": "^4.2.3",
+    "pagefind": "^1.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.0.0"

website/src/app/(content-pages)/docs/[[...mdxPath]]/legacy-docs-banner.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { Callout } from '@theguild/components';
+import { Link } from '../../../../components/docs-mdx-components';
+
+export function LegacyDocsBanner() {
+  const pathname = usePathname();
+  if (pathname.startsWith('/v1')) {
+    return null;
+  }
+
+  return (
+    <Callout type="warning">
+      This is the documentation for the <b>old</b> GraphQL Mesh version v0. We recommend upgrading
+      to the latest GraphQL Mesh version v1.
+      <br />
+      <Link
+        href="/v1/migration-from-v0"
+        className="[*:has(div>&)]:mb-8 gap-2 underline hover:no-underline"
+      >
+        Migrate to GraphQL Mesh v1
+      </Link>
+    </Callout>
+  );
+}

website/src/app/(content-pages)/docs/[[...mdxPath]]/page.tsx

@@ -0,0 +1,42 @@
+/* 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';
+import { LegacyDocsBanner } from './legacy-docs-banner';
+
+/**
+ * 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}>
+      <LegacyDocsBanner />
+      <MDXContent params={params} />
+      <ConfiguredGiscus />
+    </Wrapper>
+  );
+}

website/src/app/examples.mdx → website/src/app/(content-pages)/examples/live-demo.tsx

@@ -1,22 +1,17 @@
----
-title: Examples
-description: Examples of Mesh usage
----
+'use client';
 
-import { useState } from 'react'
-
-<LiveDemo />
+import { useState } from 'react';
 
 export function LiveDemo() {
-  const [exampleRepo, setExampleRepo] = useState('json-schema-example')
+  const [exampleRepo, setExampleRepo] = useState('json-schema-example');
   return (
     <div className="min-h-[calc(100vh-var(--nextra-navbar-height))] flex flex-col">
       <div className="flex items-center justify-center gap-2 py-8">
         Choose Live Example:
         <select
           value={exampleRepo}
           onChange={e => {
-            setExampleRepo(e.target.value)
+            setExampleRepo(e.target.value);
           }}
           className="border rounded-md py-1.5"
         >
@@ -40,7 +35,7 @@ export function LiveDemo() {
         sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
       />
     </div>
-  )
+  );
 }
 
 export const EXAMPLES = {
@@ -51,36 +46,36 @@ export const EXAMPLES = {
     Stripe: 'openapi-stripe',
     StackExchange: 'openapi-stackexchange',
     'WeatherBit on React App': 'openapi-react-weatherbit',
-    'NextJS with Apollo': 'nextjs-apollo-example'
+    'NextJS with Apollo': 'nextjs-apollo-example',
   },
   'JSON Schema': {
     'Fake API': 'json-schema-example',
     'Covid-19 Statistics': 'json-schema-covid',
-    'Subscriptions, Webhooks & Live Queries': 'json-schema-subscriptions'
+    'Subscriptions, Webhooks & Live Queries': 'json-schema-subscriptions',
   },
   OData: {
     TripPin: 'odata-trippin',
-    'Microsoft Graph': 'odata-microsoft'
+    'Microsoft Graph': 'odata-microsoft',
   },
   SOAP: {
-    'Country Info': 'soap-country-info'
+    'Country Info': 'soap-country-info',
   },
   MySQL: {
-    Rfam: 'mysql-rfam'
+    Rfam: 'mysql-rfam',
   },
   SQLite: {
-    Chinook: 'sqlite-chinook'
+    Chinook: 'sqlite-chinook',
   },
   'Apollo Federation': {
-    'Apollo Federation Example': 'federation-example'
+    'Apollo Federation Example': 'federation-example',
   },
   'Apache Thrift': {
-    Calculator: 'thrift-calculator'
+    Calculator: 'thrift-calculator',
   },
   gRPC: {
-    'Movies Example': 'grpc-example'
+    'Movies Example': 'grpc-example',
   },
   Neo4J: {
-    'Movies Example': 'neo4j-example'
-  }
-}
+    'Movies Example': 'neo4j-example',
+  },
+};

website/src/app/(content-pages)/examples/page.tsx

@@ -0,0 +1,10 @@
+import { LiveDemo } from './live-demo';
+
+export const metadata = {
+  title: 'Examples',
+  description: 'Examples of Mesh usage',
+};
+
+export default function ExamplesPage() {
+  return <LiveDemo />;
+}

website/src/app/(content-pages)/layout.tsx

@@ -0,0 +1,6 @@
+import { HiveInnerLayout } from '../../components/hive-layout/hive-inner-layout';
+import '@theguild/components/style.css';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return <HiveInnerLayout isLanding={false}>{children}</HiveInnerLayout>;
+}

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/app/(landing-pages)/layout.tsx

@@ -0,0 +1,6 @@
+import { HiveInnerLayout } from '../../components/hive-layout/hive-inner-layout';
+import '@theguild/components/style.css';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return <HiveInnerLayout isLanding>{children}</HiveInnerLayout>;
+}

website/src/app/(landing-pages)/page.tsx

@@ -0,0 +1,6 @@
+export const metadata = {
+  title: 'GraphQL Mesh',
+  description: 'A fully-featured GraphQL gateway framework',
+};
+
+export { IndexPage as default } from '../../components/index-page';

website/src/app/_meta.tsx

@@ -1,40 +1,10 @@
-import Link from 'next/link';
-import { Callout } from '@theguild/components';
+// import { PRODUCTS_MENU_LIST } from '@theguild/components/products';
 
-function LegacyDocsBanner() {
-  return (
-    <Callout type="warning">
-      This is the documentation for the <b>old</b> GraphQL Mesh version v0. We recommend upgrading
-      to the latest GraphQL Mesh version v1.
-      <br />
-      <br />
-      <Link
-        href={`/v1/migration-from-v0`}
-        className="_text-primary-600 _underline _decoration-from-font [text-underline-position:from-font]"
-      >
-        Migrate to GraphQL Mesh v1
-      </Link>
-    </Callout>
-  );
-}
-
-export default {
-  index: {
-    title: 'Home',
-    type: 'page',
-    display: 'hidden',
-    theme: {
-      layout: 'raw',
-    },
-  },
+const meta = {
   examples: {
     title: 'Examples',
     type: 'page',
     display: 'hidden',
-    theme: {
-      layout: 'raw',
-      footer: false,
-    },
   },
   v1: {
     title: 'v1',
@@ -43,8 +13,45 @@ export default {
   docs: {
     title: 'v0',
     type: 'page',
-    theme: {
-      topContent: LegacyDocsBanner,
+  },
+  // #region shared items between all websites
+  // TODO: Move it to shared layout.
+  // products: PRODUCTS_MENU_LIST,
+  ecosystem: {
+    title: 'Ecosystem',
+    type: 'page',
+    href: 'https://the-guild.dev/graphql/hive/ecosystem',
+  },
+  blog: {
+    title: 'Blog',
+    type: 'page',
+    href: 'https://the-guild.dev/blog',
+  },
+  github: {
+    title: 'GitHub',
+    type: 'page',
+    href: 'https://github.com/ardatan/graphql-mesh',
+  },
+  'the-guild': {
+    title: 'The Guild',
+    type: 'menu',
+    items: {
+      'about-us': {
+        title: 'About Us',
+        href: 'https://the-guild.dev/about-us',
+      },
+      'brand-assets': {
+        title: 'Brand Assets',
+        href: 'https://the-guild.dev/logos',
+      },
     },
   },
+  'graphql-foundation': {
+    title: 'GraphQL Foundation',
+    type: 'page',
+    href: 'https://graphql.org/community/foundation/',
+  },
+  // #endregion
 };
+
+export default meta;