tangled
alpha
login
or
join now
flo-bit.dev
/
blento
your personal website on atproto - mirror
blento.app
20
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
<Button variant="ghost" onclick={logout}>Logout</Button>
26
</Popover>
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
{/if}
···
25
<Button variant="ghost" onclick={logout}>Logout</Button>
26
</Popover>
27
</div>
0
0
0
0
0
0
0
0
0
0
0
0
28
{/if}
+7
-2
src/lib/website/EditableProfile.svelte
···
8
import type { Editor } from '@tiptap/core';
9
import MadeWithBlento from './MadeWithBlento.svelte';
10
11
-
let { data = $bindable() }: { data: WebsiteData } = $props();
0
0
0
12
13
let profilePosition = $derived(getProfilePosition(data));
14
···
219
220
<div class={['h-10.5 w-1', profilePosition === 'side' && '@5xl/wrapper:hidden']}></div>
221
222
-
<MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />
0
0
223
</div>
224
</div>
···
8
import type { Editor } from '@tiptap/core';
9
import MadeWithBlento from './MadeWithBlento.svelte';
10
11
+
let {
12
+
data = $bindable(),
13
+
hideBlento = false
14
+
}: { data: WebsiteData; hideBlento?: boolean } = $props();
15
16
let profilePosition = $derived(getProfilePosition(data));
17
···
222
223
<div class={['h-10.5 w-1', profilePosition === 'side' && '@5xl/wrapper:hidden']}></div>
224
225
+
{#if !hideBlento}
226
+
<MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />
227
+
{/if}
228
</div>
229
</div>
+7
-1
src/lib/website/EditableWebsite.svelte
···
33
import Account from './Account.svelte';
34
import EditBar from './EditBar.svelte';
35
import SaveModal from './SaveModal.svelte';
0
36
import { user } from '$lib/atproto';
37
import { launchConfetti } from '@foxui/visual';
38
···
41
}: {
42
data: WebsiteData;
43
} = $props();
0
0
0
44
45
let imageDragOver = $state(false);
46
···
615
]}
616
>
617
{#if !getHideProfileSection(data)}
618
-
<EditableProfile bind:data />
619
{/if}
620
621
<div
···
840
/>
841
842
<Toaster />
0
0
843
</Context>
···
33
import Account from './Account.svelte';
34
import EditBar from './EditBar.svelte';
35
import SaveModal from './SaveModal.svelte';
36
+
import FloatingEditButton from './FloatingEditButton.svelte';
37
import { user } from '$lib/atproto';
38
import { launchConfetti } from '@foxui/visual';
39
···
42
}: {
43
data: WebsiteData;
44
} = $props();
45
+
46
+
// Check if floating login button will be visible (to hide MadeWithBlento)
47
+
const showLoginOnEditPage = $derived(!user.isInitializing && !user.isLoggedIn);
48
49
let imageDragOver = $state(false);
50
···
619
]}
620
>
621
{#if !getHideProfileSection(data)}
622
+
<EditableProfile bind:data hideBlento={showLoginOnEditPage} />
623
{/if}
624
625
<div
···
844
/>
845
846
<Toaster />
847
+
848
+
<FloatingEditButton {data} />
849
</Context>
-14
src/lib/website/EmptyState.svelte
···
69
<!-- Spacer for grid height -->
70
<div class="hidden @[42rem]/grid:block" style="height: {(maxHeight / 8) * 100}cqw;"></div>
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}
···
69
<!-- Spacer for grid height -->
70
<div class="hidden @[42rem]/grid:block" style="height: {(maxHeight / 8) * 100}cqw;"></div>
71
<div class="@[42rem]/grid:hidden" style="height: {(maxMobileHeight / 4) * 100}cqw;"></div>
0
0
0
0
0
0
0
0
0
0
0
0
0
0
+23
-1
src/lib/website/FloatingEditButton.svelte
···
11
12
const isOwnPage = $derived(user.isLoggedIn && user.profile?.did === data.did);
13
const isBlento = $derived(!env.PUBLIC_IS_SELFHOSTED && data.handle === 'blento.app');
0
14
const showLoginOnBlento = $derived(
15
isBlento && !user.isInitializing && !user.isLoggedIn && user.profile?.handle !== data.handle
16
);
0
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
···
37
/>
38
</svg>
39
Edit Website
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
40
</Button>
41
</div>
42
{:else if showLoginOnBlento}
···
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
···
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}
+5
-1
src/lib/website/Website.svelte
···
21
import FloatingEditButton from './FloatingEditButton.svelte';
22
import { user } from '$lib/atproto';
23
import { env } from '$env/dynamic/public';
0
24
25
let { data }: { data: WebsiteData } = $props();
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');
0
0
30
const showFloatingButton = $derived(
31
-
isOwnPage ||
0
32
(isBlento && !user.isInitializing && !user.isLoggedIn) ||
33
(isBlento && user.isLoggedIn && user.profile?.handle !== data.handle)
34
);
···
21
import FloatingEditButton from './FloatingEditButton.svelte';
22
import { user } from '$lib/atproto';
23
import { env } from '$env/dynamic/public';
24
+
import { page } from '$app/state';
25
26
let { data }: { data: WebsiteData } = $props();
27
28
// Check if floating edit button will be visible (to hide MadeWithBlento)
29
const isOwnPage = $derived(user.isLoggedIn && user.profile?.did === data.did);
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);
33
const showFloatingButton = $derived(
34
+
(isOwnPage && !isEditPage) ||
35
+
showLoginOnEditPage ||
36
(isBlento && !user.isInitializing && !user.isLoggedIn) ||
37
(isBlento && user.isLoggedIn && user.profile?.handle !== data.handle)
38
);