your personal website on atproto - mirror blento.app

fixes

+42 -31
-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
··· 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
··· 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
··· 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
··· 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
··· 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 );