mermaid: initialize in build script

book.toml

@@ -9,8 +9,3 @@ title = "Sinara Assembly"
 
 [preprocessor.mermaid]
 command = "mdbook-mermaid"
-
-[output]
-
-[output.html]
-additional-js = ["mermaid.min.js", "mermaid-init.js"]

flake.nix

@@ -13,8 +13,12 @@
       packages.${system}.default = pkgs.stdenv.mkDerivation {
         name = "book";
         src = self;
-        buildInputs = [ pkgs.mdbook ];
-        buildPhase = "mdbook build";
+        buildInputs = [ pkgs.mdbook pkgs.mdbook-mermaid ];
+        buildPhase = "
+          cp -r ${pkgs.mdbook-mermaid.src}/src/bin/assets .
+          export MDBOOK_OUTPUT__HTML__ADDITIONAL_JS='[\"assets/mermaid.min.js\", \"assets/mermaid-init.js\"]'
+          mdbook build
+        ";
         installPhase = "mkdir -p $out/book; cp -R book $out/";
       };
       devShell.${system} = pkgs.mkShell {

mermaid-init.js

@@ -1,35 +0,0 @@
-(() => {
-    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();
-            }
-        });
-    }
-})();