fix(theme): add lang and dir attributes to language picker

docs/.vitepress/config.ts

@@ -124,13 +124,13 @@ export default defineConfig({
   },
 
   locales: {
-    root: { label: 'English' },
-    zh: { label: '简体中文' },
-    pt: { label: 'Português' },
-    ru: { label: 'Русский' },
-    es: { label: 'Español' },
-    ko: { label: '한국어' },
-    fa: { label: 'فارسی' }
+    root: { label: 'English', lang: 'en-US', dir: 'ltr' },
+    zh: { label: '简体中文', lang: 'zh-Hans', dir: 'ltr' },
+    pt: { label: 'Português', lang: 'pt-BR', dir: 'ltr' },
+    ru: { label: 'Русский', lang: 'ru-RU', dir: 'ltr' },
+    es: { label: 'Español', lang: 'es-CO', dir: 'ltr' },
+    ko: { label: '한국어', lang: 'ko-KR', dir: 'ltr' },
+    fa: { label: 'فارسی', lang: 'fa-IR', dir: 'rtl' }
   },
 
   vite: {

docs/es/config.ts

@@ -5,7 +5,6 @@ const require = createRequire(import.meta.url)
 const pkg = require('vitepress/package.json')
 
 export default defineAdditionalConfig({
-  lang: 'es-CO',
   description: 'Generador de Sitios Estáticos desarrollado con Vite y Vue.',
 
   themeConfig: {

docs/fa/config.ts

@@ -5,9 +5,7 @@ const require = createRequire(import.meta.url)
 const pkg = require('vitepress/package.json')
 
 export default defineAdditionalConfig({
-  lang: 'fa-IR',
   description: 'ژنراتور استاتیک وب‌سایت با Vite و Vue',
-  dir: 'rtl',
 
   // prettier-ignore
   head: [

docs/ko/config.ts

@@ -5,7 +5,6 @@ const require = createRequire(import.meta.url)
 const pkg = require('vitepress/package.json')
 
 export default defineAdditionalConfig({
-  lang: 'ko-KR',
   description: 'Vite 및 Vue 기반 정적 사이트 생성기.',
 
   themeConfig: {

docs/pt/config.ts

@@ -5,7 +5,6 @@ const require = createRequire(import.meta.url)
 const pkg = require('vitepress/package.json')
 
 export default defineAdditionalConfig({
-  lang: 'pt-BR',
   description: 'Gerador de Site Estático desenvolvido com Vite e Vue.',
 
   themeConfig: {

docs/ru/config.ts

@@ -5,7 +5,6 @@ const require = createRequire(import.meta.url)
 const pkg = require('vitepress/package.json')
 
 export default defineAdditionalConfig({
-  lang: 'ru-RU',
   description: 'Генератор статических сайтов на основе Vite и Vue.',
 
   themeConfig: {

docs/zh/config.ts

@@ -5,7 +5,6 @@ const require = createRequire(import.meta.url)
 const pkg = require('vitepress/package.json')
 
 export default defineAdditionalConfig({
-  lang: 'zh-Hans',
   description: '由 Vite 和 Vue 驱动的静态站点生成器',
 
   themeConfig: {

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

@@ -9,11 +9,14 @@ defineProps<{
 }>()
 
 const { page } = useData()
+
+defineOptions({ inheritAttrs: false })
 </script>
 
 <template>
   <div class="VPMenuLink">
     <VPLink
+      v-bind="$attrs"
       :class="{
         active: isActive(
           page.relativePath,
@@ -46,6 +49,7 @@ const { page } = useData()
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-1);
+  text-align: left;
   white-space: nowrap;
   transition:
     background-color 0.25s,

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

@@ -31,7 +31,7 @@ const hasExtraContent = computed(
       <p class="trans-title">{{ currentLang.label }}</p>
 
       <template v-for="locale in localeLinks" :key="locale.link">
-        <VPMenuLink :item="locale" />
+        <VPMenuLink :item="locale" :lang="locale.lang" :dir="locale.dir" />
       </template>
     </div>
 

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

@@ -19,7 +19,7 @@ const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
       <p class="title">{{ currentLang.label }}</p>
 
       <template v-for="locale in localeLinks" :key="locale.link">
-        <VPMenuLink :item="locale" />
+        <VPMenuLink :item="locale" :lang="locale.lang" :dir="locale.dir" />
       </template>
     </div>
   </VPFlyout>

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

@@ -25,7 +25,14 @@ function toggle() {
 
     <ul class="list">
       <li v-for="locale in localeLinks" :key="locale.link" class="item">
-        <VPLink class="link" :href="locale.link">{{ locale.text }}</VPLink>
+        <VPLink
+          class="link"
+          :href="locale.link"
+          :lang="locale.lang"
+          :dir="locale.dir"
+        >
+          {{ locale.text }}
+        </VPLink>
       </li>
     </ul>
   </div>

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

@@ -25,7 +25,9 @@ export function useLangs({ correspondingLink = false } = {}) {
                   currentLang.value.link.length - 1
                 ),
                 !site.value.cleanUrls
-              ) + hash.value
+              ) + hash.value,
+            lang: value.lang,
+            dir: value.dir
           }
     )
   )