From 9e093310283988200235e4583a02bf815b0dbd08 Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Fri, 06 Mar 2026 16:35:47 +0000
Subject: [PATCH] Merge pull request #243 from flo-bit/cards-as-embeds

cards as embeds
---
 src/routes/+layout.svelte | 7 ++++++-
 src/lib/website/EmbeddedCard.svelte | 177 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/lib/website/load.ts | 252 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------
 src/lib/cards/_base/BaseCard/BaseCard.svelte | 22 ++++++++++++++++++----
 src/lib/cards/core/LinkCard/EditingLinkCard.svelte | 20 +++++++++++++++-----
 src/lib/cards/core/LinkCard/LinkCard.svelte | 104 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------
 src/lib/cards/core/LinkCard/LinkCardSettings.svelte | 4 ++--
 src/lib/cards/media/LivestreamCard/LivestreamCard.svelte | 27 ++++++++++++++++-----------
 src/lib/cards/media/PhotoGalleryCard/PhotoGalleryCard.svelte | 33 ++++++++++++++++++++++++---------
 src/lib/cards/media/RockskyPlaysCard/RockskyPlaysCard.svelte | 1 +
 src/lib/cards/media/TealFMPlaysCard/TealFMPlaysCard.svelte | 3 ++-
 src/lib/cards/social/EventCard/EventCard.svelte | 53 +++++++++++++++++++++++++++++++++++++++++------------
 src/lib/cards/social/FriendsCard/FriendsCard.svelte | 61 ++++++++++++++++++++++++++++++++++++++++++-------------------
 src/lib/cards/social/GitHubProfileCard/GitHubProfileCard.svelte | 52 ++++++++++++++++++++++++++++++++++++++++------------
 src/lib/cards/social/UpcomingEventsCard/UpcomingEventsCard.svelte | 8 +-------
 src/routes/[[actor=actor]]/card/[rkey]/+page.server.ts | 16 ++++++++++++++++
 src/routes/[[actor=actor]]/card/[rkey]/+page.svelte | 7 +++++++
 src/routes/[[actor=actor]]/embed/type/[type]/+page.server.ts | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/routes/[[actor=actor]]/embed/type/[type]/+page.svelte | 7 +++++++
 19 file(s) changed, 750 insertion(s)(+), 163 deletion(s)(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
--- 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, (params: URLSearchParams) => string> = {
 		handle_not_found: (p) => `Handle ${p.get('handle') ?? ''} not found!`
@@ -25,7 +28,9 @@
 	{@render children()}
 </Tooltip.Provider>
 
-<ThemeToggle class="fixed top-2 left-2 z-10" />
+{#if showThemeToggle}
+	<ThemeToggle class="fixed top-2 left-2 z-10" />
+{/if}
 
 <Toaster />
 
diff --git a/src/lib/website/EmbeddedCard.svelte b/src/lib/website/EmbeddedCard.svelte
new file mode 100644
--- /dev/null
+++ b/src/lib/website/EmbeddedCard.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { page } from '$app/state';
+	import { innerWidth } from 'svelte/reactivity/window';
+	import BaseCard from '$lib/cards/_base/BaseCard/BaseCard.svelte';
+	import Card from '$lib/cards/_base/Card/Card.svelte';
+	import { CardDefinitionsByType, getColor } from '$lib/cards';
+	import { getDescription, getImage, getName } from '$lib/helper';
+	import QRModalProvider from '$lib/components/qr/QRModalProvider.svelte';
+	import ImageViewerProvider from '$lib/components/image-viewer/ImageViewerProvider.svelte';
+	import type { WebsiteData } from '$lib/types';
+	import Context from './Context.svelte';
+	import Head from './Head.svelte';
+	import { setIsMobile } from './context';
+
+	let { data }: { data: WebsiteData } = $props();
+
+	let item = $derived(data.cards[0]);
+	let embeddedItem = $derived({
+		...item,
+		x: 0,
+		y: 0,
+		mobileX: 0,
+		mobileY: 0
+	});
+
+	let isMobile = $derived((innerWidth.current ?? 1000) < 1024);
+	setIsMobile(() => isMobile);
+
+	const colors = {
+		base: 'bg-base-200/50 dark:bg-base-950/50',
+		accent: 'bg-accent-400 dark:bg-accent-500 accent',
+		transparent: 'bg-transparent'
+	} as Record<string, string>;
+
+	let color = $derived(getColor(item));
+	let backgroundClass = $derived(color ? (colors[color] ?? colors.accent) : colors.base);
+	let pageColorClass = $derived(
+		color !== 'accent' && item?.color !== 'base' && item?.color !== 'transparent' ? color : ''
+	);
+	let cardWidth = $derived(Math.max(isMobile ? item.mobileW : item.w, 1));
+	let cardHeight = $derived(Math.max(isMobile ? item.mobileH : item.h, 1));
+
+	let title = $derived.by(() => {
+		const label = item?.cardData?.label as string | undefined;
+		const cardName = CardDefinitionsByType[item?.cardType ?? '']?.name;
+
+		return label
+			? `${label} • ${getName(data)}`
+			: cardName
+				? `${cardName} • ${getName(data)}`
+				: getName(data);
+	});
+
+	let description = $derived(
+		(item?.cardData?.title as string | undefined) ||
+			(item?.cardData?.text as string | undefined) ||
+			getDescription(data)
+	);
+
+	const safeJson = (value: string) => JSON.stringify(value).replace(/</g, '\\u003c');
+
+	let themeMode = $derived.by(() => {
+		const theme = page.url.searchParams.get('theme');
+		return theme === 'dark' || theme === 'light' || theme === 'auto' ? theme : undefined;
+	});
+
+	let themeScript = $derived.by(() => {
+		if (!themeMode) return '';
+
+		return (
+			`<script>(function(){var theme=${safeJson(themeMode)};var el=document.documentElement;` +
+			`var apply=function(mode){el.classList.remove('dark','light');` +
+			`el.classList.add(mode==='auto'&&window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':mode==='auto'?'light':mode);};` +
+			`apply(theme);})();<` +
+			'/script>'
+		);
+	});
+
+	$effect(() => {
+		if (!browser || !themeMode) return;
+
+		const root = document.documentElement;
+		const previousHadDark = root.classList.contains('dark');
+		const previousHadLight = root.classList.contains('light');
+
+		const applyTheme = () => {
+			root.classList.remove('dark', 'light');
+
+			if (themeMode === 'auto') {
+				root.classList.add(
+					window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+				);
+				return;
+			}
+
+			root.classList.add(themeMode);
+		};
+
+		applyTheme();
+
+		if (themeMode !== 'auto') {
+			return () => {
+				root.classList.remove('dark', 'light');
+				if (previousHadDark) root.classList.add('dark');
+				if (previousHadLight) root.classList.add('light');
+			};
+		}
+
+		const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+		mediaQuery.addEventListener('change', applyTheme);
+
+		return () => {
+			mediaQuery.removeEventListener('change', applyTheme);
+			root.classList.remove('dark', 'light');
+			if (previousHadDark) root.classList.add('dark');
+			if (previousHadLight) root.classList.add('light');
+		};
+	});
+</script>
+
+<Head
+	favicon={getImage(data.publication, data.did, 'icon') || data.profile.avatar}
+	{title}
+	{description}
+	accentColor={data.publication?.preferences?.accentColor}
+	baseColor={data.publication?.preferences?.baseColor}
+/>
+
+<svelte:head>
+	<meta name="robots" content="noindex" />
+	{@html themeScript}
+</svelte:head>
+
+<Context {data}>
+	<QRModalProvider />
+	<ImageViewerProvider />
+
+	<div class={[backgroundClass, pageColorClass, 'embed-page w-full']}>
+		<div class="embed-stage @container/grid">
+			<div
+				class="embed-content"
+				style={`--embed-ratio: ${cardWidth / cardHeight}; aspect-ratio: ${cardWidth} / ${cardHeight};`}
+			>
+				<BaseCard item={embeddedItem} fillPage>
+					<Card item={embeddedItem} />
+				</BaseCard>
+			</div>
+		</div>
+	</div>
+</Context>
+
+<style>
+	:global(html),
+	:global(body) {
+		min-height: 100%;
+	}
+
+	.embed-page {
+		min-height: 100vh;
+	}
+
+	.embed-stage {
+		min-height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: clamp(12px, 3vw, 32px);
+		container-type: inline-size;
+	}
+
+	.embed-content {
+		width: min(100%, calc((100vh - clamp(24px, 6vw, 64px)) * var(--embed-ratio)));
+		max-width: calc(100vw - clamp(24px, 6vw, 64px));
+		max-height: calc(100vh - clamp(24px, 6vw, 64px));
+	}
+</style>
diff --git a/src/lib/website/load.ts b/src/lib/website/load.ts
--- 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 @@
 		getDetailedProfile({ did })
 	]);
 
-	const cardTypes = new Set(cards.map((v) => v.value.cardType ?? '') as string[]);
-	const cardTypesArray = Array.from(cardTypes);
-
-	const additionDataPromises: Record<string, Promise<unknown>> = {};
-
-	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<string, unknown> = {};
-	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 @@
 	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<string, string | undefined>
+): Promise<WebsiteData> {
+	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<string, unknown>,
+	cache: CacheService | undefined,
+	env?: Record<string, string | undefined>
+): Promise<WebsiteData> {
+	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 @@
 		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<string, string | undefined>
+) {
+	const cardTypes = new Set(cards.map((v) => v.cardType ?? '') as string[]);
+	const cardTypesArray = Array.from(cardTypes);
+	const additionDataPromises: Record<string, Promise<unknown>> = {};
+
+	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];
+	await Promise.all(Object.values(additionDataPromises));
 
