your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { user, login } from '$lib/atproto';
3 import { Button } from '@foxui/core';
4 import { BlueskyLogin } from '@foxui/social';
5 import { env } from '$env/dynamic/public';
6 import type { WebsiteData } from '$lib/types';
7 import { page } from '$app/state';
8 import type { ActorIdentifier } from '@atcute/lexicons';
9
10 let { data }: { data: WebsiteData } = $props();
11
12 const isOwnPage = $derived(user.isLoggedIn && user.profile?.did === data.did);
13 const isBlento = $derived(!env.PUBLIC_IS_SELFHOSTED && data.handle === 'blento.app');
14 const showLoginOnBlento = $derived(
15 isBlento && !user.isInitializing && !user.isLoggedIn && user.profile?.handle !== data.handle
16 );
17 const showEditBlentoButton = $derived(
18 isBlento && user.isLoggedIn && user.profile?.handle !== data.handle
19 );
20</script>
21
22{#if isOwnPage}
23 <div class="fixed bottom-6 left-6 z-49 hidden lg:block">
24 <Button size="lg" href="{page.url}/edit">
25 <svg
26 xmlns="http://www.w3.org/2000/svg"
27 fill="none"
28 viewBox="0 0 24 24"
29 stroke-width="1.5"
30 stroke="currentColor"
31 class="size-5"
32 >
33 <path
34 stroke-linecap="round"
35 stroke-linejoin="round"
36 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"
37 />
38 </svg>
39 Edit Website
40 </Button>
41 </div>
42{:else if showLoginOnBlento}
43 <div class="fixed bottom-6 left-6 z-49">
44 <BlueskyLogin
45 login={async (handle) => {
46 await login(handle as ActorIdentifier);
47 return true;
48 }}
49 />
50 </div>
51{:else if showEditBlentoButton}
52 <div class="fixed bottom-6 left-6 z-49">
53 <Button size="lg" href="/{env.PUBLIC_IS_SELFHOSTED ? '' : user.profile?.handle}/edit">
54 <svg
55 xmlns="http://www.w3.org/2000/svg"
56 fill="none"
57 viewBox="0 0 24 24"
58 stroke-width="1.5"
59 stroke="currentColor"
60 class="size-5"
61 >
62 <path
63 stroke-linecap="round"
64 stroke-linejoin="round"
65 d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
66 />
67 </svg>
68 Edit Your Blento
69 </Button>
70 </div>
71{/if}