new landing — docs tweaks

next.config.js

@@ -1,10 +1,12 @@
 /* eslint-env node */
+// @ts-check
 
 import nextra from "nextra"
 import path from "node:path"
 import withLess from "next-with-less"
 import nextBundleAnalyzer from "@next/bundle-analyzer"
 import fs from "fs"
+import rehypeMermaid from "rehype-mermaid"
 
 import { remarkGraphiQLComment } from "./src/remark-graphiql-comment.js"
 import { syntaxHighlightingThemes } from "./src/_design-system/syntax/index.js"
@@ -17,6 +19,7 @@ const withNextra = nextra({
   themeConfig: "./theme.config.tsx",
   mdxOptions: {
     remarkPlugins: [remarkGraphiQLComment],
+    rehypePlugins: [mermaidConfig()],
     rehypePrettyCodeOptions: {
       theme: syntaxHighlightingThemes,
     },
@@ -176,3 +179,29 @@ const withBundleAnalyzer = nextBundleAnalyzer({
 })
 
 export default withBundleAnalyzer(withLess(withNextra(config)))
+
+function mermaidConfig() {
+  return [
+    rehypeMermaid,
+    /** @type {import("rehype-mermaid").RehypeMermaidOptions} */ ({
+      mermaidConfig: {
+        fontFamily: "var(--font-mono, monospace)",
+        theme: "null",
+        look: "classic",
+        themeCSS: `
+          .node rect {
+            fill: hsl(var(--color-neu-50));
+            stroke: hsl(var(--color-neu-300));
+          }
+          .label text, span {
+            fill: hsl(var(--color-neu-900));
+            color: hsl(var(--color-neu-900));
+          }
+          .flowchart-link {
+            stroke: hsl(var(--color-neu-500));
+          }
+        `,
+      },
+    }),
+  ]
+}

package.json

@@ -6,7 +6,7 @@
   "packageManager": "[email protected]",
   "scripts": {
     "analyze": "ANALYZE=true next build",
-    "build": "next build && next-image-export-optimizer",
+    "build": "pnpm playwright install chromium --only-shell && next build && next-image-export-optimizer",
     "check:links": "lychee --verbose --no-progress './src/pages/**/*.mdx' --base https://graphql.org",
     "dev": "next",
     "format": "pnpm format:check --write",
@@ -63,6 +63,7 @@
     "react-dom": "^18.3.1",
     "react-medium-image-zoom": "5.2.13",
     "react-use-measure": "^2.1.7",
+    "rehype-mermaid": "^3.0.0",
     "rss": "1.2.2",
     "server-only": "0.0.1",
     "string-similarity": "^4.0.4",
@@ -115,7 +116,8 @@
   ],
   "pnpm": {
     "patchedDependencies": {
-      "nextra": "patches/nextra.patch"
+      "nextra": "patches/nextra.patch",
+      "nextra-theme-docs": "patches/nextra-theme-docs.patch"
     }
   }
 }

patches/nextra-theme-docs.patch

@@ -0,0 +1,43 @@
+diff --git a/dist/index.d.mts b/dist/index.d.mts
+index 71f87bcd1dde49d7c19ad49fc098e715a76c5c10..6671e29326be99861058895916185910452ced17 100644
+--- a/dist/index.d.mts
++++ b/dist/index.d.mts
+@@ -1421,3 +1421,19 @@ declare function ThemeSwitch({ lite, className }: ThemeSwitchProps): ReactElemen
+ declare function Layout({ children, themeConfig, pageOpts }: NextraThemeLayoutProps): ReactElement;
+
+ export { Bleed, Collapse, type PartialDocsThemeConfig as DocsThemeConfig, Link, LocaleSwitch, Navbar, NotFoundPage, SkipNavContent, SkipNavLink, ThemeSwitch, Layout as default, getComponents, useConfig, useMenu, useThemeConfig };
++
++export type ActiveAnchor = Record<
++  string,
++  {
++    isActive?: boolean
++    aboveHalfViewport: boolean
++    index: number
++    insideHalfViewport: boolean
++  }
++>
++
++export declare const useActiveAnchor: () => ActiveAnchor
++export declare const useSetActiveAnchor: () => Dispatch<SetStateAction<ActiveAnchor>>
++export declare const useIntersectionObserver: () => IntersectionObserver | null
++export declare const useSlugs: () => WeakMap<any, any>
++
+diff --git a/dist/index.js b/dist/index.js
+index 56201641fd965dcc5ab7c5df53e444c41293c00e..860b8cfd297e82da041c4d8287ed266691d75a0e 100644
+--- a/dist/index.js
++++ b/dist/index.js
+@@ -100,10 +100,10 @@ IntersectionObserverContext.displayName = "IntersectionObserver";
+ var slugs = /* @__PURE__ */ new WeakMap();
+ var SlugsContext = createContext(slugs);
+ SlugsContext.displayName = "Slugs";
+-var useActiveAnchor = () => useContext(ActiveAnchorContext);
+-var useSetActiveAnchor = () => useContext(SetActiveAnchorContext);
+-var useIntersectionObserver = () => useContext(IntersectionObserverContext);
+-var useSlugs = () => useContext(SlugsContext);
++export var useActiveAnchor = () => useContext(ActiveAnchorContext);
++export var useSetActiveAnchor = () => useContext(SetActiveAnchorContext);
++export var useIntersectionObserver = () => useContext(IntersectionObserverContext);
++export var useSlugs = () => useContext(SlugsContext);
+ var ActiveAnchorProvider = ({
+   children
+ }) => {

patches/nextra.patch

@@ -9,6 +9,28 @@ index 239d72f5921e2d1b7359e569ae5b74c12d7c9d8a..ebeb619da1e3ccb7722e9388c92c1e21
  import { forwardRef } from "react";
  const Image = forwardRef((props, ref) => {
    const ComponentToUse = typeof props.src === "object" ? NextImage : "img";
+diff --git a/dist/client/components/index.js b/dist/client/components/index.js
+index 9d05118d3d10e746cd2c020785a0f34465bb8570..218107600d7efed1b5f9d49f0a696b166917d1ce 100644
+--- a/dist/client/components/index.js
++++ b/dist/client/components/index.js
+@@ -14,7 +14,7 @@ import { Tabs } from "./tabs/index.js";
+ import { Td } from "./td.js";
+ import { Th } from "./th.js";
+ import { Tr } from "./tr.js";
+-import { Mermaid } from "@theguild/remark-mermaid/mermaid";
++// import { Mermaid } from "@theguild/remark-mermaid/mermaid";
+ import { MathJax, MathJaxContext } from "better-react-mathjax";
+ import { Playground } from "./playground.js";
+ import { Popup } from "./popup.js";
+@@ -29,7 +29,7 @@ export {
+   ImageZoom,
+   MathJax,
+   MathJaxContext,
+-  Mermaid,
++  // Mermaid, // disabled to use rehype-mermaid and remove cytoscape from the bundle
+   Playground,
+   Popup,
+   Pre,
 diff --git a/dist/client/normalize-pages.js b/dist/client/normalize-pages.js
 index 15afee0c1de26f47d781f423e5ec32e33ad925d3..fefd01736bd2b778df275bf50ac48384d5f63845 100644
 --- a/dist/client/normalize-pages.js
@@ -24,3 +46,24 @@ index 15afee0c1de26f47d781f423e5ec32e33ad925d3..fefd01736bd2b778df275bf50ac48384
        if (!isValid) {
          throw new Error(
            `Validation of "_meta" file has failed.
+diff --git a/dist/server/compile.js b/dist/server/compile.js
+index c266efec3fe344a81c6d5791b93ab1b2bd268782..4866148a725800ef2326732f78807cca0f04cb7b 100644
+--- a/dist/server/compile.js
++++ b/dist/server/compile.js
+@@ -1,6 +1,6 @@
+ import path from "path";
+ import { createProcessor } from "@mdx-js/mdx";
+-import { remarkMermaid } from "@theguild/remark-mermaid";
++// import { remarkMermaid } from "@theguild/remark-mermaid";
+ import { remarkNpm2Yarn } from "@theguild/remark-npm2yarn";
+ import rehypeKatex from "rehype-katex";
+ import rehypePrettyCode from "rehype-pretty-code";
+@@ -143,7 +143,7 @@ async function compileMdx(source, {
+       development: process.env.NODE_ENV === "development",
+       remarkPlugins: [
+         ...remarkPlugins || [],
+-        remarkMermaid,
++        // remarkMermaid, // disabled to use rehype-mermaid and remove cytoscape from the bundle
+         // should be before remarkRemoveImports because contains `import { Mermaid } from ...`
+         [
+           remarkNpm2Yarn,