Repo created

docs/assets/theme/last-changed.css

@@ -0,0 +1,6 @@
+footer {
+    font-size: 0.8em;
+    text-align: center;
+    border-top: 1px solid var(--fg);
+    padding: 5px 0;
+}

docs/assets/theme/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();
+            }
+        });
+    }
+})();

docs/assets/theme/navigation.css

@@ -0,0 +1,13 @@
+.sidebar-scrollbox .section a[href*="adr"]:not([href*="index.html"]) strong {
+    display: none;
+}
+.sidebar-scrollbox .section a[href*="adr"]:not([href*="index.html"]) .number {
+    font-weight: 550;
+}
+
+.chapter li .chapter-item div {
+    display: block;
+      padding: 0;
+      text-decoration: none;
+      color: var(--sidebar-fg);
+}

docs/assets/theme/navigation.js

@@ -0,0 +1,22 @@
+document.querySelectorAll('.sidebar-scrollbox .section a[href*="adr"]').forEach(el => {
+    if (el.getAttribute('href').includes('index.html')) {
+        return; // Skip processing for index.html
+    }
+
+    let textNodes = [...el.childNodes].filter(node => node.nodeType === Node.TEXT_NODE && node.nodeValue.trim().length > 0);
+
+    if (textNodes.length > 0) {
+        let textNode = textNodes[0]; // First text node (ignoring elements like <strong>)
+        let text = textNode.nodeValue.trim();
+
+        if (text.length >= 4) {
+            let span = document.createElement("span");
+            span.classList.add("number");
+            span.textContent = text.substring(0, 4);
+
+            textNode.nodeValue = text.substring(4); // Remove first 4 chars from original text node
+
+            el.insertBefore(span, textNode); // Insert the styled first 4 characters before the rest
+        }
+    }
+});

docs/assets/theme/pagetoc.css

@@ -0,0 +1,61 @@
+a[class^='pagetoc-H']:only-child {
+    display: none;
+}
+
+@media only screen and (max-width:1439px) {
+    .sidetoc {
+        display: none;
+    }
+}
+
+@media only screen and (min-width:1440px) {
+    main {
+        position: relative;
+    }
+    .sidetoc {
+        margin-left: auto;
+        margin-right: auto;
+        left: calc(100% + (var(--content-max-width))/4 - 140px);
+        position: absolute;
+    }
+    .pagetoc {
+        position: fixed;
+        width: 200px;
+        height: calc(100vh - var(--menu-bar-height) - 0.67em * 4);
+        overflow: auto;
+    }
+    .pagetoc a {
+        border-left: 1px solid var(--sidebar-bg);
+        color: var(--fg) !important;
+        display: block;
+        padding-bottom: 5px;
+        padding-top: 5px;
+        padding-left: 10px;
+        text-align: left;
+        text-decoration: none;
+    }
+    .pagetoc a:hover,
+    .pagetoc a.active {
+        background: var(--sidebar-bg);
+        color: var(--sidebar-fg) !important;
+    }
+    .pagetoc .active {
+        background: var(--sidebar-bg);
+        color: var(--sidebar-fg);
+    }
+    .pagetoc .pagetoc-H2 {
+        padding-left: 20px;
+    }
+    .pagetoc .pagetoc-H3 {
+        padding-left: 40px;
+    }
+    .pagetoc .pagetoc-H4 {
+        padding-left: 60px;
+    }
+    .pagetoc .pagetoc-H5 {
+        display: none;
+    }
+    .pagetoc .pagetoc-H6 {
+        display: none;
+    }
+}

docs/assets/theme/pagetoc.js

@@ -0,0 +1,68 @@
+let scrollTimeout;
+
+const listenActive = () => {
+  const elems = document.querySelector(".pagetoc").children;
+  [...elems].forEach(el => {
+    el.addEventListener("click", (event) => {
+      clearTimeout(scrollTimeout);
+      [...elems].forEach(el => el.classList.remove("active"));
+      el.classList.add("active");
+      // Prevent scroll updates for a short period
+      scrollTimeout = setTimeout(() => {
+        scrollTimeout = null;
+      }, 100); // Adjust timing as needed
+    });
+  });
+};
+
+const getPagetoc = () => document.querySelector(".pagetoc") || autoCreatePagetoc();
+
+const autoCreatePagetoc = () => {
+  const main = document.querySelector("#content > main");
+  const content = Object.assign(document.createElement("div"), {
+    className: "content-wrap"
+  });
+  content.append(...main.childNodes);
+  main.prepend(content);
+  main.insertAdjacentHTML("afterbegin", '<div class="sidetoc"><nav class="pagetoc"></nav></div>');
+  return document.querySelector(".pagetoc");
+};
+const updateFunction = () => {
+  if (scrollTimeout) return; // Skip updates if within the cooldown period from a click
+  const headers = [...document.getElementsByClassName("header")];
+  const scrolledY = window.scrollY;
+  let lastHeader = null;
+
+  // Find the last header that is above the current scroll position
+  for (let i = headers.length - 1; i >= 0; i--) {
+    if (scrolledY >= headers[i].offsetTop) {
+      lastHeader = headers[i];
+      break;
+    }
+  }
+
+  const pagetocLinks = [...document.querySelector(".pagetoc").children];
+  pagetocLinks.forEach(link => link.classList.remove("active"));
+
+  if (lastHeader) {
+    const activeLink = pagetocLinks.find(link => lastHeader.href === link.href);
+    if (activeLink) activeLink.classList.add("active");
+  }
+};
+
+window.addEventListener('load', () => {
+  const pagetoc = getPagetoc();
+  const headers = [...document.getElementsByClassName("header")];
+  headers.forEach(header => {
+    const link = Object.assign(document.createElement("a"), {
+      textContent: header.text,
+      href: header.href,
+      className: `pagetoc-${header.parentElement.tagName}`
+    });
+    pagetoc.appendChild(link);
+  });
+  updateFunction();
+  listenActive();
+  window.addEventListener("scroll", updateFunction);
+});
+