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
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user