Merge bb76458c7d into 602ae7ba9d

11 months ago · 475ac2bbce
parent 602ae7ba9d bb76458c7d
commit 475ac2bbce
7 changed files with 154 additions and 17 deletions
--- a/tests/e2e/.vitepress/config.ts
+++ b/tests/e2e/.vitepress/config.ts
@ -159,6 +159,36 @@ export default defineConfig({
      lazyLoading: true
    }
  },
+  locales: {
+    root: {
+      label: 'English',
+      link: 'https://vitepress.dev',
+      repository: {
+        link: 'https://github.com/vuejs/vitepress',
+        title: 'English Repository'
+      }
+    },
+    es: {
+      label: 'Español',
+      link: 'https://vitepress.dev/es/',
+      repository: {
+        // for testing purposes
+        link: 'https://github.com/vuejs/core',
+        icon: 'gitlab',
+        title: 'Repositorio en Español'
+      }
+    },
+    zh: {
+      label: '简体中文',
+      link: 'https://vitepress.dev/zh/',
+      repository: {
+        // for testing purposes
+        link: 'https://github.com/vitejs/vite',
+        icon: 'bitbucket',
+        title: '中文存储库'
+      }
+    }
+  },
  themeConfig: {
    nav,
    sidebar,
--- a/src/client/theme-default/components/VPNavBarTranslations.vue
+++ b/src/client/theme-default/components/VPNavBarTranslations.vue
@ -3,6 +3,7 @@ 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";

 const { theme } = useData()
 const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
@ -16,10 +17,28 @@ const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
    :label="theme.langMenuLabel || 'Change language'"
  >
    <div class="items">
-      <p class="title">{{ currentLang.label }}</p>
+      <div v-if="currentLang.repository">
+        <div class="menu-item">
+          <p class="title">{{ currentLang.label }}</p>
+          <VPSocialLink
+            :icon="currentLang.repository.icon ?? 'github'"
+            :link="currentLang.repository.link"
+            :ariaLabel="currentLang.repository.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.repository" class="menu-item">
+          <VPMenuLink :item="locale" />
+          <VPSocialLink
+            :icon="locale.repository.icon ?? 'github'"
+            :link="locale.repository.link"
+            :ariaLabel="locale.repository.title"
+          />
+        </div>
+        <VPMenuLink v-else :item="locale" />
      </template>
    </div>
  </VPFlyout>
@ -30,6 +49,12 @@ const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
  display: none;
 }

