Skip to content

Commit 7c637f2

Browse files
Zeyi-LinZeyi-Lin
committed
github button
1 parent d51a2fd commit 7c637f2

File tree

5 files changed

+236
-5
lines changed

5 files changed

+236
-5
lines changed

‎.vitepress/en.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@ export const en = defineConfig({
5353
] },
5454
{
5555
component: 'HeaderButtonEN',
56+
},
57+
{
58+
component: 'HeaderGithubButtonEN',
5659
}
5760
// { text: 'Website', link: 'https://swanlab.cn' },
5861
],
@@ -87,10 +90,10 @@ export const en = defineConfig({
8790
},
8891

8992
// 页脚配置
90-
socialLinks: [
91-
{ icon: 'bilibili', link: 'https://space.bilibili.com/386591517' },
92-
{ icon: 'github', link: 'https://github.com/swanhubx/swanlab' }
93-
],
93+
// socialLinks: [
94+
// { icon: 'bilibili', link: 'https://space.bilibili.com/386591517' },
95+
// { icon: 'github', link: 'https://github.com/swanhubx/swanlab' }
96+
// ],
9497

9598
// 搜索配置
9699
search: {

‎.vitepress/theme/components/HeaderGithubButton.vue‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<template>
2+
<button class="github-button" @click="goToGithub">
3+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="button-icon">
4+
<path fill="currentColor" d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
5+
</svg>
6+
<span v-if="starCount !== '--'" class="star-count">{{ starCount }}</span>
7+
</button>
8+
</template>
9+
10+
<script setup>
11+
import { ref, onMounted } from 'vue'
12+
13+
const props = defineProps({
14+
repo: {
15+
type: String,
16+
default: 'SwanHubX/SwanLab'
17+
},
18+
timeout: {
19+
type: Number,
20+
default: 3000 // 3秒超时
21+
}
22+
})
23+
24+
const starCount = ref('--')
25+
26+
onMounted(async () => {
27+
try {
28+
// 创建一个可以被中断的fetch请求
29+
const controller = new AbortController();
30+
const timeoutId = setTimeout(() => controller.abort(), props.timeout);
31+
32+
const response = await fetch(`https://api.github.com/repos/${props.repo}`, {
33+
signal: controller.signal
34+
});
35+
36+
clearTimeout(timeoutId);
37+
38+
const data = await response.json();
39+
if (data.stargazers_count !== undefined) {
40+
starCount.value = formatStarCount(data.stargazers_count);
41+
}
42+
} catch (error) {
43+
console.error('Failed to fetch GitHub stars:', error);
44+
// 超时或其他错误时，保持默认值或不显示
45+
}
46+
})
47+
48+
function formatStarCount(count) {
49+
if (count >= 1000) {
50+
return (count / 1000).toFixed(1) + 'k'
51+
}
52+
return count.toString()
53+
}
54+
55+
function goToGithub() {
56+
window.open(`https://github.com/${props.repo}`, '_blank')
57+
}
58+
</script>
59+
60+
<style scoped>
61+
.github-button {
62+
background-color: #ffffff;
63+
color: #374a52;
64+
border: 1px solid #e0e0e0;
65+
padding: 4px 12px;
66+
border-radius: 4px;
67+
cursor: pointer;
68+
margin-left: 10px;
69+
font-size: 14px;
70+
font-weight: 500;
71+
line-height: 1.5;
72+
height: 28px;
73+
display: flex;
74+
align-items: center;
75+
justify-content: center;
76+
margin-top: auto;
77+
margin-bottom: auto;
78+
gap: 6px;
79+
}
80+
81+
.github-button:hover {
82+
background-color: #f2f2f2;
83+
color: #397b89;
84+
}
85+
86+
.button-icon {
87+
width: 16px;
88+
height: 16px;
89+
}
90+
91+
.button-text {
92+
font-weight: 500;
93+
}
94+
95+
.star-count {
96+
font-weight: 600;
97+
}
98+
99+
/* 黑夜模式样式 */
100+
:root.dark .github-button {
101+
background-color: #2a2a2a;
102+
color: #e0e0e0;
103+
border: 1px solid #3a3a3a;
104+
}
105+
106+
:root.dark .github-button:hover {
107+
background-color: #3a3a3a;
108+
color: #48a8b5;
109+
}
110+
</style>

‎.vitepress/theme/components/HeaderGithubButtonEN.vue‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<template>
2+
<button class="github-button" @click="goToGithub">
3+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="button-icon">
4+
<path fill="currentColor" d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
5+
</svg>
6+
<span class="button-text">Star Us</span>
7+
<span v-if="starCount !== '--'" class="star-count">{{ starCount }}</span>
8+
</button>
9+
</template>
10+
11+
<script setup>
12+
import { ref, onMounted } from 'vue'
13+
14+
const props = defineProps({
15+
repo: {
16+
type: String,
17+
default: 'SwanHubX/SwanLab'
18+
},
19+
timeout: {
20+
type: Number,
21+
default: 3000 // 3秒超时
22+
}
23+
})
24+
25+
const starCount = ref('--')
26+
27+
onMounted(async () => {
28+
try {
29+
// 创建一个可以被中断的fetch请求
30+
const controller = new AbortController();
31+
const timeoutId = setTimeout(() => controller.abort(), props.timeout);
32+
33+
const response = await fetch(`https://api.github.com/repos/${props.repo}`, {
34+
signal: controller.signal
35+
});
36+
37+
clearTimeout(timeoutId);
38+
39+
const data = await response.json();
40+
if (data.stargazers_count !== undefined) {
41+
starCount.value = formatStarCount(data.stargazers_count);
42+
}
43+
} catch (error) {
44+
console.error('Failed to fetch GitHub stars:', error);
45+
// 超时或其他错误时，保持默认值或不显示
46+
}
47+
})
48+
49+
function formatStarCount(count) {
50+
if (count >= 1000) {
51+
return (count / 1000).toFixed(1) + 'k'
52+
}
53+
return count.toString()
54+
}
55+
56+
function goToGithub() {
57+
window.open(`https://github.com/${props.repo}`, '_blank')
58+
}
59+
</script>
60+
61+
<style scoped>
62+
.github-button {
63+
background-color: #ffffff;
64+
color: #374a52;
65+
border: 1px solid #e0e0e0;
66+
padding: 4px 12px;
67+
border-radius: 4px;
68+
cursor: pointer;
69+
margin-left: 10px;
70+
font-size: 14px;
71+
font-weight: 500;
72+
line-height: 1.5;
73+
height: 28px;
74+
display: flex;
75+
align-items: center;
76+
justify-content: center;
77+
margin-top: auto;
78+
margin-bottom: auto;
79+
gap: 6px;
80+
}
81+
82+
.github-button:hover {
83+
background-color: #f2f2f2;
84+
color: #397b89;
85+
}
86+
87+
.button-icon {
88+
width: 16px;
89+
height: 16px;
90+
}
91+
92+
.button-text {
93+
font-weight: 500;
94+
}
95+
96+
.star-count {
97+
font-weight: 600;
98+
}
99+
100+
/* 黑夜模式样式 */
101+
:root.dark .github-button {
102+
background-color: #2a2a2a;
103+
color: #e0e0e0;
104+
border: 1px solid #3a3a3a;
105+
}
106+
107+
:root.dark .github-button:hover {
108+
background-color: #3a3a3a;
109+
color: #48a8b5;
110+
}
111+
</style>

‎.vitepress/theme/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@ import DefaultTheme from 'vitepress/theme'
33
import './custom.css'
44
import HeaderButton from './components/HeaderButton.vue'
55
import HeaderButtonEN from './components/HeaderButtonEN.vue'
6+
import HeaderGithubButton from './components/HeaderGithubButton.vue'
7+
import HeaderGithubButtonEN from './components/HeaderGithubButtonEN.vue'
68

79
export default {
810
...DefaultTheme,
911
enhanceApp({ app }) {
1012
app.component('HeaderButton', HeaderButton)
1113
app.component('HeaderButtonEN', HeaderButtonEN)
14+
app.component('HeaderGithubButton', HeaderGithubButton)
15+
app.component('HeaderGithubButtonEN', HeaderGithubButtonEN)
1216
}
1317
}

‎.vitepress/zh.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,9 @@ export const zh = defineConfig({
5858
},
5959
{
6060
component: 'HeaderButton',
61+
},
62+
{
63+
component: 'HeaderGithubButton',
6164
}
6265

6366
],
@@ -109,7 +112,7 @@ export const zh = defineConfig({
109112
socialLinks: [
110113
{ icon: 'wechat', link: '/guide_cloud/community/online-support.html' },
111114
{ icon: 'bilibili', link: 'https://space.bilibili.com/386591517' },
112-
{ icon: 'github', link: 'https://github.com/swanhubx/swanlab' },
115+
// { icon: 'github', link: 'https://github.com/swanhubx/swanlab' },
113116
],
114117
}
115118
})

0 commit comments

Comments
 (0)