diff --git a/src/lib/cards/core/ImageCard/ImageCard.svelte b/src/lib/cards/core/ImageCard/ImageCard.svelte
index b41d671..1026835 100644
--- a/src/lib/cards/core/ImageCard/ImageCard.svelte
+++ b/src/lib/cards/core/ImageCard/ImageCard.svelte
@@ -3,21 +3,40 @@
 	import type { ContentComponentProps } from '../../types';
 	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
 	import { getImage } from '$lib/helper';
+	import { openImageViewer } from '$lib/components/image-viewer/imageViewer.svelte';
 
 	let { item = $bindable(), isEditing }: ContentComponentProps = $props();
 
 	const did = getDidContext();
+
+	let src = $derived(getImage(item.cardData, did, 'image'));
+	let clickable = $derived(!item.cardData.href && !isEditing && !!src);
 </script>
 
-{#key getImage(item.cardData, did, 'image')}
-	<img
-		class={[
-			'absolute inset-0 h-full w-full object-cover opacity-100 transition-transform duration-300 ease-in-out',
-			item.cardData.href ? 'group-hover/card:scale-101' : ''
-		]}
-		src={getImage(item.cardData, did, 'image')}
-		alt=""
-	/>
+{#key src}
+	{#if clickable}
+		<button
+			type="button"
+			class="absolute inset-0 h-full w-full cursor-zoom-in"
+			onclick={() => src && openImageViewer(src)}
+			aria-label="View image fullscreen"
+		>
+			<img
+				class="absolute inset-0 h-full w-full object-cover opacity-100 transition-transform duration-300 ease-in-out group-hover/card:scale-101"
+				{src}
+				alt=""
+			/>
+		</button>
+	{:else}
+		<img
+			class={[
+				'absolute inset-0 h-full w-full object-cover opacity-100 transition-transform duration-300 ease-in-out',
+				item.cardData.href ? 'group-hover/card:scale-101' : ''
+			]}
+			{src}
+			alt=""
+		/>
+	{/if}
 {/key}
 {#if item.cardData.href && !isEditing}
 	<a
diff --git a/src/lib/cards/media/SecretImageCard/SecretImageCard.svelte b/src/lib/cards/media/SecretImageCard/SecretImageCard.svelte
index 69c892a..5549f4d 100644
--- a/src/lib/cards/media/SecretImageCard/SecretImageCard.svelte
+++ b/src/lib/cards/media/SecretImageCard/SecretImageCard.svelte
@@ -6,8 +6,9 @@
 	import type { ContentComponentProps } from '../../types';
 	import Modal from '$lib/components/modal/Modal.svelte';
 	import { Button, Input, Subheading } from '@foxui/core';
+	import { openImageViewer } from '$lib/components/image-viewer/imageViewer.svelte';
 
-	let { item = $bindable() }: ContentComponentProps = $props();
+	let { item = $bindable(), isEditing }: ContentComponentProps = $props();
 
 	const did = getDidContext();
 
@@ -81,11 +82,26 @@
 {/if}
 
 {#if decryptedUrl}
-	<img
-		class="animate-in fade-in absolute inset-0 h-full w-full object-cover duration-500"
-		src={decryptedUrl}
-		alt=""
-	/>
+	{#if isEditing}
+		<img
+			class="animate-in fade-in absolute inset-0 h-full w-full object-cover duration-500"
+			src={decryptedUrl}
+			alt=""
+		/>
+	{:else}
+		<button
+			type="button"
+			class="absolute inset-0 h-full w-full cursor-zoom-in"
+			onclick={() => decryptedUrl && openImageViewer(decryptedUrl)}
+			aria-label="View image fullscreen"
+		>
+			<img
+				class="animate-in fade-in absolute inset-0 h-full w-full object-cover duration-500"
+				src={decryptedUrl}
+				alt=""
+			/>
+		</button>
+	{/if}
 {/if}
 
 {#if !decryptedUrl}
-- 
2.51.2


From 0c8d76fc668da8f141eed48550b2f6a8398a0571 Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Thu, 16 Apr 2026 20:21:57 +0200
Subject: [PATCH 2/2] make site faster

---
 src/app.d.ts                                  |  9 ++-
 src/app.html                                  |  2 +
 src/lib/cache.ts                              | 60 +++++++++++++++++++
 src/lib/cards/media/PopfeedReviews/index.ts   |  1 +
 src/lib/cards/media/StatusphereCard/index.ts  |  1 +
 src/lib/cards/media/TealFMPlaysCard/index.ts  |  1 +
 src/lib/cards/social/BlueskyPostCard/index.ts |  1 +
 src/lib/cards/social/GuestbookCard/index.ts   |  1 +
 .../social/LatestBlueskyPostCard/index.ts     |  1 +
 src/lib/cards/types.ts                        |  5 ++
 src/lib/website/load.ts                       | 23 ++++++-
 .../[[actor=actor]]/(pages)/+layout.server.ts | 17 +++++-
 12 files changed, 118 insertions(+), 4 deletions(-)

diff --git a/src/app.d.ts b/src/app.d.ts
index 3cf574a..c94ea08 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,4 +1,9 @@
-import type { KVNamespace, D1Database } from '@cloudflare/workers-types';
+import type {
+	KVNamespace,
+	D1Database,
+	ExecutionContext,
+	CacheStorage
+} from '@cloudflare/workers-types';
 import type { OAuthSession } from '@atcute/oauth-node-client';
 import type { Client } from '@atcute/client';
 import type { Did } from '@atcute/lexicons';
@@ -26,6 +31,8 @@ declare global {
 				COOKIE_SECRET: string;
 				CRON_SECRET: string;
 			};
+			context: ExecutionContext;
+			caches: CacheStorage & { default: Cache };
 		}
 	}
 }
diff --git a/src/app.html b/src/app.html
index c4f961f..be75a2d 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,6 +3,8 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="preconnect" href="https://cdn.bsky.app" crossorigin />
+		<link rel="preconnect" href="https://video.bsky.app" crossorigin />
 		%sveltekit.head%
 
 		<script
diff --git a/src/lib/cache.ts b/src/lib/cache.ts
index f470b7f..e5cf608 100644
--- a/src/lib/cache.ts
+++ b/src/lib/cache.ts
@@ -14,6 +14,7 @@ const NAMESPACE_TTL = {
 	ical: 60 * 60 * 2, // 2 hours
 	events: 60 * 60, // 1 hour
 	rsvps: 60 * 60, // 1 hour
+	'card-data': 5 * 60, // 5 minutes (fresh window for loadData SWR)
 	meta: 0 // no auto-expiry
 } as const;
 
@@ -81,6 +82,63 @@ export class CacheService {
 		await this.kv.put(`${namespace}:${key}`, value, ttl > 0 ? { expirationTtl: ttl } : undefined);
 	}
 
+	// === Stale-while-revalidate ===
+
+	/**
+	 * Read-through cache with stale-while-revalidate semantics.
+	 *
+	 * - Fresh hit (now < staleAt): returns cached value immediately.
+	 * - Stale hit: returns cached value immediately, kicks off a background refresh via `waitUntil`.
+	 * - Miss: awaits the loader and populates the cache.
+	 *
+	 * The stored entry lives in KV for `ttl + staleWindow` seconds so stale reads can keep
+	 * serving while a refresh runs.
+	 */
+	async swr<T>(
+		namespace: CacheNamespace,
+		key: string,
+		loader: () => Promise<T>,
+		opts?: {
+			ttl?: number;
+			staleWindow?: number;
+			waitUntil?: (p: Promise<unknown>) => void;
+		}
+	): Promise<T> {
+		const ttl = opts?.ttl ?? NAMESPACE_TTL[namespace] ?? 300;
+		const staleWindow = opts?.staleWindow ?? 24 * 60 * 60;
+		const waitUntil = opts?.waitUntil ?? ((p: Promise<unknown>) => void p.catch(() => {}));
+
+		const now = Date.now();
+		const entry = await this.getJSON<SwrEntry<T>>(namespace, key);
+
+		const refresh = async (): Promise<T> => {
+			const value = await loader();
+			const entry: SwrEntry<T> = { staleAt: Date.now() + ttl * 1000, value };
+			await this.putJSON(namespace, key, entry, ttl + staleWindow);
+			return value;
+		};
+
+		if (entry) {
+			if (entry.staleAt > now) return entry.value;
+			const staleFor = Math.round((now - entry.staleAt) / 1000);
+			console.log(`[swr] background refresh ${namespace}:${key} (stale ${staleFor}s)`);
+			const started = Date.now();
+			waitUntil(
+				refresh().then(
+					() => console.log(`[swr] refreshed ${namespace}:${key} in ${Date.now() - started}ms`),
+					(err) =>
+						console.error(
+							`[swr] refresh failed ${namespace}:${key} after ${Date.now() - started}ms`,
+							err
+						)
+				)
+			);
+			return entry.value;
+		}
+
+		return await refresh();
+	}
+
 	// === Profile cache (did → profile data) ===
 	async getProfile(did: Did): Promise<CachedProfile> {
 		const cached = await this.getJSON<CachedProfile>('profile', did);
@@ -101,6 +159,8 @@ export class CacheService {
 	}
 }
 
+type SwrEntry<T> = { staleAt: number; value: T };
+
 export type CachedProfile = {
 	did: string;
 	handle: string;
diff --git a/src/lib/cards/media/PopfeedReviews/index.ts b/src/lib/cards/media/PopfeedReviews/index.ts
index 9dd02cd..9c484a7 100644
--- a/src/lib/cards/media/PopfeedReviews/index.ts
+++ b/src/lib/cards/media/PopfeedReviews/index.ts
@@ -16,6 +16,7 @@ export const PopfeedReviewsCardDefinition = {
 
 		return data;
 	},
+	cacheLoadData: true,
 	minH: 3,
 	canHaveLabel: true,
 
diff --git a/src/lib/cards/media/StatusphereCard/index.ts b/src/lib/cards/media/StatusphereCard/index.ts
index f758d40..74acf88 100644
--- a/src/lib/cards/media/StatusphereCard/index.ts
+++ b/src/lib/cards/media/StatusphereCard/index.ts
@@ -25,6 +25,7 @@ export const StatusphereCardDefinition = {
 		const data = await listRecords({ did, collection: 'xyz.statusphere.status', limit: 1 });
 		return data[0];
 	},
+	cacheLoadData: true,
 	upload: async (item) => {
 		if (item.cardData.mode === 'statusphere' && item.cardData.hasUpdate) {
 			await putRecord({
diff --git a/src/lib/cards/media/TealFMPlaysCard/index.ts b/src/lib/cards/media/TealFMPlaysCard/index.ts
index 391cc85..f919200 100644
--- a/src/lib/cards/media/TealFMPlaysCard/index.ts
+++ b/src/lib/cards/media/TealFMPlaysCard/index.ts
@@ -20,6 +20,7 @@ export const TealFMPlaysCardDefinition = {
 
 		return data;
 	},
+	cacheLoadData: true,
 	minW: 4,
 	canHaveLabel: true,
 	canAdd: ({ collections }) => collections.includes('fm.teal.alpha.feed.play'),
diff --git a/src/lib/cards/social/BlueskyPostCard/index.ts b/src/lib/cards/social/BlueskyPostCard/index.ts
index bfacd98..b7fc3b3 100644
--- a/src/lib/cards/social/BlueskyPostCard/index.ts
+++ b/src/lib/cards/social/BlueskyPostCard/index.ts
@@ -61,6 +61,7 @@ export const BlueskyPostCardDefinition = {
 
 		return postsMap;
 	},
+	cacheLoadData: true,
 	minW: 4,
 	name: 'Bluesky Post',
 
diff --git a/src/lib/cards/social/GuestbookCard/index.ts b/src/lib/cards/social/GuestbookCard/index.ts
index eb36cf0..b4abee2 100644
--- a/src/lib/cards/social/GuestbookCard/index.ts
+++ b/src/lib/cards/social/GuestbookCard/index.ts
@@ -59,6 +59,7 @@ export const GuestbookCardDefinition = {
 
 		return results;
 	},
+	cacheLoadData: true,
 	name: 'Guestbook',
 	keywords: ['comments', 'visitors', 'message', 'sign'],
 	groups: ['Social'],
diff --git a/src/lib/cards/social/LatestBlueskyPostCard/index.ts b/src/lib/cards/social/LatestBlueskyPostCard/index.ts
index f51ccd5..8ec8c73 100644
--- a/src/lib/cards/social/LatestBlueskyPostCard/index.ts
+++ b/src/lib/cards/social/LatestBlueskyPostCard/index.ts
@@ -19,6 +19,7 @@ export const LatestBlueskyPostCardDefinition = {
 
 		return JSON.parse(JSON.stringify(authorFeed));
 	},
+	cacheLoadData: true,
 	minW: 4,
 
 	name: 'Latest Bluesky Post',
diff --git a/src/lib/cards/types.ts b/src/lib/cards/types.ts
index e5e9c83..d2019e3 100644
--- a/src/lib/cards/types.ts
+++ b/src/lib/cards/types.ts
@@ -40,6 +40,11 @@ export type CardDefinition = {
 		{ did, handle, cache }: { did: Did; handle: string; cache?: CacheService }
 	) => Promise<unknown>;
 
+	// Opt into server-side KV caching of `loadData` results, with stale-while-revalidate.
+	// Key = `${type}:${did}:${hash(items.cardData)}`. On SSR, a stale hit is returned
+	// immediately while a background refresh repopulates the cache.
+	cacheLoadData?: boolean | { ttl?: number; staleWindow?: number };
+
 	// server-side version of loadData that calls external APIs directly
 	// instead of going through self-referential /api/ routes (avoids 522 on Cloudflare Workers)
 	loadDataServer?: (
diff --git a/src/lib/website/load.ts b/src/lib/website/load.ts
index 4dc089f..8e781bd 100644
--- a/src/lib/website/load.ts
+++ b/src/lib/website/load.ts
@@ -468,6 +468,16 @@ function migrateCard(card: Item): Item {
 	return card;
 }
 
+function hashCardData(items: Item[]): string {
+	const str = JSON.stringify(items.map((i) => i.cardData ?? null));
+	let hash = 0x811c9dc5;
+	for (let i = 0; i < str.length; i++) {
+		hash ^= str.charCodeAt(i);
+		hash = Math.imul(hash, 0x01000193);
+	}
+	return (hash >>> 0).toString(36);
+}
+
 async function loadAdditionalData(
 	cards: Item[],
 	{
@@ -496,7 +506,18 @@ async function loadAdditionalData(
 					platform
 				});
 			} else if (cardDef?.loadData) {
-				additionDataPromises[cardType] = cardDef.loadData(items, { did, handle, cache });
+				const loader = () => cardDef.loadData!(items, { did, handle, cache });
+				if (cache && cardDef.cacheLoadData) {
+					const opts = typeof cardDef.cacheLoadData === 'object' ? cardDef.cacheLoadData : {};
+					const key = `${cardType}:${did}:${hashCardData(items)}`;
+					additionDataPromises[cardType] = cache.swr('card-data', key, loader, {
+						ttl: opts.ttl,
+						staleWindow: opts.staleWindow,
+						waitUntil: platform?.context?.waitUntil?.bind(platform.context)
+					});
+				} else {
+					additionDataPromises[cardType] = loader();
+				}
 			}
 		} catch {
 			console.error('error getting additional data for', cardType);
diff --git a/src/routes/[[actor=actor]]/(pages)/+layout.server.ts b/src/routes/[[actor=actor]]/(pages)/+layout.server.ts
index 5d4f7d1..b906045 100644
--- a/src/routes/[[actor=actor]]/(pages)/+layout.server.ts
+++ b/src/routes/[[actor=actor]]/(pages)/+layout.server.ts
@@ -4,7 +4,7 @@ import { error } from '@sveltejs/kit';
 import { createCache } from '$lib/cache';
 import { getActor } from '$lib/actor.js';
 
-export async function load({ params, platform, request }) {
+export async function load({ params, platform, request, locals, route, setHeaders }) {
 	if (env.PUBLIC_IS_SELFHOSTED) error(404);
 
 	const cache = createCache(platform);
@@ -15,5 +15,18 @@ export async function load({ params, platform, request }) {
 		throw error(404, 'Page not found');
 	}
 
-	return await loadData(actor, cache, params.page, env, platform);
+	const data = await loadData(actor, cache, params.page, env, platform);
+
+	const isInteractiveRoute = route.id?.endsWith('/edit') || route.id?.endsWith('/copy') || false;
+	const isAnonymous = !locals.did;
+
+	if (isAnonymous && !isInteractiveRoute) {
+		setHeaders({
+			'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=600'
+		});
+	} else {
+		setHeaders({ 'Cache-Control': 'private, no-store' });
+	}
+
+	return data;
 }