feat(i18n): nav dropdown language selector

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

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { useSiteData, useSiteDataByRoute } from 'vitepress'
+import { useSiteData, useSiteDataByRoute, useRoute } from 'vitepress'
 import NavBarLink from './NavBarLink.vue'
 import NavDropdownLink from './NavDropdownLink.vue'
 import { DefaultTheme } from '../config'
@@ -17,6 +17,7 @@ export default {
   setup() {
     const siteDataByRoute = useSiteDataByRoute()
     const siteData = useSiteData()
+    const route = useRoute()
     const repoInfo = computed(() => {
       const theme = siteData.value.themeConfig as DefaultTheme.Config
       const repo = theme.docsRepo || theme.repo
@@ -40,14 +41,52 @@ export default {
       }
       return null
     })
+
+    const localeCandidates = computed(() => {
+      const locales = siteData.value.themeConfig.locales
+      if (!locales) {
+        return null
+      }
+      const localeKeys = Object.keys(locales)
+      if (localeKeys.length <= 1) {
+        return null
+      }
+
+      const currentLangBase = localeKeys.find((v) => {
+        if (v === '/') {
+          return false
+        }
+        return route.path.startsWith(v)
+      })
+      const currentContentPath = currentLangBase
+        ? route.path.substring(currentLangBase.length - 1)
+        : route.path
+      const candidates = localeKeys.map((v) => {
+        return {
+          text: locales[v].label || locales[v].lang,
+          link: `${v}${currentContentPath}`
+        }
+      })
+
+      const currentLangKey = currentLangBase ? currentLangBase : '/'
+      const selectText = locales[currentLangKey].selectText
+        ? locales[currentLangKey].selectText
+        : 'Languages'
+      return {
+        text: selectText,
+        items: candidates
+      }
+    })
+
     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),
-      repoInfo
+      repoInfo,
+      localeCandidates
     }
   }
 }

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

@@ -6,6 +6,7 @@
         <NavBarLink v-else :item="item" />
       </template>
     </template>
+    <NavDropdownLink v-if="localeCandidates" :item="localeCandidates" />
     <NavBarLink v-if="repoInfo" :item="repoInfo" />
   </nav>
 </template>

types/shared.d.ts

@@ -2,6 +2,8 @@
 
 export interface LocaleConfig {
   lang: string
+  selectText?: string
+  label?: string
   title?: string
   description?: string
   head?: HeadConfig[]