Something went wrong. Try again.
your personal website on atproto - mirror blento.app
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107<script lang="ts"> import BaseCard from '$lib/cards/_base/BaseCard/BaseCard.svelte'; import Card from '$lib/cards/_base/Card/Card.svelte'; import type { Item, WebsiteData } from '$lib/types'; import { text } from '@sveltejs/kit';
let { data }: { data: WebsiteData } = $props();
let cards = $derived.by((): Item[] => { const items: Item[] = [];
// Name + "No blento yet" card items.push({ id: 'empty-main', x: 0, y: 0, w: 6, h: 2, mobileX: 0, mobileY: 0, mobileW: 8, mobileH: 3, cardType: 'text', color: 'cyan', cardData: { text: `## No blento yet!`, textAlign: 'center', verticalAlign: 'center' } });
// Bluesky social icon items.push({ id: 'empty-bluesky', x: 6, y: 0, w: 2, h: 2, mobileX: 0, mobileY: 3, mobileW: 3, mobileH: 3, cardType: 'bigsocial', cardData: { platform: 'bluesky', href: `https://bsky.app/profile/${data.handle}`, color: '0285FF' } });
items.push({ id: 'empty-instruction', x: 0, y: 3, w: 8, h: 1, mobileX: 0, mobileY: 6, mobileW: 8, mobileH: 2, cardType: 'text', color: 'transparent', cardData: { text: `Is this your account? Login to start creating your blento!`, textAlign: 'center', verticalAlign: 'bottom' } });
items.push({ id: 'empty-login-button', x: 0, y: 4, w: 8, h: 1, mobileX: 0, mobileY: 8, mobileW: 8, mobileH: 2, cardType: 'button', color: 'transparent', cardData: { href: '#login', text: `Login` } });
return items; });
let maxHeight = $derived(cards.reduce((max, item) => Math.max(max, item.y + item.h), 0));
let maxMobileHeight = $derived( cards.reduce((max, item) => Math.max(max, item.mobileY + item.mobileH), 0) );</script>
{#each cards as item (item.id)} <BaseCard {item}> <Card {item} /> </BaseCard>{/each}
<!-- Spacer for grid height --><div class="hidden @[42rem]/grid:block" style="height: {(maxHeight / 8) * 100}cqw;"></div><div class="@[42rem]/grid:hidden" style="height: {(maxMobileHeight / 4) * 100}cqw;"></div>