Something went wrong. Try again.
your personal website on atproto - mirror blento.app
Something went wrong. Try again.
Svelte
at update-docs
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103<script lang="ts"> import Card from '../cards/_base/Card/Card.svelte'; import Profile from './Profile.svelte'; import { getDescription, getHideProfileSection, getProfilePosition, getName, sortItems, getImage } from '../helper'; import { innerWidth } from 'svelte/reactivity/window'; import { setDidContext, setHandleContext, setIsMobile } from './context'; import BaseCard from '../cards/_base/BaseCard/BaseCard.svelte'; import type { WebsiteData } from '$lib/types'; import Context from './Context.svelte'; import MadeWithBlento from './MadeWithBlento.svelte'; import Head from './Head.svelte'; import type { Did, Handle } from '@atcute/lexicons'; import QRModalProvider from '$lib/components/qr/QRModalProvider.svelte'; import EmptyState from './EmptyState.svelte'; import FloatingEditButton from './FloatingEditButton.svelte'; import { user } from '$lib/atproto'; import { env } from '$env/dynamic/public'; import { page } from '$app/state';
let { data }: { data: WebsiteData } = $props();
// Check if floating edit button will be visible (to hide MadeWithBlento) const isOwnPage = $derived(user.isLoggedIn && user.profile?.did === data.did); const isBlento = $derived(!env.PUBLIC_IS_SELFHOSTED && data.handle === 'blento.app'); const isEditPage = $derived(page.url.pathname.endsWith('/edit')); const showLoginOnEditPage = $derived(isEditPage && !user.isInitializing && !user.isLoggedIn); const showFloatingButton = $derived( (isOwnPage && !isEditPage) || showLoginOnEditPage || (isBlento && !user.isInitializing && !user.isLoggedIn) || (isBlento && user.isLoggedIn && user.profile?.handle !== data.handle) );
let isMobile = $derived((innerWidth.current ?? 1000) < 1024); setIsMobile(() => isMobile);
// svelte-ignore state_referenced_locally setDidContext(data.did as Did); // svelte-ignore state_referenced_locally setHandleContext(data.handle as Handle);
let maxHeight = $derived( data.cards.reduce( (max, item) => Math.max(max, isMobile ? item.mobileY + item.mobileH : item.y + item.h), 0 ) );
let container: HTMLDivElement | undefined = $state();</script>
<Head favicon={getImage(data.publication, data.did, 'icon') || data.profile.avatar} title={getName(data)} image={'/' + data.handle + '/og.png'} description={getDescription(data)} accentColor={data.publication?.preferences?.accentColor} baseColor={data.publication?.preferences?.baseColor}/>
<Context {data}> <QRModalProvider /> <div class="@container/wrapper relative w-full"> {#if !getHideProfileSection(data)} <Profile {data} hideBlento={showFloatingButton} /> {/if}
<div class={[ 'mx-auto max-w-lg', !getHideProfileSection(data) && getProfilePosition(data) === 'side' ? '@5xl/wrapper:grid @5xl/wrapper:max-w-7xl @5xl/wrapper:grid-cols-4' : '@5xl/wrapper:max-w-4xl' ]} > <div></div> <div bind:this={container} class="@container/grid relative col-span-3 px-2 py-8 lg:px-8"> {#if data.cards.length === 0 && data.page === 'blento.self'} <EmptyState {data} /> {:else} {#each data.cards.toSorted(sortItems) as item (item.id)} <BaseCard {item}> <Card {item} /> </BaseCard> {/each} <div style="height: {(maxHeight / 8) * 100}cqw;"></div> {/if} </div> </div>
<MadeWithBlento class="mx-auto block pb-8 text-center @5xl/wrapper:hidden" /> </div>
<FloatingEditButton {data} /></Context>