Skip to content

Commit 5721fbb

Browse files
ArikSquadArikSquad
committed
feat: contributor list
1 parent 47cb138 commit 5721fbb

File tree

3 files changed

+179
-0
lines changed

3 files changed

+179
-0
lines changed

‎website/.vitepress/theme/contributors.vue‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<script setup>
2+
import { ref, onMounted } from "vue";
3+
4+
const contributors = ref([]);
5+
const loading = ref(true);
6+
const error = ref(null);
7+
8+
onMounted(async () => {
9+
try {
10+
const response = await fetch(
11+
"https://api.github.com/repos/Swofty-Developments/HypixelSkyblock/contributors",
12+
);
13+
if (!response.ok) throw new Error(`GitHub API error: ${response.status}`);
14+
contributors.value = await response.json();
15+
} catch (err) {
16+
error.value = err.message;
17+
} finally {
18+
loading.value = false;
19+
}
20+
});
21+
</script>
22+
23+
<template>
24+
<div class="contributors-wrapper">
25+
<div v-if="loading" class="status-text">
26+
<span class="pulse-dot"></span> Fetching contributors...
27+
</div>
28+
<div v-else-if="error" class="status-text error">⚠ {{ error }}</div>
29+
30+
<div v-else class="contributors">
31+
<a
32+
v-for="(user, i) in contributors"
33+
:key="user.id"
34+
:href="user.html_url"
35+
target="_blank"
36+
rel="noopener"
37+
class="contributor"
38+
:title="`${user.login} · ${user.contributions} contributions`"
39+
:style="{ '--delay': `${i * 30}ms` }"
40+
>
41+
<div class="avatar-ring">
42+
<img :src="user.avatar_url" :alt="user.login" />
43+
</div>
44+
<span class="username">{{ user.login }}</span>
45+
</a>
46+
</div>
47+
</div>
48+
</template>
49+
50+
<style scoped>
51+
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600&family=JetBrains+Mono:wght@400;500&display=swap");
52+
53+
.contributors-wrapper {
54+
margin-top: 20px;
55+
}
56+
57+
.status-text {
58+
font-family: "JetBrains Mono", monospace;
59+
font-size: 0.75rem;
60+
color: var(--vp-c-text-2, #888);
61+
display: flex;
62+
align-items: center;
63+
gap: 8px;
64+
}
65+
66+
.status-text.error {
67+
color: #f87171;
68+
}
69+
70+
.pulse-dot {
71+
width: 6px;
72+
height: 6px;
73+
border-radius: 50%;
74+
background: #4ade80;
75+
animation: pulse 1.4s ease-in-out infinite;
76+
}
77+
78+
@keyframes pulse {
79+
0%,
80+
100% {
81+
opacity: 1;
82+
transform: scale(1);
83+
}
84+
50% {
85+
opacity: 0.4;
86+
transform: scale(0.7);
87+
}
88+
}
89+
90+
.contributors {
91+
display: flex;
92+
flex-wrap: wrap;
93+
gap: 8px;
94+
}
95+
96+
.contributor {
97+
position: relative;
98+
display: flex;
99+
align-items: center;
100+
gap: 7px;
101+
padding: 5px 10px 5px 5px;
102+
border-radius: 6px;
103+
text-decoration: none;
104+
color: inherit;
105+
background: var(--vp-c-bg-soft, rgba(255, 255, 255, 0.04));
106+
border: 1px solid var(--vp-c-divider, rgba(255, 255, 255, 0.08));
107+
transition:
108+
background 0.18s,
109+
border-color 0.18s,
110+
transform 0.18s;
111+
animation: fadeIn 0.35s ease both;
112+
animation-delay: var(--delay);
113+
}
114+
115+
@keyframes fadeIn {
116+
from {
117+
opacity: 0;
118+
transform: translateY(6px);
119+
}
120+
to {
121+
opacity: 1;
122+
transform: translateY(0);
123+
}
124+
}
125+
126+
.contributor:hover {
127+
background: var(--vp-c-bg-mute, rgba(255, 255, 255, 0.08));
128+
border-color: var(--vp-c-brand-1, #4ade80);
129+
transform: translateY(-2px);
130+
}
131+
132+
.avatar-ring {
133+
position: relative;
134+
width: 26px;
135+
height: 26px;
136+
border-radius: 50%;
137+
padding: 1.5px;
138+
background: linear-gradient(
139+
135deg,
140+
var(--vp-c-brand-1, #4ade80),
141+
var(--vp-c-brand-2, #22d3ee)
142+
);
143+
flex-shrink: 0;
144+
}
145+
146+
.contributor:hover .avatar-ring {
147+
background: linear-gradient(135deg, #f9a825, #f06292);
148+
}
149+
150+
.avatar-ring img {
151+
width: 100%;
152+
height: 100%;
153+
border-radius: 50%;
154+
display: block;
155+
object-fit: cover;
156+
border: 1.5px solid var(--vp-c-bg, #1a1a1a);
157+
}
158+
159+
.username {
160+
font-family: "Rajdhani", sans-serif;
161+
font-weight: 600;
162+
font-size: 0.78rem;
163+
letter-spacing: 0.02em;
164+
color: var(--vp-c-text-1, #eee);
165+
white-space: nowrap;
166+
line-height: 1;
167+
}
168+
</style>

‎website/docs/credits.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
<script setup>
2+
import contributors from '../.vitepress/theme/contributors.vue'
3+
</script>
4+
15
# Credits
26

37
## Contributors
@@ -6,6 +10,8 @@ This project is maintained by [Swofty Developments](https://github.com/Swofty-De
610

711
View all contributors on [GitHub](https://github.com/Swofty-Developments/HypixelSkyBlock/graphs/contributors).
812

13+
<contributors />
14+
915
## Special Thanks
1016

1117
- **Minestom Community** - For the incredible API and support in the Minestom Discord

‎website/package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)