doc: Add mdbook-tabs

doc/README.md

@@ -26,10 +26,11 @@ utility which may be installed via:
 cargo install mdbook
 ```
 
-For the mdbook-katex backend run:
+For the plugin mdbook backends run:
 
 ```
 cargo install --git "https://github.com/lzanini/mdbook-katex"
 cargo install --git "https://github.com/badboy/mdbook-toc"
 cargo install --git "https://github.com/badboy/mdbook-mermaid"
+cargo install --git "https://github.com/rustforweb/mdbook-plugins" mdbook-tabs
 ```

doc/book.toml

@@ -10,11 +10,14 @@ text-direction = "ltr"
 default-theme = "ayu"
 preferred-dark-theme = "ayu"
 theme = "theme"
-additional-js = ["theme/mermaid.min.js", "theme/mermaid-init.js", "theme/zkas-highlight.js"]
+additional-css = ["theme/tabs.css"]
+additional-js = ["theme/mermaid.min.js", "theme/mermaid-init.js", "theme/zkas-highlight.js", "theme/tabs.js"]
 
 [output.html.playground]
 runnable = false
 
+[preprocessor.tabs]
+
 [preprocessor.katex]
 macros = "latex-macros.txt"
 after = ["links"]
@@ -25,3 +28,4 @@ renderer = ["html"]
 
 [preprocessor.mermaid]
 command = "mdbook-mermaid"
+

doc/theme/tabs.css

@@ -0,0 +1,25 @@
+.mdbook-tabs {
+    display: flex;
+}
+
+.mdbook-tab {
+    background-color: var(--table-alternate-bg);
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    border: none;
+    font-size: 1.6rem;
+    line-height: 1.45em;
+}
+
+.mdbook-tab.active {
+    background-color: var(--table-header-bg);
+    font-weight: bold;
+}
+
+.mdbook-tab-content {
+    padding: 1rem 0rem;
+}
+
+.mdbook-tab-content table {
+    margin: unset;
+}

doc/theme/tabs.js

@@ -0,0 +1,75 @@
+/**
+ * Change active tab of tabs.
+ *
+ * @param {Element} container
+ * @param {string} name
+ */
+const changeTab = (container, name) => {
+    for (const child of container.children) {
+        if (!(child instanceof HTMLElement)) {
+            continue;
+        }
+
+        if (child.classList.contains('mdbook-tabs')) {
+            for (const tab of child.children) {
+                if (!(tab instanceof HTMLElement)) {
+                    continue;
+                }
+
+                if (tab.dataset.tabname === name) {
+                    tab.classList.add('active');
+                } else {
+                    tab.classList.remove('active');
+                }
+            }
+        } else if (child.classList.contains('mdbook-tab-content')) {
+            if (child.dataset.tabname === name) {
+                child.classList.remove('hidden');
+            } else {
+                child.classList.add('hidden');
+            }
+        }
+    }
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+    const tabs = document.querySelectorAll('.mdbook-tab');
+    for (const tab of tabs) {
+        tab.addEventListener('click', () => {
+            if (!(tab instanceof HTMLElement)) {
+                return;
+            }
+
+            if (!tab.parentElement || !tab.parentElement.parentElement) {
+                return;
+            }
+
+            const container = tab.parentElement.parentElement;
+            const name = tab.dataset.tabname;
+            const global = container.dataset.tabglobal;
+
+            changeTab(container, name);
+
+            if (global) {
+                localStorage.setItem(`mdbook-tabs-${global}`, name);
+
+                const globalContainers = document.querySelectorAll(
+                    `.mdbook-tabs-container[data-tabglobal="${global}"]`
+                );
+                for (const globalContainer of globalContainers) {
+                    changeTab(globalContainer, name);
+                }
+            }
+        });
+    }
+
+    const containers = document.querySelectorAll('.mdbook-tabs-container[data-tabglobal]');
+    for (const container of containers) {
+        const global = container.dataset.tabglobal;
+
+        const name = localStorage.getItem(`mdbook-tabs-${global}`);
+        if (name && document.querySelector(`.mdbook-tab[data-tabname="${name}"]`)) {
+            changeTab(container, name);
+        }
+    }
+});