From 7e26e9533d46e0890c7c95b31b3ff88faca0d956 Mon Sep 17 00:00:00 2001
From: sanbuphy <physicoada@gmail.com>
Date: Tue, 13 Jan 2026 20:32:41 +0800
Subject: [PATCH] feat(docs): add github stars widget and remove social links

Add a GitHub stars widget component to display repository stars count with caching
Remove social links from config as they're now handled by the new widget
Improve font size and line height clamping with null checks
---
 docs/.vitepress/config.mjs                    |   6 +-
 docs/.vitepress/theme/Layout.vue              |   4 +
 .../theme/components/GitHubStars.vue          | 100 ++++++++++++++++++
 3 files changed, 107 insertions(+), 3 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/GitHubStars.vue

diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
index 50d3564..bc8c444 100644
--- a/docs/.vitepress/config.mjs
+++ b/docs/.vitepress/config.mjs
@@ -15,9 +15,9 @@ const commonThemeConfig = {
   search: {
     provider: 'local'
   },
-  socialLinks: [
-    { icon: 'github', link: 'https://github.com/datawhalechina/easy-vibe' }
-  ],
+  // socialLinks: [
+  //   { icon: 'github', link: 'https://github.com/datawhalechina/easy-vibe' }
+  // ],
   outline: {
     level: [1, 6]
   }
diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
index 87feedd..d68beb7 100644
--- a/docs/.vitepress/theme/Layout.vue
+++ b/docs/.vitepress/theme/Layout.vue
@@ -2,6 +2,7 @@
 import DefaultTheme from 'vitepress/theme'
 import { useData } from 'vitepress'
 import TextType from './components/TextType.vue'
+import GitHubStars from './components/GitHubStars.vue'
 import { onMounted, ref, watch } from 'vue'
 import { Setting } from '@element-plus/icons-vue'
 
@@ -29,12 +30,14 @@ const lineHeight = ref(DEFAULT_LINE_HEIGHT)
 const isHydrated = ref(false)
 
 const clampFontSize = (value) => {
+  if (value === null || value === undefined || value === '') return DEFAULT_FONT_SIZE
   const numeric = Number(value)
   if (!Number.isFinite(numeric)) return DEFAULT_FONT_SIZE
   return Math.min(MAX_FONT_SIZE, Math.max(MIN_FONT_SIZE, numeric))
 }
 
 const clampLineHeight = (value) => {
+  if (value === null || value === undefined || value === '') return DEFAULT_LINE_HEIGHT
   const numeric = Number(value)
   if (!Number.isFinite(numeric)) return DEFAULT_LINE_HEIGHT
   return Math.min(MAX_LINE_HEIGHT, Math.max(MIN_LINE_HEIGHT, numeric))
@@ -94,6 +97,7 @@ watch(lineHeight, (next) => {
 <template>
   <DefaultTheme.Layout>
     <template #nav-bar-content-after>
+      <GitHubStars />
       <ClientOnly>
         <el-popover placement="bottom-end" trigger="click" :width="260">
           <template #reference>
diff --git a/docs/.vitepress/theme/components/GitHubStars.vue b/docs/.vitepress/theme/components/GitHubStars.vue
new file mode 100644
index 0000000..81bf2a9
--- /dev/null
+++ b/docs/.vitepress/theme/components/GitHubStars.vue
@@ -0,0 +1,100 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const stars = ref(0)
+const formattedStars = ref('')
+
+const formatStars = (count) => {
+  if (count >= 1000) {
+    return (count / 1000).toFixed(1) + 'k'
+  }
+  return count.toString()
+}
+
+onMounted(async () => {
+  const CACHE_KEY = 'github-stars-cache'
+  const CACHE_DURATION = 5 * 60 * 1000 // 5 minutes
+
+  try {
+    const cached = localStorage.getItem(CACHE_KEY)
+    if (cached) {
+      const { count, timestamp } = JSON.parse(cached)
+      if (Date.now() - timestamp < CACHE_DURATION) {
+        stars.value = count
+        formattedStars.value = formatStars(count)
+        return
+      }
+    }
+
+    const res = await fetch('https://api.github.com/repos/datawhalechina/easy-vibe')
+    if (res.ok) {
+      const data = await res.json()
+      stars.value = data.stargazers_count
+      formattedStars.value = formatStars(stars.value)
+      
+      localStorage.setItem(CACHE_KEY, JSON.stringify({
+        count: stars.value,
+        timestamp: Date.now()
+      }))
+    }
+  } catch (e) {
+    console.error('Failed to fetch GitHub stars:', e)
+  }
+})
+</script>
+
+<template>
+  <div class="github-stars-wrapper">
+    <a
+      class="github-stars-link"
+      href="https://github.com/datawhalechina/easy-vibe"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="GitHub"
+    >
+      <span class="icon">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"/></svg>
+      </span>
+      <span v-if="formattedStars" class="stars-count">{{ formattedStars }}</span>
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.github-stars-wrapper {
+  display: flex;
+  align-items: center;
+  padding-left: 12px;
+}
+
+.github-stars-link {
+  display: flex;
+  align-items: center;
+  color: var(--vp-c-text-2);
+  transition: color 0.25s;
+}
+
+.github-stars-link:hover {
+  color: var(--vp-c-text-1);
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+.icon svg {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+
+.stars-count {
+  margin-left: 6px;
+  font-size: 14px;
+  font-weight: 500;
+}
+</style>