docs: translation (zh)

.vscode/extensions.json

@@ -1,6 +1,7 @@
 {
   "recommendations": [
     "Vue.volar",
-    "dbaeumer.vscode-eslint"
+    "dbaeumer.vscode-eslint",
+    "lokalise.i18n-ally"
   ]
 }

.vscode/settings.json

@@ -39,5 +39,16 @@
     "json",
     "jsonc",
     "yaml"
+  ],
+  "i18n-ally.sourceLanguage": "en",
+  "i18n-ally.displayLanguage": "en",
+  "i18n-ally.keystyle": "nested",
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "i18n-ally.localesPaths": [
+    "docs/locales"
+  ],
+  "i18n-ally.enabledFrameworks": [
+    "vue",
+    "i18n-tag"
   ]
 }

docs/.vitepress/components/DocCommunity.vue

@@ -3,22 +3,24 @@ import { computed } from 'vue'
 import { useEditLink } from '../composables/edit-link'
 import { Icon } from '@iconify/vue'
 import { discord, github, sponsor } from '../meta'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const editLink = useEditLink()
 
 const links = computed(() => [
   { label: editLink.value.text, url: editLink.value.url, icon: 'lucide:pencil-line' },
-  { label: 'Star on GitHub', url: github, icon: 'lucide:star' },
-  { label: 'Chat on Discord', url: discord, icon: 'lucide:messages-square' },
-  { label: 'Support the project', url: sponsor, icon: 'lucide:hand-heart' },
+  { label: t('star-on-github'), url: github, icon: 'lucide:star' },
+  { label: t('chat-on-discord'), url: discord, icon: 'lucide:messages-square' },
+  { label: t('support-the-project'), url: sponsor, icon: 'lucide:hand-heart' },
 ])
 </script>
 
 <template>
   <div>
     <div class="pt-4">
       <div class="font-bold text-sm mb-2">
-        Community
+        {{ $t('community') }}
       </div>
 
       <div class="space-y-3 lg:space-y-2 mt-4">

docs/.vitepress/components/DocFooter.vue

