loadData -> loadDataServer

src/lib/cards/media/LastFMCard/LastFMProfileCard/index.ts

···
 		}
 		return allData;
 	},
+	loadDataServer: async (items, { cache, env }) => {
+		const apiKey = env?.LASTFM_API_KEY;
+		if (!apiKey) return {};
+		const allData: Record<string, unknown> = {};
+		for (const item of items) {
+			const username = item.cardData.lastfmUsername;
+			if (!username) continue;
+			try {
+				const cacheKey = `user.getInfo:${username}:7day:50`;
+				const cached = await cache?.get('lastfm', cacheKey);
+				if (cached) {
+					allData[`lastfmProfile:${username}`] = JSON.parse(cached)?.user;
+					continue;
+				}
+				const params = new URLSearchParams({
+					method: 'user.getInfo',
+					user: username,
+					api_key: apiKey,
+					format: 'json',
+					limit: '50'
+				});
+				const response = await fetch(`https://ws.audioscrobbler.com/2.0/?${params}`);
+				if (!response.ok) continue;
+				const data = await response.json();
+				if (data.error) continue;
+				await cache?.put('lastfm', cacheKey, JSON.stringify(data), 12 * 60 * 60);
+				allData[`lastfmProfile:${username}`] = data?.user;
+			} catch (error) {
+				console.error('Failed to fetch Last.fm profile:', error);
+			}
+		}
+		return allData;
+	},
 	minW: 2,
 	minH: 2,
 	name: 'Last.fm Profile',

src/lib/cards/media/LastFMCard/LastFMRecentTracksCard/index.ts

···
 		}
 		return allData;
 	},
+	loadDataServer: async (items, { cache, env }) => {
+		const apiKey = env?.LASTFM_API_KEY;
+		if (!apiKey) return {};
+		const allData: Record<string, unknown> = {};
+		for (const item of items) {
+			const username = item.cardData.lastfmUsername;
+			if (!username) continue;
+			try {
+				const cacheKey = `user.getRecentTracks:${username}:7day:50`;
+				const cached = await cache?.get('lastfm', cacheKey);
+				if (cached) {
+					allData[`lastfmRecentTracks:${username}`] = JSON.parse(cached)?.recenttracks?.track ?? [];
+					continue;
+				}
+				const params = new URLSearchParams({
+					method: 'user.getRecentTracks',
+					user: username,
+					api_key: apiKey,
+					format: 'json',
+					limit: '50'
+				});
+				const response = await fetch(`https://ws.audioscrobbler.com/2.0/?${params}`);
+				if (!response.ok) continue;
+				const data = await response.json();
+				if (data.error) continue;
+				await cache?.put('lastfm', cacheKey, JSON.stringify(data), 15 * 60);
+				allData[`lastfmRecentTracks:${username}`] = data?.recenttracks?.track ?? [];
+			} catch (error) {
+				console.error('Failed to fetch Last.fm recent tracks:', error);
+			}
+		}
+		return allData;
+	},
 	onUrlHandler: (url, item) => {
 		const username = getLastFMUsername(url);
 		if (!username) return null;

src/lib/cards/media/LastFMCard/LastFMTopAlbumsCard/index.ts

···
 		}
 		return allData;
 	},
+	loadDataServer: async (items, { cache, env }) => {
+		const apiKey = env?.LASTFM_API_KEY;
+		if (!apiKey) return {};
+		const allData: Record<string, unknown> = {};
+		for (const item of items) {
+			const username = item.cardData.lastfmUsername;
+			const period = item.cardData.period ?? '7day';
+			if (!username) continue;
+			try {
+				const cacheKey = `user.getTopAlbums:${username}:${period}:50`;
+				const cached = await cache?.get('lastfm', cacheKey);
+				if (cached) {
+					allData[`lastfmTopAlbums:${username}:${period}`] =
+						JSON.parse(cached)?.topalbums?.album ?? [];
+					continue;
+				}
+				const params = new URLSearchParams({
+					method: 'user.getTopAlbums',
+					user: username,
+					api_key: apiKey,
+					format: 'json',
+					limit: '50',
+					period
+				});
+				const response = await fetch(`https://ws.audioscrobbler.com/2.0/?${params}`);
+				if (!response.ok) continue;
+				const data = await response.json();
+				if (data.error) continue;
+				await cache?.put('lastfm', cacheKey, JSON.stringify(data), 60 * 60);
+				allData[`lastfmTopAlbums:${username}:${period}`] = data?.topalbums?.album ?? [];
+			} catch (error) {
+				console.error('Failed to fetch Last.fm top albums:', error);
+			}
+		}
+		return allData;
+	},
 	allowSetColor: true,
 	defaultColor: 'base',
 	minW: 2,

