Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/flo-bit/svelsky. editable svelte website with bluesky pds as backend flo-bit.dev/svelsky
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142<script lang="ts"> import { setContext } from 'svelte'; import { BlueskyLogin, PopoverEmojiPicker } from '@fuxui/social'; import { client, login } from '$lib/oauth/auth.svelte.js'; import { Button, Heading, Input, Label, Modal, Navbar, ThemeToggle, toast, Toaster } from '@fuxui/base'; import type { UpdateFunction } from '$lib/website/data.js'; import { SelectThemePopover } from '@fuxui/colors'; import ThemeWrapper from './ThemeWrapper.svelte'; import { settingsModal } from './EditHead.svelte'; import { base } from '$app/paths';
let updateFunctions: UpdateFunction[] = $state([]);
let { data, children } = $props();
setContext('isEditing', true); setContext('did', data.did); setContext('updateFunctions', updateFunctions); setContext('current', data.current);</script>
<Modal bind:open={settingsModal.show}> <Heading>Website Settings</Heading>
<Label>Title</Label> <Input type="text" bind:value={settingsModal.title} onkeydown={() => (settingsModal.edited = true)} />
<Label>Favicon</Label>
<PopoverEmojiPicker onpicked={(emoji) => { settingsModal.favicon = emoji.unicode; settingsModal.edited = true; }} > {#snippet child({ props })} <Button size="iconLg" {...props} class="w-fit"> {settingsModal.favicon || '👋'} </Button> {/snippet} </PopoverEmojiPicker></Modal>
<ThemeWrapper> {@render children?.()}
<Navbar class="mx-4 mt-3 max-w-3xl rounded-full px-4 md:mx-auto"> <div class="flex items-center gap-2"> <Button size="iconLg" variant="ghost" class="backdrop-blur-none" href={base + '/'}> <span class="sr-only">home</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /> </svg> </Button> <SelectThemePopover /> <Button size="iconLg" variant="ghost" class="backdrop-blur-none" onclick={() => (settingsModal.show = true)} > <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /> </svg> </Button> </div> <div class="flex items-center gap-2"> <ThemeToggle />
{#if client.isInitializing}{:else if client.isLoggedIn} <Button onclick={() => { // check if did is same if (client?.profile?.did !== data.did) { toast('Not authorized', { description: 'Please login with the correct account' }); return; }
for (const updateFunction of updateFunctions) { updateFunction(); }
toast('Saved', { description: 'Your website has been saved!' }); }}>Save</Button > {:else} <BlueskyLogin login={async (handle) => { await login(handle); return true; }} /> {/if} </div> </Navbar></ThemeWrapper>
<Toaster />