-		if (!cardDef?.migrate) continue;
-
-		cardDef.migrate(card);
+	const additionalData: Record<string, unknown> = {};
+	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 migrateData(data: WebsiteData): WebsiteData {
-	return migrateCards(migrateFromV1ToV2(migrateFromV0ToV1(data)));
+	for (const card of data.cards) {
+		migrateCard(card);
+	}
+	return data;
 }
diff --git a/src/lib/cards/_base/BaseCard/BaseCard.svelte b/src/lib/cards/_base/BaseCard/BaseCard.svelte
--- 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<HTMLAttributes<HTMLDivElement>>;
 
 	let {
@@ -28,6 +29,7 @@
 		controls,
 		showOutline,
 		locked = false,
+		fillPage = false,
 		class: className,
 		...rest
 	}: BaseCardProps = $props();
@@ -38,11 +40,14 @@
 <div
 	id={item.id}
 	data-flip-id={item.id}
+	data-fill-page={fillPage ? 'true' : undefined}
 	bind:this={ref}
 	draggable={false}
 	class={[
-		'card group/card selection:bg-accent-600/50 focus-within:outline-accent-500 @container/card absolute isolate z-0 rounded-3xl outline-offset-2 transition-all duration-200 focus-within:outline-2',
-		color ? (colors[color] ?? colors.accent) : colors.base,
+		fillPage
+			? 'card group/card selection:bg-accent-600/50 focus-within:outline-accent-500 @container/card relative isolate z-0 h-full w-full outline-offset-2 transition-all duration-200 focus-within:outline-2'
+			: 'card group/card selection:bg-accent-600/50 focus-within:outline-accent-500 @container/card absolute isolate z-0 rounded-3xl outline-offset-2 transition-all duration-200 focus-within:outline-2',
+		!fillPage ? (color ? (colors[color] ?? colors.accent) : colors.base) : '',
 		color !== 'accent' && item.color !== 'base' && item.color !== 'transparent' ? color : '',
 		showOutline ? 'outline-2' : '',
 		className
@@ -65,7 +70,8 @@
 >
 	<div
 		class={[
-			'text-base-900 dark:text-base-50 relative isolate h-full w-full overflow-hidden rounded-[23px]',
+			'text-base-900 dark:text-base-50 relative isolate h-full w-full overflow-hidden',
+			!fillPage ? 'rounded-[23px]' : '',
 			color !== 'base' && color != 'transparent' ? 'light' : ''
 		]}
 	>
@@ -84,14 +90,22 @@
 
 <style>
 	.card {
+		container-name: card;
+		container-type: size;
 		translate: calc((var(--mx) / var(--columns)) * 100cqw + var(--mm))
 			calc((var(--my) / var(--columns)) * 100cqw + var(--mm));
 		width: calc((var(--mw) / var(--columns)) * 100cqw - (var(--mm) * 2));
 		height: calc((var(--mh) / var(--columns)) * 100cqw - (var(--mm) * 2));
 	}
 
+	.card[data-fill-page='true'] {
+		translate: none;
+		width: 100%;
+		height: 100%;
+	}
+
 	@container grid (width >= 42rem) {
-		.card {
+		.card:not([data-fill-page='true']) {
 			translate: calc((var(--dx) / var(--columns)) * 100cqw + var(--dm))
 				calc((var(--dy) / var(--columns)) * 100cqw + var(--dm));
 			width: calc((var(--dw) / var(--columns)) * 100cqw - (var(--dm) * 2));
diff --git a/src/lib/cards/core/LinkCard/EditingLinkCard.svelte b/src/lib/cards/core/LinkCard/EditingLinkCard.svelte
--- a/src/lib/cards/core/LinkCard/EditingLinkCard.svelte
+++ b/src/lib/cards/core/LinkCard/EditingLinkCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import { getImage, compressImage } from '$lib/helper';
-	import { getDidContext, getIsMobile } from '$lib/website/context';
+	import { getDidContext } from '$lib/website/context';
 	import type { ContentComponentProps } from '../../types';
 	import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
 
@@ -49,8 +49,6 @@
 			console.error('Failed to process image:', error);
 		}
 	}
-
-	let isMobile = getIsMobile();
 
 	let faviconHasError = $state(false);
 	let isFetchingMetadata = $state(false);
@@ -291,10 +289,10 @@
 			</div>
 		</div>
 
-		{#if hasFetched && browser && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4))}
+		{#if hasFetched && browser}
 			<button
 				type="button"
-				class="hover:ring-accent-500 relative mb-2 aspect-2/1 w-full cursor-pointer overflow-hidden rounded-xl transition-all duration-200 hover:ring-2"
+				class="link-preview-editor hover:ring-accent-500 relative mb-2 aspect-2/1 w-full cursor-pointer overflow-hidden rounded-xl transition-all duration-200 hover:ring-2"
 				onclick={() => imageInputRef?.click()}
 				onmouseenter={() => (isHoveringImage = true)}
 				onmouseleave={() => (isHoveringImage = false)}
@@ -357,3 +355,15 @@
 		{/if}
 	</div>
 {/if}
+
+<style>
+	.link-preview-editor {
+		display: none;
+	}
+
+	@container card (height >= 18rem) {
+		.link-preview-editor {
+			display: block;
+		}
+	}
+</style>
diff --git a/src/lib/cards/core/LinkCard/LinkCard.svelte b/src/lib/cards/core/LinkCard/LinkCard.svelte
--- a/src/lib/cards/core/LinkCard/LinkCard.svelte
+++ b/src/lib/cards/core/LinkCard/LinkCard.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
 	import { getImage } from '$lib/helper';
-	import { getDidContext, getIsMobile } from '$lib/website/context';
+	import { getDidContext } from '$lib/website/context';
 	import type { ContentComponentProps } from '../../types';
 	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
 
 	let { item, isEditing }: ContentComponentProps = $props();
-
-	let isMobile = getIsMobile();
 
 	let faviconHasError = $state(false);
 
@@ -15,7 +12,7 @@
 </script>
 
 {#if item.cardData.showBackgroundImage && item.cardData.image}
-	<div class="relative flex h-full flex-col justify-end p-4">
+	<div class="link-card relative flex h-full flex-col justify-end p-4">
 		<img
 			class="absolute inset-0 -z-10 size-full object-cover"
 			src={getImage(item.cardData, did)}
@@ -27,12 +24,7 @@
 		<div class="text-accent-600 dark:text-accent-400 text-xs font-semibold">
 			{item.cardData.domain}
 		</div>
-		<div
-			class={[
-				'text-base-900 dark:text-base-50 text-lg font-bold',
-				(isMobile() && item.mobileH < 8) || (!isMobile() && item.h < 4) ? 'line-clamp-2' : ''
-			]}
-		>
+		<div class="link-title text-base-900 dark:text-base-50 text-lg font-bold">
 			{item.cardData.title}
 		</div>
 		{#if item.cardData.href && !isEditing}
@@ -73,8 +65,8 @@
 		{/if}
 	</div>
 {:else}
-	<div class="flex h-full flex-col justify-between p-4">
-		<div>
+	<div class="link-card flex h-full flex-col p-4">
+		<div class="link-content min-h-0">
 			<div
 				class="bg-base-100 border-base-300 accent:bg-accent-100/50 accent:border-accent-200 dark:border-base-800 dark:bg-base-900 mb-2 inline-flex size-8 items-center justify-center rounded-xl border"
 			>
@@ -102,12 +94,7 @@
 					</svg>
 				{/if}
 			</div>
-			<div
-				class={[
-					'text-base-900 dark:text-base-50 text-lg font-bold',
-					(isMobile() && item.mobileH < 8) || (!isMobile() && item.h < 4) ? 'line-clamp-2' : ''
-				]}
-			>
+			<div class="link-title text-base-900 dark:text-base-50 text-lg font-bold">
 				{item.cardData.title}
 			</div>
 			<!-- <div class="text-base-800 dark:text-base-100 mt-2 text-xs">{item.cardData.description}</div> -->
@@ -118,12 +105,14 @@
 			</div>
 		</div>
 
-		{#if browser && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4)) && item.cardData.image}
-			<img
-				class="mb-2 aspect-2/1 w-full rounded-xl object-cover opacity-100 transition-opacity duration-100 starting:opacity-0"
-				src={getImage(item.cardData, did)}
-				alt=""
-			/>
+		{#if item.cardData.image}
+			<div class="link-preview-wrap mt-auto">
+				<img
+					class="link-preview mb-2 aspect-2/1 w-full rounded-xl object-cover opacity-100 transition-opacity duration-100 starting:opacity-0"
+					src={getImage(item.cardData, did)}
+					alt=""
+				/>
+			</div>
 		{/if}
 		{#if item.cardData.href && !isEditing}
 			<a
@@ -163,3 +152,68 @@
 		{/if}
 	</div>
 {/if}
+
+<style>
+	.link-title {
+		display: -webkit-box;
+		line-clamp: 2;
+		overflow: hidden;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+	}
+
+	.link-preview {
+		display: none;
+		width: 100%;
+		object-fit: cover;
+	}
+
+	.link-preview-wrap {
+		display: none;
+		padding-top: 1rem;
+	}
+
+	@container card (height >= 18rem) {
+		.link-title {
+			display: block;
+			line-clamp: unset;
+			overflow: visible;
+			-webkit-line-clamp: unset;
+		}
+
+		.link-preview-wrap,
+		.link-preview {
+			display: block;
+		}
+	}
+
+	@container card (height >= 18rem) and (height < 22rem) {
+		.link-content {
+			padding-bottom: 1rem;
+		}
+
+		.link-preview-wrap {
+			padding-top: 0;
+		}
+
+		.link-preview {
+			aspect-ratio: 2.6 / 1;
+			max-height: 4.5rem;
+		}
+	}
+
+	@container card (height >= 22rem) {
+		.link-content {
+			padding-bottom: 0.5rem;
+		}
+
+		.link-preview-wrap {
+			padding-top: 0;
+		}
+
+		.link-preview {
+			aspect-ratio: 2 / 1;
+			max-height: none;
+		}
+	}
+</style>
diff --git a/src/lib/cards/core/LinkCard/LinkCardSettings.svelte b/src/lib/cards/core/LinkCard/LinkCardSettings.svelte
--- a/src/lib/cards/core/LinkCard/LinkCardSettings.svelte
+++ b/src/lib/cards/core/LinkCard/LinkCardSettings.svelte
@@ -48,7 +48,7 @@
 		<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
 	</svg>
 </Button>
-<div class="flex items-center space-x- mt-4">
+<div class="space-x- mt-4 flex items-center">
 	<Checkbox
 		bind:checked={
 			() => Boolean(item.cardData.showBackgroundImage),
@@ -61,7 +61,7 @@
 	<Label
 		id="show-bg-image-label"
 		for="show-bg-image"
-		class="text-sm leading-none ml-2 font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+		class="ml-2 text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 	>
 		Show background image
 	</Label>
diff --git a/src/lib/cards/media/LivestreamCard/LivestreamCard.svelte b/src/lib/cards/media/LivestreamCard/LivestreamCard.svelte
--- a/src/lib/cards/media/LivestreamCard/LivestreamCard.svelte
+++ b/src/lib/cards/media/LivestreamCard/LivestreamCard.svelte
@@ -1,12 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import Icon from './Icon.svelte';
-	import {
-		getAdditionalUserData,
-		getDidContext,
-		getHandleContext,
-		getIsMobile
-	} from '$lib/website/context';
+	import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
 	import type { ContentComponentProps } from '../../types';
 	import { RelativeTime } from '@foxui/time';
 	import { Badge } from '@foxui/core';
@@ -14,8 +9,6 @@
 	import { browser } from '$app/environment';
 
 	let { item = $bindable() }: ContentComponentProps = $props();
-
-	let isMobile = getIsMobile();
 
 	let isLoaded = $state(false);
 
@@ -58,7 +51,7 @@
 	});
 </script>
 
-<div class="h-full overflow-y-scroll p-4">
+<div class="livestream-card h-full overflow-y-scroll p-4">
 	{#if latestLivestream}
 		<div class="flex min-h-full flex-col justify-between">
 			<div>
@@ -95,10 +88,10 @@
 				</a>
 			</div>
 
-			{#if browser && ((isMobile() && item.mobileH >= 7) || (!isMobile() && item.h >= 4)) && latestLivestream?.thumb}
+			{#if browser && latestLivestream?.thumb}
 				<a href={latestLivestream?.href} target="_blank" rel="noopener noreferrer">
 					<img
-						class="my-4 max-h-32 w-full rounded-xl object-cover"
+						class="livestream-thumb my-4 max-h-32 w-full rounded-xl object-cover"
 						src={latestLivestream?.thumb}
 						alt=""
 					/>
@@ -112,3 +105,15 @@
 		<div class="flex h-full w-full items-center justify-center">Looking for the latest stream</div>
 	{/if}
 </div>
+
+<style>
+	.livestream-thumb {
+		display: none;
+	}
+
+	@container card (height >= 15rem) {
+		.livestream-thumb {
+			display: block;
+		}
+	}
+</style>
diff --git a/src/lib/cards/media/PhotoGalleryCard/PhotoGalleryCard.svelte b/src/lib/cards/media/PhotoGalleryCard/PhotoGalleryCard.svelte
--- a/src/lib/cards/media/PhotoGalleryCard/PhotoGalleryCard.svelte
+++ b/src/lib/cards/media/PhotoGalleryCard/PhotoGalleryCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Item } from '$lib/types';
 	import { onMount } from 'svelte';
-	import { getAdditionalUserData, getIsMobile } from '$lib/website/context';
+	import { getAdditionalUserData } from '$lib/website/context';
 	import { getCDNImageBlobUrl, parseUri } from '$lib/atproto';
 	import { loadGrainGalleryData } from './helpers';
 
@@ -61,14 +61,29 @@
 			onclick?: () => void;
 		}[]
 	);
-
-	let isMobile = getIsMobile();
 </script>
 
-<div class="z-10 flex h-full w-full flex-col gap-4 overflow-y-scroll p-4">
-	<ImageMasonry
-		images={images ?? []}
-		showNames={false}
-		maxColumns={!isMobile() && item.w > 4 ? 3 : 2}
-	/>
+<div class="photo-gallery-card z-10 flex h-full w-full flex-col gap-4 overflow-y-scroll p-4">
+	<div class="gallery-compact">
+		<ImageMasonry images={images ?? []} showNames={false} maxColumns={2} />
+	</div>
+	<div class="gallery-wide">
+		<ImageMasonry images={images ?? []} showNames={false} maxColumns={3} />
+	</div>
 </div>
+
+<style>
+	.gallery-wide {
+		display: none;
+	}
+
+	@container card (width >= 28rem) {
+		.gallery-compact {
+			display: none;
+		}
+
+		.gallery-wide {
+			display: block;
+		}
+	}
+</style>
diff --git a/src/lib/cards/media/RockskyPlaysCard/RockskyPlaysCard.svelte b/src/lib/cards/media/RockskyPlaysCard/RockskyPlaysCard.svelte
--- 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
--- 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)}
 	<div class="flex w-full items-center gap-3">
 		<div class="size-10 shrink-0">
-			<AlbumArt releaseMbid={play.value.releaseMbid} alt="" />
+			<AlbumArt releaseMbid={play.value.releaseMbid ?? play.value.releaseMbId} alt="" />
 		</div>
 		<div class="min-w-0 flex-1">
 			<div class="inline-flex w-full max-w-full justify-between gap-2">
diff --git a/src/lib/cards/social/EventCard/EventCard.svelte b/src/lib/cards/social/EventCard/EventCard.svelte
--- a/src/lib/cards/social/EventCard/EventCard.svelte
+++ b/src/lib/cards/social/EventCard/EventCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { Badge, Button } from '@foxui/core';
-	import { getAdditionalUserData, getIsMobile } from '$lib/website/context';
+	import { getAdditionalUserData } from '$lib/website/context';
 	import type { ContentComponentProps } from '../../types';
 	import { CardDefinitionsByType } from '../..';
 	import type { EventData } from '.';
@@ -12,7 +12,6 @@
 
 	let { item }: ContentComponentProps = $props();
 
-	let isMobile = getIsMobile();
 	let isLoaded = $state(false);
 	let fetchedEventData = $state<EventData | undefined>(undefined);
 
@@ -109,12 +108,10 @@
 		};
 	});
 
-	let showImage = $derived(
-		browser && headerImage() && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4))
-	);
+	let showImage = $derived(browser && headerImage());
 </script>
 
-<div class="flex h-full flex-col justify-between overflow-hidden p-4">
+<div class="event-card flex h-full flex-col justify-between overflow-hidden p-4">
 	{#if eventData}
 		<div class="min-w-0 flex-1 overflow-hidden">
 			<div class="mb-2 flex items-center justify-between gap-2">
@@ -142,9 +139,9 @@
 					</Badge>
 				</div>
 
-				{#if isMobile() ? item.mobileW > 4 : item.w > 2}
-					<Button href={eventUrl()} target="_blank" class="z-50">View event</Button>
-				{/if}
+				<div class="event-action z-50">
+					<Button href={eventUrl()} target="_blank">View event</Button>
+				</div>
 			</div>
 
 			<h3 class="text-base-900 dark:text-base-50 mb-2 line-clamp-2 text-lg leading-tight font-bold">
@@ -203,8 +200,10 @@
 				</div>
 			{/if}
 
-			{#if eventData.description && ((isMobile() && item.mobileH >= 5) || (!isMobile() && item.h >= 3))}
-				<p class="text-base-500 dark:text-base-400 accent:text-base-900 mb-3 line-clamp-3 text-sm">
+			{#if eventData.description}
+				<p
+					class="event-description text-base-500 dark:text-base-400 accent:text-base-900 mb-3 line-clamp-3 text-sm"
+				>
 					{eventData.description}
 				</p>
 			{/if}
@@ -213,7 +212,11 @@
 		{#if showImage}
 			{@const img = headerImage()}
 			{#if img}
-				<img src={img.url} alt={img.alt} class="mt-3 aspect-3/1 w-full rounded-xl object-cover" />
+				<img
+					src={img.url}
+					alt={img.alt}
+					class="event-image mt-3 aspect-3/1 w-full rounded-xl object-cover"
+				/>
 			{/if}
 		{/if}
 
@@ -239,3 +242,29 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	.event-action,
+	.event-description,
+	.event-image {
+		display: none;
+	}
+
+	@container card (width >= 18rem) {
+		.event-action {
+			display: inline-flex;
+		}
+	}
+
+	@container card (height >= 12rem) {
+		.event-description {
+			display: block;
+		}
+	}
+
+	@container card (height >= 15rem) {
+		.event-image {
+			display: block;
+		}
+	}
+</style>
diff --git a/src/lib/cards/social/FriendsCard/FriendsCard.svelte b/src/lib/cards/social/FriendsCard/FriendsCard.svelte
--- a/src/lib/cards/social/FriendsCard/FriendsCard.svelte
+++ b/src/lib/cards/social/FriendsCard/FriendsCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import type { ContentComponentProps } from '../../types';
-	import { getAdditionalUserData, getCanEdit, getIsMobile } from '$lib/website/context';
+	import { getAdditionalUserData, getCanEdit } from '$lib/website/context';
 	import { getBlentoOrBskyProfile } from '$lib/atproto/methods';
 	import type { FriendsProfile } from '.';
 	import type { Did } from '@atcute/lexicons';
@@ -9,7 +9,6 @@
 
 	let { item }: ContentComponentProps = $props();
 
-	const isMobile = getIsMobile();
 	const canEdit = getCanEdit();
 	const additionalData = getAdditionalUserData();
 
@@ -54,13 +53,6 @@
 		}
 	});
 
-	let sizeClass = $derived.by(() => {
-		const w = isMobile() ? item.mobileW / 2 : item.w;
-		if (w < 3) return 'sm';
-		if (w < 5) return 'md';
-		return 'lg';
-	});
-
 	function removeFriend(did: string) {
 		item.cardData.friends = item.cardData.friends.filter((d: string) => d !== did);
 	}
@@ -84,21 +76,15 @@
 			</span>
 		{/if}
 	{:else}
-		{@const olX = sizeClass === 'sm' ? 12 : sizeClass === 'md' ? 20 : 24}
-		{@const olY = sizeClass === 'sm' ? 8 : sizeClass === 'md' ? 12 : 16}
-		<div class="">
-			<div class="flex flex-wrap items-center justify-center" style="padding: {olY}px 0 0 {olX}px;">
+		<div class="friends-card">
+			<div class="friends-grid flex flex-wrap items-center justify-center">
 				{#each profiles as profile (profile.did)}
-					<div class="group relative" style="margin: -{olY}px 0 0 -{olX}px;">
+					<div class="friends-avatar group relative">
 						<a
 							href={getLink(profile)}
 							class="accent:ring-accent-500 relative block rounded-full ring-2 ring-white transition-transform hover:scale-110 dark:ring-neutral-900"
 						>
-							<Avatar
-								src={profile.avatar}
-								alt={profile.handle}
-								class={sizeClass === 'sm' ? 'size-12' : sizeClass === 'md' ? 'size-16' : 'size-20'}
-							/>
+							<Avatar src={profile.avatar} alt={profile.handle} class="friends-avatar-image" />
 						</a>
 						{#if canEdit()}
 							<button
@@ -128,3 +114,40 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	.friends-card {
+		--friends-overlap-x: 12px;
+		--friends-overlap-y: 8px;
+		--friends-avatar-size: 48px;
+	}
+
+	.friends-grid {
+		padding: var(--friends-overlap-y) 0 0 var(--friends-overlap-x);
+	}
+
+	.friends-avatar {
+		margin: calc(var(--friends-overlap-y) * -1) 0 0 calc(var(--friends-overlap-x) * -1);
+	}
+
+	:global(.friends-avatar-image) {
+		width: var(--friends-avatar-size);
+		height: var(--friends-avatar-size);
+	}
+
+	@container card (width >= 18rem) {
+		.friends-card {
+			--friends-overlap-x: 20px;
+			--friends-overlap-y: 12px;
+			--friends-avatar-size: 64px;
+		}
+	}
+
+	@container card (width >= 26rem) {
+		.friends-card {
+			--friends-overlap-x: 24px;
+			--friends-overlap-y: 16px;
+			--friends-avatar-size: 80px;
+		}
+	}
+</style>
diff --git a/src/lib/cards/social/GitHubProfileCard/GitHubProfileCard.svelte b/src/lib/cards/social/GitHubProfileCard/GitHubProfileCard.svelte
--- a/src/lib/cards/social/GitHubProfileCard/GitHubProfileCard.svelte
+++ b/src/lib/cards/social/GitHubProfileCard/GitHubProfileCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { siGithub } from 'simple-icons';
-	import { getAdditionalUserData, getIsMobile } from '$lib/website/context';
+	import { getAdditionalUserData } from '$lib/website/context';
 	import type { ContentComponentProps } from '../../types';
 	import type { GithubProfileLoadedData } from '.';
 	import GithubContributionsGraph from './GithubContributionsGraph.svelte';
@@ -34,11 +34,9 @@
 			}
 		}
 	});
-
-	let isMobile = getIsMobile();
 </script>
 
-<div class="h-full overflow-hidden p-4">
+<div class="github-profile-card h-full overflow-hidden p-4">
 	<div class="flex h-full flex-col justify-between">
 		<!-- Header -->
 		<div class="flex justify-between">
@@ -56,22 +54,23 @@
 				</a>
 			</div>
 
-			{#if isMobile() ? item.mobileW > 4 : item.w > 2}
+			<div class="github-follow z-50">
 				<Button
 					href="https://github.com/{item.cardData.user}"
 					target="_blank"
-					rel="noopener noreferrer"
-					class="z-50">Follow</Button
+					rel="noopener noreferrer">Follow</Button
 				>
-			{/if}
+			</div>
 		</div>
 
 		{#if contributionsData && browser}
 			<div class="flex opacity-100 transition-opacity duration-300 starting:opacity-0">
-				<GithubContributionsGraph
-					data={contributionsData}
-					isBig={isMobile() ? item.mobileH > 5 : item.h > 2}
-				/>
+				<div class="github-graph github-graph-compact">
+					<GithubContributionsGraph data={contributionsData} isBig={false} />
+				</div>
+				<div class="github-graph github-graph-expanded">
+					<GithubContributionsGraph data={contributionsData} isBig={true} />
+				</div>
 			</div>
 		{/if}
 	</div>
@@ -94,3 +93,32 @@
 		<span class="sr-only">Show on github</span>
 	</a>
 {/if}
+
+<style>
+	.github-follow,
+	.github-graph-expanded {
+		display: none;
+	}
+
+	.github-graph-compact {
+		display: flex;
+		width: 100%;
+	}
+
+	@container card (width >= 18rem) {
+		.github-follow {
+			display: inline-flex;
+		}
+	}
+
+	@container card (height >= 12rem) {
+		.github-graph-compact {
+			display: none;
+		}
+
+		.github-graph-expanded {
+			display: flex;
+			width: 100%;
+		}
+	}
+</style>
diff --git a/src/lib/cards/social/UpcomingEventsCard/UpcomingEventsCard.svelte b/src/lib/cards/social/UpcomingEventsCard/UpcomingEventsCard.svelte
--- a/src/lib/cards/social/UpcomingEventsCard/UpcomingEventsCard.svelte
+++ b/src/lib/cards/social/UpcomingEventsCard/UpcomingEventsCard.svelte
@@ -1,12 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { Badge } from '@foxui/core';
-	import {
-		getAdditionalUserData,
-		getDidContext,
-		getHandleContext,
-		getIsMobile
-	} from '$lib/website/context';
+	import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
 	import type { ContentComponentProps } from '../../types';
 	import { UpcomingEventsCardDefinition } from '.';
 	import type { EventData } from '../EventCard';
@@ -16,7 +11,6 @@
 
 	let { item }: ContentComponentProps = $props();
 
-	let isMobile = getIsMobile();
 	let isLoaded = $state(false);
 	const data = getAdditionalUserData();
 	const did = getDidContext();
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
--- /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
--- /dev/null
+++ b/src/routes/[[actor=actor]]/card/[rkey]/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import EmbeddedCard from '$lib/website/EmbeddedCard.svelte';
+
+	let { data } = $props();
+</script>
+
+<EmbeddedCard {data} />
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
--- /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<string, unknown> = {};
+	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
--- /dev/null
+++ b/src/routes/[[actor=actor]]/embed/type/[type]/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import EmbeddedCard from '$lib/website/EmbeddedCard.svelte';
+
+	let { data } = $props();
+</script>
+
+<EmbeddedCard {data} />

--
tangled.sh