your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import BaseCard from '$lib/cards/_base/BaseCard/BaseCard.svelte';
3 import Card from '$lib/cards/_base/Card/Card.svelte';
4 import type { Item, WebsiteData } from '$lib/types';
5 import { text } from '@sveltejs/kit';
6
7 let { data }: { data: WebsiteData } = $props();
8
9 let cards = $derived.by((): Item[] => {
10 const items: Item[] = [];
11
12 // Name + "No blento yet" card
13 items.push({
14 id: 'empty-main',
15 x: 0,
16 y: 0,
17 w: 6,
18 h: 2,
19 mobileX: 0,
20 mobileY: 0,
21 mobileW: 8,
22 mobileH: 3,
23 cardType: 'text',
24 color: 'cyan',
25 cardData: {
26 text: `## No blento yet!`,
27 textAlign: 'center',
28 verticalAlign: 'center'
29 }
30 });
31
32 // Bluesky social icon
33 items.push({
34 id: 'empty-bluesky',
35 x: 6,
36 y: 0,
37 w: 2,
38 h: 2,
39 mobileX: 0,
40 mobileY: 3,
41 mobileW: 3,
42 mobileH: 3,
43 cardType: 'bigsocial',
44 cardData: {
45 platform: 'bluesky',
46 href: `https://bsky.app/profile/${data.handle}`,
47 color: '0285FF'
48 }
49 });
50
51 items.push({
52 id: 'empty-instruction',
53 x: 0,
54 y: 3,
55 w: 8,
56 h: 1,
57 mobileX: 0,
58 mobileY: 6,
59 mobileW: 8,
60 mobileH: 2,
61 cardType: 'text',
62 color: 'transparent',
63 cardData: {
64 text: `Is this your account? Login to start creating your blento!`,
65 textAlign: 'center',
66 verticalAlign: 'bottom'
67 }
68 });
69
70 items.push({
71 id: 'empty-login-button',
72 x: 0,
73 y: 4,
74 w: 8,
75 h: 1,
76 mobileX: 0,
77 mobileY: 8,
78 mobileW: 8,
79 mobileH: 2,
80 cardType: 'button',
81 color: 'transparent',
82 cardData: {
83 href: '#login',
84 text: `Login`
85 }
86 });
87
88 return items;
89 });
90
91 let maxHeight = $derived(cards.reduce((max, item) => Math.max(max, item.y + item.h), 0));
92
93 let maxMobileHeight = $derived(
94 cards.reduce((max, item) => Math.max(max, item.mobileY + item.mobileH), 0)
95 );
96</script>
97
98{#each cards as item (item.id)}
99 <BaseCard {item}>
100 <Card {item} />
101 </BaseCard>
102{/each}
103
104<!-- Spacer for grid height -->
105<div class="hidden @[42rem]/grid:block" style="height: {(maxHeight / 8) * 100}cqw;"></div>
106<div class="@[42rem]/grid:hidden" style="height: {(maxMobileHeight / 4) * 100}cqw;"></div>