src/lib/cards/media/LastFMCard/LastFMTopTracksCard/index.ts

···
 		}
 		return allData;
 	},
+	loadDataServer: async (items, { cache, env }) => {
+		const apiKey = env?.LASTFM_API_KEY;
+		if (!apiKey) return {};
+		const allData: Record<string, unknown> = {};
+		for (const item of items) {
+			const username = item.cardData.lastfmUsername;
+			const period = item.cardData.period ?? '7day';
+			if (!username) continue;
+			try {
+				const cacheKey = `user.getTopTracks:${username}:${period}:50`;
+				const cached = await cache?.get('lastfm', cacheKey);
+				if (cached) {
+					allData[`lastfmTopTracks:${username}:${period}`] =
+						JSON.parse(cached)?.toptracks?.track ?? [];
+					continue;
+				}
+				const params = new URLSearchParams({
+					method: 'user.getTopTracks',
+					user: username,
+					api_key: apiKey,
+					format: 'json',
+					limit: '50',
+					period
+				});
+				const response = await fetch(`https://ws.audioscrobbler.com/2.0/?${params}`);
+				if (!response.ok) continue;
+				const data = await response.json();
+				if (data.error) continue;
+				await cache?.put('lastfm', cacheKey, JSON.stringify(data), 60 * 60);
+				allData[`lastfmTopTracks:${username}:${period}`] = data?.toptracks?.track ?? [];
+			} catch (error) {
+				console.error('Failed to fetch Last.fm top tracks:', error);
+			}
+		}
+		return allData;
+	},
 	minW: 3,
 	minH: 2,
 	canHaveLabel: true,

src/lib/cards/social/GitHubContributorsCard/index.ts

···
 		}
 		return contributorsData;
 	},
+	loadDataServer: async (items, { cache }) => {
+		const contributorsData: GitHubContributorsLoadedData = {};
+		for (const item of items) {
+			const { owner, repo } = item.cardData;
+			if (!owner || !repo) continue;
+			const key = `${owner}/${repo}`;
+			if (contributorsData[key]) continue;
+			try {
+				const cached = await cache?.get('gh-contrib', key);
+				if (cached) {
+					contributorsData[key] = JSON.parse(cached);
+					continue;
+				}
+				const response = await fetch(
+					`https://edge-function-github-contribution.vercel.app/api/github-contributors?owner=${encodeURIComponent(owner)}&repo=${encodeURIComponent(repo)}`
+				);
+				if (!response.ok) continue;
+				const data = await response.json();
+				await cache?.put('gh-contrib', key, JSON.stringify(data));
+				contributorsData[key] = data;
+			} catch (error) {
+				console.error('Failed to fetch GitHub contributors:', error);
+			}
+		}
+		return contributorsData;
+	},
 	onUrlHandler: (url, item) => {
 		const match = url.match(/github\.com\/([^/]+)\/([^/]+)/);
 		if (!match) return null;

src/lib/cards/social/GitHubProfileCard/index.ts

···
 		}
 		return githubData;
 	},
