docs: convert core and prover docs to mdbook project and add CI

docs/.gitignore

@@ -0,0 +1 @@
+book

docs/book.toml

@@ -0,0 +1,32 @@
+[book]
+authors = ["ZKsync team"]
+language = "en"
+multilingual = false
+src = "src"
+title = "ZKsync Era Documentation"
+
+[output.html]
+smart-punctuation = true
+mathjax-support = true
+git-repository-url = "https://github.com/matter-labs/zksync-era/tree/main/docs"
+edit-url-template = "https://github.com/matter-labs/zksync-era/tree/main/docs/{path}"
+additional-js = ["js/version-box.js", "js/mermaid.min.js", "js/mermaid-init.js"]
+additional-css = ["css/version-box.css"]
+
+[output.html.playground]
+editable = true
+line-numbers = true
+
+[output.html.search]
+limit-results = 20
+use-boolean-and = true
+boost-title = 2
+boost-hierarchy = 2
+boost-paragraph = 1
+expand = true
+heading-split-level = 2
+
+[preprocessor]
+
+[preprocessor.mermaid]
+command = "mdbook-mermaid"

docs/css/version-box.css

@@ -0,0 +1,46 @@
+#version-box {
+    display: flex;
+    align-items: center;
+    margin-right: 15px; /* Space from the right side */
+    background-color: transparent; /* Make the box background transparent */
+}
+
+/* Base styles for the version selector */
+#version-selector {
+    background-color: transparent; /* Remove background color */
+    border: 1px solid #4a5568;     /* Subtle border */
+    border-radius: 4px;            /* Rounded edges */
+    padding: 5px 10px;             /* Padding inside dropdown */
+    font-size: 0.9em;
+    font-weight: normal;
+    outline: none;                 /* Removes default focus outline */
+    cursor: pointer;
+}
+
+/* Text color for dark themes */
+.theme-navy #version-selector,
+.theme-coal #version-selector {
+    color: #f7fafc; /* Light text color for dark backgrounds */
+}
+
+/* Text color for light theme */
+.theme-light #version-selector {
+    color: #333333; /* Dark text color for light background */
+}
+
+/* Hover effect for better user feedback */
+#version-selector:hover {
+    background-color: rgba(255, 255, 255, 0.1); /* Light hover effect */
+}
+
+/* Optional: Style for when the selector is focused */
+#version-selector:focus {
+    border-color: #63b3ed; /* Accent color for focused state */
+}
+
+.right-buttons {
+    display: flex;
+    flex-direction: row;     /* Aligns items in a row, left to right */
+    align-items: center;     /* Centers items vertically */
+    gap: 10px;               /* Adds space between items */
+}

docs/js/mermaid-init.js

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