docs: version switcher

reuank · Oct 15, 2023 · 6894a08 · 6894a08
1 parent 4ce93f9
commit 6894a08
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 1 deletion.
diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
@@ -108,7 +108,7 @@ function createSidebars() {
       collapsed: false,
       items: [
         {
-          text: docs_dir.includes("latest") ? 'Switch to Stable' : 'Switch to Latest',
+          text: docs_dir.includes("latest") ? '<div id="version-switcher">Switch to Stable</div>' : '<div id="version-switcher">Switch to Latest</div>',
           link: docs_dir.includes("latest") ? '/docs/' : '/docs/latest/',
           path: docs_dir.includes("latest") ? '/docs/' : '/docs/latest/',
         }

diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
@@ -5,6 +5,35 @@ import './style.css'
 import 'promptdown/promptdown.css'
 import {pd} from "promptdown/promptdown"
 
+// custom version switcher (maps between /docs/ and /docs/latest/)
+function setupSwitcher(p) {
+  let isLatest = window.location.href.includes("latest")
+
+  p.innerHTML = `
+    <label>Version</label>
+    <div class="version${isLatest ? " active" : ""}"><code>main</code></div>
+    <div class="version${!isLatest ? " active" : ""}">Release</div>
+  `
+  const a = p.parentNode.parentNode
+  a.href = "" // isLatest ? a.href.replace("latest", "release") : a.href.replace("release", "latest")
+  a.addEventListener("click", (e) => {
+    e.preventDefault()
+    let isLatest = window.location.href.includes("latest")
+    let current = window.location.pathname
+    // strip of /docs/
+    current = current.replace("/docs/", "")
+    // strip of /latest/
+    current = current.replace("latest/", "")
+    // re-route
+    if (isLatest) {
+      current = "/docs/" + current
+    } else {
+      current = "/docs/latest/" + current
+    }
+    window.location.href = current
+  })
+}
+
 export default {
   extends: Theme,
   Layout: () => {
@@ -19,5 +48,18 @@ export default {
       }
     }
     app.use(plugin)
+
+    // on mount on app
+    app.mixin({
+      mounted() {
+        let switcher = document.querySelector("#version-switcher")
+        if (switcher) {
+          let isSetup = switcher.getAttribute("data-setup")
+          if (isSetup) return
+          setupSwitcher(switcher)
+          switcher.setAttribute("data-setup", "true")
+        }
+      }
+    })
   }
 }
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
@@ -628,4 +628,34 @@ nav a[href^="/docs/stable/"] {
 
 nav a[href^="/docs/stable/"] p {
   /* color: white !important; */
+}
+
+#version-switcher {
+  opacity: 0.9;
+  text-align: center;
+}
+
+#version-switcher .version {
+  display: inline-block;
+  border-radius: 4pt;
+  padding: 0pt 5pt;
+}
+
+#version-switcher .version:hover {
+  background-color: var(--vp-c-gray-soft);
+  color: var(--vp-c-text-1);
+}
+
+#version-switcher .version.active {
+  background-color: #007bff;
+  color: white;
+}
+
+#version-switcher label {
+  margin-right: 2pt;
+  color: var(--vp-c-text-2);
+}
+
+a:hover #version-switcher label {
+  color: var(--vp-c-text-2);
 }