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
12 let {
13 data,
14 showEditButton = false
15 }: {
16 data: WebsiteData;
17 showEditButton?: boolean;
18 } = $props();
19
20 const renderer = new marked.Renderer();
21 renderer.link = ({ href, title, text }) =>
22 `<a target="_blank" href="${href}" title="${title}">${text}</a>`;
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="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"
28>
29 <div class="flex flex-col gap-4 pt-16 pb-8 @5xl/wrapper:h-screen @5xl/wrapper:pt-24">
30 {#if data.profile.avatar}
31 <img
32 class="border-base-400 dark:border-base-800 size-32 rounded-full border @5xl/wrapper:size-44"
33 src={data.profile.avatar}
34 alt=""
35 />
36 {:else}
37 <div class="bg-base-300 dark:bg-base-700 size-32 rounded-full @5xl/wrapper:size-44"></div>
38 {/if}
39
40 <div class="text-4xl font-bold wrap-anywhere">
41 {getName(data)}
42 </div>
43
44 <div class="scrollbar -mx-4 grow overflow-x-hidden overflow-y-scroll px-4">
45 <div
46 class="text-base-600 dark:text-base-400 prose dark:prose-invert prose-a:text-accent-500 prose-a:no-underline"
47 >
48 {@html marked.parse(getDescription(data), {
49 renderer
50 })}
51 </div>
52 </div>
53
54 {#if showEditButton && user.isLoggedIn && user.profile?.did === data.did}
55 <div>
56 <Button href="{page.url}/edit" class="mt-2">
57 <svg
58 xmlns="http://www.w3.org/2000/svg"
59 fill="none"
60 viewBox="0 0 24 24"
61 stroke-width="1.5"
62 stroke="currentColor"
63 >
64 <path
65 stroke-linecap="round"
66 stroke-linejoin="round"
67 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"
68 />
69 </svg>
70
71 Edit Your Website</Button
72 >
73 </div>
74 {:else}
75 <div class="h-10.5 w-1 @5xl/wrapper:hidden"></div>
76 {/if}
77
78 {#if !env.PUBLIC_IS_SELFHOSTED && data.handle === 'blento.app' && user.profile?.handle !== data.handle}
79 {#if !user.isInitializing && !user.isLoggedIn}
80 <div>
81 <div class="my-4 text-sm">
82 To create your own blento, sign in with your bluesky account
83 </div>
84 <BlueskyLogin
85 login={async (handle) => {
86 await login(handle as ActorIdentifier);
87 return true;
88 }}
89 />
90 </div>
91 {:else if user.isLoggedIn}
92 <div>
93 <Button href="/{env.PUBLIC_IS_SELFHOSTED ? '' : user.profile?.handle}/edit" class="mt-2">
94 <svg
95 xmlns="http://www.w3.org/2000/svg"
96 fill="none"
97 viewBox="0 0 24 24"
98 stroke-width="1.5"
99 stroke="currentColor"
100 >
101 <path
102 stroke-linecap="round"
103 stroke-linejoin="round"
104 d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
105 />
106 </svg>
107
108 Edit Your Blento</Button
109 >
110 </div>
111 {/if}
112 {/if}
113 <div class="hidden text-xs font-light @5xl/wrapper:block">
114 made with <a
115 href="https://blento.app"
116 target="_blank"
117 class="hover:text-accent-600 dark:hover:text-accent-400 font-medium transition-colors duration-200"
118 >blento</a
119 >
120 </div>
121 </div>
122</div>