Merge pull request #216 from LuxDL/la/version_title

be explicit about the menu version
LuxDL · Feb 18, 2025 · 863b4e1 · 863b4e1
2 parents c499c51 + 04b1450
commit 863b4e1
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 110 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -1,12 +1,12 @@
 {
   "devDependencies": {
-    "@nolebase/vitepress-plugin-enhanced-readabilities": "^2.12.1",
+    "@nolebase/vitepress-plugin-enhanced-readabilities": "^2.14.0",
     "@types/d3-format": "^3.0.4",
-    "@types/node": "^22.10.9",
+    "@types/node": "^22.13.4",
     "markdown-it": "^14.1.0",
     "markdown-it-mathjax3": "^4.3.2",
     "vitepress": "^1.6.3",
-    "vitepress-plugin-tabs": "^0.5.0"
+    "vitepress-plugin-tabs": "^0.6.0"
   },
   "scripts": {
     "docs:dev": "vitepress dev build/.documenter",

diff --git a/docs/src/components/VersionPicker.vue b/docs/src/components/VersionPicker.vue
@@ -1,50 +1,41 @@
 <!-- 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 { 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 props = defineProps<{ screenMenu?: boolean }>();
+const versions = ref<Array<{ text: string, link: string, class?: string }>>([]);
 const currentVersion = ref('Versions');
 const isClient = ref(false);
-const { site } = useData()
+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)
+  if (typeof window === 'undefined') return '';
   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;
+    return `${origin}/${pathParts[0] ?? ''}`;
   }
+  return origin;
 };
 
 const waitForScriptsToLoad = () => {
   return new Promise<boolean>((resolve) => {
-    if (isLocalBuild()) {
+    if (isLocalBuild() || typeof window === 'undefined') {
       resolve(false);
       return;
     }
@@ -54,7 +45,6 @@ const waitForScriptsToLoad = () => {
         resolve(true);
       }
     }, 100);
-    // Timeout after 5 seconds
     setTimeout(() => {
       clearInterval(checkInterval);
       resolve(false);
@@ -63,70 +53,65 @@ const waitForScriptsToLoad = () => {
 };
 
 const loadVersions = async () => {
-  if (typeof window === 'undefined') return; // Guard for SSR
+  if (typeof window === 'undefined') return;
 
   try {
     if (isLocalBuild()) {
-      // Handle the local build scenario directly
-      const fallbackVersions = ['dev'];
-      versions.value = fallbackVersions.map(v => ({
-        text: v,
-        link: '/'
-      }));
+      versions.value = [{ text: 'dev', link: '/', class: 'version-current' }];
       currentVersion.value = 'dev';
     } else {
-      // For non-local builds, wait for scripts to load
       const scriptsLoaded = await waitForScriptsToLoad();
-      const getBaseRepositoryPath = computed(() => {
-        return getBaseRepository();
-      });
+      const baseRepoPath = getBaseRepository();
 
       if (scriptsLoaded && window.DOC_VERSIONS && window.DOCUMENTER_CURRENT_VERSION) {
-        versions.value = window.DOC_VERSIONS.map((v: string) => ({
+        const allVersions = new Set([...window.DOC_VERSIONS, window.DOCUMENTER_CURRENT_VERSION]);
+        versions.value = Array.from(allVersions).map(v => ({
           text: v,
-          link: `${getBaseRepositoryPath.value}/${v}/`
+          link: `${baseRepoPath}/${v}/`,
+          class: v === window.DOCUMENTER_CURRENT_VERSION ? 'version-current' : ''
         }));
         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}/`
-        }));
+        versions.value = [{ text: 'dev', link: `${baseRepoPath}/dev/`, class: 'version-current' }];
         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}/`
-    }));
+    const baseRepoPath = getBaseRepository();
+    versions.value = [{ text: 'dev', link: `${baseRepoPath}/dev/`, class: 'version-current' }];
     currentVersion.value = 'dev';
   }
   isClient.value = true;
 };
 
-onMounted(loadVersions);
+const versionItems = computed(() =>
+  versions.value.map((v) => ({
+    text: v.text,
+    link: v.link,
+    class: v.text === currentVersion.value ? 'version-current' : ''
+  }))
+);
+
+onMounted(() => {
+  if (typeof window !== 'undefined') {
+    currentVersion.value = window.DOCUMENTER_CURRENT_VERSION ?? 'Versions';
+    loadVersions();
+  }
+});
 </script>
 
 <template>
   <template v-if="isClient">
     <VPNavBarMenuGroup
       v-if="!screenMenu && versions.length > 0"
-      :item="{ text: currentVersion, items: versions }"
+      :item="{ text: 'Version', items: versionItems }"
       class="VPVersionPicker"
     />
     <VPNavScreenMenuGroup
       v-else-if="screenMenu && versions.length > 0"
-      :text="currentVersion"
-      :items="versions"
+      :text="'Version'"
+      :items="versionItems"
       class="VPVersionPicker"
     />
   </template>
@@ -139,4 +124,13 @@ onMounted(loadVersions);
 .VPVersionPicker:hover :deep(button .text) {
   color: var(--vp-c-text-2) !important;
 }
-</style>
+.VPVersionPicker :deep(.version-current),
+.VPVersionPicker :deep(.version-current .text) {
+  font-weight: bold !important;
+  color: var(--vp-c-brand-1) !important;
+}
+.VPVersionPicker:hover :deep(.version-current),
+.VPVersionPicker:hover :deep(.version-current .text) {
+  color: var(--vp-c-brand-1) !important;
+}
+</style>
diff --git a/template/package.json b/template/package.json
@@ -5,12 +5,11 @@
     "docs:preview": "vitepress preview build/.documenter"
   },
   "dependencies": {
-    "@nolebase/vitepress-plugin-enhanced-readabilities": "^2.12.1",
-    "@shikijs/transformers": "^2.0.3",
+    "@nolebase/vitepress-plugin-enhanced-readabilities": "^2.14.0",
     "markdown-it": "^14.1.0",
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-mathjax3": "^4.3.2",
     "vitepress": "^1.6.3",
-    "vitepress-plugin-tabs": "^0.5.0"
+    "vitepress-plugin-tabs": "^0.6.0"
   }
 }
diff --git a/template/src/components/VersionPicker.vue b/template/src/components/VersionPicker.vue
@@ -1,50 +1,41 @@
 <!-- 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 { 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 props = defineProps<{ screenMenu?: boolean }>();
+const versions = ref<Array<{ text: string, link: string, class?: string }>>([]);
 const currentVersion = ref('Versions');
 const isClient = ref(false);
-const { site } = useData()
+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)
+  if (typeof window === 'undefined') return '';
   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;
+    return `${origin}/${pathParts[0] ?? ''}`;
   }
+  return origin;
 };
 
 const waitForScriptsToLoad = () => {
   return new Promise<boolean>((resolve) => {
-    if (isLocalBuild()) {
+    if (isLocalBuild() || typeof window === 'undefined') {
       resolve(false);
       return;
     }
@@ -54,7 +45,6 @@ const waitForScriptsToLoad = () => {
         resolve(true);
       }
     }, 100);
-    // Timeout after 5 seconds
     setTimeout(() => {
       clearInterval(checkInterval);
       resolve(false);
@@ -63,70 +53,65 @@ const waitForScriptsToLoad = () => {
 };
 
 const loadVersions = async () => {
-  if (typeof window === 'undefined') return; // Guard for SSR
+  if (typeof window === 'undefined') return;
 
   try {
     if (isLocalBuild()) {
-      // Handle the local build scenario directly
-      const fallbackVersions = ['dev'];
-      versions.value = fallbackVersions.map(v => ({
-        text: v,
-        link: '/'
-      }));
+      versions.value = [{ text: 'dev', link: '/', class: 'version-current' }];
       currentVersion.value = 'dev';
     } else {
-      // For non-local builds, wait for scripts to load
       const scriptsLoaded = await waitForScriptsToLoad();
-      const getBaseRepositoryPath = computed(() => {
-        return getBaseRepository();
-      });
+      const baseRepoPath = getBaseRepository();
 
       if (scriptsLoaded && window.DOC_VERSIONS && window.DOCUMENTER_CURRENT_VERSION) {
-        versions.value = window.DOC_VERSIONS.map((v: string) => ({
+        const allVersions = new Set([...window.DOC_VERSIONS, window.DOCUMENTER_CURRENT_VERSION]);
+        versions.value = Array.from(allVersions).map(v => ({
           text: v,
-          link: `${getBaseRepositoryPath.value}/${v}/`
+          link: `${baseRepoPath}/${v}/`,
+          class: v === window.DOCUMENTER_CURRENT_VERSION ? 'version-current' : ''
         }));
         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}/`
-        }));
+        versions.value = [{ text: 'dev', link: `${baseRepoPath}/dev/`, class: 'version-current' }];
         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}/`
-    }));
+    const baseRepoPath = getBaseRepository();
+    versions.value = [{ text: 'dev', link: `${baseRepoPath}/dev/`, class: 'version-current' }];
     currentVersion.value = 'dev';
   }
   isClient.value = true;
 };
 
-onMounted(loadVersions);
+const versionItems = computed(() =>
+  versions.value.map((v) => ({
+    text: v.text,
+    link: v.link,
+    class: v.text === currentVersion.value ? 'version-current' : ''
+  }))
+);
+
+onMounted(() => {
+  if (typeof window !== 'undefined') {
+    currentVersion.value = window.DOCUMENTER_CURRENT_VERSION ?? 'Versions';
+    loadVersions();
+  }
+});
 </script>
 
 <template>
   <template v-if="isClient">
     <VPNavBarMenuGroup
       v-if="!screenMenu && versions.length > 0"
-      :item="{ text: currentVersion, items: versions }"
+      :item="{ text: 'Version', items: versionItems }"
       class="VPVersionPicker"
     />
     <VPNavScreenMenuGroup
       v-else-if="screenMenu && versions.length > 0"
-      :text="currentVersion"
-      :items="versions"
+      :text="'Version'"
+      :items="versionItems"
       class="VPVersionPicker"
     />
   </template>
@@ -139,4 +124,13 @@ onMounted(loadVersions);
 .VPVersionPicker:hover :deep(button .text) {
   color: var(--vp-c-text-2) !important;
 }
-</style>
+.VPVersionPicker :deep(.version-current),
+.VPVersionPicker :deep(.version-current .text) {
+  font-weight: bold !important;
+  color: var(--vp-c-brand-1) !important;
+}
+.VPVersionPicker:hover :deep(.version-current),
+.VPVersionPicker:hover :deep(.version-current .text) {
+  color: var(--vp-c-brand-1) !important;
+}
+</style>