feat(theme): add gitee provider support for repocard, close #674 (#675)

docs/notes/theme/guide/components/repo-card.md

@@ -11,7 +11,7 @@ import RepoCard from 'vuepress-theme-plume/features/RepoCard.vue'
 
 ## 概述
 
-Repo 卡片组件 用于显示 GitHub 仓库信息。
+Repo 卡片组件 用于显示 GitHub / Gitee 仓库信息。
 
 ## 使用
 
@@ -54,6 +54,10 @@ export default defineClientConfig({
 仓库地址，格式为 `owner/repo`
 :::
 
+::: field name="provider" type="github | gitee" optional default="'github'"
+仓库所属平台，当前仅支持 `github / gitee` 。
+:::
+
 ::: field name="fullname" type="boolean" optional
 是否显示完整的仓库名称。
 
@@ -98,3 +102,19 @@ export default defineClientConfig({
   <RepoCard repo="vuepress/core" />
   <RepoCard repo="vuepress/ecosystem" />
 </CardGrid>
+
+**输入：**
+
+```md
+<CardGrid>
+  <RepoCard repo="pengzb/vuepress-theme-plume" provider="gitee" />
+  <RepoCard repo="pengzb/vite-plugin-mock-dev-server" provider="gitee" />
+</CardGrid>
+```
+
+**输出：**
+
+<CardGrid>
+  <RepoCard repo="pengzb/vuepress-theme-plume" provider="gitee" />
+  <RepoCard repo="pengzb/vite-plugin-mock-dev-server" provider="gitee" />
+</CardGrid>

theme/src/client/features/components/RepoCard.vue

@@ -1,20 +1,21 @@
 <script setup lang="ts">
 import { toRef } from 'vue'
 import { ClientOnly } from 'vuepress/client'
-import { useGithubRepo } from '../composables/github-repo.js'
+import { useGithubRepo } from '../composables/repo.js'
 
 const props = withDefaults(defineProps<{
   repo: string
   fullname?: boolean
-}>(), { fullname: undefined })
-const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
+  provider?: 'github' | 'gitee'
+}>(), { fullname: undefined, provider: 'github' })
+const { loaded, data } = useGithubRepo(toRef(props, 'repo'), toRef(props, 'provider'))
 </script>
 
 <template>
   <ClientOnly>
     <div v-if="loaded && data?.name" class="vp-repo-card">
       <p class="repo-name">
-        <span class="vpi-github-repo" />
+        <span :class="`vpi-${provider}-repo`" />
         <span class="repo-link">
           <a :href="data.url" target="_blank" rel="noopener noreferrer" class="no-icon" :title="data.fullName">
             {{ fullname || (data.ownerType === 'Organization' && typeof fullname === 'undefined') ? data.fullName : data.name }}
@@ -67,10 +68,10 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
 
 .vp-repo-card .repo-name {
   display: flex;
-  gap: 0 8px;
+  gap: 0 6px;
   align-items: center;
   max-width: 100%;
-  font-size: 16px;
+  font-size: 14px;
 }
 
 .vp-repo-card .repo-link {
@@ -96,7 +97,7 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
 .vp-repo-card .repo-visibility {
   display: inline-block;
   padding: 0 8px;
-  font-size: 14px;
+  font-size: 12px;
   line-height: 20px;
   color: var(--vp-c-text-2);
   border: solid 1px var(--vp-c-divider);
@@ -111,8 +112,8 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
 
 .vp-repo-card .repo-desc {
   flex: 1 2;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 12px;
+  line-height: 18px;
   color: var(--vp-c-text-2);
   transition: color var(--vp-t-color);
 }
@@ -123,7 +124,7 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
   gap: 8px 14px;
   align-items: center;
   justify-content: flex-start;
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .vp-repo-card .repo-info p {
@@ -148,6 +149,14 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'))
   border-radius: 100%;
 }
 
+.vpi-gitee-repo {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23c71d23' d='M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12a12 12 0 0 0 12-12A12 12 0 0 0 12 0zm6.09 5.333c.328 0 .593.266.592.593v1.482a.594.594 0 0 1-.593.592H9.777c-.982 0-1.778.796-1.778 1.778v5.63c0 .327.266.592.593.592h5.63c.982 0 1.778-.796 1.778-1.778v-.296a.593.593 0 0 0-.592-.593h-4.15a.59.59 0 0 1-.592-.592v-1.482a.593.593 0 0 1 .593-.592h6.815c.327 0 .593.265.593.592v3.408a4 4 0 0 1-4 4H5.926a.593.593 0 0 1-.593-.593V9.778a4.444 4.444 0 0 1 4.445-4.444h8.296Z'/%3E%3C/svg%3E");
+
+  color: #c71d23;
+  transition: color var(--vp-t-color);
+  transform: translateY(2px);
+}
+
 .vpi-github-repo {
   --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7a.75.75 0 1 1-1.072 1.05A2.5 2.5 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.5 2.5 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.25.25 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z'/%3E%3C/svg%3E");
 

theme/src/client/features/composables/repo.ts

@@ -2,12 +2,12 @@ import type { MaybeRef, Ref } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
 import { computed, ref, toValue, watch } from 'vue'
 
-interface GithubRepoLicense {
+interface RepoLicense {
   name: string
   url: string
 }
 
-export interface GithubRepoInfo {
+export interface RepoInfo {
   name: string
   fullName: string
   description: string
@@ -23,7 +23,7 @@ export interface GithubRepoInfo {
   visibility: 'Private' | 'Public' // private, public
   template: boolean
   ownerType: 'User' | 'Organization'
-  license: GithubRepoLicense | null
+  license: RepoLicense | null
 }
 
 /**
@@ -31,31 +31,36 @@ export interface GithubRepoInfo {
  * 默认缓存 6 小时 时间
  */
 const storage = useLocalStorage('__VUEPRESS_GITHUB_REPO__', {} as Record<string, {
-  info: GithubRepoInfo
+  info: RepoInfo
   updatedAt: number
 }>)
 
 interface UseGithubRepoResult {
-  data: Ref<GithubRepoInfo | null>
+  data: Ref<RepoInfo | null>
   loaded: Ref<boolean>
 }
 
-export function useGithubRepo(repo: MaybeRef<string>): UseGithubRepoResult {
+export function useGithubRepo(
+  repo: MaybeRef<string>,
+  provider: MaybeRef<'github' | 'gitee' | undefined>,
+): UseGithubRepoResult {
   const repoRef = computed(() => {
     const info = toValue(repo)
     const [owner = '', name = ''] = info.split('/')
     return { owner, name }
   })
-  const data = ref<GithubRepoInfo | null>(null)
+  const providerRef = computed(() => toValue(provider) ?? 'github')
+
+  const data = ref<RepoInfo | null>(null)
   const loaded = ref(false)
 
   async function fetchData() {
-    const { owner, name } = repoRef.value
+    const { owner, name } = toValue(repoRef)
     if (__VUEPRESS_SSR__ || !owner || !name)
       return
 
-    const key = `${owner}/${name}`
-    const cached = storage.value[`${owner}/${name}`]
+    const key = `${providerRef.value === 'github' ? '' : `${providerRef.value}:`}${owner}/${name}`
+    const cached = storage.value[key]
     if (cached?.info?.name && Date.now() - cached.updatedAt <= 86400000) {
       data.value = cached.info
       loaded.value = true
@@ -64,8 +69,8 @@ export function useGithubRepo(repo: MaybeRef<string>): UseGithubRepoResult {
 
     loaded.value = false
     try {
-      const res = await fetch(`https://api.pengzhanbo.cn/github/repo/${owner}/${name}`)
-        .then(res => res.json()) as GithubRepoInfo
+      const res = await fetch(`https://api.pengzhanbo.cn/${providerRef.value}/repo/${owner}/${name}`)
+        .then(res => res.json()) as RepoInfo
 
       loaded.value = true