Add context-aware version switching + fallback to root

Add eslint + fix linting issues

Author: josbeir

.vitepress/cake.js

@@ -16,45 +16,36 @@ import {
   sidebarConfig
 } from './cake/config.js'
 
-// Re-export configuration for backward compatibility
-export { supportedLocales, versions, localizedVersions, sidebarConfig }
-
 // Helper functions for version management
 export function getCurrentVersion(locale = 'en') {
   const versionList = getVersionsByLocale(locale)
   return versionList.find(v => v.isCurrentVersion)
 }
 
 export function getVersionsByLocale(locale = 'en') {
-  // Return English versions by default
   if (locale === 'en') {
     return versions
   }
 
-  // Check if we have localized versions for this locale
   if (localizedVersions[locale]) {
     return localizedVersions[locale]
   }
 
-  // Fallback to English versions if locale not found
   return versions
 }
 
 export function getVersionByPath(path) {
   // Detect locale from path
   const locale = detectLocaleFromPath(path)
 
-  // Get version list for detected locale
   const versionList = getVersionsByLocale(locale)
 
-  // Check for version-specific paths in the detected locale
   for (const version of versionList) {
     if (path.startsWith(version.publicPath)) {
       return version
     }
   }
 
-  // Default to current version for the detected locale
   return getCurrentVersion(locale)
 }
 
@@ -68,17 +59,56 @@ export function getAllVersionPaths(locale = 'en') {
   return versionList.map(v => v.publicPath)
 }
 
-// Navigation configuration for version dropdown
-export function getVersionNavItems(locale = 'en') {
-  const versionList = getVersionsByLocale(locale)
-  return versionList.map(version => ({
-    text: version.displayName,
-    link: version.publicPath,
-    path: version.publicPath,
-    version: version.version
-  }))
+export function convertPathToVersion(currentPath, targetVersion, locale = 'en') {
+  const currentLocale = detectLocaleFromPath(currentPath)
+  const currentVersionObj = getVersionByPath(currentPath)
+
+  if (currentVersionObj.version === targetVersion) {
+    return currentPath
+  }
+
+  const versionList = getVersionsByLocale(currentLocale)
+  const targetVersionObj = versionList.find(v => v.version === targetVersion)
+
+  if (!targetVersionObj) {
+    return locale === 'en' ? `/${targetVersion}.x/` : `/${locale}/${targetVersion}.x/`
+  }
+
+  let relativePath = currentPath
+  if (relativePath.startsWith(currentVersionObj.publicPath)) {
+    relativePath = relativePath.substring(currentVersionObj.publicPath.length)
+  }
+
+  if (!relativePath || relativePath === '' || relativePath === '/') {
+    return targetVersionObj.publicPath
+  }
+
+  let targetPath = targetVersionObj.publicPath
+  if (!targetPath.endsWith('/')) {
+    targetPath += '/'
+  }
+  if (relativePath.startsWith('/')) {
+    relativePath = relativePath.substring(1)
+  }
+
+  return targetPath + relativePath
 }
 
+export function getVersionNavItems(locale = 'en', currentPath = null) {
+  const versionList = getVersionsByLocale(locale)
+  return versionList.map(version => {
+    const link = currentPath
+      ? convertPathToVersion(currentPath, version.version, locale)
+      : version.publicPath
+
+    return {
+      text: version.displayName,
+      link: link,
+      path: version.publicPath,
+      version: version.version
+    }
+  })
+}
 
 // Helper function to get supported locales
 export function getSupportedLocales() {
@@ -98,7 +128,7 @@ export function detectLocaleFromPath(path) {
       return locale
     }
   }
-  // Default to 'en' if no locale prefix found
+
   return 'en'
 }
 

.vitepress/plugins/version-replacer.js

@@ -12,7 +12,7 @@ import { getVersionByPath } from '../cake.js'
 * @param {Object} options - plugin options
 * @returns {void}
 */
