Skip to content

Commit 01b03de

Browse files
Kyle-UndefinedKyle-Undefined
committed
added github contributions
1 parent b12edbd commit 01b03de

4 files changed

Lines changed: 441 additions & 1 deletion

File tree

‎src/components/GitHubContributionGrid.astro‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
---
2+
import { getGitHubContributions } from '../utils/githubContributions';
3+
4+
interface Props {
5+
username: string;
6+
title?: string;
7+
}
8+
9+
const { username, title = 'GitHub Activity' } = Astro.props;
10+
const contributions = await getGitHubContributions(username);
11+
12+
const weekdayLabels = ['', 'Mon', '', 'Wed', '', 'Fri', ''];
13+
14+
const levelNames = [
15+
'No contributions',
16+
'Low contributions',
17+
'Medium-low contributions',
18+
'Medium-high contributions',
19+
'High contributions',
20+
];
21+
22+
const dateFormatter = new Intl.DateTimeFormat('en-US', {
23+
month: 'short',
24+
day: 'numeric',
25+
year: 'numeric',
26+
timeZone: 'UTC',
27+
});
28+
29+
function formatDate(date: string): string {
30+
return dateFormatter.format(new Date(`${date}T00:00:00Z`));
31+
}
32+
---
33+
34+
<section class="py-12 border-t border-blog-border">
35+
<div class="flex items-center justify-between mb-8 gap-4">
36+
<h2 class="text-2xl font-bold text-blog-accent">{title}</h2>
37+
<a
38+
href={`https://github.com/${username}`}
39+
target="_blank"
40+
rel="noopener noreferrer"
41+
class="text-blog-link flip-animate whitespace-nowrap"
42+
>
43+
View <span data-hover="profile">profile</span>
44+
</a>
45+
</div>
46+
47+
{contributions ? (
48+
<div class="gh-card rounded-lg border border-blog-border p-4 md:p-5">
49+
<p class="text-sm md:text-base text-blog-text mb-4">
50+
{contributions.summary}
51+
</p>
52+
53+
<div class="overflow-x-auto pb-2">
54+
<table class="gh-table border-separate border-spacing-[3px] min-w-max">
55+
<thead>
56+
<tr>
57+
<th class="w-8"></th>
58+
{contributions.monthLabels.map((label) => (
59+
<th class="gh-month text-left text-[10px] md:text-xs font-normal text-blog-text/70">
60+
{label}
61+
</th>
62+
))}
63+
</tr>
64+
</thead>
65+
<tbody>
66+
{weekdayLabels.map((weekdayLabel, weekdayIndex) => (
67+
<tr>
68+
<th class="gh-weekday text-left text-[10px] md:text-xs font-normal text-blog-text/60 pr-1">
69+
{weekdayLabel}
70+
</th>
71+
{contributions.weeks.map((week) => {
72+
const day = week[weekdayIndex];
73+
return (
74+
<td>
75+
{day ? (
76+
<div
77+
class:list={['gh-cell', `gh-level-${day.level}`]}
78+
title={`${day.count} contribution${day.count === 1 ? '' : 's'} on ${formatDate(day.date)} (${levelNames[day.level] ?? levelNames[0]})`}
79+
aria-label={`${day.count} contribution${day.count === 1 ? '' : 's'} on ${formatDate(day.date)}`}
80+
></div>
81+
) : (
82+
<div class="gh-cell gh-empty" aria-hidden="true"></div>
83+
)}
84+
</td>
85+
);
86+
})}
87+
</tr>
88+
))}
89+
</tbody>
90+
</table>
91+
</div>
92+
93+
<div class="mt-4 flex flex-wrap items-center justify-between gap-3 text-xs text-blog-text/80">
94+
<div class="flex items-center gap-2">
95+
<span>Less</span>
96+
<span class="gh-cell gh-level-0"></span>
97+
<span class="gh-cell gh-level-1"></span>
98+
<span class="gh-cell gh-level-2"></span>
99+
<span class="gh-cell gh-level-3"></span>
100+
<span class="gh-cell gh-level-4"></span>
101+
<span>More</span>
102+
</div>
103+
</div>
104+
</div>
105+
) : (
106+
<div class="rounded-lg border border-blog-border bg-blog-code-bg/40 p-4 text-sm text-blog-text">
107+
Could not load GitHub contribution data during build. Try another deploy/build to refresh it.
108+
</div>
109+
)}
110+
</section>
111+
112+
<style>
113+
.gh-card {
114+
background:
115+
radial-gradient(circle at top right, rgba(15, 182, 214, 0.12), transparent 45%),
116+
linear-gradient(180deg, rgba(122, 162, 247, 0.06), rgba(25, 22, 33, 0.45));
117+
}
118+
119+
.gh-table {
120+
table-layout: fixed;
121+
}
122+
123+
.gh-month {
124+
width: 12px;
125+
min-width: 12px;
126+
height: 14px;
127+
}
128+
129+
.gh-weekday {
130+
width: 26px;
131+
min-width: 26px;
132+
}
133+
134+
.gh-cell {
135+
width: 11px;
136+
height: 11px;
137+
border-radius: 2px;
138+
border: 1px solid rgba(255, 255, 255, 0.05);
139+
}
140+
141+
.gh-empty {
142+
background-color: transparent;
143+
border-color: transparent;
144+
}
145+
146+
.gh-level-0 {
147+
background-color: #1a1830;
148+
}
149+
150+
.gh-level-1 {
151+
background-color: #164455;
152+
}
153+
154+
.gh-level-2 {
155+
background-color: #0f5f77;
156+
}
157+
158+
.gh-level-3 {
159+
background-color: #0fb6d6;
160+
}
161+
162+
.gh-level-4 {
163+
background-color: #2fff1f;
164+
}
165+
</style>

‎src/pages/index.astro‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import PostHogLayout from '../layouts/PostHogLayout.astro';
33
import Layout from '../layouts/Layout.astro';
44
import PostCard from '../components/PostCard.astro';
55
import ProjectCard from '../components/ProjectCard.astro';
6+
import GitHubContributionGrid from '../components/GitHubContributionGrid.astro';
67
import { getCollection } from 'astro:content';
78
89
const latestPostLimit = 3;
@@ -72,5 +73,7 @@ const projectsSlice = projects.slice(0, featuredProjectLimit);
7273
)}
7374
</div>
7475
</section>
76+
77+
<GitHubContributionGrid username="kyle-undefined" />
7578
</Layout>
7679
</PostHogLayout>

‎src/styles/global.css‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,30 @@
5252

5353
html {
5454
overflow-y: scroll;
55+
scrollbar-gutter: stable;
56+
scrollbar-color: #0f5f77 #100e17;
57+
}
58+
59+
html::-webkit-scrollbar {
60+
width: 11px;
61+
}
62+
63+
html::-webkit-scrollbar-track {
64+
background: #100e17;
65+
}
66+
67+
html::-webkit-scrollbar-thumb {
68+
background: linear-gradient(180deg, #164455 0%, #0f5f77 100%);
69+
border: 2px solid #100e17;
70+
border-radius: 9999px;
71+
}
72+
73+
html::-webkit-scrollbar-thumb:hover {
74+
background: linear-gradient(180deg, #0f5f77 0%, #0fb6d6 100%);
75+
}
76+
77+
html::-webkit-scrollbar-corner {
78+
background: #100e17;
5579
}
5680

5781
body {
@@ -123,4 +147,4 @@ article a {
123147
left: 0;
124148
transition: right .4s cubic-bezier(0,.5,0,1);
125149
}
126-
}
150+
}

0 commit comments

Comments
 (0)