+.menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
@media (min-width: 1280px) {
  .VPNavBarTranslations {
    display: flex;
--- a/src/client/theme-default/components/VPNavScreenTranslations.vue
+++ b/src/client/theme-default/components/VPNavScreenTranslations.vue
@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useLangs } from '../composables/langs'
 import VPLink from './VPLink.vue'
+import VPSocialLink from "./VPSocialLink.vue";

 const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
 const isOpen = ref(false)
+const repo = computed(() => !!currentLang.value.repository || localeLinks.value.some(l => !!l.repository))

 function toggle() {
  isOpen.value = !isOpen.value
@ -15,17 +17,41 @@ function toggle() {
  <div
    v-if="localeLinks.length && currentLang.label"
    class="VPNavScreenTranslations"
-    :class="{ open: isOpen }"
+    :class="{ open: isOpen, repo }"
  >
-    <button class="title" @click="toggle">
-      <span class="vpi-languages icon lang" />
-      {{ currentLang.label }}
-      <span class="vpi-chevron-down icon chevron" />
+    <button class="title" :class="{ repo: !!currentLang.repository }" @click="toggle">
+      <span v-if="currentLang.repository" class="repo">
+        <span class="vpi-languages icon lang" />
+        <span>{{ currentLang.label }}</span>
+        <span class="vpi-chevron-down icon chevron" />
+      </span>
+      <template v-else>
+        <span class="vpi-languages icon lang" />
+        <span>{{ currentLang.label }}</span>
+        <span class="vpi-chevron-down icon chevron" />
+      </template>
+      <VPSocialLink
+        v-if="currentLang.repository"
+        :icon="currentLang.repository.icon ?? 'github'"
+        :link="currentLang.repository.link"
+        :ariaLabel="currentLang.repository.title"
+      />
    </button>

    <ul class="list">
-      <li v-for="locale in localeLinks" :key="locale.link" class="item">
+      <li
+        v-for="locale in localeLinks"
+        :key="locale.link"
+        :class="{ repo: !!locale.repository }"
+        class="item"
+      >
        <VPLink class="link" :href="locale.link">{{ locale.text }}</VPLink>
+        <VPSocialLink
+          v-if="locale.repository"
+          :icon="locale.repository.icon ?? 'github'"
+          :link="locale.repository.link"
+          :ariaLabel="locale.repository.title"
+        />
      </li>
    </ul>
  </div>
@ -37,16 +63,35 @@ function toggle() {
  overflow: hidden;
 }

+.VPNavScreenTranslations.repo {
+  height: 40px;
+}
+
 .VPNavScreenTranslations.open {
  height: auto;
 }

-.title {
+.title, .title.repo .repo {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-1);
+
+}
+
+.title.repo {
+  width: 100%;
+  justify-content: space-between;
+}
+
+
+.VPNavScreenTranslations .title .vpi-chevron-down {
+  transition: transform 0.25s;
+  transform: rotate(90deg);
+}
+.VPNavScreenTranslations.open .title .vpi-chevron-down {
+  transform: rotate(-90deg);
 }

 .icon {
@ -65,6 +110,12 @@ function toggle() {
  padding: 4px 0 0 24px;
 }

+.list .item.repo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .link {
  line-height: 32px;
  font-size: 13px;
--- a/src/client/theme-default/composables/langs.ts
+++ b/src/client/theme-default/composables/langs.ts
@ -4,12 +4,17 @@ 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,
+      repository: lang?.repository,
+      link:
+        lang?.link || localeIndex.value === 'root'
+          ? '/'
+          : `/${localeIndex.value}/`
+    }
+  })

  const localeLinks = computed(() =>
    Object.entries(site.value.locales).flatMap(([key, value]) =>
@ -17,6 +22,7 @@ export function useLangs({ correspondingLink = false } = {}) {
        ? []
        : {
            text: value.label,
+            repository: value.repository,
            link:
              normalizeLink(
                value.link || (key === 'root' ? '/' : `/${key}/`),
--- a/src/client/theme-default/styles/icons.css
+++ b/src/client/theme-default/styles/icons.css
@ -121,3 +121,11 @@
 .vpi-social-youtube {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
 }
+/* gitlab: under MIT from https://icon-sets.iconify.design/akar-icons/gitlab-fill/ */
+.vpi-social-gitlab {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m22.749 9.769l-.031-.08l-3.027-7.9a.79.79 0 0 0-.782-.495a.8.8 0 0 0-.456.17a.8.8 0 0 0-.268.408L16.14 8.125H7.865L5.822 1.872a.8.8 0 0 0-.269-.409a.81.81 0 0 0-.926-.05c-.14.09-.25.22-.312.376L1.283 9.684l-.03.08a5.62 5.62 0 0 0 1.864 6.496l.01.008l.028.02l4.61 3.453l2.282 1.726l1.39 1.049a.935.935 0 0 0 1.13 0l1.389-1.05l2.281-1.726l4.639-3.473l.011-.01A5.62 5.62 0 0 0 22.75 9.77'/%3E%3C/svg%3E");
+}
+/* bitbucket: under MIT from https://icon-sets.iconify.design/pajamas/bitbucket/ */
+.vpi-social-bitbucket {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M1.454 1.816a.45.45 0 0 0-.345.153a.44.44 0 0 0-.103.358L2.91 13.684c.049.287.3.498.596.5h9.135a.45.45 0 0 0 .449-.37L14.994 2.33a.44.44 0 0 0-.1-.358a.45.45 0 0 0-.342-.156zm8.018 8.208H6.557l-.79-4.05h4.412z'/%3E%3C/svg%3E");
+}
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@ -334,9 +334,11 @@ export namespace DefaultTheme {
  }

  export type SocialLinkIcon =
+    | 'bitbucket'
    | 'discord'
    | 'facebook'
    | 'github'
+    | 'gitlab'
    | 'instagram'
    | 'linkedin'
    | 'mastodon'
--- a/types/shared.d.ts
+++ b/types/shared.d.ts
@ -159,9 +159,24 @@ export interface LocaleSpecificConfig<ThemeConfig = any> {
  themeConfig?: ThemeConfig
 }

+export type RepositoryLinkIcon = 'github' | 'gitlab' | 'bitbucket'
+
 export type LocaleConfig<ThemeConfig = any> = Record<
  string,
-  LocaleSpecificConfig<ThemeConfig> & { label: string; link?: string }
+  LocaleSpecificConfig<ThemeConfig> & {
+    label: string
+    link?: string
+    repository?: {
+      link: string
+      title: string
+      /** @default 'github' */
+      icon?: RepositoryLinkIcon
+      help?: {
+        link: string
+        text: string
+      }
+    }
+  }
 >

 // Manually declaring all properties as rollup-plugin-dts