tangled
alpha
login
or
join now
flo-bit.dev
/
blento
your personal website on atproto - mirror
blento.app
16
fork
atom
overview
issues
pulls
pipelines
fixes
Florian
1 week ago
150a7fc6
4ff93c7a
+42
-31
6 changed files
expand all
collapse all
unified
split
src
lib
website
Account.svelte
EditableProfile.svelte
EditableWebsite.svelte
EmptyState.svelte
FloatingEditButton.svelte
Website.svelte
-12
src/lib/website/Account.svelte
···
25
25
<Button variant="ghost" onclick={logout}>Logout</Button>
26
26
</Popover>
27
27
</div>
28
28
-
{:else if !user.isInitializing}
29
29
-
<div
30
30
-
class="dark:bg-base-950 border-base-200 dark:border-base-900 fixed top-4 right-4 z-20 flex flex-col gap-4 rounded-2xl border bg-white p-4 shadow-lg"
31
31
-
>
32
32
-
<span class="text-sm font-semibold">Login to edit your page</span>
33
33
-
34
34
-
<Button
35
35
-
onclick={async () => {
36
36
-
await login(data.handle as ActorIdentifier);
37
37
-
}}>Login</Button
38
38
-
>
39
39
-
</div>
40
28
{/if}
+7
-2
src/lib/website/EditableProfile.svelte
···
8
8
import type { Editor } from '@tiptap/core';
9
9
import MadeWithBlento from './MadeWithBlento.svelte';
10
10
11
11
-
let { data = $bindable() }: { data: WebsiteData } = $props();
11
11
+
let {
12
12
+
data = $bindable(),
13
13
+
hideBlento = false
14
14
+
}: { data: WebsiteData; hideBlento?: boolean } = $props();
12
15
13
16
let profilePosition = $derived(getProfilePosition(data));
14
17
···
219
222
220
223
<div class={['h-10.5 w-1', profilePosition === 'side' && '@5xl/wrapper:hidden']}></div>
221
224
222
222
-
<MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />
225
225
+
{#if !hideBlento}
226
226
+
<MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />
227
227
+
{/if}
223
228
</div>
224
229
</div>
+7
-1
src/lib/website/EditableWebsite.svelte
···
33
33
import Account from './Account.svelte';
34
34
import EditBar from './EditBar.svelte';
35
35
import SaveModal from './SaveModal.svelte';
36
36
+
import FloatingEditButton from './FloatingEditButton.svelte';
36
37
import { user } from '$lib/atproto';
37
38
import { launchConfetti } from '@foxui/visual';
38
39
···
41
42
}: {
42
43
data: WebsiteData;
43
44
} = $props();
45
45
+
46
46
+
// Check if floating login button will be visible (to hide MadeWithBlento)
47
47
+
const showLoginOnEditPage = $derived(!user.isInitializing && !user.isLoggedIn);
44
48
45
49
let imageDragOver = $state(false);
46
50
···
615
619
]}
616
620
>
617
621
{#if !getHideProfileSection(data)}
618
618
-
<EditableProfile bind:data />
622
622
+
<EditableProfile bind:data hideBlento={showLoginOnEditPage} />
619
623
{/if}
620
624
621
625
<div
···
840
844
/>
841
845
842
846
<Toaster />
847
847
+
848
848
+
<FloatingEditButton {data} />
843
849
</Context>
-14
src/lib/website/EmptyState.svelte
···
69
69
<!-- Spacer for grid height -->
70
70
<div class="hidden @[42rem]/grid:block" style="height: {(maxHeight / 8) * 100}cqw;"></div>
71
71
<div class="@[42rem]/grid:hidden" style="height: {(maxMobileHeight / 4) * 100}cqw;"></div>
72
72
-
73
73
-
{#if !user.isLoggedIn}
74
74
-
<div
75
75
-
class="dark:bg-base-950 border-base-200 dark:border-base-900 fixed top-4 right-4 z-20 flex flex-col gap-4 rounded-2xl border bg-white p-4 shadow-lg"
76
76
-
>
77
77
-
<span class="text-sm font-semibold">Login to edit your page</span>
78
78
-
79
79
-
<Button
80
80
-
onclick={async () => {
81
81
-
await login(data.handle as ActorIdentifier);
82
82
-
}}>Login</Button
83
83
-
>
84
84
-
</div>
85
85
-
{/if}
+23
-1
src/lib/website/FloatingEditButton.svelte
···
11
11
12
12
const isOwnPage = $derived(user.isLoggedIn && user.profile?.did === data.did);
13
13
const isBlento = $derived(!env.PUBLIC_IS_SELFHOSTED && data.handle === 'blento.app');
14
14
+
const isEditPage = $derived(page.url.pathname.endsWith('/edit'));
14
15
const showLoginOnBlento = $derived(
15
16
isBlento && !user.isInitializing && !user.isLoggedIn && user.profile?.handle !== data.handle
16
17
);
18
18
+
const showLoginOnEditPage = $derived(isEditPage && !user.isInitializing && !user.isLoggedIn);
17
19
const showEditBlentoButton = $derived(
18
20
isBlento && user.isLoggedIn && user.profile?.handle !== data.handle
19
21
);
20
22
</script>
21
23
22
22
-
{#if isOwnPage}
24
24
+
{#if isOwnPage && !isEditPage}
23
25
<div class="fixed bottom-6 left-6 z-49 hidden lg:block">
24
26
<Button size="lg" href="{page.url}/edit">
25
27
<svg
···
37
39
/>
38
40
</svg>
39
41
Edit Website
42
42
+
</Button>
43
43
+
</div>
44
44
+
{:else if showLoginOnEditPage}
45
45
+
<div class="fixed bottom-6 left-6 z-49">
46
46
+
<Button size="lg" onclick={() => login(data.handle as ActorIdentifier)}>
47
47
+
<svg
48
48
+
xmlns="http://www.w3.org/2000/svg"
49
49
+
fill="none"
50
50
+
viewBox="0 0 24 24"
51
51
+
stroke-width="1.5"
52
52
+
stroke="currentColor"
53
53
+
class="size-5"
54
54
+
>
55
55
+
<path
56
56
+
stroke-linecap="round"
57
57
+
stroke-linejoin="round"
58
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
59
+
/>
60
60
+
</svg>
61
61
+
Login
40
62
</Button>
41
63
</div>
42
64
{:else if showLoginOnBlento}
+5
-1
src/lib/website/Website.svelte
···
21
21
import FloatingEditButton from './FloatingEditButton.svelte';
22
22
import { user } from '$lib/atproto';
23
23
import { env } from '$env/dynamic/public';
24
24
+
import { page } from '$app/state';
24
25
25
26
let { data }: { data: WebsiteData } = $props();
26
27
27
28
// Check if floating edit button will be visible (to hide MadeWithBlento)
28
29
const isOwnPage = $derived(user.isLoggedIn && user.profile?.did === data.did);
29
30
const isBlento = $derived(!env.PUBLIC_IS_SELFHOSTED && data.handle === 'blento.app');
31
31
+
const isEditPage = $derived(page.url.pathname.endsWith('/edit'));
32
32
+
const showLoginOnEditPage = $derived(isEditPage && !user.isInitializing && !user.isLoggedIn);
30
33
const showFloatingButton = $derived(
31
31
-
isOwnPage ||
34
34
+
(isOwnPage && !isEditPage) ||
35
35
+
showLoginOnEditPage ||
32
36
(isBlento && !user.isInitializing && !user.isLoggedIn) ||
33
37
(isBlento && user.isLoggedIn && user.profile?.handle !== data.handle)
34
38
);