[docs] Fix Mermaid

md-book was not rendering mermaid diagrams due to missing javascript
dependencies. This change adds the javascript files under
`docs/src/third_party`.

Signed-off-by: Miguel Osorio <[email protected]>

Author: moidx

docs/book.toml

@@ -9,3 +9,9 @@ title = "OpenProt Documentation"
 command = "mdbook-mermaid"
 
 [output.html]
+additional-js = ["src/third_party/mermaid.min.js", "src/third_party/mermaid-init.js"]
+default-theme = "light"
+
+[output.html.fold]
+enable = true
+level = 1

docs/src/third_party/mermaid-init.js

@@ -0,0 +1,39 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.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();
+            }
+        });
+    }
+})();