your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { marked } from 'marked';
3 import type { WebsiteData } from '$lib/types';
4 import { getDescription, getImage, getName, getProfilePosition } from '$lib/helper';
5 import { page } from '$app/state';
6 import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
7 import MadeWithBlento from './MadeWithBlento.svelte';
8 import { Avatar } from '@foxui/core';
9
10 let {
11 data,
12 hideBlento = false
13 }: {
14 data: WebsiteData;
15 hideBlento?: boolean;
16 } = $props();
17
18 const renderer = new marked.Renderer();
19 renderer.link = ({ href, title, text }) =>
20 `<a target="_blank" href="${href}" title="${title}">${text}</a>`;
21
22 const profileUrl = $derived(`${page.url.origin}/${data.handle}`);
23 const profilePosition = $derived(getProfilePosition(data));
24</script>
25
26<!-- lg:fixed lg:h-screen lg:w-1/4 lg:max-w-none lg:px-12 lg:pt-24 xl:w-1/3 -->
27<div
28 class={[
29 'mx-auto flex max-w-lg flex-col justify-between px-8',
30 profilePosition === 'side'
31 ? '@5xl/wrapper:fixed @5xl/wrapper:h-screen @5xl/wrapper:w-1/4 @5xl/wrapper:max-w-none @5xl/wrapper:px-12'
32 : '@5xl/wrapper:max-w-4xl @5xl/wrapper:px-12'
33 ]}
34>
35 <div
36 class={[
37 'flex flex-col gap-4 pt-16 pb-8',
38 profilePosition === 'side' && '@5xl/wrapper:h-screen @5xl/wrapper:pt-24'
39 ]}
40 >
41 <a
42 href={profileUrl}
43 class="w-fit"
44 use:qrOverlay={{
45 context: {
46 title: getName(data) + "'s blento"
47 }
48 }}
49 >
50 <Avatar
51 src={getImage(data.publication, data.did, 'icon') || data.profile.avatar}
52 class={[
53 'border-base-400 dark:border-base-800 size-32 shrink-0 rounded-full border object-cover',
54 profilePosition === 'side' && '@5xl/wrapper:size-44'
55 ]}
56 />
57 </a>
58
59 <div class="text-4xl font-bold wrap-anywhere">
60 {getName(data)}
61 </div>
62
63 <div class="scrollbar -mx-4 grow overflow-x-hidden overflow-y-scroll px-4">
64 <div
65 class="text-base-600 dark:text-base-400 prose dark:prose-invert prose-a:text-accent-500 prose-a:no-underline"
66 >
67 {@html marked.parse(getDescription(data), {
68 renderer
69 })}
70 </div>
71 </div>
72
73 {#if !hideBlento}
74 <MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />
75 {/if}
76 </div>
77</div>