From 0a5e38047000ec105391f1d0468f690d5348f672 Mon Sep 17 00:00:00 2001 From: Florian <45694132+flo-bit@users.noreply.github.com> Date: Fri, 6 Mar 2026 17:34:05 +0100 Subject: [PATCH] cards as embeds --- src/lib/cards/_base/BaseCard/BaseCard.svelte | 22 +- .../core/LinkCard/EditingLinkCard.svelte | 20 +- src/lib/cards/core/LinkCard/LinkCard.svelte | 104 ++++++-- .../core/LinkCard/LinkCardSettings.svelte | 4 +- .../LivestreamCard/LivestreamCard.svelte | 27 +- .../PhotoGalleryCard/PhotoGalleryCard.svelte | 33 ++- .../RockskyPlaysCard/RockskyPlaysCard.svelte | 1 + .../TealFMPlaysCard/TealFMPlaysCard.svelte | 3 +- .../cards/social/EventCard/EventCard.svelte | 53 +++- .../social/FriendsCard/FriendsCard.svelte | 61 +++-- .../GitHubProfileCard.svelte | 52 +++- .../UpcomingEventsCard.svelte | 8 +- src/lib/website/EmbeddedCard.svelte | 177 ++++++++++++ src/lib/website/load.ts | 252 ++++++++++++++---- src/routes/+layout.svelte | 7 +- .../card/[rkey]/+page.server.ts | 16 ++ .../[[actor=actor]]/card/[rkey]/+page.svelte | 7 + .../embed/type/[type]/+page.server.ts | 59 ++++ .../embed/type/[type]/+page.svelte | 7 + 19 files changed, 750 insertions(+), 163 deletions(-) create mode 100644 src/lib/website/EmbeddedCard.svelte create mode 100644 src/routes/[[actor=actor]]/card/[rkey]/+page.server.ts create mode 100644 src/routes/[[actor=actor]]/card/[rkey]/+page.svelte create mode 100644 src/routes/[[actor=actor]]/embed/type/[type]/+page.server.ts create mode 100644 src/routes/[[actor=actor]]/embed/type/[type]/+page.svelte diff --git a/src/lib/cards/_base/BaseCard/BaseCard.svelte b/src/lib/cards/_base/BaseCard/BaseCard.svelte index 3da66ef5..e179c47d 100644 --- a/src/lib/cards/_base/BaseCard/BaseCard.svelte +++ b/src/lib/cards/_base/BaseCard/BaseCard.svelte @@ -18,6 +18,7 @@ isEditing?: boolean; showOutline?: boolean; locked?: boolean; + fillPage?: boolean; } & WithElementRef>; let { @@ -28,6 +29,7 @@ controls, showOutline, locked = false, + fillPage = false, class: className, ...rest }: BaseCardProps = $props(); @@ -38,11 +40,14 @@
@@ -84,14 +90,22 @@ diff --git a/src/lib/cards/core/LinkCard/LinkCard.svelte b/src/lib/cards/core/LinkCard/LinkCard.svelte index aff1dba1..6e5ac783 100644 --- a/src/lib/cards/core/LinkCard/LinkCard.svelte +++ b/src/lib/cards/core/LinkCard/LinkCard.svelte @@ -1,21 +1,18 @@ {#if item.cardData.showBackgroundImage && item.cardData.image} -
+
{item.cardData.domain}
-
+
{item.cardData.title}
{#if item.cardData.href && !isEditing} @@ -73,8 +65,8 @@ {/if}
{:else} -
-
+
+
@@ -102,12 +94,7 @@ {/if}
-
+
{item.cardData.title}
@@ -118,12 +105,14 @@
- {#if browser && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4)) && item.cardData.image} - + {#if item.cardData.image} +
+ +
{/if} {#if item.cardData.href && !isEditing} {/if} + + diff --git a/src/lib/cards/core/LinkCard/LinkCardSettings.svelte b/src/lib/cards/core/LinkCard/LinkCardSettings.svelte index 8c72b0c4..e7ef5532 100644 --- a/src/lib/cards/core/LinkCard/LinkCardSettings.svelte +++ b/src/lib/cards/core/LinkCard/LinkCardSettings.svelte @@ -48,7 +48,7 @@ -
+
Boolean(item.cardData.showBackgroundImage), @@ -61,7 +61,7 @@ diff --git a/src/lib/cards/media/LivestreamCard/LivestreamCard.svelte b/src/lib/cards/media/LivestreamCard/LivestreamCard.svelte index 0e8c034e..fc0b90be 100644 --- a/src/lib/cards/media/LivestreamCard/LivestreamCard.svelte +++ b/src/lib/cards/media/LivestreamCard/LivestreamCard.svelte @@ -1,12 +1,7 @@ -
+
{#if latestLivestream}
- {#if browser && ((isMobile() && item.mobileH >= 7) || (!isMobile() && item.h >= 4)) && latestLivestream?.thumb} + {#if browser && latestLivestream?.thumb} @@ -112,3 +105,15 @@
Looking for the latest stream
{/if}
+ + diff --git a/src/lib/cards/media/PhotoGalleryCard/PhotoGalleryCard.svelte b/src/lib/cards/media/PhotoGalleryCard/PhotoGalleryCard.svelte index feddca6f..eaed8c72 100644 --- a/src/lib/cards/media/PhotoGalleryCard/PhotoGalleryCard.svelte +++ b/src/lib/cards/media/PhotoGalleryCard/PhotoGalleryCard.svelte @@ -1,7 +1,7 @@ -
- 4 ? 3 : 2} - /> +
+
+ +
+
+ +
+ + diff --git a/src/lib/cards/media/RockskyPlaysCard/RockskyPlaysCard.svelte b/src/lib/cards/media/RockskyPlaysCard/RockskyPlaysCard.svelte index 786017c7..0bfbd1c9 100644 --- a/src/lib/cards/media/RockskyPlaysCard/RockskyPlaysCard.svelte +++ b/src/lib/cards/media/RockskyPlaysCard/RockskyPlaysCard.svelte @@ -8,6 +8,7 @@ interface Artist { artist: string; + name?: string; } interface PlayValue { diff --git a/src/lib/cards/media/TealFMPlaysCard/TealFMPlaysCard.svelte b/src/lib/cards/media/TealFMPlaysCard/TealFMPlaysCard.svelte index 70858c24..39bc405e 100644 --- a/src/lib/cards/media/TealFMPlaysCard/TealFMPlaysCard.svelte +++ b/src/lib/cards/media/TealFMPlaysCard/TealFMPlaysCard.svelte @@ -12,6 +12,7 @@ interface PlayValue { releaseMbId?: string; + releaseMbid?: string; trackName: string; playedTime?: string; artists?: Artist[]; @@ -52,7 +53,7 @@ {#snippet musicItem(play: Play)}
- +
diff --git a/src/lib/cards/social/EventCard/EventCard.svelte b/src/lib/cards/social/EventCard/EventCard.svelte index ac235374..2de33130 100644 --- a/src/lib/cards/social/EventCard/EventCard.svelte +++ b/src/lib/cards/social/EventCard/EventCard.svelte @@ -1,7 +1,7 @@ -
+
{#if eventData}
@@ -142,9 +139,9 @@
- {#if isMobile() ? item.mobileW > 4 : item.w > 2} - - {/if} +
+ +

@@ -203,8 +200,10 @@

{/if} - {#if eventData.description && ((isMobile() && item.mobileH >= 5) || (!isMobile() && item.h >= 3))} -

+ {#if eventData.description} +

{eventData.description}

{/if} @@ -213,7 +212,11 @@ {#if showImage} {@const img = headerImage()} {#if img} - {img.alt} + {img.alt} {/if} {/if} @@ -239,3 +242,29 @@
{/if}
+ + diff --git a/src/lib/cards/social/FriendsCard/FriendsCard.svelte b/src/lib/cards/social/FriendsCard/FriendsCard.svelte index c80edcda..a29b7e73 100644 --- a/src/lib/cards/social/FriendsCard/FriendsCard.svelte +++ b/src/lib/cards/social/FriendsCard/FriendsCard.svelte @@ -1,7 +1,7 @@ -
+
@@ -56,22 +54,23 @@
- {#if isMobile() ? item.mobileW > 4 : item.w > 2} +
Follow - {/if} +
{#if contributionsData && browser}
- 5 : item.h > 2} - /> +
+ +
+
+ +
{/if}
@@ -94,3 +93,32 @@ Show on github {/if} + + diff --git a/src/lib/cards/social/UpcomingEventsCard/UpcomingEventsCard.svelte b/src/lib/cards/social/UpcomingEventsCard/UpcomingEventsCard.svelte index 362960d9..45fd6f45 100644 --- a/src/lib/cards/social/UpcomingEventsCard/UpcomingEventsCard.svelte +++ b/src/lib/cards/social/UpcomingEventsCard/UpcomingEventsCard.svelte @@ -1,12 +1,7 @@ + + + + + + {@html themeScript} + + + + + + +
+
+
+ + + +
+
+
+ + + diff --git a/src/lib/website/load.ts b/src/lib/website/load.ts index 754c92aa..3ddd034b 100644 --- a/src/lib/website/load.ts +++ b/src/lib/website/load.ts @@ -1,6 +1,7 @@ import { getDetailedProfile, listRecords, resolveHandle, parseUri, getRecord } from '$lib/atproto'; import { CardDefinitionsByType } from '$lib/cards'; import type { CacheService } from '$lib/cache'; +import { createEmptyCard } from '$lib/helper'; import type { Item, WebsiteData } from '$lib/types'; import { error } from '@sveltejs/kit'; import type { ActorIdentifier, Did } from '@atcute/lexicons'; @@ -85,42 +86,11 @@ export async function loadData( getDetailedProfile({ did }) ]); - const cardTypes = new Set(cards.map((v) => v.value.cardType ?? '') as string[]); - const cardTypesArray = Array.from(cardTypes); - - const additionDataPromises: Record> = {}; - - const loadOptions = { did, handle, cache }; - - for (const cardType of cardTypesArray) { - const cardDef = CardDefinitionsByType[cardType]; - - const items = cards.filter((v) => cardType === v.value.cardType).map((v) => v.value) as Item[]; - - try { - if (cardDef?.loadDataServer) { - additionDataPromises[cardType] = cardDef.loadDataServer(items, { - ...loadOptions, - env - }); - } else if (cardDef?.loadData) { - additionDataPromises[cardType] = cardDef.loadData(items, loadOptions); - } - } catch { - console.error('error getting additional data for', cardType); - } - } - - await Promise.all(Object.values(additionDataPromises)); - - const additionalData: Record = {}; - for (const [key, value] of Object.entries(additionDataPromises)) { - try { - additionalData[key] = await value; - } catch (error) { - console.log('error loading', key, error); - } - } + const additionalData = await loadAdditionalData( + cards.map((v) => ({ ...v.value })) as Item[], + { did, handle, cache }, + env + ); const result = { page: 'blento.' + page, @@ -157,9 +127,148 @@ export async function loadData( return checkData(parsedResult); } -function migrateFromV0ToV1(data: WebsiteData): WebsiteData { - for (const card of data.cards) { - if (card.version) continue; +export async function loadCardData( + handle: ActorIdentifier, + rkey: string, + cache: CacheService | undefined, + env?: Record +): Promise { + if (!handle) throw error(404); + if (handle === 'favicon.ico') throw error(404); + + let did: Did | undefined = undefined; + if (isHandle(handle)) { + did = await resolveHandle({ handle }); + } else if (isDid(handle)) { + did = handle; + } else { + throw error(404); + } + + const [cardRecord, profile] = await Promise.all([ + getRecord({ + did, + collection: 'app.blento.card', + rkey + }).catch(() => undefined), + getDetailedProfile({ did }) + ]); + + if (!cardRecord?.value) { + throw error(404, 'Card not found'); + } + + const card = migrateCard(structuredClone(cardRecord.value) as Item); + const page = card.page ?? 'blento.self'; + + const publication = await getRecord({ + did, + collection: page === 'blento.self' ? 'site.standard.publication' : 'app.blento.page', + rkey: page + }).catch(() => undefined); + + const cards = [card]; + const resolvedHandle = profile?.handle || (isHandle(handle) ? handle : did); + + const additionalData = await loadAdditionalData( + cards, + { did, handle: resolvedHandle, cache }, + env + ); + + const result = { + page, + handle: resolvedHandle, + did, + cards, + publication: + publication?.value ?? + ({ + name: profile?.displayName || profile?.handle, + description: profile?.description + } as WebsiteData['publication']), + additionalData, + profile, + updatedAt: Date.now(), + version: CURRENT_CACHE_VERSION + }; + + return result; +} + +export async function loadCardTypeData( + handle: ActorIdentifier, + type: string, + cardData: Record, + cache: CacheService | undefined, + env?: Record +): Promise { + if (!handle) throw error(404); + if (handle === 'favicon.ico') throw error(404); + + const cardDef = CardDefinitionsByType[type]; + if (!cardDef) { + throw error(404, 'Card type not found'); + } + + let did: Did | undefined = undefined; + if (isHandle(handle)) { + did = await resolveHandle({ handle }); + } else if (isDid(handle)) { + did = handle; + } else { + throw error(404); + } + + const [publication, profile] = await Promise.all([ + getRecord({ + did, + collection: 'site.standard.publication', + rkey: 'blento.self' + }).catch(() => undefined), + getDetailedProfile({ did }) + ]); + + const card = createEmptyCard('blento.self'); + card.cardType = type; + + cardDef.createNew?.(card); + card.cardData = { + ...card.cardData, + ...cardData + }; + + const cards = [card]; + const resolvedHandle = profile?.handle || (isHandle(handle) ? handle : did); + + const additionalData = await loadAdditionalData( + cards, + { did, handle: resolvedHandle, cache }, + env + ); + + const result = { + page: 'blento.self', + handle: resolvedHandle, + did, + cards, + publication: + publication?.value ?? + ({ + name: profile?.displayName || profile?.handle, + description: profile?.description + } as WebsiteData['publication']), + additionalData, + profile, + updatedAt: Date.now(), + version: CURRENT_CACHE_VERSION + }; + + return checkData(result); +} + +function migrateCard(card: Item): Item { + if (!card.version) { card.x *= 2; card.y *= 2; card.h *= 2; @@ -171,28 +280,58 @@ function migrateFromV0ToV1(data: WebsiteData): WebsiteData { card.version = 1; } - return data; + if (!card.version || card.version < 2) { + card.page = 'blento.self'; + card.version = 2; + } + + const cardDef = CardDefinitionsByType[card.cardType]; + cardDef?.migrate?.(card); + + return card; } -function migrateFromV1ToV2(data: WebsiteData): WebsiteData { - for (const card of data.cards) { - if (!card.version || card.version < 2) { - card.page = 'blento.self'; - card.version = 2; +async function loadAdditionalData( + cards: Item[], + { did, handle, cache }: { did: Did; handle: string; cache?: CacheService }, + env?: Record +) { + const cardTypes = new Set(cards.map((v) => v.cardType ?? '') as string[]); + const cardTypesArray = Array.from(cardTypes); + const additionDataPromises: Record> = {}; + + for (const cardType of cardTypesArray) { + const cardDef = CardDefinitionsByType[cardType]; + const items = cards.filter((v) => cardType === v.cardType); + + try { + if (cardDef?.loadDataServer) { + additionDataPromises[cardType] = cardDef.loadDataServer(items, { + did, + handle, + cache, + env + }); + } else if (cardDef?.loadData) { + additionDataPromises[cardType] = cardDef.loadData(items, { did, handle, cache }); + } + } catch { + console.error('error getting additional data for', cardType); } } - return data; -} - -function migrateCards(data: WebsiteData): WebsiteData { - for (const card of data.cards) { - const cardDef = CardDefinitionsByType[card.cardType]; - if (!cardDef?.migrate) continue; + await Promise.all(Object.values(additionDataPromises)); - cardDef.migrate(card); + const additionalData: Record = {}; + for (const [key, value] of Object.entries(additionDataPromises)) { + try { + additionalData[key] = await value; + } catch (error) { + console.log('error loading', key, error); + } } - return data; + + return additionalData; } function checkData(data: WebsiteData): WebsiteData { @@ -214,5 +353,8 @@ function checkData(data: WebsiteData): WebsiteData { } function migrateData(data: WebsiteData): WebsiteData { - return migrateCards(migrateFromV1ToV2(migrateFromV0ToV1(data))); + for (const card of data.cards) { + migrateCard(card); + } + return data; } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 4f99a9de..559abbab 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -11,6 +11,9 @@ import LoginModal from '$lib/atproto/UI/LoginModal.svelte'; let { children, data } = $props(); + let showThemeToggle = $derived( + !/(?:\/card\/[^/]+|\/embed\/type\/[^/]+)$/.test(page.url.pathname) + ); const errorMessages: Record string> = { handle_not_found: (p) => `Handle ${p.get('handle') ?? ''} not found!` @@ -25,7 +28,9 @@ {@render children()} - +{#if showThemeToggle} + +{/if} diff --git a/src/routes/[[actor=actor]]/card/[rkey]/+page.server.ts b/src/routes/[[actor=actor]]/card/[rkey]/+page.server.ts new file mode 100644 index 00000000..f181c977 --- /dev/null +++ b/src/routes/[[actor=actor]]/card/[rkey]/+page.server.ts @@ -0,0 +1,16 @@ +import { createCache } from '$lib/cache'; +import { getActor } from '$lib/actor'; +import { loadCardData } from '$lib/website/load'; +import { error } from '@sveltejs/kit'; +import { env } from '$env/dynamic/private'; + +export async function load({ params, platform, request }) { + const cache = createCache(platform); + const actor = await getActor({ request, paramActor: params.actor, platform }); + + if (!actor) { + throw error(404, 'Page not found'); + } + + return await loadCardData(actor, params.rkey, cache, env); +} diff --git a/src/routes/[[actor=actor]]/card/[rkey]/+page.svelte b/src/routes/[[actor=actor]]/card/[rkey]/+page.svelte new file mode 100644 index 00000000..adeea905 --- /dev/null +++ b/src/routes/[[actor=actor]]/card/[rkey]/+page.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/routes/[[actor=actor]]/embed/type/[type]/+page.server.ts b/src/routes/[[actor=actor]]/embed/type/[type]/+page.server.ts new file mode 100644 index 00000000..85979f94 --- /dev/null +++ b/src/routes/[[actor=actor]]/embed/type/[type]/+page.server.ts @@ -0,0 +1,59 @@ +import { createCache } from '$lib/cache'; +import { getActor } from '$lib/actor'; +import { loadCardTypeData } from '$lib/website/load'; +import { error } from '@sveltejs/kit'; +import { env } from '$env/dynamic/private'; + +function parseQueryParamValue(value: string): unknown { + const trimmed = value.trim(); + + if (trimmed === 'true') return true; + if (trimmed === 'false') return false; + if (trimmed === 'null') return null; + + if (/^-?(?:0|[1-9]\d*)(?:\.\d+)?$/.test(trimmed)) { + return Number(trimmed); + } + + if ( + (trimmed.startsWith('{') && trimmed.endsWith('}')) || + (trimmed.startsWith('[') && trimmed.endsWith(']')) + ) { + try { + return JSON.parse(trimmed); + } catch { + return value; + } + } + + return value; +} + +function getCardDataFromSearchParams(searchParams: URLSearchParams) { + const cardData: Record = {}; + const keys = new Set(searchParams.keys()); + + for (const key of keys) { + const values = searchParams.getAll(key).map(parseQueryParamValue); + cardData[key] = values.length === 1 ? values[0] : values; + } + + return cardData; +} + +export async function load({ params, platform, request, url }) { + const cache = createCache(platform); + const actor = await getActor({ request, paramActor: params.actor, platform }); + + if (!actor) { + throw error(404, 'Page not found'); + } + + return await loadCardTypeData( + actor, + params.type, + getCardDataFromSearchParams(url.searchParams), + cache, + env + ); +} diff --git a/src/routes/[[actor=actor]]/embed/type/[type]/+page.svelte b/src/routes/[[actor=actor]]/embed/type/[type]/+page.svelte new file mode 100644 index 00000000..adeea905 --- /dev/null +++ b/src/routes/[[actor=actor]]/embed/type/[type]/+page.svelte @@ -0,0 +1,7 @@ + + +