fix(i18n): fix locales reading, add site.langs

src/client/theme-default/Layout.vue

@@ -32,9 +32,7 @@ const isCustomLayout = computed(() => !!frontmatter.value.customLayout)
 const enableHome = computed(() => !!frontmatter.value.home)
 
 // automatic multilang check for AlgoliaSearchBox
-const isMultiLang = computed(
-  () => Object.keys(theme.value.locales || {}).length > 0
-)
+const isMultiLang = computed(() => Object.keys(site.value.langs).length > 0)
 
 // navbar
 const showNavbar = computed(() => {

src/client/theme-default/components/NavLinks.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useData } from 'vitepress'
-import { useLocaleLinks } from '../composables/nav'
+import { useLanguageLinks } from '../composables/nav'
 import { useRepo } from '../composables/repo'
 import NavLink from './NavLink.vue'
 import NavDropdownLink from './NavDropdownLink.vue'
 
 const { theme } = useData()
-const localeLinks = useLocaleLinks()
+const localeLinks = useLanguageLinks()
 const repo = useRepo()
 const show = computed(() => theme.value.nav || repo.value || localeLinks.value)
 </script>

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

@@ -1,57 +1,30 @@
 import { computed } from 'vue'
-import { useRoute, useData, inBrowser } from 'vitepress'
+import { useData } from 'vitepress'
 import type { DefaultTheme } from '../config'
 
-export function useLocaleLinks() {
-  const route = useRoute()
-  const { site } = useData()
+export function useLanguageLinks() {
+  const { site, localePath, theme } = useData()
 
   return computed(() => {
-    const theme = site.value.themeConfig as DefaultTheme.Config
-    const locales = theme.locales
+    const langs = site.value.langs
+    const localePaths = Object.keys(langs)
 
-    if (!locales) {
+    if (localePaths.length < 2) {
       return null
     }
 
-    const localeKeys = Object.keys(locales)
+    const routerPath = localePath.value
 
-    if (localeKeys.length <= 1) {
-      return null
-    }
-
-    // handle site base
-    const siteBase = inBrowser ? site.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((key) => {
-      return key === '/' ? false : routerPath.startsWith(key)
-    })
-
-    const currentContentPath = currentLangBase
-      ? routerPath.substring(currentLangBase.length - 1)
-      : routerPath
-
-    const candidates = localeKeys.map((v) => {
+    const candidates = localePaths.map((v) => {
       const localePath = v.endsWith('/') ? v.slice(0, -1) : v
 
       return {
-        text: locales[v].label,
-        link: `${localePath}${currentContentPath}`
+        text: langs[v],
+        link: `${localePath}${routerPath}`
       }
     })
 
-    const currentLangKey = currentLangBase ? currentLangBase : '/'
-
-    const selectText = locales[currentLangKey].selectText
-      ? locales[currentLangKey].selectText
-      : 'Languages'
+    const selectText = theme.value.selectText || 'Languages'
 
     return {
       text: selectText,

src/shared/shared.ts

@@ -12,7 +12,7 @@ export const EXTERNAL_URL_RE = /^https?:/i
 
 export const inBrowser = typeof window !== 'undefined'
 
-function findMatchRoot(route: string, roots: string[]) {
+function findMatchRoot(route: string, roots: string[]): string | undefined {
   // first match to the routes with the most deep level.
   roots.sort((a, b) => {
     const levelDelta = b.split('/').length - a.split('/').length
@@ -24,9 +24,8 @@ function findMatchRoot(route: string, roots: string[]) {
   })
 
   for (const r of roots) {
-    if (route.startsWith(r)) return
+    if (route.startsWith(r)) return r
   }
-  return undefined
 }
 
 function resolveLocales<T>(
@@ -44,12 +43,11 @@ export function resolveSiteDataByRoute(
 ): SiteData {
   route = cleanRoute(siteData, route)
 
-  const localeData = resolveLocales(siteData.locales || {}, route) || {}
-  const localeThemeConfig =
-    resolveLocales<any>(
-      (siteData.themeConfig && siteData.themeConfig.locales) || {},
-      route
-    ) || {}
+  const localeData = resolveLocales(siteData.locales || {}, route)
+  const localeThemeConfig = resolveLocales<any>(
+    siteData.themeConfig.locales || {},
+    route
+  )
 
   return {
     ...siteData,
@@ -60,8 +58,15 @@ export function resolveSiteDataByRoute(
       // clean the locales to reduce the bundle size
       locales: {}
     },
-    lang: localeThemeConfig.lang || siteData.lang,
-    locales: {}
+    lang: (localeData || siteData).lang,
+    // clean the locales to reduce the bundle size
+    locales: {},
+    langs: siteData.themeConfig.locales
+      ? Object.keys(siteData.themeConfig.locales).reduce((locales, path) => {
+          locales[path] = siteData.themeConfig.locales![path].label
+          return locales
+        }, {} as Record<string, string>)
+      : {}
   }
 }
 

types/shared.d.ts

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