+	loadDataServer: async (items, { cache }) => {
+		const githubData: Record<string, GitHubContributionsData> = {};
+		for (const item of items) {
+			const user = item.cardData.user;
+			if (!user) continue;
+			try {
+				const cached = await cache?.get('github', user);
+				if (cached) {
+					githubData[user] = JSON.parse(cached);
+					continue;
+				}
+				const response = await fetch(
+					`https://edge-function-github-contribution.vercel.app/api/github-data?user=${encodeURIComponent(user)}`
+				);
+				if (!response.ok) continue;
+				const data = await response.json();
+				if (!data?.user) continue;
+				const result = data.user as GitHubContributionsData;
+				await cache?.put('github', user, JSON.stringify(result));
+				githubData[user] = result;
+			} catch (error) {
+				console.error('Failed to fetch GitHub contributions:', error);
+			}
+		}
+		return githubData;
+	},
 	onUrlHandler: (url, item) => {
 		const username = getGitHubUsername(url);
 

src/lib/cards/social/NpmxLikesLeaderboardCard/index.ts

···
 		const data = await res.json();
 		return data;
 	},
+	loadDataServer: async (_items, { cache }) => {
+		try {
+			const cached = await cache?.get('npmx', 'likes');
+			if (cached) return JSON.parse(cached);
+			const response = await fetch(
+				'https://npmx-likes-leaderboard-api-production.up.railway.app/api/leaderboard/likes?limit=20'
+			);
+			if (!response.ok) return undefined;
+			const data = await response.json();
+			await cache?.put('npmx', 'likes', JSON.stringify(data));
+			return data;
+		} catch (error) {
+			console.error('Error fetching npmx leaderboard:', error);
+			return undefined;
+		}
+	},
 	minW: 3,
 	canHaveLabel: true,
 

src/lib/cards/types.ts

···
 		{ did, handle, cache }: { did: Did; handle: string; cache?: CacheService }
 	) => Promise<unknown>;
 
+	// server-side version of loadData that calls external APIs directly
+	// instead of going through self-referential /api/ routes (avoids 522 on Cloudflare Workers)
+	loadDataServer?: (
+		items: Item[],
+		{
+			did,
+			handle,
+			cache,
+			env
+		}: {
+			did: Did;
+			handle: string;
+			cache?: CacheService;
+			env?: Record<string, string | undefined>;
+		}
+	) => Promise<unknown>;
+
 	// show color selection popup
 	allowSetColor?: boolean;
 

src/lib/website/load.ts

···
 	handle: ActorIdentifier,
 	cache: CacheService | undefined,
 	forceUpdate: boolean = false,
-	page: string = 'self'
+	page: string = 'self',
+	env?: Record<string, string | undefined>
 ): Promise<WebsiteData> {
 	if (!handle) throw error(404);
 	if (handle === 'favicon.ico') throw error(404);
···
 	for (const cardType of cardTypesArray) {
 		const cardDef = CardDefinitionsByType[cardType];
 
-		if (!cardDef?.loadData) continue;
+		const items = cards.filter((v) => cardType === v.value.cardType).map((v) => v.value) as Item[];
 
 		try {
-			additionDataPromises[cardType] = cardDef.loadData(
-				cards.filter((v) => cardType === v.value.cardType).map((v) => v.value) as Item[],
-				loadOptions
-			);
+			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);
 		}

src/routes/+page.server.ts

···
 import { loadData } from '$lib/website/load';
 import { env } from '$env/dynamic/public';
+import { env as privateEnv } from '$env/dynamic/private';
 import { createCache } from '$lib/cache';
 import type { ActorIdentifier } from '@atcute/lexicons';
 
···
 		try {
 			const did = await kv.get(customDomain);
 
-			if (did) return await loadData(did as ActorIdentifier, cache);
+			if (did) return await loadData(did as ActorIdentifier, cache, false, 'self', privateEnv);
 		} catch (error) {
 			console.error('failed to get custom domain kv', error);
 		}
 	}
 
-	return await loadData(handle as ActorIdentifier, cache);
+	return await loadData(handle as ActorIdentifier, cache, false, 'self', privateEnv);
 }

src/routes/[actor=actor]/(pages)/+layout.server.ts

···
 
 	const cache = createCache(platform);
 
-	return await loadData(params.actor, cache, false, params.page);
+	return await loadData(params.actor, cache, false, params.page, env);
 }

src/routes/[actor=actor]/.well-known/site.standard.publication/+server.ts

