your personal website on atproto - mirror
blento.app
flo-bit.dev
github card: fix layout shift
+30
-28
src/lib/cards/GitHubProfileCard/GitHubProfileCard.svelte
+30
-28
src/lib/cards/GitHubProfileCard/GitHubProfileCard.svelte
···
6
6
import type { GithubProfileLoadedData } from '.';
7
7
import GithubContributionsGraph from './GithubContributionsGraph.svelte';
8
8
import { Button } from '@foxui/core';
9
+
import { browser } from '$app/environment';
10
+
import { fade } from 'svelte/transition';
9
11
10
12
let { item }: ContentComponentProps = $props();
11
13
···
38
40
</script>
39
41
40
42
<div class="h-full overflow-hidden p-4">
41
-
<div class="flex h-full flex-col justify-between">
42
-
<!-- Header -->
43
-
<div class="flex justify-between">
44
-
<div class="flex items-center gap-3">
45
-
<div class="fill-base-950 size-6 shrink-0 dark:fill-white [&_svg]:size-full">
46
-
{@html siGithub.svg}
47
-
</div>
48
-
<a
49
-
href="https://github.com/{item.cardData.user}"
50
-
target="_blank"
51
-
rel="noopener noreferrer"
52
-
class=" flex truncate text-2xl font-bold transition-colors"
53
-
>
54
-
{item.cardData.user}
55
-
</a>
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}
56
49
</div>
57
-
58
-
{#if isMobile() ? item.mobileW > 4 : item.w > 2}
59
-
<Button
60
-
href="https://github.com/{item.cardData.user}"
61
-
target="_blank"
62
-
rel="noopener noreferrer"
63
-
class="z-50">Follow</Button
64
-
>
65
-
{/if}
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>
66
58
</div>
67
59
68
-
{#if contributionsData}
69
-
<div class="flex">
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">
70
72
<GithubContributionsGraph
71
73
data={contributionsData}
72
74
isBig={isMobile() ? item.mobileH > 5 : item.h > 2}
73
75
/>
74
76
</div>
75
-
{/if}
76
-
</div>
77
+
{/if}
78
+
</div>
77
79
</div>
78
80
79
81
{#if item.cardData.href}