fix: language dropdown with current path

src/client/app/data.ts

@@ -46,9 +46,11 @@ export function initData(route: Route): VitePressData {
     frontmatter: computed(() => route.data.frontmatter),
     lang: computed(() => site.value.lang),
     localePath: computed(() => {
-      const { locales, lang } = site.value
-      const path = Object.keys(locales).find((lp) => locales[lp].lang === lang)
-      return withBase((locales && path) || '/')
+      const { langs } = site.value
+      const path = Object.keys(langs).find(
+        (lp) => langs[lp].lang === site.value.lang
+      )
+      return withBase(path || '/')
     }),
     title: computed(() => {
       return route.data.title

src/client/theme-default/composables/nav.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { useData } from 'vitepress'
+import { useData, useRoute } from 'vitepress'
 import type { DefaultTheme } from '../config'
 
 export function useLanguageLinks() {
@@ -13,16 +13,15 @@ export function useLanguageLinks() {
       return null
     }
 
-    const routerPath = localePath.value
+    const route = useRoute()
 
-    const candidates = localePaths.map((v) => {
-      const localePath = v.endsWith('/') ? v.slice(0, -1) : v
+    // intentionally remove the leading slash because each locale has one
+    const currentPath = route.path.replace(localePath.value, '')
 
-      return {
-        text: langs[v],
-        link: `${localePath}${routerPath}`
-      }
-    })
+    const candidates = localePaths.map((v) => ({
+      text: langs[v].label,
+      link: `${v}${currentPath}`
+    }))
 
     const selectText = theme.value.selectText || 'Languages'
 

src/node/config.ts

@@ -147,9 +147,7 @@ export async function resolveSiteData(
     head: userConfig.head || [],
     themeConfig: userConfig.themeConfig || {},
     locales: userConfig.locales || {},
-    langs: createLangDictionary(
-      userConfig.themeConfig && userConfig.themeConfig.locales
-    ),
+    langs: createLangDictionary(userConfig),
     customData: userConfig.customData || {}
   }
 }

src/shared/shared.ts

@@ -1,4 +1,4 @@
-import { SiteData } from '../../types/shared'
+import { LocaleConfig, SiteData } from '../../types/shared'
 
 export type {
   SiteData,
@@ -36,12 +36,20 @@ function resolveLocales<T>(
   return localeRoot ? locales[localeRoot] : undefined
 }
 
-export function createLangDictionary(locales: any | undefined) {
-  return locales
+export function createLangDictionary(siteData: {
+  themeConfig?: any
+  locales?: Record<string, LocaleConfig>
+}) {
+  const { locales } = siteData.themeConfig
+  const siteLocales = siteData.locales
+  return locales && siteLocales
     ? Object.keys(locales).reduce((langs, path) => {
-        langs[path] = locales![path].label
+        langs[path] = {
+          label: locales![path].label,
+          lang: siteLocales[path].lang
+        }
         return langs
-      }, {} as Record<string, string>)
+      }, {} as Record<string, { lang: string; label: string }>)
     : {}
 }
 
@@ -70,7 +78,7 @@ export function resolveSiteDataByRoute(
     lang: (localeData || siteData).lang,
     // clean the locales to reduce the bundle size
     locales: {},
-    langs: createLangDictionary(siteData.themeConfig.locales)
+    langs: createLangDictionary(siteData)
   }
 }
 

types/shared.d.ts

@@ -17,7 +17,7 @@ export interface SiteData<ThemeConfig = any> {
   head: HeadConfig[]
   themeConfig: ThemeConfig
   locales: Record<string, LocaleConfig>
-  langs: Record<string, string>
+  langs: Record<string, { lang: string; label: string }>
   customData: any
 }