versioning, picker component

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
@@ -43,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: [

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

@@ -0,0 +1,64 @@
+<!-- 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

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