your personal website on atproto - mirror
blento.app
Merge pull request #47 from flo-bit/floating-button
button
+90
-67
+71
src/lib/website/FloatingEditButton.svelte
+71
src/lib/website/FloatingEditButton.svelte
···
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}
+4
-66
src/lib/website/Profile.svelte
+4
-66
src/lib/website/Profile.svelte
···
1
1
<script lang="ts">
2
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
3
import type { WebsiteData } from '$lib/types';
8
4
import { getDescription, getImage, getName, getProfilePosition } from '$lib/helper';
9
5
import { page } from '$app/state';
10
-
import type { ActorIdentifier } from '@atcute/lexicons';
11
6
import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
12
7
import MadeWithBlento from './MadeWithBlento.svelte';
13
8
14
9
let {
15
10
data,
16
-
showEditButton = false
11
+
hideBlento = false
17
12
}: {
18
13
data: WebsiteData;
19
-
showEditButton?: boolean;
14
+
hideBlento?: boolean;
20
15
} = $props();
21
16
22
17
const renderer = new marked.Renderer();
···
84
79
</div>
85
80
</div>
86
81
87
-
{#if showEditButton && user.isLoggedIn && user.profile?.did === data.did}
88
-
<div>
89
-
<Button href="{page.url}/edit" class="mt-2">
90
-
<svg
91
-
xmlns="http://www.w3.org/2000/svg"
92
-
fill="none"
93
-
viewBox="0 0 24 24"
94
-
stroke-width="1.5"
95
-
stroke="currentColor"
96
-
>
97
-
<path
98
-
stroke-linecap="round"
99
-
stroke-linejoin="round"
100
-
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"
101
-
/>
102
-
</svg>
103
-
104
-
Edit Your Website</Button
105
-
>
106
-
</div>
107
-
{:else}
108
-
<div class={['h-10.5 w-1', profilePosition === 'side' && '@5xl/wrapper:hidden']}></div>
109
-
{/if}
110
-
111
-
{#if !env.PUBLIC_IS_SELFHOSTED && data.handle === 'blento.app' && user.profile?.handle !== data.handle}
112
-
{#if !user.isInitializing && !user.isLoggedIn}
113
-
<div>
114
-
<div class="my-4 text-sm">
115
-
To create your own blento, sign in with your bluesky account
116
-
</div>
117
-
<BlueskyLogin
118
-
login={async (handle) => {
119
-
await login(handle as ActorIdentifier);
120
-
return true;
121
-
}}
122
-
/>
123
-
</div>
124
-
{:else if user.isLoggedIn}
125
-
<div>
126
-
<Button href="/{env.PUBLIC_IS_SELFHOSTED ? '' : user.profile?.handle}/edit" class="mt-2">
127
-
<svg
128
-
xmlns="http://www.w3.org/2000/svg"
129
-
fill="none"
130
-
viewBox="0 0 24 24"
131
-
stroke-width="1.5"
132
-
stroke="currentColor"
133
-
>
134
-
<path
135
-
stroke-linecap="round"
136
-
stroke-linejoin="round"
137
-
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
138
-
/>
139
-
</svg>
140
-
141
-
Edit Your Blento</Button
142
-
>
143
-
</div>
144
-
{/if}
82
+
{#if !hideBlento}
83
+
<MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />
145
84
{/if}
146
-
<MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />
147
85
</div>
148
86
</div>
+15
-1
src/lib/website/Website.svelte
+15
-1
src/lib/website/Website.svelte
···
18
18
import type { Did, Handle } from '@atcute/lexicons';
19
19
import QRModalProvider from '$lib/components/qr/QRModalProvider.svelte';
20
20
import EmptyState from './EmptyState.svelte';
21
+
import FloatingEditButton from './FloatingEditButton.svelte';
22
+
import { user } from '$lib/atproto';
23
+
import { env } from '$env/dynamic/public';
21
24
22
25
let { data }: { data: WebsiteData } = $props();
23
26
27
+
// Check if floating edit button will be visible (to hide MadeWithBlento)
28
+
const isOwnPage = $derived(user.isLoggedIn && user.profile?.did === data.did);
29
+
const isBlento = $derived(!env.PUBLIC_IS_SELFHOSTED && data.handle === 'blento.app');
30
+
const showFloatingButton = $derived(
31
+
isOwnPage ||
32
+
(isBlento && !user.isInitializing && !user.isLoggedIn) ||
33
+
(isBlento && user.isLoggedIn && user.profile?.handle !== data.handle)
34
+
);
35
+
24
36
let isMobile = $derived((innerWidth.current ?? 1000) < 1024);
25
37
setIsMobile(() => isMobile);
26
38
···
50
62
<QRModalProvider />
51
63
<div class="@container/wrapper relative w-full">
52
64
{#if !getHideProfileSection(data)}
53
-
<Profile {data} showEditButton={true} />
65
+
<Profile {data} hideBlento={showFloatingButton} />
54
66
{/if}
55
67
56
68
<div
···
78
90
79
91
<MadeWithBlento class="mx-auto block pb-8 text-center @5xl/wrapper:hidden" />
80
92
</div>
93
+
94
+
<FloatingEditButton {data} />
81
95
</Context>