your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import BaseCard from '$lib/cards/BaseCard/BaseCard.svelte';
3 import Card from '$lib/cards/Card/Card.svelte';
4 import type { Item, WebsiteData } from '$lib/types';
5
6 let { data }: { data: WebsiteData } = $props();
7
8 let cards = $derived.by((): Item[] => {
9 const items: Item[] = [];
10
11 // Name + "No blento yet" card
12 items.push({
13 id: 'empty-main',
14 x: 0,
15 y: 0,
16 w: 6,
17 h: 2,
18 mobileX: 0,
19 mobileY: 0,
20 mobileW: 8,
21 mobileH: 3,
22 cardType: 'text',
23 color: 'cyan',
24 cardData: {
25 text: `## No blento yet!`,
26 textAlign: 'center',
27 verticalAlign: 'center'
28 }
29 });
30
31 // Bluesky social icon
32 items.push({
33 id: 'empty-bluesky',
34 x: 6,
35 y: 0,
36 w: 2,
37 h: 2,
38 mobileX: 0,
39 mobileY: 3,
40 mobileW: 3,
41 mobileH: 3,
42 cardType: 'bigsocial',
43 cardData: {
44 platform: 'bluesky',
45 href: `https://bsky.app/profile/${data.handle}`,
46 color: '0285FF'
47 }
48 });
49
50 return items;
51 });
52
53 let maxHeight = $derived(cards.reduce((max, item) => Math.max(max, item.y + item.h), 0));
54
55 let maxMobileHeight = $derived(
56 cards.reduce((max, item) => Math.max(max, item.mobileY + item.mobileH), 0)
57 );
58</script>
59
60{#each cards as item (item.id)}
61 <BaseCard {item}>
62 <Card {item} />
63 </BaseCard>
64{/each}
65
66<!-- Spacer for grid height -->
67<div class="hidden @[42rem]/grid:block" style="height: {(maxHeight / 8) * 100}cqw;"></div>
68<div class="@[42rem]/grid:hidden" style="height: {(maxMobileHeight / 4) * 100}cqw;"></div>