docs: add mdbook-mermaid plugin

.github/workflows/mdbook.yaml

@@ -16,13 +16,10 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - name: Install latest mdbook
+      - name: Install mdbook and mdbook plugins
         run: |
-          tag=$(curl 'https://api.github.com/repos/rust-lang/mdbook/releases/latest' | jq -r '.tag_name')
-          url="https://github.com/rust-lang/mdbook/releases/download/${tag}/mdbook-${tag}-x86_64-unknown-linux-gnu.tar.gz"
-          mkdir mdbook
-          curl -sSL $url | tar -xz --directory=./mdbook
-          echo `pwd`/mdbook >> $GITHUB_PATH
+          cargo install mdbook
+          cargo install mdbook-mermaid
       - name: Build Book
         run: mdbook build
         working-directory: docs/spec

docs/spec/book.toml

@@ -6,4 +6,13 @@ src = "src"
 title = "EigenDA Spec"
 
 [output.html]
-mathjax-support = true
+mathjax-support = true
+additional-js = ["mermaid.min.js", "mermaid-init.js"]
+
+[preprocessor]
+
+[preprocessor.mermaid]
+# Preprocesses the mermaid diagrams (see src/integration/proxy.md for an example)
+# and generates the corresponding SVG files.
+# See https://github.com/badboy/mdbook-mermaid for more information.
+command = "mdbook-mermaid"

docs/spec/mermaid-init.js

@@ -0,0 +1,37 @@
+// You can modify this file to customize mdbook-mermaid.
+// See https://github.com/badboy/mdbook-mermaid?tab=readme-ov-file#configure-your-mdbook-to-use-mdbook-mermaid
+(() => {
+    const darkThemes = ['ayu', 'navy', 'coal'];
+    const lightThemes = ['light', 'rust'];
+
+    const classList = document.getElementsByTagName('html')[0].classList;
+
+    let lastThemeWasLight = true;
+    for (const cssClass of classList) {
+        if (darkThemes.includes(cssClass)) {
+            lastThemeWasLight = false;
+            break;
+        }
+    }
+
+    const theme = lastThemeWasLight ? 'default' : 'dark';
+    mermaid.initialize({ startOnLoad: true, theme });
+
+    // Simplest way to make mermaid re-render the diagrams in the new theme is via refreshing the page
+
+    for (const darkTheme of darkThemes) {
+        document.getElementById(darkTheme).addEventListener('click', () => {
+            if (lastThemeWasLight) {
+                window.location.reload();
+            }
+        });
+    }
+
+    for (const lightTheme of lightThemes) {
+        document.getElementById(lightTheme).addEventListener('click', () => {
+            if (!lastThemeWasLight) {
+                window.location.reload();
+            }
+        });
+    }
+})();