+62

src/lib/cards/media/PhotoGalleryCard/CreateGrainGalleryCardModal.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { Alert, Button, Input, Modal, Subheading } from '@foxui/core'; 3 3 + import type { CreationModalComponentProps } from '../../types'; 4 4 + import { parseGrainGalleryUrl } from './helpers'; 5 5 + import { resolveHandle } from '$lib/atproto'; 6 6 + import type { Handle } from '@atcute/lexicons'; 7 7 + 8 8 + let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props(); 9 9 + 10 10 + let isValidating = $state(false); 11 11 + let errorMessage = $state(''); 12 12 + 13 13 + async function checkUrl() { 14 14 + errorMessage = ''; 15 15 + isValidating = true; 16 16 + 17 17 + try { 18 18 + const parsed = parseGrainGalleryUrl(item.cardData.href); 19 19 + if (!parsed) { 20 20 + errorMessage = 'Please enter a valid grain.social gallery URL'; 21 21 + return false; 22 22 + } 23 23 + 24 24 + const did = await resolveHandle({ handle: parsed.handle as Handle }); 25 25 + if (!did) { 26 26 + errorMessage = 'Could not resolve handle'; 27 27 + return false; 28 28 + } 29 29 + 30 30 + item.cardData.galleryUri = `at://${did}/social.grain.gallery/${parsed.rkey}`; 31 31 + return true; 32 32 + } finally { 33 33 + isValidating = false; 34 34 + } 35 35 + } 36 36 + </script> 37 37 + 38 38 + <Modal open={true} closeButton={false}> 39 39 + <form 40 40 + onsubmit={async () => { 41 41 + if (await checkUrl()) oncreate(); 42 42 + }} 43 43 + class="flex flex-col gap-2" 44 44 + > 45 45 + <Subheading>Enter a grain.social gallery URL</Subheading> 46 46 + <Input 47 47 + bind:value={item.cardData.href} 48 48 + placeholder="https://grain.social/profile/handle/gallery/..." 49 49 + /> 50 50 + 51 51 + {#if errorMessage} 52 52 + <Alert type="error" title="Invalid URL"><span>{errorMessage}</span></Alert> 53 53 + {/if} 54 54 + 55 55 + <div class="mt-4 flex justify-end gap-2"> 56 56 + <Button onclick={oncancel} variant="ghost">Cancel</Button> 57 57 + <Button type="submit" disabled={isValidating}> 58 58 + {isValidating ? 'Creating...' : 'Create'} 59 59 + </Button> 60 60 + </div> 61 61 + </form> 62 62 + </Modal>

+11 -18

src/lib/cards/media/PhotoGalleryCard/PhotoGalleryCard.svelte

··· 1 1 <script lang="ts"> 2 2 import type { Item } from '$lib/types'; 3 3 import { onMount } from 'svelte'; 4 4 - import { 5 5 - getAdditionalUserData, 6 6 - getDidContext, 7 7 - getHandleContext, 8 8 - getIsMobile 9 9 - } from '$lib/website/context'; 10 10 - import { CardDefinitionsByType } from '../..'; 4 4 + import { getAdditionalUserData, getIsMobile } from '$lib/website/context'; 11 5 import { getCDNImageBlobUrl, parseUri } from '$lib/atproto'; 6 6 + import { loadGrainGalleryData } from './helpers'; 12 7 13 8 import { ImageMasonry } from '@foxui/visual'; 9 9 + import { openImageViewer } from '$lib/components/image-viewer/imageViewer.svelte'; 14 10 15 11 interface PhotoItem { 16 12 uri: string; ··· 29 25 (data[item.cardType] as Record<string, PhotoItem[]> | undefined)?.[item.cardData.galleryUri] 30 26 ); 31 27 32 32 - let did = getDidContext(); 33 33 - let handle = getHandleContext(); 34 34 - 35 28 onMount(async () => { 36 29 if (!feed) { 37 37 - feed = ( 38 38 - (await CardDefinitionsByType[item.cardType]?.loadData?.([item], { 39 39 - did, 40 40 - handle 41 41 - })) as Record<string, PhotoItem[]> | undefined 42 42 - )?.[item.cardData.galleryUri]; 30 30 + feed = ((await loadGrainGalleryData([item])) as Record<string, PhotoItem[]> | undefined)?.[ 31 31 + item.cardData.galleryUri 32 32 + ]; 43 33 44 34 data[item.cardType] = feed; 45 35 } ··· 52 42 }) 53 43 .map((i: PhotoItem) => { 54 44 const item = parseUri(i.uri); 45 45 + const src = getCDNImageBlobUrl({ did: item?.repo, blob: i.value.photo }); 55 46 return { 56 56 - src: getCDNImageBlobUrl({ did: item?.repo, blob: i.value.photo }), 47 47 + src, 57 48 name: '', 58 49 width: i.value.aspectRatio.width, 59 50 height: i.value.aspectRatio.height, 60 60 - position: i.value.position ?? 0 51 51 + position: i.value.position ?? 0, 52 52 + onclick: src ? () => openImageViewer(src) : undefined 61 53 }; 62 54 }) 63 55 .filter((i) => i.src !== undefined) || []) as { ··· 66 58 width: number; 67 59 height: number; 68 60 position: number; 61 61 + onclick?: () => void; 69 62 }[] 70 63 ); 71 64

