chore: add `gitlab` and `bitbacket` to social icons

__tests__/e2e/.vitepress/config.ts

@@ -168,12 +168,23 @@ export default defineConfig({
         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: '中文存储库'
       }
     }

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

@@ -21,7 +21,7 @@ const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
         <div class="menu-item">
           <p class="title">{{ currentLang.label }}</p>
           <VPSocialLink
-            icon="github"
+            :icon="currentLang.repository.icon ?? 'github'"
             :link="currentLang.repository.link"
             :ariaLabel="currentLang.repository.title"
           />
@@ -33,7 +33,7 @@ const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
         <div v-if="locale.repository" class="menu-item">
           <VPMenuLink :item="locale" />
           <VPSocialLink
-            icon="github"
+            :icon="locale.repository.icon ?? 'github'"
             :link="locale.repository.link"
             :ariaLabel="locale.repository.title"
           />

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

@@ -32,7 +32,7 @@ function toggle() {
       </template>
       <VPSocialLink
         v-if="currentLang.repository"
-        icon="github"
+        :icon="currentLang.repository.icon ?? 'github'"
         :link="currentLang.repository.link"
         :ariaLabel="currentLang.repository.title"
       />
@@ -48,7 +48,7 @@ function toggle() {
         <VPLink class="link" :href="locale.link">{{ locale.text }}</VPLink>
         <VPSocialLink
           v-if="locale.repository"
-          icon="github"
+          :icon="locale.repository.icon ?? 'github'"
           :link="locale.repository.link"
           :ariaLabel="locale.repository.title"
         />

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

@@ -8,16 +8,11 @@ export function useLangs({ correspondingLink = false } = {}) {
     const lang = site.value.locales[localeIndex.value]
     return {
       label: lang?.label,
+      repository: lang?.repository,
       link:
         lang?.link || localeIndex.value === 'root'
           ? '/'
-          : `/${localeIndex.value}/`,
-      repository: lang?.repository
-        ? {
-            link: lang.repository.link,
-            title: lang.repository.title
-          }
-        : undefined
+          : `/${localeIndex.value}/`
     }
   })
 
@@ -27,12 +22,7 @@ export function useLangs({ correspondingLink = false } = {}) {
         ? []
         : {
             text: value.label,
-            repository: value.repository
-              ? {
-                  link: value.repository.link,
-                  title: value.repository.title
-                }
-              : undefined,
+            repository: value.repository,
             link:
               normalizeLink(
                 value.link || (key === 'root' ? '/' : `/${key}/`),

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-repo-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-repo-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");
+}

types/default-theme.d.ts

@@ -334,9 +334,11 @@ export namespace DefaultTheme {
   }
 
   export type SocialLinkIcon =
+    | 'bitbucket'
     | 'discord'
     | 'facebook'
     | 'github'
+    | 'gitlab'
     | 'instagram'
     | 'linkedin'
     | 'mastodon'

types/shared.d.ts

@@ -159,6 +159,8 @@ export interface LocaleSpecificConfig<ThemeConfig = any> {
   themeConfig?: ThemeConfig
 }
 
+export type RepositoryLinkIcon = 'github' | 'gitlab' | 'bitbucket'
+
 export type LocaleConfig<ThemeConfig = any> = Record<
   string,
   LocaleSpecificConfig<ThemeConfig> & {
@@ -167,6 +169,8 @@ export type LocaleConfig<ThemeConfig = any> = Record<
     repository?: {
       link: string
       title: string
+      /** @default 'github' */
+      icon?: RepositoryLinkIcon
       help?: {
         link: string
         text: string