flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 import { user, login } from '$lib/atproto';
3 import { Button } from '@foxui/core';
4 import { env } from '$env/dynamic/public';
5 import type { WebsiteData } from '$lib/types';
6 import { page } from '$app/state';
7 import type { ActorIdentifier } from '@atcute/lexicons';
8 import { atProtoLoginModalState } from '@foxui/social';
9 import { getHandleOrDid } from '$lib/atproto/methods';
10
11 let { data }: { data: WebsiteData } = $props();
12
13 const isOwnPage = $derived(user.isLoggedIn && user.profile?.did === data.did);
14 const isBlento = $derived(!env.PUBLIC_IS_SELFHOSTED && data.handle === 'blento.app');
15 const isEditPage = $derived(page.url.pathname.endsWith('/edit'));
16 const showLoginOnBlento = $derived(
17 isBlento && !user.isInitializing && !user.isLoggedIn && user.profile?.handle !== data.handle
18 );
19 const showLoginOnEditPage = $derived(isEditPage && !user.isInitializing && !user.isLoggedIn);
20 const showEditBlentoButton = $derived(
21 isBlento && user.isLoggedIn && user.profile?.handle !== data.handle
22 );
23
24 function getUserIdentifier(): ActorIdentifier {
25 const id = user.profile ? getHandleOrDid(user.profile) : (data.did as ActorIdentifier);
26 return id;
27 }
28</script>
29
30{#if isOwnPage && !isEditPage}
31 <div class="fixed bottom-6 left-6 z-49 hidden lg:block">
32 <Button size="lg" href="{page.url.pathname.replace(/\/$/, '')}/edit">
33 <svg
34 xmlns="http://www.w3.org/2000/svg"
35 fill="none"
36 viewBox="0 0 24 24"
37 stroke-width="1.5"
38 stroke="currentColor"
39 class="size-5"
40 >
41 <path
42 stroke-linecap="round"
43 stroke-linejoin="round"
44 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"
45 />
46 </svg>
47 Edit Website
48 </Button>
49 </div>
50{:else if showLoginOnEditPage}
51 <div class="fixed bottom-6 left-6 z-49">
52 <Button size="lg" onclick={() => login(getUserIdentifier())}>
53 <svg
54 xmlns="http://www.w3.org/2000/svg"
55 fill="none"
56 viewBox="0 0 24 24"
57 stroke-width="1.5"
58 stroke="currentColor"
59 class="size-5"
60 >
61 <path
62 stroke-linecap="round"
63 stroke-linejoin="round"
64 d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
65 />
66 </svg>
67 Login
68 </Button>
69 </div>
70{:else if showLoginOnBlento}
71 <div class="fixed bottom-6 left-6 z-49">
72 <Button size="lg" onclick={() => atProtoLoginModalState.show()}>Login</Button>
73 </div>
74{:else if showEditBlentoButton}
75 <div class="fixed bottom-6 left-6 z-49">
76 <Button size="lg" href="{env.PUBLIC_IS_SELFHOSTED ? '' : `/${getUserIdentifier()}`}/edit">
77 <svg
78 xmlns="http://www.w3.org/2000/svg"
79 fill="none"
80 viewBox="0 0 24 24"
81 stroke-width="1.5"
82 stroke="currentColor"
83 class="size-5"
84 >
85 <path
86 stroke-linecap="round"
87 stroke-linejoin="round"
88 d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
89 />
90 </svg>
91 Edit Your Blento
92 </Button>
93 </div>
94{/if}