feat: add repository and link for external translations

vuejs · Sep 6, 2024 · d4938bc · d4938bc
1 parent 6b4439a
commit d4938bc
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 9 deletions.
diff --git a/__tests__/e2e/.vitepress/config.ts b/__tests__/e2e/.vitepress/config.ts
@@ -159,6 +159,14 @@ export default defineConfig({
       lazyLoading: true
     }
   },
+  locales: {
+    root: { label: 'English', repo: 'https://github.com/vuejs/vitepress' },
+    zh: {
+      label: '简体中文',
+      link: 'https://vitepress.dev/zh/',
+      repo: 'https://github.com/vitejs/vite'
+    }
+  },
   themeConfig: {
     nav,
     sidebar,

diff --git a/src/client/theme-default/components/VPMenuLink.vue b/src/client/theme-default/components/VPMenuLink.vue
@@ -8,6 +8,10 @@ defineProps<{
   item: DefaultTheme.NavItemWithLink
 }>()
 
+defineSlots<{
+  default: () => void
+}>()
+
 const { page } = useData()
 </script>
 

diff --git a/src/client/theme-default/components/VPNavBarTranslations.vue b/src/client/theme-default/components/VPNavBarTranslations.vue
@@ -3,9 +3,13 @@ import VPFlyout from './VPFlyout.vue'
 import VPMenuLink from './VPMenuLink.vue'
 import { useData } from '../composables/data'
 import { useLangs } from '../composables/langs'
+import VPSocialLink from "./VPSocialLink.vue";
+// import { computed } from 'vue'
 
 const { theme } = useData()
 const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
+// for helping translate
+// const repoLink = computed(() => currentLang.value.repo || (localeLinks.value.length > 1 && localeLinks.value.some(l => !!l.repo)))
 </script>
 
 <template>
@@ -16,10 +20,20 @@ const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
     :label="theme.langMenuLabel || 'Change language'"
   >
     <div class="items">
-      <p class="title">{{ currentLang.label }}</p>
+      <div v-if="currentLang.repo">
+        <div class="menu-item">
+          <p class="title">{{ currentLang.label }}</p>
+          <VPSocialLink icon="github" :link="currentLang.repo.link" :ariaLabel="currentLang.repo.title" />
+        </div>
+      </div>
+      <p v-else class="title">{{ currentLang.label }}</p>
 
       <template v-for="locale in localeLinks" :key="locale.link">
-        <VPMenuLink :item="locale" />
+        <div v-if="locale.repo" class="menu-item">
+          <VPMenuLink :item="locale" />
+          <VPSocialLink icon="github" :link="locale.repo.link" :ariaLabel="locale.repo.title" />
+        </div>
+        <VPMenuLink v-else :item="locale" />
       </template>
     </div>
   </VPFlyout>
@@ -30,6 +44,13 @@ const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
   display: none;
 }
 
+.menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
 @media (min-width: 1280px) {
   .VPNavBarTranslations {
     display: flex;

diff --git a/src/client/theme-default/components/VPNavScreenTranslations.vue b/src/client/theme-default/components/VPNavScreenTranslations.vue
@@ -5,6 +5,8 @@ import VPLink from './VPLink.vue'
 
 const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
 const isOpen = ref(false)
+// for helping translate
+// const repoLink = computed(() => currentLang.value.repo || (localeLinks.value.length > 1 && localeLinks.value.some(l => !!l.repo)))
 
 function toggle() {
   isOpen.value = !isOpen.value

diff --git a/src/client/theme-default/composables/langs.ts b/src/client/theme-default/composables/langs.ts
@@ -4,19 +4,44 @@ import { useData } from './data'
 
 export function useLangs({ correspondingLink = false } = {}) {
   const { site, localeIndex, page, theme, hash } = useData()
-  const currentLang = computed(() => ({
-    label: site.value.locales[localeIndex.value]?.label,
-    link:
-      site.value.locales[localeIndex.value]?.link ||
-      (localeIndex.value === 'root' ? '/' : `/${localeIndex.value}/`)
-  }))
+  const currentLang = computed(() => {
+    const lang = site.value.locales[localeIndex.value]
+    return {
+      label: lang?.label,
+      link:
+        lang?.link || localeIndex.value === 'root'
+          ? '/'
+          : `/${localeIndex.value}/`,
+      repo: lang?.repo
+        ? {
+            link: typeof lang.repo === 'string' ? lang.repo : lang.repo.link,
+            title:
+              typeof lang.repo === 'string'
+                ? `${lang.label} repository`
+                : lang.repo.title
+          }
+        : undefined
+    }
+  })
 
   const localeLinks = computed(() =>
     Object.entries(site.value.locales).flatMap(([key, value]) =>
       currentLang.value.label === value.label
         ? []
         : {
             text: value.label,
+            repo: value.repo
+              ? {
+                  link:
+                    typeof value.repo === 'string'
+                      ? value.repo
+                      : value.repo.link,
+                  title:
+                    typeof value.repo === 'string'
+                      ? `${value.label} repository`
+                      : value.repo.title
+                }
+              : undefined,
             link:
               normalizeLink(
                 value.link || (key === 'root' ? '/' : `/${key}/`),

diff --git a/types/shared.d.ts b/types/shared.d.ts
@@ -161,7 +161,16 @@ export interface LocaleSpecificConfig<ThemeConfig = any> {
 
 export type LocaleConfig<ThemeConfig = any> = Record<
   string,
-  LocaleSpecificConfig<ThemeConfig> & { label: string; link?: string }
+  LocaleSpecificConfig<ThemeConfig> & {
+    label: string
+    link?: string
+    repo?:
+      | string
+      | {
+          link: string
+          title: string
+        }
+  }
 >
 
 // Manually declaring all properties as rollup-plugin-dts