your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { marked } from 'marked';
3 import { user, login } from '$lib/atproto';
4 import { Button } from '@foxui/core';
5 import { BlueskyLogin } from '@foxui/social';
6 import { env } from '$env/dynamic/public';
7 import type { WebsiteData } from '$lib/types';
8 import { getDescription, getName } from '$lib/helper';
9 import { page } from '$app/state';
10 import type { ActorIdentifier } from '@atcute/lexicons';
11 import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
12
13 let {
14 data,
15 showEditButton = false
16 }: {
17 data: WebsiteData;
18 showEditButton?: boolean;
19 } = $props();
20
21 const renderer = new marked.Renderer();
22 renderer.link = ({ href, title, text }) =>
23 `<a target="_blank" href="${href}" title="${title}">${text}</a>`;
24
25 const profileUrl = $derived(`${page.url.origin}/${data.handle}`);
26</script>
27
28<!-- lg:fixed lg:h-screen lg:w-1/4 lg:max-w-none lg:px-12 lg:pt-24 xl:w-1/3 -->
29<div
30 class="mx-auto flex max-w-lg flex-col justify-between px-8 @5xl/wrapper:fixed @5xl/wrapper:h-screen @5xl/wrapper:w-1/4 @5xl/wrapper:max-w-none @5xl/wrapper:px-12"
31>
32 <div class="flex flex-col gap-4 pt-16 pb-8 @5xl/wrapper:h-screen @5xl/wrapper:pt-24">
33 <a
34 href={profileUrl}
35 class="w-fit"
36 use:qrOverlay={{
37 context: {
38 title: getName(data) + "'s blento"
39 }
40 }}
41 >
42 {#if data.profile.avatar}
43 <img
44 class="border-base-400 dark:border-base-800 size-32 rounded-full border @5xl/wrapper:size-44"
45 src={data.profile.avatar}
46 alt=""
47 />
48 {:else}
49 <div class="bg-base-300 dark:bg-base-700 size-32 rounded-full @5xl/wrapper:size-44"></div>
50 {/if}
51 </a>
52
53 <div class="text-4xl font-bold wrap-anywhere">
54 {getName(data)}
55 </div>
56
57 <div class="scrollbar -mx-4 grow overflow-x-hidden overflow-y-scroll px-4">
58 <div
59 class="text-base-600 dark:text-base-400 prose dark:prose-invert prose-a:text-accent-500 prose-a:no-underline"
60 >
61 {@html marked.parse(getDescription(data), {
62 renderer
63 })}
64 </div>
65 </div>
66
67 {#if showEditButton && user.isLoggedIn && user.profile?.did === data.did}
68 <div>
69 <Button href="{page.url}/edit" class="mt-2">
70 <svg
71 xmlns="http://www.w3.org/2000/svg"
72 fill="none"
73 viewBox="0 0 24 24"
74 stroke-width="1.5"
75 stroke="currentColor"
76 >
77 <path
78 stroke-linecap="round"
79 stroke-linejoin="round"
80 d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
81 />
82 </svg>
83
84 Edit Your Website</Button
85 >
86 </div>
87 {:else}
88 <div class="h-10.5 w-1 @5xl/wrapper:hidden"></div>
89 {/if}
90
91 {#if !env.PUBLIC_IS_SELFHOSTED && data.handle === 'blento.app' && user.profile?.handle !== data.handle}
92 {#if !user.isInitializing && !user.isLoggedIn}
93 <div>
94 <div class="my-4 text-sm">
95 To create your own blento, sign in with your bluesky account
96 </div>
97 <BlueskyLogin
98 login={async (handle) => {
99 await login(handle as ActorIdentifier);
100 return true;
101 }}
102 />
103 </div>
104 {:else if user.isLoggedIn}
105 <div>
106 <Button href="/{env.PUBLIC_IS_SELFHOSTED ? '' : user.profile?.handle}/edit" class="mt-2">
107 <svg
108 xmlns="http://www.w3.org/2000/svg"
109 fill="none"
110 viewBox="0 0 24 24"
111 stroke-width="1.5"
112 stroke="currentColor"
113 >
114 <path
115 stroke-linecap="round"
116 stroke-linejoin="round"
117 d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
118 />
119 </svg>
120
121 Edit Your Blento</Button
122 >
123 </div>
124 {/if}
125 {/if}
126 <div class="hidden text-xs font-light @5xl/wrapper:block">
127 made with <a
128 href="https://blento.app"
129 target="_blank"
130 class="hover:text-accent-600 dark:hover:text-accent-400 font-medium transition-colors duration-200"
131 >blento</a
132 >
133 </div>
134 </div>
135</div>