···
 import { loadData } from '$lib/website/load';
 import { createCache } from '$lib/cache';
+import { env } from '$env/dynamic/private';
 
 import { error } from '@sveltejs/kit';
 import { text } from '@sveltejs/kit';
···
 export async function GET({ params, platform }) {
 	const cache = createCache(platform);
 
-	const data = await loadData(params.actor, cache, false, params.page);
+	const data = await loadData(params.actor, cache, false, params.page, env);
 
 	if (!data.publication) throw error(300);
 

src/routes/[actor=actor]/api/refresh/+server.ts

···
 import { createCache } from '$lib/cache';
 import { loadData } from '$lib/website/load.js';
+import { env } from '$env/dynamic/private';
 import type { Handle } from '@atcute/lexicons';
 import { json } from '@sveltejs/kit';
 
···
 	const cache = createCache(platform);
 	if (!cache) return json('no cache');
 
-	await loadData(params.actor, cache, true);
+	await loadData(params.actor, cache, true, 'self', env);
 
 	return json('ok');
 }

src/routes/[actor=actor]/og.png/+server.ts

···
 import { getCDNImageBlobUrl } from '$lib/atproto/methods.js';
 import { createCache } from '$lib/cache';
 import { loadData } from '$lib/website/load';
+import { env } from '$env/dynamic/private';
 import type { Handle } from '@atcute/lexicons';
 import { ImageResponse } from '@ethercorps/sveltekit-og';
 
···
 export async function GET({ params, platform }) {
 	const cache = createCache(platform);
 
-	const data = await loadData(params.actor, cache);
+	const data = await loadData(params.actor, cache, false, 'self', env);
 
 	let image: string | undefined = data.profile.avatar;
 

src/routes/api/update/+server.ts

···
 import { createCache } from '$lib/cache';
 import { getCache, loadData } from '$lib/website/load';
+import { env } from '$env/dynamic/private';
 import { json } from '@sveltejs/kit';
 import type { AppBskyActorDefs } from '@atcute/bluesky';
 
···
 
 		try {
 			const cached = await getCache(handle, 'self', cache);
-			if (!cached) await loadData(handle, cache, true);
+			if (!cached) await loadData(handle, cache, true, 'self', env);
 		} catch (error) {
 			console.error(error);
 			return json('error');

src/routes/edit/+page.server.ts

···
 import { loadData } from '$lib/website/load';
 import { env } from '$env/dynamic/public';
+import { env as privateEnv } from '$env/dynamic/private';
 import { createCache } from '$lib/cache';
 import type { ActorIdentifier } from '@atcute/lexicons';
 
···
 		try {
 			const did = await kv.get(customDomain);
 
-			if (did) return await loadData(did as ActorIdentifier, cache);
+			if (did) return await loadData(did as ActorIdentifier, cache, false, 'self', privateEnv);
 		} catch (error) {
 			console.error('failed to get custom domain kv', error);
 		}
 	}
 
-	return await loadData(handle as ActorIdentifier, cache);
+	return await loadData(handle as ActorIdentifier, cache, false, 'self', privateEnv);
 }

src/routes/p/[[page]]/+layout.server.ts

···
 import { loadData } from '$lib/website/load';
 import { env } from '$env/dynamic/public';
+import { env as privateEnv } from '$env/dynamic/private';
 import { createCache } from '$lib/cache';
 import type { Did, Handle } from '@atcute/lexicons';
 
···
 	if (kv && customDomain) {
 		try {
 			const did = await kv.get(customDomain);
-			return await loadData(did as Did, cache, false, params.page);
+			return await loadData(did as Did, cache, false, params.page, privateEnv);
 		} catch {
 			console.error('failed');
 		}
 	}
 
-	return await loadData(handle as Handle, cache, false, params.page);
+	return await loadData(handle as Handle, cache, false, params.page, privateEnv);
 }

svelte.config.js

···
 		adapter: adapter(),
 		paths: {
 			base: ''
+		},
+		experimental: {
+			remoteFunctions: true
 		}
 	},
+
 	compilerOptions: {
 		experimental: {
 			async: true