fix: fix switch language error (#103, #106) (#104)

fix #103
fix #106

Co-authored-by: zuofenghua <[email protected]>
Co-authored-by: Kia Ishii <[email protected]>

src/client/theme-default/components/NavBarLinks.ts

@@ -1,5 +1,6 @@
 import { computed } from 'vue'
 import { useSiteData, useSiteDataByRoute, useRoute } from 'vitepress'
+import { inBrowser } from '/@app/utils'
 import NavBarLink from './NavBarLink.vue'
 import NavDropdownLink from './NavDropdownLink.vue'
 import { DefaultTheme } from '../config'
@@ -52,19 +53,28 @@ export default {
         return null
       }
 
+      // handle site base
+      const siteBase = inBrowser ? siteData.value.base : '/'
+      const siteBaseWithoutSuffix = siteBase.endsWith('/')
+        ? siteBase.slice(0, -1)
+        : siteBase
+      // remove site base in browser env
+      const routerPath = route.path.slice(siteBaseWithoutSuffix.length)
+
       const currentLangBase = localeKeys.find((v) => {
         if (v === '/') {
           return false
         }
-        return route.path.startsWith(v)
+        return routerPath.startsWith(v)
       })
       const currentContentPath = currentLangBase
-        ? route.path.substring(currentLangBase.length - 1)
-        : route.path
+        ? routerPath.substring(currentLangBase.length - 1)
+        : routerPath
       const candidates = localeKeys.map((v) => {
+        const localePath = v.endsWith('/') ? v.slice(0, -1) : v
         return {
           text: locales[v].label || locales[v].lang,
-          link: `${v}${currentContentPath}`
+          link: `${localePath}${currentContentPath}`
         }
       })
 
@@ -78,13 +88,12 @@ export default {
       }
     })
 
+    const navData = computed(() => {
+      return siteDataByRoute.value.themeConfig.nav
+    })
+
     return {
-      navData:
-        process.env.NODE_ENV === 'production'
-          ? // navbar items do not change in production
-            siteDataByRoute.value.themeConfig.nav
-          : // use computed in dev for hot reload
-            computed(() => siteDataByRoute.value.themeConfig.nav),
+      navData,
       repoInfo,
       localeCandidates
     }

src/shared/config.ts

@@ -1,5 +1,7 @@
 import { SiteData } from '../../types/shared'
 
+const inBrowser = typeof window !== 'undefined'
+
 function findMatchRoot(route: string, roots: string[]) {
   // first match to the routes with the most deep level.
   roots.sort((a, b) => {
@@ -27,6 +29,8 @@ function resolveLocales<T>(
 
 // this merges the locales data to the main data by the route
 export function resolveSiteDataByRoute(siteData: SiteData, route: string) {
+  route = cleanRoute(siteData, route)
+
   const localeData = resolveLocales(siteData.locales || {}, route) || {}
   const localeThemeConfig =
     resolveLocales<any>(
@@ -46,3 +50,17 @@ export function resolveSiteDataByRoute(siteData: SiteData, route: string) {
     locales: {}
   }
 }
+
+/**
+ * Clean up the route by removing the `base` path if it's set in config.
+ */
+function cleanRoute(siteData: SiteData, route: string): string {
+  if (!inBrowser) {
+    return route
+  }
+
+  const base = siteData.base
+  const baseWithoutSuffix = base.endsWith('/') ? base.slice(0, -1) : base
+
+  return route.slice(baseWithoutSuffix.length)
+}