your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { onMount } from 'svelte';
3 import { siGithub } from 'simple-icons';
4 import { getAdditionalUserData, getIsMobile } from '$lib/website/context';
5 import type { ContentComponentProps } from '../types';
6 import type { GithubProfileLoadedData } from '.';
7 import GithubContributionsGraph from './GithubContributionsGraph.svelte';
8 import { Button } from '@foxui/core';
9 import { browser } from '$app/environment';
10
11 let { item }: ContentComponentProps = $props();
12
13 const data = getAdditionalUserData();
14
15 // svelte-ignore state_referenced_locally
16 let contributionsData = $state(
17 (data[item.cardType] as GithubProfileLoadedData)?.[item.cardData.user]
18 );
19
20 onMount(async () => {
21 console.log(contributionsData);
22 if (!contributionsData && item.cardData?.user) {
23 try {
24 const response = await fetch(`/api/github?user=${encodeURIComponent(item.cardData.user)}`);
25 if (response.ok) {
26 contributionsData = await response.json();
27 data[item.cardType] ??= {};
28 (data[item.cardType] as GithubProfileLoadedData)[item.cardData.user] = contributionsData;
29 }
30 } catch (error) {
31 console.error('Failed to fetch GitHub contributions:', error);
32 }
33 }
34 });
35
36 let isMobile = getIsMobile();
37</script>
38
39<div class="h-full overflow-hidden p-4">
40 <div class="flex h-full flex-col justify-between">
41 <!-- Header -->
42 <div class="flex justify-between">
43 <div class="flex items-center gap-3">
44 <div class="fill-base-950 size-6 shrink-0 dark:fill-white [&_svg]:size-full">
45 {@html siGithub.svg}
46 </div>
47 <a
48 href="https://github.com/{item.cardData.user}"
49 target="_blank"
50 rel="noopener noreferrer"
51 class=" flex truncate text-2xl font-bold transition-colors"
52 >
53 {item.cardData.user}
54 </a>
55 </div>
56
57 {#if isMobile() ? item.mobileW > 4 : item.w > 2}
58 <Button
59 href="https://github.com/{item.cardData.user}"
60 target="_blank"
61 rel="noopener noreferrer"
62 class="z-50">Follow</Button
63 >
64 {/if}
65 </div>
66
67 {#if contributionsData && browser}
68 <div class="flex opacity-100 transition-opacity duration-300 starting:opacity-0">
69 <GithubContributionsGraph
70 data={contributionsData}
71 isBig={isMobile() ? item.mobileH > 5 : item.h > 2}
72 />
73 </div>
74 {/if}
75 </div>
76</div>
77
78{#if item.cardData.href}
79 <a
80 href={item.cardData.href}
81 class="absolute inset-0 h-full w-full"
82 target="_blank"
83 rel="noopener noreferrer"
84 >
85 <span class="sr-only"> Show on github </span>
86 </a>
87{/if}