commit dbe2f418b5793a2a289bed4394e43f110d8f9194 · flo-bit.dev/blento

+1

docs/Autofill.md

··· 9 9 - com.germnetwork.declaration 10 10 - pub.leaflet.document 11 11 - blue.flashes.actor.portfolio 12 + - social.grain.gallery 12 13 - add bluesky profile card

+6 -3

docs/CardIdeas.md

··· 21 21 - bluesky account card (showing follow button, follower count, avatar, name, cover image) 22 22 - youtube channel card (showing channel name, latest videos, follow button?) 23 23 - bluesky posts workcloud 24 + - steam game 24 25 25 26 ## bluesky 26 27 27 28 - bluesky feed 28 - - bluesky post (fixed or latest) 29 + - bluesky post (pinned, latest or fixed) 29 30 - social accounts card (multiple) 30 31 31 32 ## social ··· 36 37 37 38 - leaflet 38 39 - skywatched 39 - - teal.fm 40 + - teal.fm 41 + - [x] last played songs 40 42 - tangled.sh 41 43 - popfeed.social 42 44 - reading goal 43 - - latest ratings 45 + - [x] latest ratings 44 46 - lists 45 47 - smokesignal.events (https://pdsls.dev/at://did:plc:xbtmt2zjwlrfegqvch7fboei/events.smokesignal.calendar.event/3ltn2qrxf3626) 46 48 - statusphere.xyz ··· 48 50 - flashes.blue (https://pdsls.dev/at://did:plc:aytgljyikzbtgrnac2u4ccft/blue.flashes.actor.portfolio, https://app.flashes.blue/profile/j4ck.xyz) 49 51 - room: flo-bit.dev/room 50 52 - plyr.fm 53 + - grain.social 51 54 52 55 ## programming 53 56

+1

package.json

··· 49 49 "@foxui/core": "^0.4.7", 50 50 "@foxui/social": "^0.4.7", 51 51 "@foxui/time": "^0.4.7", 52 + "@foxui/visual": "^0.4.7", 52 53 "@tailwindcss/typography": "^0.5.16", 53 54 "@tiptap/core": "^2.12.0", 54 55 "@tiptap/extension-document": "^2.12.0",

+82

pnpm-lock.yaml

