fix: render mermaid diagrams client-side (#1009)

flake.nix

@@ -15,11 +15,6 @@
             nodejs
             yarn
           ];
-
-          shellHook = ''
-            export PUPPETEER_SKIP_DOWNLOAD=1
-            export PUPPETEER_EXECUTABLE_PATH=${pkgs.chromium.outPath}/bin/chromium
-          '';
         };
       }
     );

gatsby-config.js

@@ -1,5 +1,3 @@
-const puppeteer = require('puppeteer');
-
 module.exports = {
   siteMetadata: {
     title: `Resumos LEIC-A`,
@@ -111,15 +109,7 @@ module.exports = {
               tight: true,
             },
           },
-          {
-            resolve: `gatsby-remark-mermaid`,
-            options: {
-              launchOptions: {
-                executablePath: puppeteer.executablePath(),
-              },
-              svgo: false, // it doesn't like lines breaks in diagram text boxes
-            },
-          },
+          `gatsby-remark-mermaid`,
           `gatsby-remark-embed-snippet`,
           {
             resolve: `gatsby-remark-prismjs`,

package.json

@@ -39,16 +39,15 @@
     "gatsby-remark-external-links": "^0.0.4",
     "gatsby-remark-images": "^7.13.0",
     "gatsby-remark-katex": "^7.13.0",
-    "gatsby-remark-mermaid": "^3.0.1",
     "gatsby-remark-prismjs": "^7.13.0",
     "gatsby-remark-table-of-contents": "^2.0.0",
     "gatsby-source-filesystem": "^5.13.0",
     "gatsby-transformer-remark": "^6.13.0",
     "katex": "^0.16.9",
     "meilisearch": "^0.30.0",
+    "mermaid": "^10.9.0",
     "mini-svg-data-uri": "^1.4.4",
     "prismjs": "^1.29.0",
-    "puppeteer": "^19.11.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "remark-directive": "^1.0.1"

plugins/gatsby-remark-mermaid/index.js

@@ -0,0 +1,21 @@
+const visit = require('unist-util-visit');
+
+const onTextVisit = (node) => {
+  node.type = 'paragraph';
+  node.children = [{ type: 'text', value: node.value }];
+
+  const data = node.data || (node.data = {});
+  const hProperties = data.hProperties || (data.hProperties = {});
+  const classes = hProperties.class || (hProperties.class = []);
+
+  classes.push(`mermaid`);
+  data.hName = 'div';
+
+  delete node.value;
+  delete node.meta;
+  delete node.lang;
+};
+
+module.exports = ({ markdownAST }) => {
+  visit(markdownAST, { type: 'code', lang: 'mermaid' }, onTextVisit);
+};

plugins/gatsby-remark-mermaid/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "gatsby-remark-mermaid",
+  "main": "index.js"
+}

src/components/PageLayout.js

@@ -2,6 +2,7 @@ import { graphql } from 'gatsby';
 import 'katex/dist/katex.min.css';
 import React, { useCallback, useState } from 'react';
 import { CurrentSectionProvider } from '../hooks/useCurrentSection';
+import { useMermaid } from '../hooks/useMermaid';
 import '../styles/main.css';
 import '../styles/markdown.css';
 import { customComponents } from '../utils/customComponents';
@@ -13,6 +14,7 @@ import PageMetadata from './PageMetadata';
 import Sidebar from './Sidebar';
 
 export default function Template({ data }) {
+  useMermaid();
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   const toggleSidebar = useCallback(() => setSidebarOpen((open) => !open), [setSidebarOpen]);

src/hooks/useMermaid.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import mermaid from 'mermaid';
+
+export function useMermaid() {
+  React.useEffect(() => {
+    mermaid.initialize({
+      startOnLoad: false,
+    });
+    mermaid.run();
+  }, []);
+}

src/styles/main.css

@@ -89,7 +89,7 @@ strong a {
   body.dark-mode img[data-dark='4'] {
     filter: invert(1);
   }
-  body.dark-mode svg[id^='remark-mermaid-'] {
+  body.dark-mode .mermaid > svg {
     filter: invert(1) hue-rotate(135deg);
   }
 }
@@ -374,6 +374,6 @@ kbd {
   padding: 0.1em 0.3em;
 }
 
-p:has(svg[id^="remark-mermaid-"]) {
+.mermaid {
   text-align: center;
 }