your personal website on atproto - mirror
blento.app
Merge pull request #48 from flo-bit/small-fixes
fixes
+42
-31
-12
src/lib/website/Account.svelte
-12
src/lib/website/Account.svelte
···
25
25
<Button variant="ghost" onclick={logout}>Logout</Button>
26
26
</Popover>
27
27
</div>
28
-
{:else if !user.isInitializing}
29
-
<div
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
-
>
32
-
<span class="text-sm font-semibold">Login to edit your page</span>
33
-
34
-
<Button
35
-
onclick={async () => {
36
-
await login(data.handle as ActorIdentifier);
37
-
}}>Login</Button
38
-
>
39
-
</div>
40
28
{/if}
+7
-2
src/lib/website/EditableProfile.svelte
+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
-
let { data = $bindable() }: { data: WebsiteData } = $props();
11
+
let {
12
+
data = $bindable(),
13
+
hideBlento = false
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
-
<MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />
225
+
{#if !hideBlento}
226
+
<MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />
227
+
{/if}
223
228
</div>
224
229
</div>
+7
-1
src/lib/website/EditableWebsite.svelte
+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
+
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
+
46
+
// Check if floating login button will be visible (to hide MadeWithBlento)
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
-
<EditableProfile bind:data />
622
+
<EditableProfile bind:data hideBlento={showLoginOnEditPage} />
619
623
{/if}
620
624
621
625
<div
···
840
844
/>
841
845
842
846
<Toaster />
847
+
848
+
<FloatingEditButton {data} />
843
849
</Context>
-14
src/lib/website/EmptyState.svelte
-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
-
73
-
{#if !user.isLoggedIn}
74
-
<div
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
-
>
77
-
<span class="text-sm font-semibold">Login to edit your page</span>
78
-
79
-
<Button
80
-
onclick={async () => {
81
-
await login(data.handle as ActorIdentifier);
82
-
}}>Login</Button
83
-
>
84
-
</div>
85
-
{/if}
+23
-1
src/lib/website/FloatingEditButton.svelte
+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
+
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
+
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
-
{#if isOwnPage}
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
+
</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
40
62
</Button>
41
63
</div>
42
64
{:else if showLoginOnBlento}
+5
-1
src/lib/website/Website.svelte
+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
+
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
+
const isEditPage = $derived(page.url.pathname.endsWith('/edit'));
32
+
const showLoginOnEditPage = $derived(isEditPage && !user.isInitializing && !user.isLoggedIn);
30
33
const showFloatingButton = $derived(
31
-
isOwnPage ||
34
+
(isOwnPage && !isEditPage) ||
35
+
showLoginOnEditPage ||
32
36
(isBlento && !user.isInitializing && !user.isLoggedIn) ||
33
37
(isBlento && user.isLoggedIn && user.profile?.handle !== data.handle)
34
38
);