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 isEditPage = $derived(page.url.pathname.endsWith('/edit'));
15 const showLoginOnBlento = $derived(
16 isBlento && !user.isInitializing && !user.isLoggedIn && user.profile?.handle !== data.handle
17 );
18 const showLoginOnEditPage = $derived(isEditPage && !user.isInitializing && !user.isLoggedIn);
19 const showEditBlentoButton = $derived(
20 isBlento && user.isLoggedIn && user.profile?.handle !== data.handle
21 );
22</script>
23
24{#if isOwnPage && !isEditPage}
25 <div class="fixed bottom-6 left-6 z-49 hidden lg:block">
26 <Button size="lg" href="{page.url}/edit">
27 <svg
28 xmlns="http://www.w3.org/2000/svg"
29 fill="none"
30 viewBox="0 0 24 24"
31 stroke-width="1.5"
32 stroke="currentColor"
33 class="size-5"
34 >
35 <path
36 stroke-linecap="round"
37 stroke-linejoin="round"
38 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"
39 />
40 </svg>
41 Edit Website
42 </Button>
43 </div>
44{:else if showLoginOnEditPage}
45 <div class="fixed bottom-6 left-6 z-49">
46 <Button size="lg" onclick={() => login(data.handle as ActorIdentifier)}>
47 <svg
48 xmlns="http://www.w3.org/2000/svg"
49 fill="none"
50 viewBox="0 0 24 24"
51 stroke-width="1.5"
52 stroke="currentColor"
53 class="size-5"
54 >
55 <path
56 stroke-linecap="round"
57 stroke-linejoin="round"
58 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"
59 />
60 </svg>
61 Login
62 </Button>
63 </div>
64{:else if showLoginOnBlento}
65 <div class="fixed bottom-6 left-6 z-49">
66 <BlueskyLogin
67 login={async (handle) => {
68 await login(handle as ActorIdentifier);
69 return true;
70 }}
71 />
72 </div>
73{:else if showEditBlentoButton}
74 <div class="fixed bottom-6 left-6 z-49">
75 <Button size="lg" href="/{env.PUBLIC_IS_SELFHOSTED ? '' : user.profile?.handle}/edit">
76 <svg
77 xmlns="http://www.w3.org/2000/svg"
78 fill="none"
79 viewBox="0 0 24 24"
80 stroke-width="1.5"
81 stroke="currentColor"
82 class="size-5"
83 >
84 <path
85 stroke-linecap="round"
86 stroke-linejoin="round"
87 d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
88 />
89 </svg>
90 Edit Your Blento
91 </Button>
92 </div>
93{/if}