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