fix(@142vip/vitepress): 修改star趋势历史显示异常，切换域名

Author: mmdapl

README.md

@@ -175,7 +175,7 @@ flowchart TD
 
 <a href="https://github.com/142vip/core-x" title="@142vip/core-x">
   <picture>
-    <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=142vip/core-x,142vip/408CSFamily,142vip/JavaScriptCollection&type=Date" />
+    <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=142vip%2Fcore-x%2C142vip%2F408csfamily%2C142vip%2Fjavascriptcollection&type=Date&sealed_token=iaO-GLnvLpYHibmRk7lxdWHU5MRcN8yp072DbAkSuka6yVP87RCc245bDe_8qXluQuI-105rgdN5qw_G7omm8P05FDOB4ir6De_EdwCOyZUuxWCQE-LfbA" />
   </picture>
 </a>
 

packages/vitepress/src/components/VipOpenSource.vue

@@ -1,17 +1,22 @@
 <script lang="ts" setup>
 import { ElImage, ElLink } from 'element-plus'
+import { computed } from 'vue'
 import { useData } from 'vitepress'
 import { VIP_OPEN_SOURCE_SPONSORS } from './constants/openSource'
 import { getStarHistorySvgUrl } from './utils/starHistory'
 import 'element-plus/theme-chalk/base.css'
 import 'element-plus/theme-chalk/el-image.css'
 import 'element-plus/theme-chalk/el-link.css'
 
-defineProps<{
+const props = defineProps<{
   repoNames?: string[]
 }>()
 
 const { isDark } = useData()
+
+const starHistorySrc = computed(() =>
+  getStarHistorySvgUrl(props.repoNames, isDark.value),
+)
 </script>
 
 <template>
@@ -73,7 +78,7 @@ const { isDark } = useData()
     <h2>趋势</h2>
     <div class="vip-open-source__star-history">
       <ElImage
-        :src="getStarHistorySvgUrl(repoNames, isDark)"
+        :src="starHistorySrc"
         alt="Github Star History"
         title="Github Star History"
         class="vip-open-source__star-img"
@@ -118,7 +123,6 @@ const { isDark } = useData()
 .vip-open-source__star-history {
   display: flex;
   justify-content: center;
-  align-content: center;
 }
 
 .vip-open-source__star-img {

packages/vitepress/src/components/constants/openSource.ts

@@ -19,3 +19,7 @@ export const VIP_STAR_HISTORY_DEFAULT_REPOS = [
   '142vip/408CSFamily',
   '142vip/JavaScriptCollection',
 ] as const
+
+/** star-history.com 签发的 sealed token，用于匿名访问 SVG API */
+export const VIP_STAR_HISTORY_SEALED_TOKEN
+  = 'iaO-GLnvLpYHibmRk7lxdWHU5MRcN8yp072DbAkSuka6yVP87RCc245bDe_8qXluQuI-105rgdN5qw_G7omm8P05FDOB4ir6De_EdwCOyZUuxWCQE-LfbA'

packages/vitepress/src/components/utils/starHistory.ts

@@ -1,11 +1,26 @@
-import { VIP_STAR_HISTORY_DEFAULT_REPOS } from '../constants/openSource'
+import {
+  VIP_STAR_HISTORY_DEFAULT_REPOS,
+  VIP_STAR_HISTORY_SEALED_TOKEN,
+} from '../constants/openSource'
+
+const STAR_HISTORY_API = 'https://api.star-history.com/svg'
 
 /**
- * Star History 图表地址（随深浅色切换 theme）
+ * Star History 图表地址（含 sealed_token，随深浅色切换 theme）
  */
 export function getStarHistorySvgUrl(repoNames: string[] | undefined, isDark: boolean): string {
-  const repos = repoNames?.length
-    ? repoNames
-    : [...VIP_STAR_HISTORY_DEFAULT_REPOS]
-  return `https://api.star-history.com/svg?repos=${repos.join(',')}&type=Date${isDark ? '&theme=dark' : ''}`
+  const repos = (repoNames?.length ? repoNames : [...VIP_STAR_HISTORY_DEFAULT_REPOS])
+    .map(repo => repo.toLowerCase())
+    .join(',')
+
+  const params = new URLSearchParams({
+    repos,
+    type: 'Date',
+    sealed_token: VIP_STAR_HISTORY_SEALED_TOKEN,
+  })
+
+  if (isDark)
+    params.set('theme', 'dark')
+
+  return `${STAR_HISTORY_API}?${params.toString()}`
 }