GitHub contribution graph

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .next/*
-.next
+.next
+.env

app/IntroHeader.tsx

@@ -19,17 +19,17 @@ const textTransition: Transition = {
 const IntroHeader = () => {
 	const pathname = usePathname();
 	return (
-		<motion.div
-			variants={textVariants}
-			initial="initial"
-			animate="animate"
-			className="w-full md:max-w-2xs md:sticky top-20 h-fit"
-			transition={{
-				staggerChildren: 0.1,
-				type: "spring",
-				duration: 1,
-				bounce: 0.2,
-			}}
+		<div
+			// variants={textVariants}
+			// initial="initial"
+			// animate="animate"
+			className="w-full"
+			// transition={{
+			// 	staggerChildren: 0.1,
+			// 	type: "spring",
+			// 	duration: 1,
+			// 	bounce: 0.2,
+			// }}
 		>
 			<Link href="/">
 				<motion.h1
@@ -48,6 +48,8 @@ const IntroHeader = () => {
 				</motion.h2>
 			</Link>
 
+			{/* <ContributionGraph /> */}
+
 			{pathname === "/" && (
 				<div className="text-sm text-gray-500 font-[450] pt-4 md:pt-10 leading-relaxed space-y-2">
 					<motion.p variants={textVariants} transition={textTransition}>
@@ -78,7 +80,7 @@ const IntroHeader = () => {
 					</motion.p>
 				</div>
 			)}
-		</motion.div>
+		</div>
 	);
 };
 

app/api/github/route.ts

@@ -0,0 +1,50 @@
+export interface ContributionDay {
+	date: string;
+	contributionCount: number;
+	color: string;
+}
+
+export interface ContributionWeek {
+	contributionDays: ContributionDay[];
+}
+
+export async function getContributions(
+	username: string,
+): Promise<ContributionWeek[]> {
+	const query = `
+    query($login: String!) {
+      user(login: $login) {
+        contributionsCollection {
+          contributionCalendar {
+            weeks {
+              contributionDays {
+                date
+                contributionCount
+                color
+              }
+            }
+          }
+        }
+      }
+    }
+  `;
+
+	const res = await fetch("https://api.github.com/graphql", {
+		method: "POST",
+		headers: {
+			Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
+			"Content-Type": "application/json",
+		},
+		body: JSON.stringify({
+			query,
+			variables: { login: username },
+		}),
+		next: { revalidate: 3 }, // cache for 1 hour
+	});
+
+	const json = await res.json();
+
+	console.log(json);
+
+	return json.data.user.contributionsCollection.contributionCalendar.weeks;
+}

app/layout.tsx

@@ -6,6 +6,7 @@ import { Tabs } from "@ui-kit/Tabs";
 import { TextLink } from "@ui-kit/TextLink";
 import { Analytics } from "@vercel/analytics/next";
 import { IntroHeader } from "./IntroHeader";
+import { ContributionGraph } from "./ui-kit/ContributionGraph";
 
 const geistSans = Geist({
 	variable: "--font-geist-sans",
@@ -51,7 +52,10 @@ export default function RootLayout({
 			>
 				<div className="font-[family-name:var(--font-geist-sans)] w-screen box-border">
 					<div className="flex md:flex-row flex-col gap-8 md:gap-20 p-4 md:p-8 py-8 md:py-20 justify-center mx-auto">
-						<IntroHeader />
+						<div className="w-full md:max-w-2xs md:sticky top-20 h-fit">
+							<IntroHeader />
+							<ContributionGraph />
+						</div>
 						<div className="flex flex-col gap-8 items-center justify-center max-w-screen-md">
 							<Tabs />
 							<hr className="w-full border-gray-200" />
@@ -78,6 +82,7 @@ export default function RootLayout({
 								</div>
 								<LastUpdated />
 							</footer>
+							{/* <ContributionGraph /> */}
 						</div>
 					</div>
 				</div>

app/ui-kit/ContributionGraph.tsx

@@ -0,0 +1,55 @@
+import { type ContributionWeek, getContributions } from "@api/github/route";
+import { Tooltip } from "@base-ui-components/react";
+import { Fragment } from "react";
+import { cn } from "./cn";
+
+const getContributionColor = (contributionCount: number) => {
+	if (contributionCount === 0) return "bg-gray-200";
+	// if (contributionCount > 0 && contributionCount < 4) return "bg-gray-300";
+	if (contributionCount > 0 && contributionCount < 8) return "bg-gray-400";
+	if (contributionCount >= 8 && contributionCount < 12) return "bg-gray-500";
+	if (contributionCount >= 12) return "bg-gray-600";
+};
+
+export async function ContributionGraph() {
+	const weeks: ContributionWeek[] = await getContributions("sekeidesign");
+	console.log(weeks);
+
+	return (
+		<div className="grid grid-flow-col gap-0.5 relative w-full mt-10">
+			<Tooltip.Root delay={100}>
+				{weeks.map((week) => (
+					<div
+						key={
+							week.contributionDays[0]?.date ?? `week-${weeks.indexOf(week)}`
+						}
+						className="grid grid-rows-7 gap-0.5"
+					>
+						{week.contributionDays.map((day) => (
+							<Fragment key={day.date ?? `week-${weeks.indexOf(week)}`}>
+								<Tooltip.Trigger
+									render={
+										<div
+											key={day.date}
+											className={cn(
+												"w-full aspect-square rounded-full saturate-100 transition-colors",
+												getContributionColor(day.contributionCount),
+											)}
+										/>
+									}
+								/>
+								<Tooltip.Portal>
+									<Tooltip.Positioner>
+										<Tooltip.Popup className="bg-gray-800 text-gray-100 p-2 rounded-md">
+											<p>{day.date}</p>
+										</Tooltip.Popup>
+									</Tooltip.Positioner>
+								</Tooltip.Portal>
+							</Fragment>
+						))}
+					</div>
+				))}
+			</Tooltip.Root>
+		</div>
+	);
+}

tsconfig.json

@@ -20,7 +20,8 @@
     ],
     "paths": {
       "@/*": ["./*"],
-      "@ui-kit/*": ["./app/ui-kit/*"]
+      "@ui-kit/*": ["./app/ui-kit/*"],
+      "@api/*": ["./app/api/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],