From 2a49f321f6054d4f6f57d07cdec28eb9ced893e0 Mon Sep 17 00:00:00 2001
From: Lazaro Alonso <lazarus.alon@gmail.com>
Date: Wed, 18 Sep 2024 09:06:28 +0200
Subject: [PATCH 01/11] picker component, is this enough?

---
 docs/src/.vitepress/config.mts              | 21 +++++++-
 docs/src/.vitepress/theme/VersionPicker.vue | 57 +++++++++++++++++++++
 docs/src/.vitepress/theme/index.ts          |  4 +-
 3 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 docs/src/.vitepress/theme/VersionPicker.vue

diff --git a/docs/src/.vitepress/config.mts b/docs/src/.vitepress/config.mts
index cdb1157a..d8d97d0e 100644
--- a/docs/src/.vitepress/config.mts
+++ b/docs/src/.vitepress/config.mts
@@ -4,6 +4,21 @@ import mathjax3 from "markdown-it-mathjax3";
 import footnote from "markdown-it-footnote";
 import { transformerMetaWordHighlight } from '@shikijs/transformers';
 
+
+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: 'REPLACE_ME_DOCUMENTER_VITEPRESS', // TODO: replace this in makedocs!
@@ -12,7 +27,11 @@ export default defineConfig({
   lastUpdated: true,
   cleanUrls: true,
   outDir: 'REPLACE_ME_DOCUMENTER_VITEPRESS', // This is required for MarkdownVitepress to work correctly...
-  head: [['link', { rel: 'icon', href: '/DocumenterVitepress.jl/dev/favicon.ico' }]],
+  head: [
+    ['link', { rel: 'icon', href: '/DocumenterVitepress.jl/dev/favicon.ico' }],
+    ['script', {src: '/versions.js'}],
+    ['script', {src: `${baseTemp.base}siteinfo.js`}]
+  ],
   vite: {
     build: {
       assetsInlineLimit: 0, // so we can tell whether we have created inlined images or not, we don't let vite inline them
diff --git a/docs/src/.vitepress/theme/VersionPicker.vue b/docs/src/.vitepress/theme/VersionPicker.vue
new file mode 100644
index 00000000..d1202758
--- /dev/null
+++ b/docs/src/.vitepress/theme/VersionPicker.vue
@@ -0,0 +1,57 @@
+<!-- From https://github.com/MakieOrg/Makie.jl/pull/4034 -->
+ 
+<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 5ac1c911..910358af 100644
--- a/docs/src/.vitepress/theme/index.ts
+++ b/docs/src/.vitepress/theme/index.ts
@@ -3,6 +3,7 @@ import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import AsideTrustees from '../../components/AsideTrustees.vue'
+import VersionPicker from "./VersionPicker.vue"
 
 import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
 import './style.css'
@@ -16,6 +17,7 @@ export default {
     })
   },
   enhanceApp({ app, router, siteData }) {
-    enhanceAppWithTabs(app)
+    enhanceAppWithTabs(app);
+    app.component('VersionPicker', VersionPicker);
   }
 } satisfies Theme
\ No newline at end of file

From 8da13048cd14ff1ca438b6718c6bc8011ba28d2b Mon Sep 17 00:00:00 2001
From: Lazaro Alonso <lazarus.alon@gmail.com>
Date: Wed, 18 Sep 2024 09:17:59 +0200
Subject: [PATCH 02/11] update v comp and nav

---
 docs/src/.vitepress/config.mts              |  2 +-
 docs/src/.vitepress/theme/VersionPicker.vue | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/docs/src/.vitepress/config.mts b/docs/src/.vitepress/config.mts
index d8d97d0e..09fde83f 100644
--- a/docs/src/.vitepress/config.mts
+++ b/docs/src/.vitepress/config.mts
@@ -62,7 +62,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
index d1202758..0841492a 100644
--- a/docs/src/.vitepress/theme/VersionPicker.vue
+++ b/docs/src/.vitepress/theme/VersionPicker.vue
@@ -1,16 +1,20 @@
-<!-- From https://github.com/MakieOrg/Makie.jl/pull/4034 -->
- 
+<!-- From https://github.com/MakieOrg/Makie.jl/blob/master/docs/src/.vitepress/theme/VersionPicker.vue -->
+
 <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(() => {
@@ -24,6 +28,7 @@ const waitForGlobalDocumenterVars = () => {
     }, 100); // Check every 100ms
     });
 };