+78

src/lib/cards/media/PhotoGalleryCard/helpers.ts

··· 1 1 + import { getRecord, listRecords, parseUri, resolveHandle } from '$lib/atproto'; 2 2 + import type { Did, Handle } from '@atcute/lexicons'; 3 3 + import { isDid } from '@atcute/lexicons/syntax'; 4 4 + 5 5 + interface GalleryItem { 6 6 + value: { 7 7 + gallery: string; 8 8 + item: string; 9 9 + position?: number; 10 10 + }; 11 11 + } 12 12 + 13 13 + // Parse grain.social gallery URLs 14 14 + // https://grain.social/profile/atproto.boston/gallery/3megtiuwqs62w 15 15 + export function parseGrainGalleryUrl(url: string): { handle: string; rkey: string } | null { 16 16 + const match = url.match(/grain\.social\/profile\/([^/]+)\/gallery\/([A-Za-z0-9]+)/); 17 17 + if (!match) return null; 18 18 + return { handle: match[1], rkey: match[2] }; 19 19 + } 20 20 + 21 21 + export async function loadGrainGalleryData(items: { cardData: Record<string, unknown> }[]) { 22 22 + const itemsData: Record<string, unknown[]> = {}; 23 23 + 24 24 + const galleryItems: Record<string, GalleryItem[] | undefined> = { 25 25 + 'social.grain.gallery.item': undefined 26 26 + }; 27 27 + 28 28 + for (const item of items) { 29 29 + if (!item.cardData.galleryUri) continue; 30 30 + 31 31 + const galleryUri = item.cardData.galleryUri as string; 32 32 + const parsedUri = parseUri(galleryUri); 33 33 + 34 34 + if (parsedUri?.collection === 'social.grain.gallery') { 35 35 + let repo = parsedUri.repo; 36 36 + 37 37 + // Resolve handle to DID if needed 38 38 + if (!isDid(repo)) { 39 39 + const did = await resolveHandle({ handle: repo as Handle }); 40 40 + if (!did) continue; 41 41 + repo = did; 42 42 + } 43 43 + 44 44 + // Construct DID-based URI for filtering (PDS records use DID-based URIs) 45 45 + const didBasedGalleryUri = `at://${repo}/social.grain.gallery/${parsedUri.rkey}`; 46 46 + 47 47 + const itemCollection = 'social.grain.gallery.item'; 48 48 + 49 49 + if (!galleryItems[itemCollection]) { 50 50 + galleryItems[itemCollection] = (await listRecords({ 51 51 + did: repo as Did, 52 52 + collection: itemCollection 53 53 + })) as unknown as GalleryItem[]; 54 54 + } 55 55 + 56 56 + const galleryItemsList = galleryItems['social.grain.gallery.item']; 57 57 + if (!galleryItemsList) continue; 58 58 + 59 59 + const images = galleryItemsList 60 60 + .filter((i) => i.value.gallery === didBasedGalleryUri) 61 61 + .map(async (i) => { 62 62 + const itemData = parseUri(i.value.item); 63 63 + if (!itemData) return null; 64 64 + const record = await getRecord({ 65 65 + did: itemData.repo as Did, 66 66 + collection: itemData.collection!, 67 67 + rkey: itemData.rkey 68 68 + }); 69 69 + return { ...record, value: { ...record.value, ...i.value } }; 70 70 + }); 71 71 + 72 72 + // Store under original key so the component can look it up 73 73 + itemsData[galleryUri] = await Promise.all(images); 74 74 + } 75 75 + } 76 76 + 77 77 + return itemsData; 78 78 + }

