your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import Card from '../cards/Card/Card.svelte';
3 import Profile from './Profile.svelte';
4 import { getDescription, getHideProfileSection, getName, sortItems } from '../helper';
5 import { innerWidth } from 'svelte/reactivity/window';
6 import { setDidContext, setHandleContext, setIsMobile } from './context';
7 import BaseCard from '../cards/BaseCard/BaseCard.svelte';
8 import type { WebsiteData } from '$lib/types';
9 import Context from './Context.svelte';
10 import Head from './Head.svelte';
11 import type { Did, Handle } from '@atcute/lexicons';
12 import QRModalProvider from '$lib/components/qr/QRModalProvider.svelte';
13
14 let { data }: { data: WebsiteData } = $props();
15
16 let isMobile = $derived((innerWidth.current ?? 1000) < 1024);
17 setIsMobile(() => isMobile);
18
19 // svelte-ignore state_referenced_locally
20 setDidContext(data.did as Did);
21 // svelte-ignore state_referenced_locally
22 setHandleContext(data.handle as Handle);
23
24 let maxHeight = $derived(
25 data.cards.reduce(
26 (max, item) => Math.max(max, isMobile ? item.mobileY + item.mobileH : item.y + item.h),
27 0
28 )
29 );
30
31 let container: HTMLDivElement | undefined = $state();
32</script>
33
34<Head
35 favicon={data.profile.avatar ?? null}
36 title={getName(data)}
37 image={'/' + data.handle + '/og.png'}
38 description={getDescription(data)}
39/>
40
41<Context {data}>
42 <QRModalProvider />
43 <div class="@container/wrapper relative w-full">
44 {#if !getHideProfileSection(data)}
45 <Profile {data} showEditButton={true} />
46 {/if}
47
48 <div
49 class={[
50 'mx-auto max-w-lg',
51 !getHideProfileSection(data)
52 ? '@5xl/wrapper:grid @5xl/wrapper:max-w-7xl @5xl/wrapper:grid-cols-4'
53 : '@5xl/wrapper:max-w-4xl'
54 ]}
55 >
56 <div></div>
57 <div bind:this={container} class="@container/grid relative col-span-3 px-2 py-8 lg:px-8">
58 {#each data.cards.toSorted(sortItems) as item (item.id)}
59 <BaseCard {item}>
60 <Card {item} />
61 </BaseCard>
62 {/each}
63 <div style="height: {(maxHeight / 8) * 100}cqw;"></div>
64 </div>
65 </div>
66
67 <div class="mx-auto block pb-8 text-center text-xs font-light @5xl/wrapper:hidden">
68 made with <a
69 href="https://blento.app"
70 target="_blank"
71 class="hover:text-accent-600 dark:hover:text-accent-400 font-medium transition-colors duration-200"
72 >blento</a
73 >
74 </div>
75 </div>
76</Context>