-export function versionReplacer(md, options = {}) {
+export function versionReplacer(md, _options = {}) {
   // Store original render method
   const originalRender = md.render.bind(md)
 

.vitepress/sidebar.js

@@ -7,7 +7,8 @@
 import { readFileSync } from 'fs'
 import { fileURLToPath } from 'url'
 import { dirname, join } from 'path'
-import { versions, getCurrentVersion, sidebarConfig, localizedVersions, getVersionsByLocale } from './cake.js'
+import { versions, sidebarConfig, localizedVersions } from './cake/config.js'
+import { getVersionsByLocale } from './cake.js'
 
 // Get current directory for JSON imports
 const __filename = fileURLToPath(import.meta.url)

.vitepress/theme/components/PageLoader.vue

@@ -12,7 +12,7 @@
     before = () => { visible.value = true }
     after = () => {
       // Small delay to ensure rendering is done
-      setTimeout(() => { visible.value = false }, 100)
+      setTimeout(() => { visible.value = false }, 50)
     }
     router.onBeforeRouteChange = before
     router.onAfterRouteChange = after

.vitepress/theme/components/VersionDropdown.vue

@@ -1,25 +1,23 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { useRoute, useData, withBase } from 'vitepress'
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { useRoute, useRouter, useData, withBase } from 'vitepress'
 import { getVersionNavItems, getVersionByPath, getVersionLabel, isLocaleSupported } from '../../cake.js'
 
 const route = useRoute()
-const { localeIndex, site } = useData()
+const router = useRouter()
+const { localeIndex } = useData()
 const isOpen = ref(false)
+const pendingVersionNavigation = ref(null)
 
 // Get current locale from VitePress's locale system
 const currentLocale = computed(() => {
-  // localeIndex gives us the current locale (e.g., 'ja', 'root' for English)
-  // Convert 'root' to 'en' for our system
   const locale = localeIndex.value === 'root' ? 'en' : localeIndex.value
-
-  // Fallback to 'en' if locale is not supported by our version system
   return isLocaleSupported(locale) ? locale : 'en'
 })
 
 // Get version navigation items for current locale
 const versionNavItems = computed(() => {
-  return getVersionNavItems(currentLocale.value)
+  return getVersionNavItems(currentLocale.value, route.path)
 })
 
 const currentPath = computed(() => {
@@ -39,15 +37,57 @@ const closeDropdown = () => {
   isOpen.value = false
 }
 
-// Close dropdown when clicking outside
+const handleVersionClick = (version, event) => {
+  closeDropdown()
+
+  pendingVersionNavigation.value = {
+    fallbackPath: version.path,
+    targetPath: version.link
+  }
+}
+
 const handleClickOutside = (event) => {
   if (!event.target.closest('.version-dropdown')) {
     closeDropdown()
   }
 }
 
+// Check for 404 after route changes
+const check404AndFallback = () => {
+  if (!pendingVersionNavigation.value) return
+
+  setTimeout(() => {
+    const is404 = document.title.includes('404') ||
+                  document.querySelector('.not-found') ||
+                  document.querySelector('[class*="404"]') ||
+                  route.path.includes('404')
+
+    if (is404) {
+      router.go(pendingVersionNavigation.value.fallbackPath)
+    }
+
+    pendingVersionNavigation.value = null
+  }, 10)
+}
+
 onMounted(() => {
   document.addEventListener('click', handleClickOutside)
+
+  // Store the existing onAfterRouteChange handler
+  const originalOnAfterRouteChange = router.onAfterRouteChange
+
+  // Add our logic to the existing hook
+  router.onAfterRouteChange = () => {
+    // Call the original handler first
+    if (originalOnAfterRouteChange) {
+      originalOnAfterRouteChange()
+    }
+
+    // Then check for 404s
+    if (pendingVersionNavigation.value) {
+      check404AndFallback()
+    }
+  }
 })
 
 onUnmounted(() => {
@@ -66,7 +106,7 @@ onUnmounted(() => {
         <a
         :href="withBase(version.link)"
         :class="{ active: withBase(version.path) === currentPath }"
-        @click="closeDropdown"
+        @click="handleVersionClick(version, $event)"
         >
         {{ version.text }}
       </a>

.vitepress/theme/index.js

@@ -6,7 +6,7 @@ import { h } from "vue";
 
 export default {
   extends: DefaultTheme,
-  enhanceApp({ app, router, siteData }) {
+  enhanceApp({ app, _router, _siteData }) {
     app.component('VersionDropdown', VersionDropdown)
   },
   Layout() {

eslint.config.js

@@ -0,0 +1,54 @@
+import js from '@eslint/js'
+import vue from 'eslint-plugin-vue'
+import globals from 'globals'
+
+export default [
+  js.configs.recommended,
+  ...vue.configs['flat/recommended'],
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      },
+      ecmaVersion: 'latest',
+      sourceType: 'module'
+    },
+    rules: {
+      // General JavaScript rules
+      'no-console': 'warn',
+      'no-debugger': 'error',
+      'no-unused-vars': ['error', { 'argsIgnorePattern': '^_' }],
+      'prefer-const': 'error',
+      'no-var': 'error',
+
+      // Vue-specific rules
+      'vue/multi-word-component-names': 'off',
+      'vue/no-unused-vars': 'error',
+      'vue/component-definition-name-casing': ['error', 'PascalCase'],
+      'vue/html-self-closing': ['error', {
+        'html': {
+          'void': 'always',
+          'normal': 'always',
+          'component': 'always'
+        },
+        'svg': 'always',
+        'math': 'always'
+      }]
+    }
+  },
+  {
+    files: ['.vitepress/**/*.js', 'validate-sidebar.js'],
+    rules: {
+      // More relaxed rules for config files
+      'no-console': 'off'
+    }
+  },
+  {
+    ignores: [
+      '.vitepress/cache/**',
+      '.vitepress/dist/**',
+      'node_modules/**'
+    ]
+  }
+]