From 428feab786f4201ef84a1e2dbbe1c0f55cfef76d Mon Sep 17 00:00:00 2001
From: Julius Krumbiegel <22495855+jkrumbiegel@users.noreply.github.com>
Date: Mon, 15 Jul 2024 10:56:49 +0200
Subject: [PATCH] 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               | 13 ++++-
 docs/src/.vitepress/config.mts              | 13 ++++-
 docs/src/.vitepress/theme/VersionPicker.vue | 62 +++++++++++++++++++++
 docs/src/.vitepress/theme/index.ts          |  2 +
 4 files changed, 87 insertions(+), 3 deletions(-)
 create mode 100644 docs/src/.vitepress/theme/VersionPicker.vue

diff --git a/docs/buildutils/deploydocs.jl b/docs/buildutils/deploydocs.jl
index e8c10a3317b..867dc82112e 100644
--- a/docs/buildutils/deploydocs.jl
+++ b/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
diff --git a/docs/src/.vitepress/config.mts b/docs/src/.vitepress/config.mts
index a7cbd219576..f7b4cd2e652 100644
--- a/docs/src/.vitepress/config.mts
+++ b/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: [
diff --git a/docs/src/.vitepress/theme/VersionPicker.vue b/docs/src/.vitepress/theme/VersionPicker.vue
new file mode 100644
index 00000000000..8c316e1909e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/src/.vitepress/theme/index.ts b/docs/src/.vitepress/theme/index.ts
index e97c4276862..1544f111cc0 100644
--- a/docs/src/.vitepress/theme/index.ts
+++ b/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,