Hive Docs x Nextra 4 (#6089)

Co-authored-by: Dimitri POSTOLOV <[email protected]>

package.json

@@ -83,6 +83,7 @@
     "eslint-plugin-tailwindcss": "npm:@hasparus/[email protected]",
     "fs-extra": "11.2.0",
     "graphql": "16.9.0",
+    "gray-matter": "4.0.3",
     "jest-snapshot-serializer-raw": "2.0.0",
     "pg": "8.13.1",
     "prettier": "3.4.2",

packages/web/docs/.gitignore

@@ -3,3 +3,4 @@ build
 temp
 public/sitemap.xml
 public/changelog.json
+public/_pagefind/

packages/web/docs/mdx-components.js

@@ -0,0 +1 @@
+export { useHiveMDXComponents as useMDXComponents } from '@theguild/components/server';

packages/web/docs/next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

packages/web/docs/next.config.js

@@ -1,16 +1,18 @@
 import { withGuildDocs } from '@theguild/components/next.config';
 
 export default withGuildDocs({
-  nextraConfig: /** @satisfies import("nextra").NextraConfig*/ ({
-    themeConfig: './src/theme.config.tsx',
-    autoImportThemeStyle: false,
-  }),
   output: 'export',
-  basePath: process.env.NEXT_BASE_PATH,
   eslint: {
     ignoreDuringBuilds: true,
   },
-
+  experimental: {
+    turbo: {
+      treeShaking: true,
+    },
+  },
+  nextraConfig: {
+    contentDirBasePath: '/docs',
+  },
   redirects: async () => [
     {
       source: '/docs/get-started/organizations',
@@ -245,7 +247,9 @@ export default withGuildDocs({
       permanent: true,
     },
   ],
-  swcMinify: true,
+  env: {
+    SITE_URL: 'https://the-guild.dev/graphql/hive',
+  },
   webpack: (config, { webpack }) => {
     config.externals['node:fs'] = 'commonjs node:fs';
     config.externals['node:path'] = 'commonjs node:path';

packages/web/docs/package.json

@@ -4,36 +4,37 @@
   "private": true,
   "scripts": {
     "build": "next build && next-sitemap",
-    "dev": "next",
+    "dev": "next --turbopack",
+    "postbuild": "pagefind --site .next/server/app --output-path out/_pagefind",
     "validate-mdx-links": "pnpx [email protected] --files 'src/**/*.mdx'"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "1.2.2",
     "@radix-ui/react-icons": "1.3.2",
     "@radix-ui/react-tabs": "1.1.2",
     "@radix-ui/react-tooltip": "1.1.6",
-    "@tailwindcss/typography": "0.5.16",
-    "@theguild/components": "7.6.3",
-    "clsx": "2.1.1",
+    "@theguild/components": "9.2.0",
     "date-fns": "4.1.0",
-    "next": "14.2.23",
-    "react": "18.3.1",
+    "next": "15.1.0",
+    "react": "19.0.0",
     "react-avatar": "5.0.3",
     "react-countup": "6.5.3",
-    "react-dom": "18.3.1",
+    "react-dom": "19.0.0",
     "react-icons": "5.4.0",
-    "tailwind-merge": "2.6.0",
-    "tailwindcss-animate": "1.0.7",
-    "tailwindcss-radix": "3.0.5"
+    "tailwind-merge": "2.6.0"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "0.5.16",
     "@theguild/tailwind-config": "0.6.2",
     "@types/react": "18.3.18",
     "@types/rss": "^0.0.32",
     "next-sitemap": "4.2.3",
+    "pagefind": "^1.2.0",
     "postcss": "8.4.49",
     "postcss-nesting": "^13.0.1",
     "rss": "1.2.2",
-    "tailwindcss": "3.4.17"
+    "tailwindcss": "3.4.17",
+    "tailwindcss-animate": "1.0.7",
+    "tailwindcss-radix": "3.0.5"
   }
 }

packages/web/docs/src/pages/_meta.ts → packages/web/docs/src/app/_meta.ts

@@ -6,58 +6,40 @@ const meta: Record<string, DeepPartial<Item | MenuItem | PageItem>> = {
     title: 'Home',
     type: 'page',
     display: 'hidden',
-    theme: {
-      layout: 'raw',
-    },
   },
   federation: {
     title: 'Federation',
     type: 'page',
     display: 'hidden',
-    theme: {
-      layout: 'raw',
-    },
   },
   hive: {
     title: 'Get Started',
     type: 'page',
     href: 'https://app.graphql-hive.com',
-    newWindow: true,
   },
   'contact-us': {
     title: 'Contact Us',
     type: 'page',
     href: 'https://the-guild.dev/contact',
-    newWindow: true,
   },
   status: {
     title: 'Status',
     type: 'page',
     href: 'https://status.graphql-hive.com',
-    newWindow: true,
   },
   docs: {
     title: 'Documentation',
     type: 'page',
-    theme: {
-      toc: true,
-    },
   },
   partners: {
     title: 'Partners',
     type: 'page',
     display: 'hidden',
-    theme: {
-      layout: 'raw',
-    },
   },
   ecosystem: {
     title: 'Ecosystem',
     type: 'page',
     display: 'hidden',
-    theme: {
-      layout: 'raw',
-    },
   },
   products: {
     title: 'Products',
@@ -67,9 +49,6 @@ const meta: Record<string, DeepPartial<Item | MenuItem | PageItem>> = {
   pricing: {
     title: 'Pricing',
     type: 'page',
-    theme: {
-      layout: 'raw',
-    },
   },
   'product-updates': {
     type: 'page',
@@ -85,21 +64,16 @@ const meta: Record<string, DeepPartial<Item | MenuItem | PageItem>> = {
     type: 'page',
     title: 'Our Open Source Friends',
     display: 'hidden',
-    theme: {
-      layout: 'raw',
-    },
   },
   blog: {
     title: 'Blog',
     type: 'page',
     href: 'https://the-guild.dev/blog',
-    newWindow: true,
   },
   github: {
     title: 'GitHub',
     type: 'page',
     href: 'https://github.com/graphql-hive/platform',
-    newWindow: true,
   },
   'the-guild': {
     title: 'The Guild',
@@ -108,20 +82,17 @@ const meta: Record<string, DeepPartial<Item | MenuItem | PageItem>> = {
       'about-us': {
         title: 'About Us',
         href: 'https://the-guild.dev/about-us',
-        newWindow: true,
       },
       'brand-assets': {
         title: 'Brand Assets',
         href: 'https://the-guild.dev/logos',
-        newWindow: true,
       },
     },
   },
   'graphql-foundation': {
     title: 'GraphQL Foundation',
     type: 'page',
     href: 'https://graphql.org/community/foundation/',
-    newWindow: true,
   },
 };
 

packages/web/docs/src/app/docs/[[...mdxPath]]/page.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { ResolvingMetadata } from 'next';
+import { generateStaticParamsFor, importPage } from 'nextra/pages';
+import { NextPageProps } from '@theguild/components';
+import { useMDXComponents } from '../../../../mdx-components.js';
+import { ConfiguredGiscus } from '../../../components/configured-giscus';
+
+export const generateStaticParams = generateStaticParamsFor('mdxPath');
+
+export async function generateMetadata(
+  props: NextPageProps<'...mdxPath'>,
+  _parent: ResolvingMetadata,
+) {
+  const { mdxPath } = await props.params;
+  const { metadata } = await importPage(mdxPath);
+  return {
+    ...metadata,
+    ...(mdxPath?.[0] === 'gateway' && {
+      title: { absolute: `${metadata.title} | Hive Gateway` },
+    }),
+  };
+}
+
+const Wrapper = useMDXComponents().wrapper!;
+
+export default async function Page(props: NextPageProps<'...mdxPath'>) {
+  const params = await props.params;
+  const result = await importPage(params.mdxPath);
+  const { default: MDXContent, toc, metadata } = result;
+  return (
+    <Wrapper toc={toc} metadata={metadata}>
+      <MDXContent {...props} params={params} />
+      <ConfiguredGiscus />
+    </Wrapper>
+  );
+}

packages/web/docs/src/app/dynamic-meta-tags.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { normalizePages } from '@theguild/components';
+
+function ensureAbsolute(url: string) {
+  if (url.startsWith('/')) {
+    return `https://the-guild.dev/graphql/hive${url.replace(/\/$/, '')}`;
+  }
+
+  return url;
+}
+
+type NormalizedResult = ReturnType<typeof normalizePages>;
+
+function createBreadcrumb(normalizedResult: NormalizedResult) {
+  const activePaths = normalizedResult.activePath.slice();
+
+  if (activePaths[0]?.route !== '/') {
+    // Add the home page to all pages except the home page
+    activePaths.unshift({
+      route: '/',
+      title: 'Hive',
+      name: 'index',
+      type: 'page',
+      display: 'hidden',
+      children: [],
+      frontMatter: {},
+    });
+  }
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: activePaths.map((path, index) => {
+      return {
+        '@type': 'ListItem',
+        position: index + 1,
+        name: path.route === '/' ? 'Hive' : path.title,
+        item: ensureAbsolute(path.route),
+      };
+    }),
+  };
+}
+
+export function DynamicMetaTags({ pageMap }: { pageMap: any[] }) {
+  const pathname = usePathname()!;
+  if (pathname === '/_not-found') {
+    return;
+  }
+  const normalizePagesResult = normalizePages({
+    list: pageMap,
+    route: pathname,
+  });
+  return (
+    <script
+      type="application/ld+json"
+      id="breadcrumb"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify(createBreadcrumb(normalizePagesResult), null, 2),
+      }}
+    />
+  );
+}

packages/web/docs/src/components/ecosystem-page/page.tsx → packages/web/docs/src/app/ecosystem/page.tsx

@@ -1,8 +1,13 @@
-import { GotAnIdeaSection } from '../got-an-idea-section';
-import { Page as LandingPageContainer } from '../page';
+import { GotAnIdeaSection } from '../../components/got-an-idea-section';
+import { LandingPageContainer } from '../../components/landing-page-container';
 import { components } from './components';
 import EcosystemPageContent from './content.mdx';
 
+export const metadata = {
+  title: 'The Ecosystem',
+  description: 'Everything you need to scale your API infrastructure',
+};
+
 export default function EcosystemPage() {
   return (
     <LandingPageContainer className="text-green-1000 light mx-auto max-w-[90rem] overflow-hidden px-4 [&>:not(header)]:px-4 lg:[&>:not(header)]:px-8 xl:[&>:not(header)]:px-[120px]">