··· 38 38 '@foxui/time': 39 39 specifier: ^0.4.7 40 40 version: 0.4.7(svelte@5.46.4)(tailwindcss@4.1.5) 41 + '@foxui/visual': 42 + specifier: ^0.4.7 43 + version: 0.4.7(svelte@5.46.4)(tailwindcss@4.1.5) 41 44 '@tailwindcss/typography': 42 45 specifier: ^0.5.16 43 46 version: 0.5.16(tailwindcss@4.1.5) ··· 668 671 669 672 '@foxui/time@0.4.7': 670 673 resolution: {integrity: sha512-N4jN1QfUi7IY53MQETZp4MDj6DwwONoRi4yrN96SjpB71w7cvhli1jQCSG4QqCtyvISaizlg4T5gzORg7PYWrA==, tarball: https://registry.npmjs.org/@foxui/time/-/time-0.4.7.tgz} 674 + peerDependencies: 675 + svelte: '>=5' 676 + tailwindcss: '>=3' 677 + 678 + '@foxui/visual@0.4.7': 679 + resolution: {integrity: sha512-POcVBvmeHD5Z3UFBANIawn6mBZLB5XEy/jqkFp1NV1OnHSdE4vNjWYSva3GU1C/OVVPxjfNFB0SisZlHWmk5FA==, tarball: https://registry.npmjs.org/@foxui/visual/-/visual-0.4.7.tgz} 671 680 peerDependencies: 672 681 svelte: '>=5' 673 682 tailwindcss: '>=3' ··· 1502 1511 camelize@1.0.1: 1503 1512 resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==, tarball: https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz} 1504 1513 1514 + canvas-confetti@1.9.4: 1515 + resolution: {integrity: sha512-yxQbJkAVrFXWNbTUjPqjF7G+g6pDotOUHGbkZq2NELZUMDpiJ85rIEazVb8GTaAptNW2miJAXbs1BtioA251Pw==, tarball: https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.4.tgz} 1516 + 1505 1517 chalk@4.1.2: 1506 1518 resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==, tarball: https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz} 1507 1519 engines: {node: '>=10'} ··· 1512 1524 cheerio@1.0.0-rc.11: 1513 1525 resolution: {integrity: sha512-bQwNaDIBKID5ts/DsdhxrjqFXYfLw4ste+wMKqWA8DyKcS4qwsPP4Bk8ZNaTJjvpiX/qW3BT4sU7d6Bh5i+dag==, tarball: https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.11.tgz} 1514 1526 engines: {node: '>= 6'} 1527 + 1528 + cheerio@1.1.2: 1529 + resolution: {integrity: sha512-IkxPpb5rS/d1IiLbHMgfPuS0FgiWTtFIm/Nj+2woXDLTZ7fOT2eqzgYbdMlLweqlHbsZjxEChoVK+7iph7jyQg==, tarball: https://registry.npmjs.org/cheerio/-/cheerio-1.1.2.tgz} 1530 + engines: {node: '>=20.18.1'} 1515 1531 1516 1532 chokidar@4.0.3: 1517 1533 resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==, tarball: https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz} ··· 1673 1689 encodeurl@2.0.0: 1674 1690 resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==, tarball: https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz} 1675 1691 engines: {node: '>= 0.8'} 1692 + 1693 + encoding-sniffer@0.2.1: 1694 + resolution: {integrity: sha512-5gvq20T6vfpekVtqrYQsSCFZ1wEg5+wW0/QaZMWkFr6BqD3NfKs0rLCx4rrVlSWJeZb5NBJgVLswK/w2MWU+Gw==, tarball: https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.1.tgz} 1676 1695 1677 1696 enhanced-resolve@5.18.1: 1678 1697 resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==, tarball: https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz} ··· 1950 1969 hls.js@1.6.15: 1951 1970 resolution: {integrity: sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==, tarball: https://registry.npmjs.org/hls.js/-/hls.js-1.6.15.tgz} 1952 1971 1972 + htmlparser2@10.0.0: 1973 + resolution: {integrity: sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==, tarball: https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.0.0.tgz} 1974 + 1953 1975 htmlparser2@8.0.2: 1954 1976 resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==, tarball: https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz} 1955 1977 ··· 2303 2325 2304 2326 parse5-htmlparser2-tree-adapter@7.1.0: 2305 2327 resolution: {integrity: sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==, tarball: https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz} 2328 + 2329 + parse5-parser-stream@7.1.2: 2330 + resolution: {integrity: sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==, tarball: https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz} 2306 2331 2307 2332 parse5@7.3.0: 2308 2333 resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==, tarball: https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz} ··· 2939 2964 w3c-keyname@2.2.8: 2940 2965 resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==, tarball: https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz} 2941 2966 2967 + whatwg-encoding@3.1.1: 2968 + resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==, tarball: https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz} 2969 + engines: {node: '>=18'} 2970 + deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation 2971 + 2972 + whatwg-mimetype@4.0.0: 2973 + resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==, tarball: https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz} 2974 + engines: {node: '>=18'} 2975 + 2942 2976 which@2.0.2: 2943 2977 resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==, tarball: https://registry.npmjs.org/which/-/which-2.0.2.tgz} 2944 2978 engines: {node: '>= 8'} ··· 3424 3458 svelte: 5.46.4 3425 3459 tailwindcss: 4.1.5 3426 3460 3461 + '@foxui/visual@0.4.7(svelte@5.46.4)(tailwindcss@4.1.5)': 3462 + dependencies: 3463 + '@foxui/colors': 0.4.7(svelte@5.46.4)(tailwindcss@4.1.5) 3464 + '@foxui/core': 0.4.7(svelte@5.46.4)(tailwindcss@4.1.5) 3465 + bits-ui: 1.8.0(svelte@5.46.4) 3466 + canvas-confetti: 1.9.4 3467 + cheerio: 1.1.2 3468 + svelte: 5.46.4 3469 + tailwindcss: 4.1.5 3470 + 3427 3471 '@humanfs/core@0.19.1': {} 3428 3472 3429 3473 '@humanfs/node@0.16.6': ··· 4211 4255 4212 4256 camelize@1.0.1: {} 4213 4257 4258 + canvas-confetti@1.9.4: {} 4259 + 4214 4260 chalk@4.1.2: 4215 4261 dependencies: 4216 4262 ansi-styles: 4.3.0 ··· 4235 4281 parse5: 7.3.0 4236 4282 parse5-htmlparser2-tree-adapter: 7.1.0 4237 4283 tslib: 2.8.1 4284 + 4285 + cheerio@1.1.2: 4286 + dependencies: 4287 + cheerio-select: 2.1.0 4288 + dom-serializer: 2.0.0 4289 + domhandler: 5.0.3 4290 + domutils: 3.2.2 4291 + encoding-sniffer: 0.2.1 4292 + htmlparser2: 10.0.0 4293 + parse5: 7.3.0 4294 + parse5-htmlparser2-tree-adapter: 7.1.0 4295 + parse5-parser-stream: 7.1.2 4296 + undici: 7.14.0 4297 + whatwg-mimetype: 4.0.0 4238 4298 4239 4299 chokidar@4.0.3: 4240 4300 dependencies: ··· 4369 4429 4370 4430 encodeurl@2.0.0: {} 4371 4431 4432 + encoding-sniffer@0.2.1: 4433 + dependencies: 4434 + iconv-lite: 0.6.3 4435 + whatwg-encoding: 3.1.1 4436 + 4372 4437 enhanced-resolve@5.18.1: 4373 4438 dependencies: 4374 4439 graceful-fs: 4.2.11 ··· 4728 4793 hex-rgb@4.3.0: {} 4729 4794 4730 4795 hls.js@1.6.15: {} 4796 + 4797 + htmlparser2@10.0.0: 4798 + dependencies: 4799 + domelementtype: 2.3.0 4800 + domhandler: 5.0.3 4801 + domutils: 3.2.2 4802 + entities: 6.0.1 4731 4803 4732 4804 htmlparser2@8.0.2: 4733 4805 dependencies: ··· 5044 5116 domhandler: 5.0.3 5045 5117 parse5: 7.3.0 5046 5118 5119 + parse5-parser-stream@7.1.2: 5120 + dependencies: 5121 + parse5: 7.3.0 5122 + 5047 5123 parse5@7.3.0: 5048 5124 dependencies: 5049 5125 entities: 6.0.1 ··· 5686 5762 vite: 6.3.5(jiti@2.4.2)(lightningcss@1.29.2) 5687 5763 5688 5764 w3c-keyname@2.2.8: {} 5765 + 5766 + whatwg-encoding@3.1.1: 5767 + dependencies: 5768 + iconv-lite: 0.6.3 5769 + 5770 + whatwg-mimetype@4.0.0: {} 5689 5771 5690 5772 which@2.0.2: 5691 5773 dependencies:

+67

src/lib/cards/PhotoGalleryCard/PhotoGalleryCard.svelte

··· 1 + <script lang="ts"> 2 + import type { Item } from '$lib/types'; 3 + import { onMount } from 'svelte'; 4 + import { 5 + getAdditionalUserData, 6 + getDidContext, 7 + getHandleContext, 8 + getIsMobile 9 + } from '$lib/website/context'; 10 + import { CardDefinitionsByType } from '..'; 11 + import { getImageBlobUrl, parseUri } from '$lib/oauth/utils'; 12 + 13 + import { ImageMasonry } from '@foxui/visual'; 14 + 15 + let { item }: { item: Item } = $props(); 16 + 17 + const data = getAdditionalUserData(); 18 + // svelte-ignore state_referenced_locally 19 + let feed = $state((data[item.cardType] as any)?.[item.cardData.galleryUri]); 20 + 21 + let did = getDidContext(); 22 + let handle = getHandleContext(); 23 + 24 + onMount(async () => { 25 + console.log(feed); 26 + if (!feed) { 27 + feed = ( 28 + (await CardDefinitionsByType[item.cardType]?.loadData?.([item], { 29 + did, 30 + handle 31 + })) as any 32 + )?.[item.cardData.galleryUri]; 33 + 34 + console.log(feed); 35 + 36 + data[item.cardType] = feed; 37 + } 38 + }); 39 + 40 + let images = $derived( 41 + feed 42 + ?.toSorted((a, b) => { 43 + return (a.value.position ?? 0) - (b.value.position ?? 0); 44 + }) 45 + .map((i) => { 46 + const { did } = parseUri(i.uri); 47 + return { 48 + src: getImageBlobUrl({ did, link: i.value.photo?.ref?.$link }), 49 + width: i.value.aspectRatio.width, 50 + height: i.value.aspectRatio.height, 51 + position: i.value.position ?? 0 52 + }; 53 + }) 54 + ); 55 + $inspect(images); 56 + let isMobile = getIsMobile(); 57 + </script> 58 + 59 + <div class="z-10 flex h-full w-full flex-col gap-4 overflow-y-scroll p-4"> 60 + {#each (feed ?? []).slice(0, 20) as photo}{/each} 61 + 62 + <ImageMasonry 63 + images={images ?? []} 64 + showNames={false} 65 + maxColumns={!isMobile() && item.w > 4 ? 3 : 2} 66 + /> 67 + </div>

+58

src/lib/cards/PhotoGalleryCard/index.ts

··· 1 + import type { CardDefinition } from '../types'; 2 + import { getRecord, listRecords } from '$lib/oauth/atproto'; 3 + import PhotoGalleryCard from './PhotoGalleryCard.svelte'; 4 + import { parseUri } from '$lib/oauth/utils'; 5 + import type { Record as ListRecord } from '@atproto/api/dist/client/types/com/atproto/repo/listRecords'; 6 + 7 + export const PhotoGalleryCardDefinition = { 8 + type: 'photoGallery', 9 + contentComponent: PhotoGalleryCard, 10 + createNew: (card) => { 11 + // random grain.social url for testing 12 + card.cardData.galleryUri = 13 + 'at://did:plc:tas6hj2xjrqben5653v5kohk/social.grain.gallery/3mclhsljs6h2w'; 14 + 15 + card.w = 4; 16 + card.mobileW = 8; 17 + card.h = 3; 18 + card.mobileH = 6; 19 + }, 20 + loadData: async (items) => { 21 + const itemsData: Record<string, ListRecord[]> = {}; 22 + 23 + const galleryItems: Record<string, ListRecord[] | undefined> = { 24 + 'social.grain.gallery.item': undefined 25 + }; 26 + 27 + for (const item of items) { 28 + if (!item.cardData.galleryUri) continue; 29 + 30 + const { did, collection } = parseUri(item.cardData.galleryUri); 31 + 32 + if (collection === 'social.grain.gallery') { 33 + const itemCollection = 'social.grain.gallery.item'; 34 + 35 + if (!galleryItems[itemCollection]) { 36 + galleryItems[itemCollection] = await listRecords({ 37 + did, 38 + collection: itemCollection 39 + }); 40 + } 41 + 42 + const images = galleryItems['social.grain.gallery.item'] 43 + ?.filter((i) => i.value.gallery === item.cardData.galleryUri) 44 + .map(async (i) => { 45 + const itemData = parseUri(i.value.item as string); 46 + const record = await getRecord(itemData); 47 + return { ...record, value: { ...record.value, ...i.value } }; 48 + }); 49 + 50 + itemsData[item.cardData.galleryUri] = await Promise.all(images); 51 + } 52 + } 53 + 54 + return itemsData; 55 + }, 56 + minW: 4 57 + //sidebarButtonText: 'Photo Gallery' 58 + } as CardDefinition & { type: 'photoGallery' };

+3 -1

src/lib/cards/index.ts

··· 20 20 import { GithubProfileCardDefitition } from './GitHubProfileCard'; 21 21 import { PopfeedReviewsCardDefinition } from './PopfeedReviews'; 22 22 import { TealFMPlaysCardDefinition } from './TealFMPlaysCard'; 23 + import { PhotoGalleryCardDefinition } from './PhotoGalleryCard'; 23 24 24 25 export const AllCardDefinitions = [ 25 26 ImageCardDefinition, ··· 42 43 GithubProfileCardDefitition, 43 44 TetrisCardDefinition, 44 45 PopfeedReviewsCardDefinition, 45 - TealFMPlaysCardDefinition 46 + TealFMPlaysCardDefinition, 47 + PhotoGalleryCardDefinition 46 48 ] as const; 47 49 48 50 export const CardDefinitionsByType = AllCardDefinitions.reduce(

+8 -1

src/lib/oauth/auth.svelte.ts

··· 54 54 if (params.size > 0) { 55 55 await finalizeLogin(params, did); 56 56 } else if (did) { 57 + console.log('resuming session'); 57 58 await resumeSession(did); 58 59 } 59 60 ··· 118 119 119 120 async function resumeSession(did: string) { 120 121 try { 121 - const session = await getSession(did as `did:${string}`, { allowStale: true }); 122 + const session = await getSession(did as `did:${string}:${string}`, { allowStale: true }); 123 + console.log('got session', session); 124 + 125 + if (session.token.expires_at && session.token.expires_at < Date.now()) { 126 + throw Error('session expired'); 127 + } 122 128 client.session = session; 123 129 124 130 setAgentAndXRPC(session); ··· 128 134 client.isLoggedIn = true; 129 135 } catch (error) { 130 136 console.error('error resuming session', error); 137 + logout(); 131 138 } 132 139 } 133 140

+39

src/lib/website/Account.svelte

··· 1 + <script lang="ts"> 2 + import { client, login, logout } from '$lib/oauth'; 3 + import type { WebsiteData } from '$lib/types'; 4 + import { Button, Popover } from '@foxui/core'; 5 + 6 + let { 7 + data 8 + }: { 9 + data: WebsiteData; 10 + } = $props(); 11 + 12 + let settingsPopoverOpen = $state(false); 13 + </script> 14 + 15 + {#if client.isLoggedIn && client.profile} 16 + <div class="fixed top-4 right-4 z-20"> 17 + <Popover sideOffset={8} bind:open={settingsPopoverOpen} class="bg-base-100 dark:bg-base-900"> 18 + {#snippet child({ props })} 19 + <button {...props}> 20 + <img src={client.profile?.avatar} alt="" class="size-15 rounded-full" /> 21 + </button> 22 + {/snippet} 23 + 24 + <Button variant="ghost" onclick={logout}>Logout</Button> 25 + </Popover> 26 + </div> 27 + {:else} 28 + <div 29 + 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" 30 + > 31 + <span class="text-sm font-semibold">Login to edit your page</span> 32 + 33 + <Button 34 + onclick={async () => { 35 + await login(data.handle); 36 + }}>Login</Button 37 + > 38 + </div> 39 + {/if}

+278

src/lib/website/EditBar.svelte

··· 1 + <script lang="ts"> 2 + import { dev } from '$app/environment'; 3 + import { client } from '$lib/oauth'; 4 + import type { WebsiteData } from '$lib/types'; 5 + import { Button, Input, Navbar, Popover, Toggle } from '@foxui/core'; 6 + 7 + let { 8 + data, 9 + linkValue = $bindable(), 10 + newCard, 11 + addLink, 12 + showSettings = $bindable(), 13 + 14 + showingMobileView = $bindable(), 15 + isSaving = $bindable(), 16 + 17 + save, 18 + 19 + handleImageInputChange, 20 + handleVideoInputChange 21 + }: { 22 + data: WebsiteData; 23 + linkValue: string; 24 + newCard: (type: string) => void; 25 + addLink: (url: string) => void; 26 + 27 + showSettings: boolean; 28 + 29 + showingMobileView: boolean; 30 + 31 + isSaving: boolean; 32 + 33 + save: () => Promise<void>; 34 + 35 + handleImageInputChange: (evt: Event) => void; 36 + handleVideoInputChange: (evt: Event) => void; 37 + } = $props(); 38 + 39 + let linkPopoverOpen = $state(false); 40 + 41 + let imageInputRef: HTMLInputElement | undefined = $state(); 42 + let videoInputRef: HTMLInputElement | undefined = $state(); 43 + </script> 44 + 45 + <input 46 + type="file" 47 + accept="image/*" 48 + onchange={handleImageInputChange} 49 + class="hidden" 50 + multiple 51 + bind:this={imageInputRef} 52 + /> 53 + 54 + <input 55 + type="file" 56 + accept="video/*" 57 + onchange={handleVideoInputChange} 58 + class="hidden" 59 + multiple 60 + bind:this={videoInputRef} 61 + /> 62 + 63 + {#if client.isLoggedIn && client.profile?.did === data.did} 64 + <Navbar 65 + class={[ 66 + 'dark:bg-base-900 bg-base-100 top-auto bottom-2 mx-4 mt-3 max-w-3xl rounded-full px-4 md:mx-auto lg:inline-flex', 67 + !dev ? 'hidden' : '' 68 + ]} 69 + > 70 + <div class="flex items-center gap-2"> 71 + <Button 72 + size="iconLg" 73 + variant="ghost" 74 + class="backdrop-blur-none" 75 + onclick={() => { 76 + newCard('section'); 77 + }} 78 + > 79 + <svg 80 + xmlns="http://www.w3.org/2000/svg" 81 + viewBox="0 0 24 24" 82 + fill="none" 83 + stroke="currentColor" 84 + stroke-width="2" 85 + stroke-linecap="round" 86 + stroke-linejoin="round" 87 + ><path d="M6 12h12" /><path d="M6 20V4" /><path d="M18 20V4" /></svg 88 + > 89 + </Button> 90 + 91 + <Button 92 + size="iconLg" 93 + variant="ghost" 94 + class="backdrop-blur-none" 95 + onclick={() => { 96 + newCard('text'); 97 + }} 98 + > 99 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" 100 + ><path 101 + fill="none" 102 + stroke="currentColor" 103 + stroke-linecap="round" 104 + stroke-linejoin="round" 105 + stroke-width="2" 106 + d="m15 16l2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16m-6.303-2h5.606M2 16l4.039-9.69a.5.5 0 0 1 .923 0L11 16m-7.696-3h6.392" 107 + /></svg 108 + > 109 + </Button> 110 + 111 + <Popover sideOffset={16} bind:open={linkPopoverOpen} class="bg-base-100 dark:bg-base-900"> 112 + {#snippet child({ props })} 113 + <Button 114 + size="iconLg" 115 + variant="ghost" 116 + class="backdrop-blur-none" 117 + onclick={() => { 118 + newCard('link'); 119 + }} 120 + {...props} 121 + > 122 + <svg 123 + xmlns="http://www.w3.org/2000/svg" 124 + fill="none" 125 + viewBox="-2 -2 28 28" 126 + stroke-width="2" 127 + stroke="currentColor" 128 + > 129 + <path 130 + stroke-linecap="round" 131 + stroke-linejoin="round" 132 + d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" 133 + /> 134 + </svg> 135 + </Button> 136 + {/snippet} 137 + <Input 138 + spellcheck={false} 139 + type="url" 140 + bind:value={linkValue} 141 + onkeydown={(event) => { 142 + if (event.code === 'Enter') { 143 + addLink(linkValue); 144 + event.preventDefault(); 145 + } 146 + }} 147 + placeholder="Enter link" 148 + /> 149 + <Button onclick={() => addLink(linkValue)} size="icon" 150 + ><svg 151 + xmlns="http://www.w3.org/2000/svg" 152 + fill="none" 153 + viewBox="0 0 24 24" 154 + stroke-width="2" 155 + stroke="currentColor" 156 + class="size-6" 157 + > 158 + <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /> 159 + </svg> 160 + </Button> 161 + </Popover> 162 + 163 + <Button 164 + size="iconLg" 165 + variant="ghost" 166 + class="backdrop-blur-none" 167 + onclick={() => { 168 + imageInputRef?.click(); 169 + }} 170 + > 171 + <svg 172 + xmlns="http://www.w3.org/2000/svg" 173 + fill="none" 174 + viewBox="0 0 24 24" 175 + stroke-width="2" 176 + stroke="currentColor" 177 + > 178 + <path 179 + stroke-linecap="round" 180 + stroke-linejoin="round" 181 + d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" 182 + /> 183 + </svg> 184 + </Button> 185 + 186 + {#if dev} 187 + <Button 188 + size="iconLg" 189 + variant="ghost" 190 + class="backdrop-blur-none" 191 + onclick={() => { 192 + videoInputRef?.click(); 193 + }} 194 + > 195 + <svg 196 + xmlns="http://www.w3.org/2000/svg" 197 + fill="none" 198 + viewBox="0 0 24 24" 199 + stroke-width="1.5" 200 + stroke="currentColor" 201 + > 202 + <path 203 + stroke-linecap="round" 204 + stroke-linejoin="round" 205 + d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" 206 + /> 207 + </svg> 208 + </Button> 209 + {/if} 210 + 211 + <Button size="iconLg" variant="ghost" class="backdrop-blur-none" popovertarget="mobile-menu"> 212 + <svg 213 + xmlns="http://www.w3.org/2000/svg" 214 + fill="none" 215 + viewBox="0 0 24 24" 216 + stroke-width="1.5" 217 + stroke="currentColor" 218 + > 219 + <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> 220 + </svg> 221 + </Button> 222 + </div> 223 + <div class="flex items-center gap-2"> 224 + <Button 225 + size="iconLg" 226 + variant="ghost" 227 + class="backdrop-blur-none" 228 + onclick={() => { 229 + showSettings = true; 230 + }} 231 + > 232 + <svg 233 + xmlns="http://www.w3.org/2000/svg" 234 + fill="none" 235 + viewBox="0 0 24 24" 236 + stroke-width="1.5" 237 + stroke="currentColor" 238 + > 239 + <path 240 + stroke-linecap="round" 241 + stroke-linejoin="round" 242 + 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" 243 + /> 244 + <path 245 + stroke-linecap="round" 246 + stroke-linejoin="round" 247 + d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" 248 + /> 249 + </svg> 250 + </Button> 251 + <Toggle 252 + class="hidden bg-transparent backdrop-blur-none lg:block dark:bg-transparent" 253 + bind:pressed={showingMobileView} 254 + > 255 + <svg 256 + xmlns="http://www.w3.org/2000/svg" 257 + fill="none" 258 + viewBox="0 0 24 24" 259 + stroke-width="1.5" 260 + stroke="currentColor" 261 + class="size-6" 262 + > 263 + <path 264 + stroke-linecap="round" 265 + stroke-linejoin="round" 266 + d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" 267 + /> 268 + </svg> 269 + </Toggle> 270 + <Button 271 + disabled={isSaving} 272 + onclick={async () => { 273 + save(); 274 + }}>{isSaving ? 'Saving...' : 'Save'}</Button 275 + > 276 + </div> 277 + </Navbar> 278 + {/if}

+24 -253

src/lib/website/EditableWebsite.svelte

··· 32 32 import Settings from './Settings.svelte'; 33 33 import Head from './Head.svelte'; 34 34 import { compressImage } from '../helper'; 35 + import Account from './Account.svelte'; 36 + import EditBar from './EditBar.svelte'; 35 37 36 38 let { 37 39 data ··· 39 41 data: WebsiteData; 40 42 } = $props(); 41 43 42 - let imageInputRef: HTMLInputElement | undefined = $state(); 43 - let videoInputRef: HTMLInputElement | undefined = $state(); 44 44 let imageDragOver = $state(false); 45 45 let imageDragPosition: { x: number; y: number } | null = $state(null); 46 46 ··· 136 136 async function save() { 137 137 isSaving = true; 138 138 139 - await savePage(data, items, publication); 139 + try { 140 + await savePage(data, items, publication); 140 141 141 - publication = JSON.stringify(data.publication); 142 + publication = JSON.stringify(data.publication); 143 + } catch (error) { 144 + toast.error('Error saving page!'); 145 + } finally { 146 + isSaving = false; 147 + } 142 148 } 143 149 144 150 const sidebarItems = AllCardDefinitions.filter( ··· 528 534 529 535 <Settings bind:open={showSettings} bind:data /> 530 536 537 + <Account {data} /> 538 + 531 539 <Context {data}> 532 - <input 533 - type="file" 534 - accept="image/*" 535 - onchange={handleImageInputChange} 536 - class="hidden" 537 - multiple 538 - bind:this={imageInputRef} 539 - /> 540 - <input 541 - type="file" 542 - accept="video/*" 543 - onchange={handleVideoInputChange} 544 - class="hidden" 545 - multiple 546 - bind:this={videoInputRef} 547 - /> 548 - 549 540 {#if !dev} 550 541 <div 551 542 class="bg-base-200 dark:bg-base-800 fixed inset-0 z-50 inline-flex h-full w-full items-center justify-center p-4 text-center lg:hidden" ··· 750 741 </div> 751 742 </div> 752 743 753 -  754 - 755 744 <Sidebar mobileOnly mobileClasses="lg:block p-4 gap-4"> 756 745 <div class="flex flex-col gap-2"> 757 746 {#each sidebarItems as cardDef} ··· 766 755 </div> 767 756 </Sidebar> 768 757 769 - {#if dev || (!client.isLoggedIn && !client.isInitializing) || client.profile?.did === data.did} 770 - <Navbar 771 - class={[ 772 - 'dark:bg-base-900 bg-base-100 top-auto bottom-2 mx-4 mt-3 max-w-3xl rounded-full px-4 md:mx-auto lg:inline-flex', 773 - !dev ? 'hidden' : '' 774 - ]} 775 - > 776 - <div class="flex items-center gap-2"> 777 - <Button 778 - size="iconLg" 779 - variant="ghost" 780 - class="backdrop-blur-none" 781 - onclick={() => { 782 - newCard('section'); 783 - }} 784 - > 785 - <svg 786 - xmlns="http://www.w3.org/2000/svg" 787 - viewBox="0 0 24 24" 788 - fill="none" 789 - stroke="currentColor" 790 - stroke-width="2" 791 - stroke-linecap="round" 792 - stroke-linejoin="round" 793 - ><path d="M6 12h12" /><path d="M6 20V4" /><path d="M18 20V4" /></svg 794 - > 795 - </Button> 796 - 797 - <Button 798 - size="iconLg" 799 - variant="ghost" 800 - class="backdrop-blur-none" 801 - onclick={() => { 802 - newCard('text'); 803 - }} 804 - > 805 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" 806 - ><path 807 - fill="none" 808 - stroke="currentColor" 809 - stroke-linecap="round" 810 - stroke-linejoin="round" 811 - stroke-width="2" 812 - d="m15 16l2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16m-6.303-2h5.606M2 16l4.039-9.69a.5.5 0 0 1 .923 0L11 16m-7.696-3h6.392" 813 - /></svg 814 - > 815 - </Button> 816 - 817 - <Popover sideOffset={16} bind:open={linkPopoverOpen} class="bg-base-100 dark:bg-base-900"> 818 - {#snippet child({ props })} 819 - <Button 820 - size="iconLg" 821 - variant="ghost" 822 - class="backdrop-blur-none" 823 - onclick={() => { 824 - newCard('link'); 825 - }} 826 - {...props} 827 - > 828 - <svg 829 - xmlns="http://www.w3.org/2000/svg" 830 - fill="none" 831 - viewBox="-2 -2 28 28" 832 - stroke-width="2" 833 - stroke="currentColor" 834 - > 835 - <path 836 - stroke-linecap="round" 837 - stroke-linejoin="round" 838 - d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" 839 - /> 840 - </svg> 841 - </Button> 842 - {/snippet} 843 - <Input 844 - spellcheck={false} 845 - type="url" 846 - bind:value={linkValue} 847 - onkeydown={(event) => { 848 - if (event.code === 'Enter') { 849 - addLink(linkValue); 850 - event.preventDefault(); 851 - } 852 - }} 853 - placeholder="Enter link" 854 - /> 855 - <Button onclick={() => addLink(linkValue)} size="icon" 856 - ><svg 857 - xmlns="http://www.w3.org/2000/svg" 858 - fill="none" 859 - viewBox="0 0 24 24" 860 - stroke-width="2" 861 - stroke="currentColor" 862 - class="size-6" 863 - > 864 - <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /> 865 - </svg> 866 - </Button> 867 - </Popover> 868 - 869 - <Button 870 - size="iconLg" 871 - variant="ghost" 872 - class="backdrop-blur-none" 873 - onclick={() => { 874 - imageInputRef?.click(); 875 - }} 876 - > 877 - <svg 878 - xmlns="http://www.w3.org/2000/svg" 879 - fill="none" 880 - viewBox="0 0 24 24" 881 - stroke-width="2" 882 - stroke="currentColor" 883 - > 884 - <path 885 - stroke-linecap="round" 886 - stroke-linejoin="round" 887 - d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" 888 - /> 889 - </svg> 890 - </Button> 891 - 892 - {#if dev} 893 - <Button 894 - size="iconLg" 895 - variant="ghost" 896 - class="backdrop-blur-none" 897 - onclick={() => { 898 - videoInputRef?.click(); 899 - }} 900 - > 901 - <svg 902 - xmlns="http://www.w3.org/2000/svg" 903 - fill="none" 904 - viewBox="0 0 24 24" 905 - stroke-width="1.5" 906 - stroke="currentColor" 907 - > 908 - <path 909 - stroke-linecap="round" 910 - stroke-linejoin="round" 911 - d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" 912 - /> 913 - </svg> 914 - </Button> 915 - {/if} 916 - 917 - <Button 918 - size="iconLg" 919 - variant="ghost" 920 - class="backdrop-blur-none" 921 - popovertarget="mobile-menu" 922 - > 923 - <svg 924 - xmlns="http://www.w3.org/2000/svg" 925 - fill="none" 926 - viewBox="0 0 24 24" 927 - stroke-width="1.5" 928 - stroke="currentColor" 929 - > 930 - <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> 931 - </svg> 932 - </Button> 933 - </div> 934 - <div class="flex items-center gap-2"> 935 - <Button 936 - size="iconLg" 937 - variant="ghost" 938 - class="backdrop-blur-none" 939 - onclick={() => { 940 - showSettings = true; 941 - }} 942 - > 943 - <svg 944 - xmlns="http://www.w3.org/2000/svg" 945 - fill="none" 946 - viewBox="0 0 24 24" 947 - stroke-width="1.5" 948 - stroke="currentColor" 949 - > 950 - <path 951 - stroke-linecap="round" 952 - stroke-linejoin="round" 953 - 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" 954 - /> 955 - <path 956 - stroke-linecap="round" 957 - stroke-linejoin="round" 958 - d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" 959 - /> 960 - </svg> 961 - </Button> 962 - <Toggle 963 - class="hidden bg-transparent backdrop-blur-none lg:block dark:bg-transparent" 964 - bind:pressed={showingMobileView} 965 - > 966 - <svg 967 - xmlns="http://www.w3.org/2000/svg" 968 - fill="none" 969 - viewBox="0 0 24 24" 970 - stroke-width="1.5" 971 - stroke="currentColor" 972 - class="size-6" 973 - > 974 - <path 975 - stroke-linecap="round" 976 - stroke-linejoin="round" 977 - d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" 978 - /> 979 - </svg> 980 - </Toggle> 981 - {#if client.isLoggedIn} 982 - <Button 983 - disabled={isSaving} 984 - onclick={async () => { 985 - save(); 986 - }}>{isSaving ? 'Saving...' : 'Save'}</Button 987 - > 988 - {:else} 989 - <BlueskyLogin 990 - login={async (handle) => { 991 - await login(handle); 992 - return true; 993 - }} 994 - /> 995 - {/if} 996 - </div> 997 - </Navbar> 998 - {/if} 758 + <EditBar 759 + {data} 760 + bind:linkValue 761 + bind:isSaving 762 + bind:showingMobileView 763 + bind:showSettings 764 + {newCard} 765 + {addLink} 766 + {save} 767 + {handleImageInputChange} 768 + {handleVideoInputChange} 769 + /> 999 770 1000 771 <Toaster /> 1001 772 </Context>

+2 -1

src/lib/website/Profile.svelte

··· 6 6 import { env } from '$env/dynamic/public'; 7 7 import type { WebsiteData } from '$lib/types'; 8 8 import { getDescription, getName } from '$lib/helper'; 9 + import { page } from '$app/state'; 9 10 10 11 let { 11 12 data, ··· 51 52 52 53 {#if showEditButton && client.isLoggedIn && client.profile?.did === data.did} 53 54 <div> 54 - <Button href="{env.PUBLIC_IS_SELFHOSTED ? '' : client.profile?.handle}/edit" class="mt-2"> 55 + <Button href="{page.url}/edit" class="mt-2"> 55 56 <svg 56 57 xmlns="http://www.w3.org/2000/svg" 57 58 fill="none"

+1 -1

src/lib/website/Settings.svelte

··· 64 64 for="hide-profile" 65 65 class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70" 66 66 > 67 - Hide Profile 67 + Hide Profile Section 68 68 </Label> 69 69 </div> 70 70

+3

static/robots.txt

··· 1 + # allow crawling everything by default 2 + User-agent: * 3 + Disallow: