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