Docs version picker (#4034)

* add version picker component for nav

* write DOC_VERSIONS to versions.js

* only render index page for now

* don't filter after all, breaks due to references

* make links absolute

* remove console.log

docs/buildutils/deploydocs.jl

@@ -120,15 +120,24 @@ function push_build(;
             """)
         end
 
-        max_version = sort!(filter([x for x in readdir(dirname) if isdir(joinpath(dirname, x))]) do x
+        all_folders = [x for x in readdir(dirname) if isdir(joinpath(dirname, x))]
+        version_folders = filter(all_folders) do x
             tryparse(VersionNumber, x) !== nothing
-        end, by = VersionNumber)[end]
+        end
+
+        max_version = sort!(version_folders, by = VersionNumber)[end]
 
         open(joinpath(dirname, "versions.js"), "w") do io
             println(io, """
             var DOCUMENTER_NEWEST = "$max_version";
             var DOCUMENTER_STABLE = "stable";
             """)
+
+            println(io, "var DOC_VERSIONS = [")
+            for folder in ["stable"; version_folders; "dev"]
+                println(io, "  \"", folder, "\",")
+            end
+            println(io, "];")
         end
 
         # generate the sitemap only for the highest version so google doesn't advertise old docs

docs/src/.vitepress/config.mts

@@ -7,6 +7,17 @@ const baseTemp = {
   base: 'REPLACE_ME_DOCUMENTER_VITEPRESS',// TODO: replace this in makedocs!
 }
 
+const navTemp = {
+  nav: 'REPLACE_ME_DOCUMENTER_VITEPRESS',
+}
+
+const nav = [
+  ...navTemp.nav,
+  {
+    component: 'VersionPicker'
+  }
+]
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   base: baseTemp.base,
@@ -42,7 +53,7 @@ export default defineConfig({
         detailedView: true
       }
     },
-    nav: 'REPLACE_ME_DOCUMENTER_VITEPRESS',
+    nav,
     sidebar: 'REPLACE_ME_DOCUMENTER_VITEPRESS',
     editLink: 'REPLACE_ME_DOCUMENTER_VITEPRESS',
     socialLinks: [

docs/src/.vitepress/theme/VersionPicker.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue'
+import { useRoute } from 'vitepress'
+import VPNavBarMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavBarMenuGroup.vue'
+import VPNavScreenMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavScreenMenuGroup.vue'
+
+const props = defineProps<{
+  screenMenu?: boolean
+}>()
+
+const route = useRoute()
+
+const versions = ref([]);
+const currentVersion = ref('Versions');
+
+const waitForGlobalDocumenterVars = () => {
+    return new Promise((resolve) => {
+    const checkInterval = setInterval(() => {
+        if (window.DOC_VERSIONS && window.DOCUMENTER_CURRENT_VERSION) {
+        clearInterval(checkInterval);
+        resolve({
+            versions: window.DOC_VERSIONS,
+            currentVersion: window.DOCUMENTER_CURRENT_VERSION
+        });
+        }
+    }, 100); // Check every 100ms
+    });
+};
+
+onMounted(async () => {
+    const globalvars = await waitForGlobalDocumenterVars();
+    versions.value = globalvars.versions.map((v) => {
+        return {text: v, link: `${window.location.origin}/${v}/`}
+    });
+    currentVersion.value = globalvars.currentVersion;
+});
+
+</script>
+
+<template>
+  <VPNavBarMenuGroup
+    v-if="!screenMenu"
+    :item="{ text: currentVersion, items: versions }"
+    class="VPVersionPicker"
+  />
+  <VPNavScreenMenuGroup
+    v-else
+    :text="currentVersion"
+    :items="versions"
+    class="VPVersionPicker"
+  />
+</template>
+
+<style scoped>
+.VPVersionPicker :deep(button .text) {
+  color: var(--vp-c-text-1) !important;
+}
+
+.VPVersionPicker:hover :deep(button .text) {
+  color: var(--vp-c-text-2) !important;
+}
+</style>

docs/src/.vitepress/theme/index.ts

@@ -3,6 +3,7 @@ import { h, watch } from "vue";
 import type { Theme } from "vitepress";
 import DefaultTheme from "vitepress/theme";
 import SimpleAnalytics from "./SimpleAnalytics.vue"
+import VersionPicker from "./VersionPicker.vue"
 
 import { enhanceAppWithTabs } from "vitepress-plugin-tabs/client";
 import "./style.css";
@@ -17,6 +18,7 @@ export default {
   },
   async enhanceApp({ app, router, siteData }) {
     enhanceAppWithTabs(app);
+    app.component('VersionPicker', VersionPicker);
     // Only run this on the client. Not during build.
     // this function replaces the version in the URL with the stable prefix whenever a
     // new route is navigated to. VitePress does not support relative links all over the site,