+28 -53

src/lib/cards/media/PhotoGalleryCard/index.ts

··· 1 1 import type { CardDefinition } from '../../types'; 2 2 - import { getRecord, listRecords, parseUri } from '$lib/atproto'; 3 2 import PhotoGalleryCard from './PhotoGalleryCard.svelte'; 4 4 - import type { Did } from '@atcute/lexicons'; 3 3 + import CreateGrainGalleryCardModal from './CreateGrainGalleryCardModal.svelte'; 4 4 + import { parseGrainGalleryUrl, loadGrainGalleryData } from './helpers'; 5 5 + 6 6 + export { parseGrainGalleryUrl, loadGrainGalleryData }; 5 7 6 6 - interface GalleryItem { 7 7 - value: { 8 8 - gallery: string; 9 9 - item: string; 10 10 - position?: number; 11 11 - }; 12 12 - } 8 8 + const cardType = 'grain-gallery'; 13 9 14 10 export const PhotoGalleryCardDefinition = { 15 15 - type: 'photoGallery', 11 11 + type: cardType, 16 12 contentComponent: PhotoGalleryCard, 13 13 + creationModalComponent: CreateGrainGalleryCardModal, 17 14 createNew: (card) => { 18 18 - // random grain.social url for testing 19 19 - card.cardData.galleryUri = 20 20 - 'at://did:plc:tas6hj2xjrqben5653v5kohk/social.grain.gallery/3mclhsljs6h2w'; 21 21 - 15 15 + card.cardData = {}; 22 16 card.w = 4; 23 17 card.mobileW = 8; 24 18 card.h = 3; 25 19 card.mobileH = 6; 26 20 }, 27 27 - loadData: async (items) => { 28 28 - const itemsData: Record<string, unknown[]> = {}; 29 21 30 30 - const galleryItems: Record<string, GalleryItem[] | undefined> = { 31 31 - 'social.grain.gallery.item': undefined 32 32 - }; 22 22 + onUrlHandler: (url, item) => { 23 23 + const parsed = parseGrainGalleryUrl(url); 24 24 + if (!parsed) return null; 33 25 34 34 - for (const item of items) { 35 35 - if (!item.cardData.galleryUri) continue; 26 26 + // Store with handle — loadData will resolve to DID 27 27 + item.cardData.galleryUri = `at://${parsed.handle}/social.grain.gallery/${parsed.rkey}`; 36 28 37 37 - const parsedUri = parseUri(item.cardData.galleryUri); 29 29 + item.w = 4; 30 30 + item.mobileW = 8; 31 31 + item.h = 3; 32 32 + item.mobileH = 6; 38 33 39 39 - if (parsedUri?.collection === 'social.grain.gallery') { 40 40 - const itemCollection = 'social.grain.gallery.item'; 34 34 + return item; 35 35 + }, 41 36 42 42 - if (!galleryItems[itemCollection]) { 43 43 - galleryItems[itemCollection] = (await listRecords({ 44 44 - did: parsedUri.repo as Did, 45 45 - collection: itemCollection 46 46 - })) as unknown as GalleryItem[]; 47 47 - } 48 48 - 49 49 - const galleryItemsList = galleryItems['social.grain.gallery.item']; 50 50 - if (!galleryItemsList) continue; 37 37 + urlHandlerPriority: 2, 51 38 52 52 - const images = galleryItemsList 53 53 - .filter((i) => i.value.gallery === item.cardData.galleryUri) 54 54 - .map(async (i) => { 55 55 - const itemData = parseUri(i.value.item); 56 56 - if (!itemData) return null; 57 57 - const record = await getRecord({ 58 58 - did: itemData.repo as Did, 59 59 - collection: itemData.collection!, 60 60 - rkey: itemData.rkey 61 61 - }); 62 62 - return { ...record, value: { ...record.value, ...i.value } }; 63 63 - }); 39 39 + loadData: async (items) => loadGrainGalleryData(items), 64 40 65 65 - itemsData[item.cardData.galleryUri] = await Promise.all(images); 66 66 - } 67 67 - } 41 41 + canHaveLabel: true, 68 42 69 69 - return itemsData; 70 70 - }, 71 71 - keywords: ['album', 'photos', 'slideshow', 'images', 'carousel'], 72 72 - minW: 4 73 73 - } as CardDefinition & { type: 'photoGallery' }; 43 43 + name: 'Grain Gallery', 44 44 + keywords: ['grain', 'gallery', 'album', 'photos', 'slideshow', 'images', 'carousel'], 45 45 + groups: ['Media'], 46 46 + minW: 4, 47 47 + icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" 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.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21ZM16.5 8.25a1.125 1.125 0 1 1-2.25 0 1.125 1.125 0 0 1 2.25 0Z" /></svg>` 48 48 + } as CardDefinition & { type: typeof cardType };

+40

src/lib/components/image-viewer/ImageViewerModal.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { fade } from 'svelte/transition'; 3 3 + 4 4 + let { open = $bindable(false), src = '' }: { open: boolean; src: string } = $props(); 5 5 + 6 6 + function close() { 7 7 + open = false; 8 8 + } 9 9 + 10 10 + function onkeydown(e: KeyboardEvent) { 11 11 + if (e.key === 'Escape' && open) { 12 12 + close(); 13 13 + } 14 14 + } 15 15 + </script> 16 16 + 17 17 + <svelte:window {onkeydown} /> 18 18 + 19 19 + {#if open} 20 20 + <!-- svelte-ignore a11y_interactive_supports_focus --> 21 21 + <div 22 22 + class="fixed inset-0 z-50 flex items-center justify-center bg-black/90" 23 23 + transition:fade={{ duration: 150 }} 24 24 + onclick={close} 25 25 + onkeydown={(e) => { 26 26 + if (e.key === 'Escape') close(); 27 27 + }} 28 28 + role="dialog" 29 29 + aria-modal="true" 30 30 + > 31 31 + <!-- svelte-ignore a11y_no_noninteractive_element_interactions --> 32 32 + <img 33 33 + {src} 34 34 + alt="" 35 35 + class="max-h-[90vh] max-w-[90vw] object-contain" 36 36 + onclick={(e) => e.stopPropagation()} 37 37 + onkeydown={(e) => e.stopPropagation()} 38 38 + /> 39 39 + </div> 40 40 + {/if}

+23

src/lib/components/image-viewer/ImageViewerProvider.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { onMount, onDestroy } from 'svelte'; 3 3 + import ImageViewerModal from './ImageViewerModal.svelte'; 4 4 + import { registerImageViewer, unregisterImageViewer } from './imageViewer.svelte'; 5 5 + 6 6 + let open = $state(false); 7 7 + let src = $state(''); 8 8 + 9 9 + function show(newSrc: string) { 10 10 + src = newSrc; 11 11 + open = true; 12 12 + } 13 13 + 14 14 + onMount(() => { 15 15 + registerImageViewer(show); 16 16 + }); 17 17 + 18 18 + onDestroy(() => { 19 19 + unregisterImageViewer(); 20 20 + }); 21 21 + </script> 22 22 + 23 23 + <ImageViewerModal bind:open {src} />

+14

src/lib/components/image-viewer/imageViewer.svelte.ts

··· 1 1 + // Global state for fullscreen image viewer 2 2 + let openFn: ((src: string) => void) | null = null; 3 3 + 4 4 + export function registerImageViewer(fn: (src: string) => void) { 5 5 + openFn = fn; 6 6 + } 7 7 + 8 8 + export function unregisterImageViewer() { 9 9 + openFn = null; 10 10 + } 11 11 + 12 12 + export function openImageViewer(src: string) { 13 13 + openFn?.(src); 14 14 + }

+2 -273

src/lib/website/EditableWebsite.svelte

··· 34 34 import { launchConfetti } from '@foxui/visual'; 35 35 import Controls from './Controls.svelte'; 36 36 import CardCommand from '$lib/components/card-command/CardCommand.svelte'; 37 37 + import ImageViewerProvider from '$lib/components/image-viewer/ImageViewerProvider.svelte'; 37 38 import { SvelteMap } from 'svelte/reactivity'; 38 39 import { 39 40 fixCollisions, ··· 244 245 } 245 246 } 246 247 247 247 - function addAllCardTypes() { 248 248 - const groupOrder = ['Core', 'Social', 'Media', 'Content', 'Visual', 'Utilities', 'Games']; 249 249 - const grouped = new SvelteMap<string, CardDefinition[]>(); 250 250 - 251 251 - for (const def of AllCardDefinitions) { 252 252 - if (!def.name) continue; 253 253 - const group = def.groups?.[0] ?? 'Other'; 254 254 - if (!grouped.has(group)) grouped.set(group, []); 255 255 - grouped.get(group)!.push(def); 256 256 - } 257 257 - 258 258 - // Sort groups by predefined order, unknowns at end 259 259 - const sortedGroups = [...grouped.keys()].sort((a, b) => { 260 260 - const ai = groupOrder.indexOf(a); 261 261 - const bi = groupOrder.indexOf(b); 262 262 - return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi); 263 263 - }); 264 264 - 265 265 - // Sample data for cards that would otherwise render empty 266 266 - const sampleData: Record<string, Record<string, unknown>> = { 267 267 - text: { text: 'The quick brown fox jumps over the lazy dog. This is a sample text card.' }, 268 268 - link: { 269 269 - href: 'https://bsky.app', 270 270 - title: 'Bluesky', 271 271 - domain: 'bsky.app', 272 272 - description: 'Social networking that gives you choice', 273 273 - hasFetched: true 274 274 - }, 275 275 - image: { 276 276 - image: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=600', 277 277 - alt: 'Mountain landscape' 278 278 - }, 279 279 - button: { text: 'Visit Bluesky', href: 'https://bsky.app' }, 280 280 - bigsocial: { platform: 'bluesky', href: 'https://bsky.app', color: '0085ff' }, 281 281 - blueskyPost: { 282 282 - uri: 'at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.post/3jt64kgkbbs2y', 283 283 - href: 'https://bsky.app/profile/bsky.app/post/3jt64kgkbbs2y' 284 284 - }, 285 285 - blueskyProfile: { 286 286 - handle: 'bsky.app', 287 287 - displayName: 'Bluesky', 288 288 - avatar: 289 289 - 'https://cdn.bsky.app/img/avatar/plain/did:plc:z72i7hdynmk6r22z27h6tvur/bafkreihagr2cmvl2jt4mgx3sppwe2it3fwolkrbtjrhcnwjk4pcnbaq53m@jpeg' 290 290 - }, 291 291 - blueskyMedia: {}, 292 292 - latestPost: {}, 293 293 - youtubeVideo: { 294 294 - youtubeId: 'dQw4w9WgXcQ', 295 295 - poster: 'https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg', 296 296 - href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', 297 297 - showInline: true 298 298 - }, 299 299 - 'spotify-list-embed': { 300 300 - spotifyType: 'album', 301 301 - spotifyId: '4aawyAB9vmqN3uQ7FjRGTy', 302 302 - href: 'https://open.spotify.com/album/4aawyAB9vmqN3uQ7FjRGTy' 303 303 - }, 304 304 - latestLivestream: {}, 305 305 - livestreamEmbed: { 306 306 - href: 'https://stream.place/', 307 307 - embed: 'https://stream.place/embed/' 308 308 - }, 309 309 - mapLocation: { lat: 48.8584, lon: 2.2945, zoom: 13, name: 'Eiffel Tower, Paris' }, 310 310 - gif: { url: 'https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.mp4', alt: 'Cat typing' }, 311 311 - event: { 312 312 - uri: 'at://did:plc:257wekqxg4hyapkq6k47igmp/community.lexicon.calendar.event/3mcsoqzy7gm2q' 313 313 - }, 314 314 - guestbook: { label: 'Guestbook' }, 315 315 - githubProfile: { user: 'sveltejs', href: 'https://github.com/sveltejs' }, 316 316 - photoGallery: { 317 317 - galleryUri: 'at://did:plc:tas6hj2xjrqben5653v5kohk/social.grain.gallery/3mclhsljs6h2w' 318 318 - }, 319 319 - atprotocollections: {}, 320 320 - publicationList: {}, 321 321 - recentPopfeedReviews: {}, 322 322 - recentTealFMPlays: {}, 323 323 - statusphere: { emoji: '✨' }, 324 324 - vcard: {}, 325 325 - 'fluid-text': { text: 'Hello World' }, 326 326 - draw: { strokesJson: '[]', viewBox: '', strokeWidth: 1, locked: true }, 327 327 - clock: {}, 328 328 - countdown: { targetDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString() }, 329 329 - timer: {}, 330 330 - 'dino-game': {}, 331 331 - tetris: {}, 332 332 - updatedBlentos: {} 333 333 - }; 334 334 - 335 335 - // Labels for cards that support canHaveLabel 336 336 - const sampleLabels: Record<string, string> = { 337 337 - image: 'Mountain Landscape', 338 338 - mapLocation: 'Eiffel Tower', 339 339 - gif: 'Cat Typing', 340 340 - bigsocial: 'Bluesky', 341 341 - guestbook: 'Guestbook', 342 342 - statusphere: 'My Status', 343 343 - recentPopfeedReviews: 'My Reviews', 344 344 - recentTealFMPlays: 'Recently Played', 345 345 - clock: 'Local Time', 346 346 - countdown: 'Launch Day', 347 347 - timer: 'Timer', 348 348 - 'dino-game': 'Dino Game', 349 349 - tetris: 'Tetris', 350 350 - blueskyMedia: 'Bluesky Media' 351 351 - }; 352 352 - 353 353 - const newItems: Item[] = []; 354 354 - let cursorY = 0; 355 355 - let mobileCursorY = 0; 356 356 - 357 357 - for (const group of sortedGroups) { 358 358 - const defs = grouped.get(group)!; 359 359 - 360 360 - // Add a section heading for the group 361 361 - const heading = createEmptyCard(data.page); 362 362 - heading.cardType = 'section'; 363 363 - heading.cardData = { text: group, verticalAlign: 'bottom', textSize: 1 }; 364 364 - heading.w = COLUMNS; 365 365 - heading.h = 1; 366 366 - heading.x = 0; 367 367 - heading.y = cursorY; 368 368 - heading.mobileW = COLUMNS; 369 369 - heading.mobileH = 2; 370 370 - heading.mobileX = 0; 371 371 - heading.mobileY = mobileCursorY; 372 372 - newItems.push(heading); 373 373 - cursorY += 1; 374 374 - mobileCursorY += 2; 375 375 - 376 376 - // Place cards in rows 377 377 - let rowX = 0; 378 378 - let rowMaxH = 0; 379 379 - let mobileRowX = 0; 380 380 - let mobileRowMaxH = 0; 381 381 - 382 382 - for (const def of defs) { 383 383 - if (def.type === 'section' || def.type === 'embed') continue; 384 384 - 385 385 - const item = createEmptyCard(data.page); 386 386 - item.cardType = def.type; 387 387 - item.cardData = {}; 388 388 - def.createNew?.(item); 389 389 - 390 390 - // Merge in sample data (without overwriting createNew defaults) 391 391 - const extra = sampleData[def.type]; 392 392 - if (extra) { 393 393 - item.cardData = { ...item.cardData, ...extra }; 394 394 - } 395 395 - 396 396 - // Set item-level color for cards that need it 397 397 - if (def.type === 'button') { 398 398 - item.color = 'transparent'; 399 399 - } 400 400 - 401 401 - // Add label if card supports it 402 402 - const label = sampleLabels[def.type]; 403 403 - if (label && def.canHaveLabel) { 404 404 - item.cardData.label = label; 405 405 - } 406 406 - 407 407 - // Desktop layout 408 408 - if (rowX + item.w > COLUMNS) { 409 409 - cursorY += rowMaxH; 410 410 - rowX = 0; 411 411 - rowMaxH = 0; 412 412 - } 413 413 - item.x = rowX; 414 414 - item.y = cursorY; 415 415 - rowX += item.w; 416 416 - rowMaxH = Math.max(rowMaxH, item.h); 417 417 - 418 418 - // Mobile layout 419 419 - if (mobileRowX + item.mobileW > COLUMNS) { 420 420 - mobileCursorY += mobileRowMaxH; 421 421 - mobileRowX = 0; 422 422 - mobileRowMaxH = 0; 423 423 - } 424 424 - item.mobileX = mobileRowX; 425 425 - item.mobileY = mobileCursorY; 426 426 - mobileRowX += item.mobileW; 427 427 - mobileRowMaxH = Math.max(mobileRowMaxH, item.mobileH); 428 428 - 429 429 - newItems.push(item); 430 430 - } 431 431 - 432 432 - // Move cursor past last row 433 433 - cursorY += rowMaxH; 434 434 - mobileCursorY += mobileRowMaxH; 435 435 - } 436 436 - 437 437 - items = newItems; 438 438 - onLayoutChanged(); 439 439 - } 440 440 - 441 441 - let copyInput = $state(''); 442 442 - let isCopying = $state(false); 443 443 - 444 444 - async function copyPageFrom() { 445 445 - const input = copyInput.trim(); 446 446 - if (!input) return; 447 447 - 448 448 - isCopying = true; 449 449 - try { 450 450 - // Parse "handle" or "handle/page" 451 451 - const parts = input.split('/'); 452 452 - const handle = parts[0]; 453 453 - const pageName = parts[1] || 'self'; 454 454 - 455 455 - const did = await resolveHandle({ handle: handle as `${string}.${string}` }); 456 456 - if (!did) throw new Error('Could not resolve handle'); 457 457 - 458 458 - const records = await listRecords({ did, collection: 'app.blento.card' }); 459 459 - const targetPage = 'blento.' + pageName; 460 460 - 461 461 - const copiedCards: Item[] = records 462 462 - .map((r) => ({ ...r.value }) as Item) 463 463 - .filter((card) => { 464 464 - // v0/v1 cards without page field belong to blento.self 465 465 - if (!card.page) return targetPage === 'blento.self'; 466 466 - return card.page === targetPage; 467 467 - }) 468 468 - .map((card) => { 469 469 - // Apply v0→v1 migration (coords were halved in old format) 470 470 - if (!card.version) { 471 471 - card.x *= 2; 472 472 - card.y *= 2; 473 473 - card.h *= 2; 474 474 - card.w *= 2; 475 475 - card.mobileX *= 2; 476 476 - card.mobileY *= 2; 477 477 - card.mobileH *= 2; 478 478 - card.mobileW *= 2; 479 479 - card.version = 1; 480 480 - } 481 481 - 482 482 - // Convert blob refs to CDN URLs using source DID 483 483 - if (card.cardData) { 484 484 - for (const key of Object.keys(card.cardData)) { 485 485 - const val = card.cardData[key]; 486 486 - if (val && typeof val === 'object' && val.$type === 'blob') { 487 487 - const url = getCDNImageBlobUrl({ did, blob: val }); 488 488 - if (url) card.cardData[key] = url; 489 489 - } 490 490 - } 491 491 - } 492 492 - 493 493 - // Regenerate ID and assign to current page 494 494 - card.id = TID.now(); 495 495 - card.page = data.page; 496 496 - return card; 497 497 - }); 498 498 - 499 499 - if (copiedCards.length === 0) { 500 500 - toast.error('No cards found on that page'); 501 501 - return; 502 502 - } 503 503 - 504 504 - fixAllCollisions(copiedCards, false); 505 505 - fixAllCollisions(copiedCards, true); 506 506 - compactItems(copiedCards, false); 507 507 - compactItems(copiedCards, true); 508 508 - 509 509 - items = copiedCards; 510 510 - onLayoutChanged(); 511 511 - toast.success(`Copied ${copiedCards.length} cards from ${handle}`); 512 512 - } catch (e) { 513 513 - console.error('Failed to copy page:', e); 514 514 - toast.error('Failed to copy page'); 515 515 - } finally { 516 516 - isCopying = false; 517 517 - } 518 518 - } 519 519 - 520 248 let linkValue = $state(''); 521 249 522 250 function addLink(url: string, specificCardDef?: CardDefinition) { ··· 769 497 <Account {data} /> 770 498 771 499 <Context {data} isEditing={true}> 500 500 + <ImageViewerProvider /> 772 501 <CardCommand 773 502 bind:open={showCardCommand} 774 503 onselect={(cardDef: CardDefinition) => {

+2

src/lib/website/Website.svelte

··· 18 18 import Head from './Head.svelte'; 19 19 import type { Did, Handle } from '@atcute/lexicons'; 20 20 import QRModalProvider from '$lib/components/qr/QRModalProvider.svelte'; 21 21 + import ImageViewerProvider from '$lib/components/image-viewer/ImageViewerProvider.svelte'; 21 22 import EmptyState from './EmptyState.svelte'; 22 23 import FloatingEditButton from './FloatingEditButton.svelte'; 23 24 import { user } from '$lib/atproto'; ··· 67 68 68 69 <Context {data}> 69 70 <QRModalProvider /> 71 71 + <ImageViewerProvider /> 70 72 <div class="@container/wrapper relative w-full"> 71 73 {#if !getHideProfileSection(data)} 72 74 <Profile {data} hideBlento={showFloatingButton} />