add github profile card

.claude/settings.local.json

···
     "allow": [
       "Bash(pnpm check:*)",
       "mcp__ide__getDiagnostics",
-      "mcp__plugin_svelte_svelte__svelte-autofixer"
+      "mcp__plugin_svelte_svelte__svelte-autofixer",
+      "mcp__plugin_svelte_svelte__list-sections"
     ]
   }
 }

src/lib/cards/GitHubProfileCard/GitHubProfileCard.svelte

···
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { siGithub } from 'simple-icons';
+	import { getAdditionalUserData, getIsMobile } from '$lib/website/context';
+	import type { ContentComponentProps } from '../types';
+	import type { GithubProfileLoadedData } from '.';
+	import GithubContributionsGraph from './GithubContributionsGraph.svelte';
+	import { Button } from '@foxui/core';
+
+	let { item }: ContentComponentProps = $props();
+
+	const data = getAdditionalUserData();
+
+	let isLoaded = $state(false);
+	// svelte-ignore state_referenced_locally
+	let contributionsData = $state(
+		(data[item.cardType] as GithubProfileLoadedData)?.[item.cardData.user]
+	);
+
+	onMount(async () => {
+		console.log(contributionsData);
+		if (!contributionsData && item.cardData?.user) {
+			try {
+				const response = await fetch(`/api/github?user=${encodeURIComponent(item.cardData.user)}`);
+				if (response.ok) {
+					contributionsData = await response.json();
+					data[item.cardType] ??= {};
+					data[item.cardType][item.cardData.user] = contributionsData;
+				}
+			} catch (error) {
+				console.error('Failed to fetch GitHub contributions:', error);
+			}
+		}
+		isLoaded = true;
+	});
+
+	let isMobile = getIsMobile();
+</script>
+
+<div class="h-full overflow-hidden p-4">
+	{#if contributionsData}
+		<div class="flex h-full flex-col justify-between">
+			<!-- Header -->
+			<div class="flex justify-between">
+				<div class="flex items-center gap-3">
+					<div class="fill-base-950 size-6 shrink-0 dark:fill-white [&_svg]:size-full">
+						{@html siGithub.svg}
+					</div>
+					<a
+						href="https://github.com/{item.cardData.user}"
+						target="_blank"
+						rel="noopener noreferrer"
+						class=" flex truncate text-2xl font-bold transition-colors"
+					>
+						{item.cardData.user}
+					</a>
+				</div>
+
+				{#if isMobile() ? item.mobileW > 4 : item.w > 2}
+					<Button
+						href="https://github.com/{item.cardData.user}"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="z-50">Follow</Button
+					>
+				{/if}
+			</div>
+
+			<div class="flex">
+				<GithubContributionsGraph
+					data={contributionsData}
+					isBig={isMobile() ? item.mobileH > 5 : item.h > 2}
+				/>
+			</div>
+		</div>
+	{:else if isLoaded}
+		<div
+			class="text-base-600 dark:text-base-400 accent:text-base-800 flex h-full w-full items-center justify-center text-sm"
+		>
+			Could not load GitHub contributions
+		</div>
+	{:else}
+		<div
+			class="text-base-600 dark:text-base-400 accent:text-base-800 flex h-full w-full items-center justify-center text-sm"
+		>
+			Loading contributions...
+		</div>
+	{/if}
+</div>
+
+{#if item.cardData.href}
+	<a
+		href={item.cardData.href}
+		class="absolute inset-0 h-full w-full"
+		target="_blank"
+		rel="noopener noreferrer"
+	>
+		<span class="sr-only"> Show on github </span>
+	</a>
+{/if}

src/lib/cards/GitHubProfileCard/GithubContributionsGraph.svelte

···
+<script lang="ts">
+	import { cn } from '@foxui/core';
+	import type { GitHubContributionsData } from './types';
+
+	let { data, isBig = false }: { data: GitHubContributionsData; isBig: boolean } = $props();
+
+	let colors: Record<string, string> = {
+		'#ebedf0': 'bg-accent-200/50 dark:bg-accent-950/30 accent:bg-accent-800/20',
+		'#9be9a8': 'bg-accent-300/50 dark:bg-accent-800/70 accent:bg-accent-800/40',
+		'#40c463': 'bg-accent-300 dark:bg-accent-700 accent:bg-accent-800/60',
+		'#30a14e': 'bg-accent-400 dark:bg-accent-600 accent:bg-accent-800/80',
+		'#216e39': 'bg-accent-500 accent:bg-accent-800'
+	};
+</script>
+
+<div class={cn('flex h-full w-full justify-end gap-0.5', isBig && 'gap-1')}>
+	{#each data.contributionsCollection.contributionCalendar.weeks as week (week.contributionDays)}
+		<div class={cn('flex w-full flex-col gap-0.5', isBig && 'gap-1')}>
+			{#if week.contributionDays.length === 7}
+				{#each week.contributionDays as day (day.date)}
+					<div
+						class={cn('size-2.5 rounded-sm', colors[day.color], isBig && 'size-3')}
+						title="Contributions: {day.contributionCount} on {day.date}"
+					></div>
+				{/each}
+			{/if}
+		</div>
+	{/each}
+</div>

src/lib/cards/GitHubProfileCard/index.ts

···
+import type { CardDefinition } from '../types';
+import type GithubContributionsGraph from './GithubContributionsGraph.svelte';
+import GitHubProfileCard from './GitHubProfileCard.svelte';
+import type { GitHubContributionsData } from './types';
+
+export type GithubProfileLoadedData = Record<string, GitHubContributionsData | undefined>;
+
+export const GithubProfileCardDefitition = {
+	type: 'githubProfile',
+	contentComponent: GitHubProfileCard,
+
+	loadData: async (items) => {
+		const githubData: Record<string, GithubContributionsGraph> = {};
+		for (const item of items) {
+			try {
+				const response = await fetch(
+					`https://blento.app/api/github?user=${encodeURIComponent(item.cardData.user)}`
+				);
+				if (response.ok) {
+					githubData[item.cardData.user] = await response.json();
+				}
+			} catch (error) {
+				console.error('Failed to fetch GitHub contributions:', error);
+			}
+		}
+		return githubData;
+	},
+	onUrlHandler: (url, item) => {
+		const username = getGitHubUsername(url);
+
+		console.log(username);
+		if (!username) return;
+
+		item.cardData.href = url;
+		item.cardData.user = username;
+
+		item.w = 6;
+		item.mobileW = 8;
+		item.h = 3;
+		item.mobileH = 6;
+		return item;
+	},
+	urlHandlerPriority: 5,
+	minH: 2,
+	minW: 2,
+
+	canChange: (item) => Boolean(getGitHubUsername(item.cardData.href)),
+	change: (item) => {
+		item.cardData.user = getGitHubUsername(item.cardData.href);
+
+		return item;
+	},
+	name: 'Github Profile'
+} as CardDefinition & { type: 'githubProfile' };
+
+function getGitHubUsername(url: string | undefined): string | undefined {
+	if (!url) return;
+
+	try {
+		const parsed = new URL(url);
+
+		// Must be github.com (optionally with www.)
+		if (!/^(www\.)?github\.com$/.test(parsed.hostname)) {
+			return undefined;
+		}
+
+		// Remove empty segments
+		const segments = parsed.pathname.split('/').filter(Boolean);
+
+		// Profile URLs have exactly one path segment: /username
+		if (segments.length !== 1) {
+			return undefined;
+		}
+
+		const username = segments[0];
+
+		// GitHub username rules (simplified but accurate)
+		// - Alphanumeric or hyphens
+		// - Cannot start or end with a hyphen
+		// - Max length 39
+		if (!/^[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,37}[a-zA-Z0-9])?$/.test(username)) {
+			return undefined;
+		}
+
+		return username;
+	} catch {
+		// Invalid URL
+		return undefined;
+	}
+}

src/lib/cards/GitHubProfileCard/types.ts

···
+export type GitHubContributionDay = {
+	date: string;
+	contributionCount: number;
+	color: string;
+};
+
+export type GitHubContributionWeek = {
+	contributionDays: GitHubContributionDay[];
+};
+
+export type GitHubContributionsData = {
+	login: string;
+	avatarUrl: string;
+	contributionsCollection: {
+		contributionCalendar: {
+			totalContributions: number;
+			weeks: GitHubContributionWeek[];
+		};
+	};
+	followers: {
+		totalCount: number;
+	};
+
+	updatedAt: number;
+};

src/lib/cards/index.ts

···
 import { VideoCardDefinition } from './VideoCard';
 import { YoutubeCardDefinition } from './YoutubeVideoCard';
 import { BlueskyProfileCardDefinition } from './BlueskyProfileCard';
+import { GithubProfileCardDefitition } from './GitHubProfileCard';
 
 export const AllCardDefinitions = [
 	ImageCardDefinition,
···
 	SectionCardDefinition,
 	BlueskyMediaCardDefinition,
 	DinoGameCardDefinition,
-	BlueskyProfileCardDefinition
+	BlueskyProfileCardDefinition,
+	GithubProfileCardDefitition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(

src/lib/cards/types.ts

···
 
 	// optionally load some extra data
 	loadData?: (
+		// all cards of that type
 		items: Item[],
 		{ did, handle, cache }: { did: string; handle: string; cache?: UserCache }
 	) => Promise<unknown>;

src/routes/api/github/+server.ts

···
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { env } from '$env/dynamic/private';
+import type { GitHubContributionsData } from '$lib/cards/GitHubProfileCard/types';
+
+const GITHUB_GRAPHQL_URL = 'https://api.github.com/graphql';
+
+const CONTRIBUTIONS_QUERY = `
+query($login: String!) {
+	user(login: $login) {
+		login
+		avatarUrl
+		contributionsCollection {
+			contributionCalendar {
+				totalContributions
+				weeks {
+					contributionDays {
+						date
+						contributionCount
+						color
+					}
+				}
+			}
+		}
+		followers {
+			totalCount
+		}
+	}
+}
+`;
+
+export const GET: RequestHandler = async ({ url, platform }) => {
+	const user = url.searchParams.get('user');
+
+	if (!user) {
+		return json({ error: 'No user provided' }, { status: 400 });
+	}
+
+	const cachedData = await platform?.env?.USER_DATA_CACHE?.get('#github:' + user);
+
+	if (cachedData) {
+		const parsedCache = JSON.parse(cachedData);
+
+		const TWELVE_HOURS = 12 * 60 * 60 * 1000;
+		const now = Date.now();
+
+		if (now - (parsedCache.updatedAt || 0) < TWELVE_HOURS) {
+			return json(parsedCache);
+		}
+	}
+
+	const token = env.GITHUB_TOKEN;
+
+	if (!token) {
+		return json({ error: 'GitHub token not configured' }, { status: 500 });
+	}
+
+	try {
+		const response = await fetch(GITHUB_GRAPHQL_URL, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${token}`
+			},
+			body: JSON.stringify({
+				query: CONTRIBUTIONS_QUERY,
+				variables: { login: user }
+			})
+		});
+
+		if (!response.ok) {
+			return json({ error: 'Failed to fetch GitHub data' }, { status: response.status });
+		}
+
+		const data = await response.json();
+
+		if (data.errors) {
+			return json({ error: data.errors[0]?.message || 'GraphQL error' }, { status: 400 });
+		}
+
+		if (!data.data?.user) {
+			return json({ error: 'User not found' }, { status: 404 });
+		}
+
+		const result = data.data.user as GitHubContributionsData;
+		result.updatedAt = Date.now();
+
+		await platform?.env?.USER_DATA_CACHE?.put('#github:' + user, JSON.stringify(result));
+
+		return json(result);
+	} catch (error) {
+		console.error('Error fetching GitHub contributions:', error);
+		return json({ error: 'Failed to fetch GitHub data' }, { status: 500 });
+	}
+};