@@ -64,7 +64,7 @@ const showFooter = computed(
         id="doc-footer-aria-label"
         class="sr-only"
       >
-        Pager
+        {{ $t('pager') }}
       </span>
 
       <div class="w-full group">

docs/.vitepress/components/DocOutline.vue

@@ -37,7 +37,7 @@ useActiveAnchor(container, marker)
       class="font-bold text-sm mb-2 trunc"
       role="heading"
     >
-      On this page
+      {{ theme.outline?.label || 'On this page' }}
     </div>
 
     <div class="border-l border-muted">

docs/.vitepress/components/DocSidebar.vue

@@ -5,6 +5,7 @@ import DocSidebarItem from './DocSidebarItem.vue'
 import { Icon } from '@iconify/vue'
 
 defineProps<{
+  base?: string
   items: DefaultTheme.SidebarItem[]
 }>()
 </script>
@@ -32,13 +33,15 @@ defineProps<{
         <DocSidebarItem
           v-for="subitem in item.items"
           :key="subitem.text"
+          :base="base"
           :item="subitem"
         />
       </CollapsibleContent>
     </CollapsibleRoot>
 
     <DocSidebarItem
       v-else
+      :base="base"
       :item="item"
     />
   </div>

docs/.vitepress/components/DocSidebarItem.vue

@@ -2,8 +2,10 @@
 import { computed, watch } from 'vue'
 import { type SidebarItem, useSidebarControl } from '../composables/sidebar'
 import { useCurrentElement } from '@vueuse/core'
+import { withBase } from 'ufo'
 
 const props = defineProps<{
+  base?: string
   item: SidebarItem
 }>()
 const { isActiveLink } = useSidebarControl(computed(() => props.item))
@@ -25,8 +27,8 @@ watch(isActiveLink, () => {
     :class="{ 'is-active !bg-primary/10 !text-primary font-semibold': isActiveLink }"
   >
     <a
-      :href="item.link"
-      class="h-[2.15rem] px-4 inline-flex items-center w-full"
+      :href="base && item.link ? withBase(item.link, base) : item.link"
+      class="py-1 min-h-8 px-4 flex items-center w-full"
       v-html="item.text"
     />
   </div>

docs/.vitepress/components/DocTopbar.vue

@@ -4,6 +4,7 @@ import { type DefaultTheme, useData, useRoute } from 'vitepress'
 import { computed, ref, toRefs, watch } from 'vue'
 import { Icon } from '@iconify/vue'
 import { DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger } from 'reka-ui'
+import { withBase } from 'ufo'
 import { flatten } from '../functions/flatten'
 import DocSidebarItem from '../components/DocSidebarItem.vue'
 
@@ -13,7 +14,10 @@ const { page, theme } = useData()
 const isSidebarOpen = ref(false)
 const sidebar = computed(() => (theme.value.sidebar as DefaultTheme.SidebarItem[]))
 
-const sectionTabs = computed(() => sidebar.value.map(val => ({ label: val.text, link: flatten(val.items ?? [], 'items').filter(i => !!i.link)?.[0].link, icon: val.icon })))
+const sectionTabs = computed(() => sidebar.value.map((val) => {
+  const _link = flatten(val.items ?? [], 'items').filter(i => !!i.link)?.[0].link
+  return { label: val.text, link: val.base && _link ? withBase(_link, val.base) : _link, icon: val.icon }
+}))
 
 const { arrivedState } = useScroll(globalThis.window)
 const { top } = toRefs(arrivedState)

docs/.vitepress/components/DropdownMenu.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from 'reka-ui'
 import { Icon } from '@iconify/vue'
+import { isExternal } from '../functions/utils'
 
 defineProps<{
-  label: string
+  icon?: string
+  label?: string
   items: {
     text: string
     link?: string
@@ -14,7 +16,12 @@ defineProps<{
 <template>
   <DropdownMenuRoot>
     <DropdownMenuTrigger class="py-2 px-2 text-nowrap md:px-0 mx-0 md:mx-3 text-sm font-semibold text-muted-foreground hover:text-foreground h-full inline-flex items-center justify-between data-[state=open]:text-foreground">
-      <span>{{ label }}</span>
+      <Icon
+        v-if="icon"
+        :icon="icon"
+        class="ml-1 text-lg"
+      />
+      <span v-if="label">{{ label }}</span>
       <Icon
         icon="lucide:chevron-down"
         class="ml-1 text-lg"
@@ -33,15 +40,17 @@ defineProps<{
           :key="item.text"
           :value="item.text"
           as-child
-          class="px-2 py-2 rounded text-sm font-semibold text-muted-foreground focus:text-primary focus:bg-primary/10 h-full flex items-center"
+          class="px-2 py-2 rounded text-sm font-semibold text-muted-foreground h-full flex items-center"
         >
           <a
             v-if="item.link"
             :href="item.link"
-            target="_blank"
+            :target="isExternal(item.link) ? '_blank' : undefined"
+            class="focus:text-primary focus:bg-primary/10"
           >
             <span>{{ item.text }}</span>
             <Icon
+              v-if="isExternal(item.link)"
               icon="lucide:arrow-up-right"
               class="ml-2 text-base"
             />

docs/.vitepress/components/ExampleHome.vue

@@ -3,12 +3,13 @@ import { computed, onBeforeMount } from 'vue'
 // @ts-expect-error type issue with `createContentLoader`
 import { data as examples } from '../functions/examples.data'
 import { type ContentData, useRouter } from 'vitepress'
+import { normalizeLink } from '../functions/utils'
 
 const router = useRouter()
-const data = computed(() => examples.filter((example: ContentData) => example.url !== '/examples/') as ContentData[])
+const data = computed(() => examples.filter((example: ContentData) => example.url !== normalizeLink('/examples/')) as ContentData[])
 
 onBeforeMount(() => {
-  router.go(data.value?.[0].url)
+  router.go(normalizeLink(data.value?.[0].url.replace('/en', '')))
 })
 </script>
 

docs/.vitepress/components/HeroContainer.vue

@@ -49,13 +49,13 @@ watch(() => props.cssFramework, () => {
           for="view-code"
           class="font-medium text-sm"
         >
-          View code
+          {{ $t('view-code') }}
         </Label>
         <SwitchRoot
           id="view-code"
           v-model="isCodeView"
           class="w-[34px] h-5 ml-2 flex data-[state=unchecked]:bg-primary/50 data-[state=checked]:bg-primary rounded-full relative transition"
-          aria-label="View code"
+          :aria-label="$t('view-code')"
         >
           <SwitchThumb
             class="w-4 h-4 my-auto bg-white text-xs flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:translate-x-full"