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