Merge pull request #41 from hasparus/new-landing--docs-tweaks

new landing — docs tweaks

Author: hasparus

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,37 @@ const withBundleAnalyzer = nextBundleAnalyzer({
 })
 
 export default withBundleAnalyzer(withLess(withNextra(config)))
+
+function mermaidConfig() {
+  return [
+    rehypeMermaid,
+    /** @type {import("rehype-mermaid").RehypeMermaidOptions} */ ({
+      mermaidConfig: {
+        fontFamily: "var(--font-sans)", // we can't use monospace here because it's way too wide
+        theme: "null",
+        look: "classic",
+        flowchart: {
+          defaultRenderer: "elk",
+          padding: 6,
+        },
+        themeCSS: `
+          .node rect {
+            fill: var(--mermaid-node-fill);
+            stroke: var(--mermaid-node-stroke);
+          }
+          .label text, span {
+            fill: hsl(var(--color-neu-900));
+            color: hsl(var(--color-neu-900));
+          }
+          .flowchart-link {
+            stroke: var(--mermaid-arrow);
+          }
+          .marker {
+            stroke: var(--mermaid-arrow);
+            fill: var(--mermaid-arrow);
+          }
+        `,
+      },
+    }),
+  ]
+}

package.json

@@ -27,6 +27,7 @@
     "@igorkowalczyk/is-browser": "^5.1.0",
     "@next/bundle-analyzer": "^15.4.5",
     "@radix-ui/react-radio-group": "^1.2.2",
+    "@sparticuz/chromium": "^138.0.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
     "@tailwindcss/typography": "^0.5.15",
@@ -57,12 +58,14 @@
     "numbro": "2.5.0",
     "p-limit": "^4.0.0",
     "parser-front-matter": "1.6.4",
+    "playwright-core": "^1.54.2",
     "postcss": "^8.4.49",
     "postcss-import": "^16.1.1",
     "react": "^18.3.1",
     "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 +118,9 @@
   ],
   "pnpm": {
     "patchedDependencies": {
-      "nextra": "patches/nextra.patch"
+      "nextra": "patches/nextra.patch",
+      "nextra-theme-docs": "patches/nextra-theme-docs.patch",
+      "mermaid-isomorphic": "patches/mermaid-isomorphic.patch"
     }
   }
 }

patches/mermaid-isomorphic.patch

@@ -0,0 +1,44 @@
+diff --git a/dist/mermaid-isomorphic.js b/dist/mermaid-isomorphic.js
+index aa5dc09a5dfb58a98d3f12cd2fc473caddd97b0d..d0fa3ca8e690233d0b50e4f992ab6ac33c11585b 100644
+--- a/dist/mermaid-isomorphic.js
++++ b/dist/mermaid-isomorphic.js
+@@ -1,4 +1,5 @@
+-import { chromium } from 'playwright';
++import { chromium as playwright } from 'playwright';
++import chromium from '@sparticuz/chromium';
+ const html = import.meta.resolve('../index.html');
+ const mermaidScript = {
+     url: import.meta.resolve('mermaid/dist/mermaid.js')
+@@ -7,6 +8,9 @@ const faStyle = {
+     // We use url, not path. If we use path, the fonts can’t be resolved.
+     url: import.meta.resolve('@fortawesome/fontawesome-free/css/all.css')
+ };
++
++chromium.setGraphicsMode = false;
++
+ /* c8 ignore start */
+ /**
+  * Render mermaid diagrams in the browser.
+@@ -122,7 +126,21 @@ async function getBrowser(browserType, launchOptions) {
+  *   A function that renders Mermaid diagrams in the browser.
+  */
+ export function createMermaidRenderer(options = {}) {
+-    const { browserType = chromium, launchOptions } = options;
++    let { browserType = playwright, launchOptions } = options;
++
++    if (process.env.CI) {
++        if (options.browserType) {
++            throw new Error('options.browserType is not supported because @hasparus patched it to run on Vercel builds, sorry');
++        }
++        browserType = {
++            launch: async () => playwright.launch({
++                ...launchOptions,
++                args: chromium.args,
++                executablePath: await chromium.executablePath(),
++            })
++        }
++    }
++
+     let browserPromise;
+     let count = 0;
+     return async (diagrams, renderOptions) => {

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,