Update website to use nextra@v3 and latest guild/components

.eslintrc.cjs

@@ -9,6 +9,12 @@ module.exports = {
         'unicorn/filename-case': 'off',
       },
     },
+    {
+      files: ['**/_meta.{ts,js,tsx}'],
+      rules: {
+        'import/no-default-export': 'off',
+      },
+    },
     {
       files: ['examples/**/*'],
       rules: {

.github/workflows/website.yml

@@ -41,5 +41,5 @@ jobs:
           prId: ${{ github.event.pull_request.number }}
           mainBranch: master
           websiteDirectory: ./
-          buildScript: pnpm build && cd website && pnpm build && pnpm next export
+          buildScript: pnpm build && cd website && pnpm build
           artifactDir: website/out

website/next.config.js

@@ -1,33 +1,33 @@
 import { withGuildDocs } from '@theguild/components/next.config';
 
+// eslint-disable-next-line import/no-default-export
 export default withGuildDocs({
-  transformPageOpts(pageOpts) {
-    // TODO: temporal fix to show link for versioned folder in navbar (otherwise you can see only when navigated to it directly)
-    pageOpts.pageMap
-      .find(o => o.kind === 'Folder' && o.name === 'v2')
-      .children.push({
-        kind: 'MdxPage',
-        name: 'index',
-        route: '/v2',
-        frontMatter: {},
-      });
-    pageOpts.pageMap
-      .find(o => o.kind === 'Folder' && o.name === 'v3')
-      .children.push({
-        kind: 'MdxPage',
-        name: 'index',
-        route: '/v3',
-        frontMatter: {},
-      });
-    pageOpts.pageMap
-      .find(o => o.kind === 'Folder' && o.name === 'v4')
-      .children.push({
-        kind: 'MdxPage',
-        name: 'index',
-        route: '/v4',
-        frontMatter: {},
-      });
-    return pageOpts;
+  nextraConfig: {
+    transformPageMap(pageOpts) {
+      // TODO: temporal fix to show link for versioned folder in navbar (otherwise you can see only when navigated to it directly)
+      pageOpts
+        .find(o => o.name === 'v2')
+        .children.push({
+          name: 'index',
+          route: '/v2',
+          frontMatter: {},
+        });
+      pageOpts
+        .find(o => o.name === 'v3')
+        .children.push({
+          name: 'index',
+          route: '/v3',
+          frontMatter: {},
+        });
+      pageOpts
+        .find(o => o.name === 'v4')
+        .children.push({
+          name: 'index',
+          route: '/v4',
+          frontMatter: {},
+        });
+      return pageOpts;
+    },
   },
   redirects: () =>
     Object.entries({
@@ -46,4 +46,5 @@ export default withGuildDocs({
   eslint: {
     ignoreDuringBuilds: true,
   },
+  output: 'export',
 });

website/package.json

@@ -16,12 +16,11 @@
     "start": "next start"
   },
   "dependencies": {
-    "@theguild/components": "5.2.6",
+    "@theguild/components": "6.4.0",
     "clsx": "2.0.0",
     "graphql": "16.6.0",
-    "next": "13.4.12",
+    "next": "14.1.4",
     "next-sitemap": "4.2.3",
-    "nextra": "2.13.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "4.9.0"

website/route-lockfile.txt

@@ -1,4 +1,5 @@
 
+/changelog
 /docs
 /docs/comparison
 /docs/features -> /docs
@@ -15,6 +16,7 @@
 /docs/features/graphiql
 /docs/features/health-check
 /docs/features/introspection
+/docs/features/jwt
 /docs/features/logging-and-debugging
 /docs/features/parsing-and-validation-caching
 /docs/features/persisted-operations
@@ -44,6 +46,8 @@
 /docs/migration/migration-from-yoga-v1
 /docs/migration/migration-from-yoga-v2
 /docs/migration/migration-from-yoga-v3
+/docs/migration/migration-from-yoga-v4
+/docs/prepare-for-production
 /docs/quick-start -> /docs
 /docs/testing -> /docs/features/testing
 /examples/graphql-ws -> /docs/features/subscriptions
@@ -66,7 +70,6 @@
 /tutorial/basic/10-filtering-and-pagination
 /tutorial/basic/11-summary
 /v2
-/v2/_meta
 /v2/features/apollo-federation
 /v2/features/context
 /v2/features/cors
@@ -90,7 +93,6 @@
 /v2/migration/migration-from-express-graphql
 /v2/migration/migration-from-yoga-v1
 /v3
-/v3/_meta
 /v3/features/apollo-federation
 /v3/features/automatic-persisted-queries
 /v3/features/context
@@ -131,3 +133,46 @@
 /v3/migration/migration-from-express-graphql
 /v3/migration/migration-from-yoga-v1
 /v3/migration/migration-from-yoga-v2
+/v4
+/v4/features/apollo-federation
+/v4/features/automatic-persisted-queries
+/v4/features/context
+/v4/features/cookies
+/v4/features/cors
+/v4/features/csrf-prevention
+/v4/features/defer-stream
+/v4/features/envelop-plugins
+/v4/features/error-masking
+/v4/features/file-uploads
+/v4/features/graphiql
+/v4/features/health-check
+/v4/features/introspection
+/v4/features/jwt
+/v4/features/logging-and-debugging
+/v4/features/parsing-and-validation-caching
+/v4/features/persisted-operations
+/v4/features/request-batching
+/v4/features/response-caching
+/v4/features/schema
+/v4/features/sofa-api
+/v4/features/subscriptions
+/v4/features/testing
+/v4/integrations/integration-with-aws-lambda
+/v4/integrations/integration-with-bun
+/v4/integrations/integration-with-cloudflare-workers
+/v4/integrations/integration-with-deno
+/v4/integrations/integration-with-express
+/v4/integrations/integration-with-fastify
+/v4/integrations/integration-with-gcp
+/v4/integrations/integration-with-hapi
+/v4/integrations/integration-with-koa
+/v4/integrations/integration-with-nestjs
+/v4/integrations/integration-with-nextjs
+/v4/integrations/integration-with-sveltekit
+/v4/integrations/integration-with-uwebsockets
+/v4/integrations/z-other-environments
+/v4/migration/migration-from-apollo-server
+/v4/migration/migration-from-express-graphql
+/v4/migration/migration-from-yoga-v1
+/v4/migration/migration-from-yoga-v2
+/v4/migration/migration-from-yoga-v3

website/src/index-page.tsx

@@ -10,9 +10,9 @@ import { MdCached, MdError } from 'react-icons/md';
 import { SiApollographql } from 'react-icons/si';
 import { TbPlugConnected } from 'react-icons/tb';
 import { Anchor, Image } from '@theguild/components';
-import ecosystemImage from 'public/assets/ecosystem.svg';
-import httpImage from 'public/assets/http.svg';
-import subscriptionsImage from 'public/assets/subscriptions.svg';
+import ecosystemImage from '../public/assets/ecosystem.svg';
+import httpImage from '../public/assets/http.svg';
+import subscriptionsImage from '../public/assets/subscriptions.svg';
 
 const gradients: [string, string][] = [
   ['#8b5cf6', '#6d28d9'], // violet

website/src/lib/v2-get-static-props.ts

@@ -1,8 +1,11 @@
 import { GetStaticPaths, GetStaticProps } from 'next'
+// @ts-expect-error
 import { buildDynamicMDX, buildDynamicMeta } from 'nextra/remote'
+// @ts-expect-error
 import { defaultRemarkPlugins } from '@theguild/components/next.config'
 import json from '../../remote-files/v2.json' assert { type: 'json' }
-import { remarkLinkRewrite } from 'nextra/mdx-plugins'
+// @ts-expect-error
+import { remarkLinkRewrite } from '@theguild/components/compile';
 
 const { user, repo, branch, docsPath, filePaths } = json
 

website/src/lib/v3-get-static-props.ts

@@ -1,8 +1,11 @@
 import { GetStaticPaths, GetStaticProps } from 'next'
+// @ts-expect-error
 import { buildDynamicMDX, buildDynamicMeta } from 'nextra/remote'
+// @ts-expect-error
 import { defaultRemarkPlugins } from '@theguild/components/next.config'
 import json from '../../remote-files/v3.json' assert { type: 'json' }
-import { remarkLinkRewrite } from 'nextra/mdx-plugins'
+// @ts-expect-error
+import { remarkLinkRewrite } from '@theguild/components/compile';
 
 const { user, repo, branch, docsPath, filePaths } = json
 

website/src/lib/v4-get-static-props.ts

@@ -1,8 +1,11 @@
 import { GetStaticPaths, GetStaticProps } from 'next'
+// @ts-expect-error
 import { buildDynamicMDX, buildDynamicMeta } from 'nextra/remote'
+// @ts-expect-error
 import { defaultRemarkPlugins } from '@theguild/components/next.config'
 import json from '../../remote-files/v4.json' assert { type: 'json' }
-import { remarkLinkRewrite } from 'nextra/mdx-plugins'
+// @ts-expect-error
+import { remarkLinkRewrite } from '@theguild/components/compile';
 
 const { user, repo, branch, docsPath, filePaths } = json
 

website/src/pages/_app.tsx

@@ -0,0 +1,7 @@
+import type { AppProps } from 'next/app';
+import '@theguild/components/style.css';
+
+// eslint-disable-next-line import/no-default-export
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}

website/src/pages/_meta.tsx

@@ -0,0 +1,91 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { Callout, Giscus, useTheme } from '@theguild/components';
+
+const LATEST_VERSION = 5;
+
+function LegacyDocsBanner() {
+  const { route } = useRouter();
+  const currentVersion = route.split('/')[1].replace('v', '');
+  return (
+    <Callout type="warning">
+      This is the documentation for the <b>old</b> GraphQL Yoga version {currentVersion}. We
+      recommend upgrading to the latest GraphQL Yoga version {LATEST_VERSION}.
+      <br />
+      <br />
+      <Link
+        href={`/docs/migration/migration-from-yoga-v${currentVersion}`}
+        className="_text-primary-600 _underline _decoration-from-font [text-underline-position:from-font]"
+      >
+        Migrate to GraphQL Yoga v{LATEST_VERSION}
+      </Link>
+    </Callout>
+  );
+}
+
+export default {
+  '*': {
+    theme: {
+      bottomContent: function BottomContent() {
+        const { resolvedTheme } = useTheme();
+        const { route } = useRouter();
+        return (
+          <Giscus
+            // ensure giscus is reloaded when client side route is changed
+            key={route}
+            repo="dotansimha/graphql-yoga"
+            repoId="MDEwOlJlcG9zaXRvcnkxMTA4MTk5Mzk="
+            category="Docs Discussion"
+            categoryId="DIC_kwDOBpr6Y84CAquY"
+            mapping="pathname"
+            theme={resolvedTheme}
+          />
+        );
+      },
+    },
+  },
+  index: {
+    title: 'Home',
+    type: 'page',
+    display: 'hidden',
+    theme: {
+      layout: 'raw',
+    },
+  },
+  docs: {
+    title: 'v5 (latest)',
+    type: 'page',
+  },
+  v4: {
+    title: 'v4',
+    type: 'page',
+    theme: {
+      topContent: LegacyDocsBanner,
+    },
+  },
+  v3: {
+    title: 'v3',
+    type: 'page',
+    theme: {
+      topContent: LegacyDocsBanner,
+    },
+  },
+  v2: {
+    title: 'v2',
+    type: 'page',
+    theme: {
+      topContent: LegacyDocsBanner,
+    },
+  },
+  tutorial: {
+    title: 'Tutorial',
+    type: 'page',
+  },
+  changelog: {
+    type: 'page',
+    theme: {
+      // Don't need comments in the changelog page
+      bottomContent: null,
+    },
+  },
+};

website/src/pages/docs/_meta.ts

@@ -0,0 +1,8 @@
+export default {
+  index: 'Quick Start',
+  features: 'Features',
+  'prepare-for-production': 'Prepare for Production',
+  integrations: 'Integrations',
+  migration: 'Migration',
+  comparison: 'Comparison',
+};