modify nav-bar and add VersionPicker

Author: ytdHuang

docs/src/.vitepress/config.mts

@@ -3,6 +3,18 @@ import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 import mathjax3 from "markdown-it-mathjax3";
 import footnote from "markdown-it-footnote";
 
+const navTemp = {
+  nav: 'REPLACE_ME_DOCUMENTER_VITEPRESS',
+}
+
+const nav = [
+  ...navTemp.nav,
+  { text: 'Benchmarks', link: 'https://qutip.org/QuantumToolbox.jl/benchmarks/' },
+  {
+    component: 'VersionPicker'
+  }
+]
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
     base: 'REPLACE_ME_DOCUMENTER_VITEPRESS',// TODO: replace this in makedocs!
@@ -35,7 +47,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,64 @@
+<!-- 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 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

@@ -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

docs/src/.vitepress/theme/style.css

@@ -95,10 +95,13 @@ code {
             #9558B2 30%,
             #CB3C33);
 
+    --vp-home-hero-image-background-image: none; /* remove the blur background */
+    /* (default setting)
     --vp-home-hero-image-background-image: linear-gradient(-45deg,
             #9558B2 30%,
             #389826 30%,
             #CB3C33);
+    */
     --vp-home-hero-image-filter: blur(40px);
 }