+
 onMounted(async () => {
     const globalvars = await waitForGlobalDocumenterVars();
     versions.value = globalvars.versions.map((v) => {
@@ -31,6 +36,7 @@ onMounted(async () => {
     });
     currentVersion.value = globalvars.currentVersion;
 });
+
 </script>
 
 <template>
@@ -51,6 +57,7 @@ onMounted(async () => {
 .VPVersionPicker :deep(button .text) {
   color: var(--vp-c-text-1) !important;
 }
+
 .VPVersionPicker:hover :deep(button .text) {
   color: var(--vp-c-text-2) !important;
 }

From 8685cc835369ee3563c52565c969a8eb1c0b4805 Mon Sep 17 00:00:00 2001
From: Lazaro Alonso <lazarus.alon@gmail.com>
Date: Wed, 18 Sep 2024 11:40:11 +0200
Subject: [PATCH 03/11] just because why not, type the name's repo

---
 docs/src/.vitepress/config.mts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/.vitepress/config.mts b/docs/src/.vitepress/config.mts
index 09fde83f..2f723966 100644
--- a/docs/src/.vitepress/config.mts
+++ b/docs/src/.vitepress/config.mts
@@ -29,7 +29,7 @@ export default defineConfig({
   outDir: 'REPLACE_ME_DOCUMENTER_VITEPRESS', // This is required for MarkdownVitepress to work correctly...
   head: [
     ['link', { rel: 'icon', href: '/DocumenterVitepress.jl/dev/favicon.ico' }],
-    ['script', {src: '/versions.js'}],
+    ['script', {src: '/DocumenterVitepress.jl/versions.js'}],
     ['script', {src: `${baseTemp.base}siteinfo.js`}]
   ],
   vite: {

From ad24a25031b1da808feb863edb2b2db499fbce83 Mon Sep 17 00:00:00 2001
From: Lazaro Alonso <lazarus.alon@gmail.com>
Date: Wed, 18 Sep 2024 18:40:36 +0200
Subject: [PATCH 04/11] fix errors for local build

---
 docs/package.json                           |  2 +-
 docs/src/.vitepress/theme/VersionPicker.vue | 34 ++++++++++++---------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 6da6d99d..1d71709b 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -2,7 +2,7 @@
   "devDependencies": {
     "markdown-it": "^14.1.0",
     "markdown-it-mathjax3": "^4.3.2",
-    "vitepress": "^1.1.4",
+    "vitepress": "^1.3.4",
     "vitepress-plugin-tabs": "^0.5.0"
   },
   "scripts": {
diff --git a/docs/src/.vitepress/theme/VersionPicker.vue b/docs/src/.vitepress/theme/VersionPicker.vue
index 0841492a..5047e955 100644
--- a/docs/src/.vitepress/theme/VersionPicker.vue
+++ b/docs/src/.vitepress/theme/VersionPicker.vue
@@ -1,5 +1,4 @@
 <!-- From https://github.com/MakieOrg/Makie.jl/blob/master/docs/src/.vitepress/theme/VersionPicker.vue -->
-
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
 import { useRoute } from 'vitepress'
@@ -11,44 +10,52 @@ const props = defineProps<{
 }>()
 
 const route = useRoute()
-
 const versions = ref([]);
 const currentVersion = ref('Versions');
 
 const waitForGlobalDocumenterVars = () => {
-    return new Promise((resolve) => {
+  return new Promise((resolve) => {
     const checkInterval = setInterval(() => {
-        if (window.DOC_VERSIONS && window.DOCUMENTER_CURRENT_VERSION) {
+      if (window.DOC_VERSIONS && window.DOCUMENTER_CURRENT_VERSION) {
         clearInterval(checkInterval);
         resolve({
-            versions: window.DOC_VERSIONS,
-            currentVersion: window.DOCUMENTER_CURRENT_VERSION
+          versions: window.DOC_VERSIONS,
+          currentVersion: window.DOCUMENTER_CURRENT_VERSION
         });
-        }
+      }
     }, 100); // Check every 100ms
-    });
+  });
 };
 
 onMounted(async () => {
+  try {
     const globalvars = await waitForGlobalDocumenterVars();
     versions.value = globalvars.versions.map((v) => {
-        return {text: v, link: `${window.location.origin}/${v}/`}
+      return {text: v, link: `${window.location.origin}/${v}/`}
     });
     currentVersion.value = globalvars.currentVersion;
+  } catch (error) {
+    console.error('Error setting up VersionPicker:', error);
+    // Set default values if there's an error
+    versions.value = [];
+    currentVersion.value = 'Versions';
+  }
 });
 
+// Computed property to ensure we always have a valid array
+const safeVersions = computed(() => versions.value || [])
 </script>
 
 <template>
   <VPNavBarMenuGroup
-    v-if="!screenMenu"
-    :item="{ text: currentVersion, items: versions }"
+    v-if="!screenMenu && safeVersions.length > 0"
+    :item="{ text: currentVersion, items: safeVersions }"
     class="VPVersionPicker"
   />
   <VPNavScreenMenuGroup
-    v-else
+    v-else-if="screenMenu && safeVersions.length > 0"
     :text="currentVersion"
-    :items="versions"
+    :items="safeVersions"
     class="VPVersionPicker"
   />
 </template>
@@ -57,7 +64,6 @@ onMounted(async () => {
 .VPVersionPicker :deep(button .text) {
   color: var(--vp-c-text-1) !important;
 }
-
 .VPVersionPicker:hover :deep(button .text) {
   color: var(--vp-c-text-2) !important;
 }

From dcf271d3177f9aae1ffae25f8eff1172805a6857 Mon Sep 17 00:00:00 2001
From: Lazaro Alonso <lazarus.alon@gmail.com>
Date: Wed, 18 Sep 2024 18:52:27 +0200
Subject: [PATCH 05/11] do base, get baserepo function

---
 docs/src/.vitepress/config.mts              |  2 +-
 docs/src/.vitepress/theme/VersionPicker.vue | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/docs/src/.vitepress/config.mts b/docs/src/.vitepress/config.mts
index 2f723966..7ac9fdb9 100644
--- a/docs/src/.vitepress/config.mts
+++ b/docs/src/.vitepress/config.mts
@@ -29,7 +29,7 @@ export default defineConfig({
   outDir: 'REPLACE_ME_DOCUMENTER_VITEPRESS', // This is required for MarkdownVitepress to work correctly...
   head: [
     ['link', { rel: 'icon', href: '/DocumenterVitepress.jl/dev/favicon.ico' }],
-    ['script', {src: '/DocumenterVitepress.jl/versions.js'}],
+    ['script', {src: `${baseTemp.base}versions.js`}],
     ['script', {src: `${baseTemp.base}siteinfo.js`}]
   ],
   vite: {
diff --git a/docs/src/.vitepress/theme/VersionPicker.vue b/docs/src/.vitepress/theme/VersionPicker.vue
index 5047e955..d5891347 100644
--- a/docs/src/.vitepress/theme/VersionPicker.vue
+++ b/docs/src/.vitepress/theme/VersionPicker.vue
@@ -27,11 +27,21 @@ const waitForGlobalDocumenterVars = () => {
   });
 };
 
+const getBaseRepository = () => {
+  // Extract the base repository from the current path
+  const pathParts = window.location.pathname.split('/');
+  return pathParts[1] || ''; // The first part after the domain should be the repo name
+}
+
 onMounted(async () => {
   try {
     const globalvars = await waitForGlobalDocumenterVars();
+    const baseRepo = getBaseRepository();
     versions.value = globalvars.versions.map((v) => {
-      return {text: v, link: `${window.location.origin}/${v}/`}
+      return {
+        text: v, 
+        link: `${window.location.origin}/${baseRepo}/${v}/`
+      }
     });
     currentVersion.value = globalvars.currentVersion;
   } catch (error) {

From 90d89e8be55cb9cfee930398b9a40226f943fec4 Mon Sep 17 00:00:00 2001
From: Lazaro Alonso <lazarus.alon@gmail.com>
Date: Wed, 18 Sep 2024 19:16:35 +0200
Subject: [PATCH 06/11] type repo

---
 docs/src/.vitepress/config.mts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/.vitepress/config.mts b/docs/src/.vitepress/config.mts
index 7ac9fdb9..2f723966 100644
--- a/docs/src/.vitepress/config.mts
+++ b/docs/src/.vitepress/config.mts
@@ -29,7 +29,7 @@ export default defineConfig({
   outDir: 'REPLACE_ME_DOCUMENTER_VITEPRESS', // This is required for MarkdownVitepress to work correctly...
   head: [
     ['link', { rel: 'icon', href: '/DocumenterVitepress.jl/dev/favicon.ico' }],
-    ['script', {src: `${baseTemp.base}versions.js`}],
+    ['script', {src: '/DocumenterVitepress.jl/versions.js'}],
     ['script', {src: `${baseTemp.base}siteinfo.js`}]
   ],
   vite: {

From 1c61302112d82ab96228a43ced680df968ea8fe0 Mon Sep 17 00:00:00 2001
From: Lazaro Alonso <lazarus.alon@gmail.com>
Date: Wed, 18 Sep 2024 23:03:30 +0200
Subject: [PATCH 07/11] build local

---
 docs/src/.vitepress/baserepo.ts             |   6 +
 docs/src/.vitepress/config.mts              |   6 +-
 docs/src/.vitepress/theme/VersionPicker.vue | 121 +++++++++++++-------
 3 files changed, 90 insertions(+), 43 deletions(-)
 create mode 100644 docs/src/.vitepress/baserepo.ts

diff --git a/docs/src/.vitepress/baserepo.ts b/docs/src/.vitepress/baserepo.ts
new file mode 100644
index 00000000..0d9ff0b5
--- /dev/null
+++ b/docs/src/.vitepress/baserepo.ts
@@ -0,0 +1,6 @@
+export function getBaseRepository(base: string): string {
+    if (!base) return '/';
+    const parts = base.split('/').filter(Boolean);
+    return parts.length > 0 ? `/${parts[0]}/` : '/';
+  }
+  
\ No newline at end of file
diff --git a/docs/src/.vitepress/config.mts b/docs/src/.vitepress/config.mts
index 2f723966..ed58027a 100644
--- a/docs/src/.vitepress/config.mts
+++ b/docs/src/.vitepress/config.mts
@@ -3,7 +3,7 @@ import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 import mathjax3 from "markdown-it-mathjax3";
 import footnote from "markdown-it-footnote";
 import { transformerMetaWordHighlight } from '@shikijs/transformers';
-
+import { getBaseRepository } from './baserepo'
 
 const baseTemp = {
   base: 'REPLACE_ME_DOCUMENTER_VITEPRESS',// TODO: replace this in makedocs!
@@ -28,8 +28,8 @@ export default defineConfig({
   cleanUrls: true,
   outDir: 'REPLACE_ME_DOCUMENTER_VITEPRESS', // This is required for MarkdownVitepress to work correctly...
   head: [
-    ['link', { rel: 'icon', href: '/DocumenterVitepress.jl/dev/favicon.ico' }],
-    ['script', {src: '/DocumenterVitepress.jl/versions.js'}],
+    ['link', { rel: 'icon', href: 'REPLACE_ME_DOCUMENTER_VITEPRESS_FAVICON' }],
+    ['script', {src: `${getBaseRepository(baseTemp.base)}versions.js`}],
     ['script', {src: `${baseTemp.base}siteinfo.js`}]
   ],
   vite: {
diff --git a/docs/src/.vitepress/theme/VersionPicker.vue b/docs/src/.vitepress/theme/VersionPicker.vue
index d5891347..dd1f8afa 100644
--- a/docs/src/.vitepress/theme/VersionPicker.vue
+++ b/docs/src/.vitepress/theme/VersionPicker.vue
@@ -1,71 +1,112 @@
-<!-- From https://github.com/MakieOrg/Makie.jl/blob/master/docs/src/.vitepress/theme/VersionPicker.vue -->
+<!-- Adapted from https://github.com/MakieOrg/Makie.jl/blob/master/docs/src/.vitepress/theme/VersionPicker.vue -->
+
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue'
-import { useRoute } from 'vitepress'
+import { ref, onMounted, computed } from 'vue'
+import { useData } from 'vitepress'
 import VPNavBarMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavBarMenuGroup.vue'
 import VPNavScreenMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavScreenMenuGroup.vue'
+import { getBaseRepository } from '../baserepo'
+// Extend the global Window interface to include DOC_VERSIONS and DOCUMENTER_CURRENT_VERSION
+declare global {
+  interface Window {
+    DOC_VERSIONS?: string[];
+    DOCUMENTER_CURRENT_VERSION?: string;
+  }
+}
 
 const props = defineProps<{
   screenMenu?: boolean
 }>()
 
-const route = useRoute()
-const versions = ref([]);
+const versions = ref<Array<{ text: string, link: string }>>([]);
 const currentVersion = ref('Versions');
+const { site } = useData()
+
+const isLocalBuild = () => {
+  return window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+}
+
+const getBaseRepositoryPath = computed(() => {
+  return getBaseRepository(site.value.base);
+});
 
-const waitForGlobalDocumenterVars = () => {
-  return new Promise((resolve) => {
+const waitForScriptsToLoad = () => {
+  return new Promise<boolean>((resolve) => {
+    if (isLocalBuild()) {
+      resolve(false);
+      return;
+    }
     const checkInterval = setInterval(() => {
       if (window.DOC_VERSIONS && window.DOCUMENTER_CURRENT_VERSION) {
         clearInterval(checkInterval);
-        resolve({
-          versions: window.DOC_VERSIONS,
-          currentVersion: window.DOCUMENTER_CURRENT_VERSION
-        });
+        resolve(true);
       }
-    }, 100); // Check every 100ms
+    }, 100);
+    // Timeout after 5 seconds
+    setTimeout(() => {
+      clearInterval(checkInterval);
+      resolve(false);
+    }, 5000);
   });
 };
 
-const getBaseRepository = () => {
-  // Extract the base repository from the current path
-  const pathParts = window.location.pathname.split('/');
-  return pathParts[1] || ''; // The first part after the domain should be the repo name
-}
-
-onMounted(async () => {
+const loadVersions = async () => {
   try {
-    const globalvars = await waitForGlobalDocumenterVars();
-    const baseRepo = getBaseRepository();
-    versions.value = globalvars.versions.map((v) => {
-      return {
-        text: v, 
-        link: `${window.location.origin}/${baseRepo}/${v}/`
-      }
-    });
-    currentVersion.value = globalvars.currentVersion;
+    if (isLocalBuild()) {
+      // Handle the local build scenario directly
+      const fallbackVersions = ['dev'];
+      versions.value = fallbackVersions.map(v => ({
+        text: v,
+        link: '/'
+      }));
+      console.log(getBaseRepositoryPath.value)
+      currentVersion.value = 'dev';
+      return; // Exit the function early for local builds
+    }
+    
+    // For non-local builds, wait for scripts to load
+    const scriptsLoaded = await waitForScriptsToLoad();
+    
+    if (scriptsLoaded && window.DOC_VERSIONS && window.DOCUMENTER_CURRENT_VERSION) {
+      versions.value = (window.DOC_VERSIONS as string[]).map((v: string) => ({
+        text: v,
+        link: `${getBaseRepositoryPath.value}${v}/`
+      }));
+      currentVersion.value = window.DOCUMENTER_CURRENT_VERSION as string;
+    } else {
+      // Fallback logic if scripts fail to load or are not available
+      const fallbackVersions = ['dev'];
+      versions.value = fallbackVersions.map(v => ({
+        text: v,
+        link: `${getBaseRepositoryPath.value}${v}/`
+      }));
+      currentVersion.value = 'dev';
+    }
   } catch (error) {
-    console.error('Error setting up VersionPicker:', error);
-    // Set default values if there's an error
-    versions.value = [];
-    currentVersion.value = 'Versions';
+    console.warn('Error loading versions:', error);
+    // Use fallback logic in case of an error
+    const fallbackVersions = ['dev'];
+    versions.value = fallbackVersions.map(v => ({
+      text: v,
+      link: `${getBaseRepositoryPath.value}${v}/`
+    }));
+    currentVersion.value = 'dev';
   }
-});
+};
 
-// Computed property to ensure we always have a valid array
-const safeVersions = computed(() => versions.value || [])
+onMounted(loadVersions);
 </script>
 
 <template>
   <VPNavBarMenuGroup
-    v-if="!screenMenu && safeVersions.length > 0"
-    :item="{ text: currentVersion, items: safeVersions }"
+    v-if="!screenMenu && versions.length > 0"
+    :item="{ text: currentVersion, items: versions }"
     class="VPVersionPicker"
   />
   <VPNavScreenMenuGroup
-    v-else-if="screenMenu && safeVersions.length > 0"
+    v-else-if="screenMenu && versions.length > 0"
     :text="currentVersion"
-    :items="safeVersions"
+    :items="versions"
     class="VPVersionPicker"
   />
 </template>
@@ -77,4 +118,4 @@ const safeVersions = computed(() => versions.value || [])
 .VPVersionPicker:hover :deep(button .text) {
   color: var(--vp-c-text-2) !important;
 }
-</style>
\ No newline at end of file
+</style>

From da4fd3e7e34ba33e0698dc7b53cd52df287b85c9 Mon Sep 17 00:00:00 2001
From: Lazaro Alonso <lazarus.alon@gmail.com>
Date: Wed, 18 Sep 2024 23:49:01 +0200
Subject: [PATCH 08/11] reduce overhead

---
 docs/src/.vitepress/baserepo.ts             |  6 ------
 docs/src/.vitepress/config.mts              |  7 ++++++-
 docs/src/.vitepress/theme/VersionPicker.vue | 19 ++++++++++---------
 3 files changed, 16 insertions(+), 16 deletions(-)
 delete mode 100644 docs/src/.vitepress/baserepo.ts

diff --git a/docs/src/.vitepress/baserepo.ts b/docs/src/.vitepress/baserepo.ts
deleted file mode 100644
index 0d9ff0b5..00000000
--- a/docs/src/.vitepress/baserepo.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export function getBaseRepository(base: string): string {
-    if (!base) return '/';
-    const parts = base.split('/').filter(Boolean);
-    return parts.length > 0 ? `/${parts[0]}/` : '/';
-  }
-  
\ No newline at end of file
diff --git a/docs/src/.vitepress/config.mts b/docs/src/.vitepress/config.mts
index ed58027a..26cd0c1c 100644
--- a/docs/src/.vitepress/config.mts
+++ b/docs/src/.vitepress/config.mts
@@ -3,7 +3,12 @@ import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 import mathjax3 from "markdown-it-mathjax3";
 import footnote from "markdown-it-footnote";
 import { transformerMetaWordHighlight } from '@shikijs/transformers';
-import { getBaseRepository } from './baserepo'
+
+function getBaseRepository(base: string): string {
+  if (!base) return '/';
+  const parts = base.split('/').filter(Boolean);
+  return parts.length > 0 ? `/${parts[0]}/` : '/';
+}
 
 const baseTemp = {
   base: 'REPLACE_ME_DOCUMENTER_VITEPRESS',// TODO: replace this in makedocs!
diff --git a/docs/src/.vitepress/theme/VersionPicker.vue b/docs/src/.vitepress/theme/VersionPicker.vue
index dd1f8afa..51a9cc2c 100644
--- a/docs/src/.vitepress/theme/VersionPicker.vue
+++ b/docs/src/.vitepress/theme/VersionPicker.vue
@@ -5,7 +5,6 @@ import { ref, onMounted, computed } from 'vue'
 import { useData } from 'vitepress'
 import VPNavBarMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavBarMenuGroup.vue'
 import VPNavScreenMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavScreenMenuGroup.vue'
-import { getBaseRepository } from '../baserepo'
 // Extend the global Window interface to include DOC_VERSIONS and DOCUMENTER_CURRENT_VERSION
 declare global {
   interface Window {
@@ -26,9 +25,11 @@ const isLocalBuild = () => {
   return window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
 }
 
-const getBaseRepositoryPath = computed(() => {
-  return getBaseRepository(site.value.base);
-});
+const getBaseRepository = () => {
+  // Extract the base repository from the current path
+  const pathParts = window.location.pathname.split('/');
+  return pathParts[1] || ''; // The first part after the domain should be the repo name
+}
 
 const waitForScriptsToLoad = () => {
   return new Promise<boolean>((resolve) => {
@@ -59,18 +60,17 @@ const loadVersions = async () => {
         text: v,
         link: '/'
       }));
-      console.log(getBaseRepositoryPath.value)
       currentVersion.value = 'dev';
       return; // Exit the function early for local builds
     }
     
     // For non-local builds, wait for scripts to load
     const scriptsLoaded = await waitForScriptsToLoad();
-    
+    const baseRepo = getBaseRepository();
     if (scriptsLoaded && window.DOC_VERSIONS && window.DOCUMENTER_CURRENT_VERSION) {
       versions.value = (window.DOC_VERSIONS as string[]).map((v: string) => ({
         text: v,
-        link: `${getBaseRepositoryPath.value}${v}/`
+        link: `${window.location.origin}/${baseRepo}/${v}/`
       }));
       currentVersion.value = window.DOCUMENTER_CURRENT_VERSION as string;
     } else {
@@ -78,7 +78,7 @@ const loadVersions = async () => {
       const fallbackVersions = ['dev'];
       versions.value = fallbackVersions.map(v => ({
         text: v,
-        link: `${getBaseRepositoryPath.value}${v}/`
+        link: `${window.location.origin}/${baseRepo}/${v}/`
       }));
       currentVersion.value = 'dev';
     }
@@ -86,9 +86,10 @@ const loadVersions = async () => {
     console.warn('Error loading versions:', error);
     // Use fallback logic in case of an error
     const fallbackVersions = ['dev'];
+    const baseRepo = getBaseRepository();
     versions.value = fallbackVersions.map(v => ({
       text: v,
-      link: `${getBaseRepositoryPath.value}${v}/`
+      link: `${window.location.origin}/${baseRepo}/${v}/`
     }));
     currentVersion.value = 'dev';
   }

From a30f7affd8264d573fd31a319af6ceabc8bbeefe Mon Sep 17 00:00:00 2001
From: Lazaro Alonso <lazarus.alon@gmail.com>
Date: Thu, 19 Sep 2024 01:02:25 +0200
Subject: [PATCH 09/11] only client

---
 docs/src/.vitepress/theme/VersionPicker.vue | 69 ++++++++++++---------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/docs/src/.vitepress/theme/VersionPicker.vue b/docs/src/.vitepress/theme/VersionPicker.vue
index 51a9cc2c..4234cff9 100644
--- a/docs/src/.vitepress/theme/VersionPicker.vue
+++ b/docs/src/.vitepress/theme/VersionPicker.vue
@@ -5,6 +5,7 @@ import { ref, onMounted, computed } from 'vue'
 import { useData } from 'vitepress'
 import VPNavBarMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavBarMenuGroup.vue'
 import VPNavScreenMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavScreenMenuGroup.vue'
+
 // Extend the global Window interface to include DOC_VERSIONS and DOCUMENTER_CURRENT_VERSION
 declare global {
   interface Window {
@@ -19,13 +20,15 @@ const props = defineProps<{
 
 const versions = ref<Array<{ text: string, link: string }>>([]);
 const currentVersion = ref('Versions');
+const isClient = ref(false);
 const { site } = useData()
 
 const isLocalBuild = () => {
-  return window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+  return typeof window !== 'undefined' && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
 }
 
 const getBaseRepository = () => {
+  if (typeof window === 'undefined') return ''; // Handle SSR
   // Extract the base repository from the current path
   const pathParts = window.location.pathname.split('/');
   return pathParts[1] || ''; // The first part after the domain should be the repo name
@@ -52,6 +55,8 @@ const waitForScriptsToLoad = () => {
 };
 
 const loadVersions = async () => {
+  if (typeof window === 'undefined') return; // Guard for SSR
+
   try {
     if (isLocalBuild()) {
       // Handle the local build scenario directly
@@ -61,26 +66,25 @@ const loadVersions = async () => {
         link: '/'
       }));
       currentVersion.value = 'dev';
-      return; // Exit the function early for local builds
-    }
-    
-    // For non-local builds, wait for scripts to load
-    const scriptsLoaded = await waitForScriptsToLoad();
-    const baseRepo = getBaseRepository();
-    if (scriptsLoaded && window.DOC_VERSIONS && window.DOCUMENTER_CURRENT_VERSION) {
-      versions.value = (window.DOC_VERSIONS as string[]).map((v: string) => ({
-        text: v,
-        link: `${window.location.origin}/${baseRepo}/${v}/`
-      }));
-      currentVersion.value = window.DOCUMENTER_CURRENT_VERSION as string;
     } else {
-      // Fallback logic if scripts fail to load or are not available
-      const fallbackVersions = ['dev'];
-      versions.value = fallbackVersions.map(v => ({
-        text: v,
-        link: `${window.location.origin}/${baseRepo}/${v}/`
-      }));
-      currentVersion.value = 'dev';
+      // For non-local builds, wait for scripts to load
+      const scriptsLoaded = await waitForScriptsToLoad();
+      const baseRepo = getBaseRepository();
+      if (scriptsLoaded && window.DOC_VERSIONS && window.DOCUMENTER_CURRENT_VERSION) {
+        versions.value = window.DOC_VERSIONS.map((v: string) => ({
+          text: v,
+          link: `${window.location.origin}/${baseRepo}/${v}/`
+        }));
+        currentVersion.value = window.DOCUMENTER_CURRENT_VERSION;
+      } else {
+        // Fallback logic if scripts fail to load or are not available
+        const fallbackVersions = ['dev'];
+        versions.value = fallbackVersions.map(v => ({
+          text: v,
+          link: `${window.location.origin}/${baseRepo}/${v}/`
+        }));
+        currentVersion.value = 'dev';
+      }
     }
   } catch (error) {
     console.warn('Error loading versions:', error);
@@ -93,23 +97,26 @@ const loadVersions = async () => {
     }));
     currentVersion.value = 'dev';
   }
+  isClient.value = true;
 };
 
 onMounted(loadVersions);
 </script>
 
 <template>
-  <VPNavBarMenuGroup
-    v-if="!screenMenu && versions.length > 0"
-    :item="{ text: currentVersion, items: versions }"
-    class="VPVersionPicker"
-  />
-  <VPNavScreenMenuGroup
-    v-else-if="screenMenu && versions.length > 0"
-    :text="currentVersion"
-    :items="versions"
-    class="VPVersionPicker"
-  />
+  <template v-if="isClient">
+    <VPNavBarMenuGroup
+      v-if="!screenMenu && versions.length > 0"
+      :item="{ text: currentVersion, items: versions }"
+      class="VPVersionPicker"
+    />
+    <VPNavScreenMenuGroup
+      v-else-if="screenMenu && versions.length > 0"
+      :text="currentVersion"
+      :items="versions"
+      class="VPVersionPicker"
+    />
+  </template>
 </template>
 
 <style scoped>

From 18ccaf7f1a6831409a41739bfb64f7e60464a6d1 Mon Sep 17 00:00:00 2001
From: Lazaro Alonso <lazarus.alon@gmail.com>
Date: Thu, 19 Sep 2024 08:48:50 +0200
Subject: [PATCH 10/11] custom domains

---
 docs/src/.vitepress/config.mts              |  2 ++
 docs/src/.vitepress/theme/VersionPicker.vue | 33 ++++++++++++++-------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/docs/src/.vitepress/config.mts b/docs/src/.vitepress/config.mts
index 26cd0c1c..f40210f2 100644
--- a/docs/src/.vitepress/config.mts
+++ b/docs/src/.vitepress/config.mts
@@ -6,6 +6,7 @@ import { transformerMetaWordHighlight } from '@shikijs/transformers';
 
 function getBaseRepository(base: string): string {
   if (!base) return '/';
+  // I guess if deploy_url is available. From where do I check this ?
   const parts = base.split('/').filter(Boolean);
   return parts.length > 0 ? `/${parts[0]}/` : '/';
 }
@@ -35,6 +36,7 @@ export default defineConfig({
   head: [
     ['link', { rel: 'icon', href: 'REPLACE_ME_DOCUMENTER_VITEPRESS_FAVICON' }],
     ['script', {src: `${getBaseRepository(baseTemp.base)}versions.js`}],
+    // ['script', {src: '/versions.js'], for custom domains, I guess if deploy_url is available.
     ['script', {src: `${baseTemp.base}siteinfo.js`}]
   ],
   vite: {
diff --git a/docs/src/.vitepress/theme/VersionPicker.vue b/docs/src/.vitepress/theme/VersionPicker.vue
index 4234cff9..b6505402 100644
--- a/docs/src/.vitepress/theme/VersionPicker.vue
+++ b/docs/src/.vitepress/theme/VersionPicker.vue
@@ -28,11 +28,19 @@ const isLocalBuild = () => {
 }
 
 const getBaseRepository = () => {
-  if (typeof window === 'undefined') return ''; // Handle SSR
-  // Extract the base repository from the current path
-  const pathParts = window.location.pathname.split('/');
-  return pathParts[1] || ''; // The first part after the domain should be the repo name
-}
+  if (typeof window === 'undefined') return ''; // Handle server-side rendering (SSR)
+  const { origin, pathname } = window.location;
+  // Check if it's a GitHub Pages (or similar) setup
+  if (origin.includes('github.io')) {
+    // Extract the first part of the path as the repository name
+    const pathParts = pathname.split('/').filter(Boolean);
+    const baseRepo = pathParts.length > 0 ? `/${pathParts[0]}/` : '/';
+    return `${origin}${baseRepo}`;
+  } else {
+    // For custom domains, use just the origin (e.g., https://docs.makie.org)
+    return origin;
+  }
+};
 
 const waitForScriptsToLoad = () => {
   return new Promise<boolean>((resolve) => {
@@ -69,11 +77,14 @@ const loadVersions = async () => {
     } else {
       // For non-local builds, wait for scripts to load
       const scriptsLoaded = await waitForScriptsToLoad();
-      const baseRepo = getBaseRepository();
+      const getBaseRepositoryPath = computed(() => {
+        return getBaseRepository();
+      });
+
       if (scriptsLoaded && window.DOC_VERSIONS && window.DOCUMENTER_CURRENT_VERSION) {
         versions.value = window.DOC_VERSIONS.map((v: string) => ({
           text: v,
-          link: `${window.location.origin}/${baseRepo}/${v}/`
+          link: `${getBaseRepositoryPath.value}/${v}/`
         }));
         currentVersion.value = window.DOCUMENTER_CURRENT_VERSION;
       } else {
@@ -81,7 +92,7 @@ const loadVersions = async () => {
         const fallbackVersions = ['dev'];
         versions.value = fallbackVersions.map(v => ({
           text: v,
-          link: `${window.location.origin}/${baseRepo}/${v}/`
+          link: `${getBaseRepositoryPath.value}/${v}/`
         }));
         currentVersion.value = 'dev';
       }
@@ -90,10 +101,12 @@ const loadVersions = async () => {
     console.warn('Error loading versions:', error);
     // Use fallback logic in case of an error
     const fallbackVersions = ['dev'];
-    const baseRepo = getBaseRepository();
+    const getBaseRepositoryPath = computed(() => {
+        return getBaseRepository();
+      });
     versions.value = fallbackVersions.map(v => ({
       text: v,
-      link: `${window.location.origin}/${baseRepo}/${v}/`
+      link: `${getBaseRepositoryPath.value}/${v}/`
     }));
     currentVersion.value = 'dev';
   }

From dcc8919bd78f7f2d47e1d0b701a6bb12c47f3780 Mon Sep 17 00:00:00 2001
From: Lazaro Alonso <lazarus.alon@gmail.com>
Date: Thu, 19 Sep 2024 19:19:55 +0200
Subject: [PATCH 11/11] cp vpicker to template

---
 template/package.json                         |   2 +-
 template/src/.vitepress/config.mts            |  31 +++-
 .../src/.vitepress/theme/VersionPicker.vue    | 142 ++++++++++++++++++
 template/src/.vitepress/theme/index.ts        |   4 +-
 4 files changed, 175 insertions(+), 4 deletions(-)
 create mode 100644 template/src/.vitepress/theme/VersionPicker.vue

diff --git a/template/package.json b/template/package.json
index 5633b497..2d4f39bc 100644
--- a/template/package.json
+++ b/template/package.json
@@ -9,7 +9,7 @@
     "markdown-it": "^14.1.0",
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-mathjax3": "^4.3.2",
-    "vitepress": "^1.1.4",
+    "vitepress": "^1.3.4",
     "vitepress-plugin-tabs": "^0.5.0"
   }
 }
diff --git a/template/src/.vitepress/config.mts b/template/src/.vitepress/config.mts
index ea5b763f..86344631 100644
--- a/template/src/.vitepress/config.mts
+++ b/template/src/.vitepress/config.mts
@@ -3,6 +3,28 @@ import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 import mathjax3 from "markdown-it-mathjax3";
 import footnote from "markdown-it-footnote";
 
+function getBaseRepository(base: string): string {
+  if (!base) return '/';
+  // I guess if deploy_url is available. From where do I check this ?
+  const parts = base.split('/').filter(Boolean);
+  return parts.length > 0 ? `/${parts[0]}/` : '/';
+}
+
+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: 'REPLACE_ME_DOCUMENTER_VITEPRESS',// TODO: replace this in makedocs!
@@ -11,7 +33,12 @@ export default defineConfig({
   lastUpdated: true,
   cleanUrls: true,
   outDir: 'REPLACE_ME_DOCUMENTER_VITEPRESS', // This is required for MarkdownVitepress to work correctly...
-  head: [['link', { rel: 'icon', href: 'REPLACE_ME_DOCUMENTER_VITEPRESS_FAVICON' }]],
+  head: [
+    ['link', { rel: 'icon', href: 'REPLACE_ME_DOCUMENTER_VITEPRESS_FAVICON' }],
+    ['script', {src: `${getBaseRepository(baseTemp.base)}versions.js`}],
+    // ['script', {src: '/versions.js'], for custom domains, I guess if deploy_url is available.
+    ['script', {src: `${baseTemp.base}siteinfo.js`}]
+  ],
   ignoreDeadLinks: true,
 
   markdown: {
@@ -34,7 +61,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/template/src/.vitepress/theme/VersionPicker.vue b/template/src/.vitepress/theme/VersionPicker.vue
new file mode 100644
index 00000000..b6505402
--- /dev/null
+++ b/template/src/.vitepress/theme/VersionPicker.vue
@@ -0,0 +1,142 @@
+<!-- Adapted from https://github.com/MakieOrg/Makie.jl/blob/master/docs/src/.vitepress/theme/VersionPicker.vue -->
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useData } from 'vitepress'
+import VPNavBarMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavBarMenuGroup.vue'
+import VPNavScreenMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavScreenMenuGroup.vue'
+
+// Extend the global Window interface to include DOC_VERSIONS and DOCUMENTER_CURRENT_VERSION
+declare global {
+  interface Window {
+    DOC_VERSIONS?: string[];
+    DOCUMENTER_CURRENT_VERSION?: string;
+  }
+}
+
+const props = defineProps<{
+  screenMenu?: boolean
+}>()
+
+const versions = ref<Array<{ text: string, link: string }>>([]);
+const currentVersion = ref('Versions');
+const isClient = ref(false);
+const { site } = useData()
+
+const isLocalBuild = () => {
+  return typeof window !== 'undefined' && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
+}
+
+const getBaseRepository = () => {
+  if (typeof window === 'undefined') return ''; // Handle server-side rendering (SSR)
+  const { origin, pathname } = window.location;
+  // Check if it's a GitHub Pages (or similar) setup
+  if (origin.includes('github.io')) {
+    // Extract the first part of the path as the repository name
+    const pathParts = pathname.split('/').filter(Boolean);
+    const baseRepo = pathParts.length > 0 ? `/${pathParts[0]}/` : '/';
+    return `${origin}${baseRepo}`;
+  } else {
+    // For custom domains, use just the origin (e.g., https://docs.makie.org)
+    return origin;
+  }
+};
+
+const waitForScriptsToLoad = () => {
+  return new Promise<boolean>((resolve) => {
+    if (isLocalBuild()) {
+      resolve(false);
+      return;
+    }
+    const checkInterval = setInterval(() => {
+      if (window.DOC_VERSIONS && window.DOCUMENTER_CURRENT_VERSION) {
+        clearInterval(checkInterval);
+        resolve(true);
+      }
+    }, 100);
+    // Timeout after 5 seconds
+    setTimeout(() => {
+      clearInterval(checkInterval);
+      resolve(false);
+    }, 5000);
+  });
+};
+
+const loadVersions = async () => {
+  if (typeof window === 'undefined') return; // Guard for SSR
+
+  try {
+    if (isLocalBuild()) {
+      // Handle the local build scenario directly
+      const fallbackVersions = ['dev'];
+      versions.value = fallbackVersions.map(v => ({
+        text: v,
+        link: '/'
+      }));
+      currentVersion.value = 'dev';
+    } else {
+      // For non-local builds, wait for scripts to load
+      const scriptsLoaded = await waitForScriptsToLoad();
+      const getBaseRepositoryPath = computed(() => {
+        return getBaseRepository();
+      });
+
+      if (scriptsLoaded && window.DOC_VERSIONS && window.DOCUMENTER_CURRENT_VERSION) {
+        versions.value = window.DOC_VERSIONS.map((v: string) => ({
+          text: v,
+          link: `${getBaseRepositoryPath.value}/${v}/`
+        }));
+        currentVersion.value = window.DOCUMENTER_CURRENT_VERSION;
+      } else {
+        // Fallback logic if scripts fail to load or are not available
+        const fallbackVersions = ['dev'];
+        versions.value = fallbackVersions.map(v => ({
+          text: v,
+          link: `${getBaseRepositoryPath.value}/${v}/`
+        }));
+        currentVersion.value = 'dev';
+      }
+    }
+  } catch (error) {
+    console.warn('Error loading versions:', error);
+    // Use fallback logic in case of an error
+    const fallbackVersions = ['dev'];
+    const getBaseRepositoryPath = computed(() => {
+        return getBaseRepository();
+      });
+    versions.value = fallbackVersions.map(v => ({
+      text: v,
+      link: `${getBaseRepositoryPath.value}/${v}/`
+    }));
+    currentVersion.value = 'dev';
+  }
+  isClient.value = true;
+};
+
+onMounted(loadVersions);
+</script>
+
+<template>
+  <template v-if="isClient">
+    <VPNavBarMenuGroup
+      v-if="!screenMenu && versions.length > 0"
+      :item="{ text: currentVersion, items: versions }"
+      class="VPVersionPicker"
+    />
+    <VPNavScreenMenuGroup
+      v-else-if="screenMenu && versions.length > 0"
+      :text="currentVersion"
+      :items="versions"
+      class="VPVersionPicker"
+    />
+  </template>
+</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>
diff --git a/template/src/.vitepress/theme/index.ts b/template/src/.vitepress/theme/index.ts
index 463b5d85..212bdea1 100644
--- a/template/src/.vitepress/theme/index.ts
+++ b/template/src/.vitepress/theme/index.ts
@@ -2,6 +2,7 @@
 import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
+import VersionPicker from "./VersionPicker.vue"
 
 import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
 import './style.css'
@@ -14,6 +15,7 @@ export default {
     })
   },
   enhanceApp({ app, router, siteData }) {
-    enhanceAppWithTabs(app)
+    enhanceAppWithTabs(app);
+    app.component('VersionPicker', VersionPicker);
   }
 } satisfies Theme
\ No newline at end of file