Merge branch 'main' into fix-time-color-background

docs/Beta.md

···
 - site.standard
   - move description to markdownDescription and set description as text only
 
+- allow editing on mobile
+
+- get automatic layout for mobile if only edited on desktop (and vice versa)
+
+- add cards in middle of current position (both mobile and desktop version)
+
+- show nsfw warnings
+
 - big button card
 
 - card with big call to action button
 
-- link card allow changing favicon, og image (+ hide favicon)
-
 - video card?
 
 - allow setting base and accent color
 
 - ask to fill with some default cards on page creation
 
-- share button (copy share link to blento, maybe post to bluesky?)
-
-- add icons to "change card to..." popover
-
 - when adding images try to add them in a size that best fits aspect ratio
 
 - onboarding
-
-- show alert when user tries to close window with unsaved changes

docs/CardIdeas.md

···
 ## media
 
 - general video card
-- inline youtube video
+- [x] inline youtube video
 - cartoons: aka https://www.opendoodles.com/
 - excalidraw (/svg card)
 - latest blog post (e.g. leaflet)
 - fake 3d image (with depth map)
-- fluid text effect (https://flo-bit.dev/projects/fluid-text-effect/)
-- gifs
-- little drawing app
+- [x] fluid text effect (https://flo-bit.dev/projects/fluid-text-effect/)
+- [x] gifs
+- [x] little drawing app
 - css voxel art
 - 3d model
+- spotify or apple music playlist
 
 ## social accounts
 
 - instagram card (showing follow button, follower count, latest posts)
-- github card (showing activity grid)
+- [x] github card (showing activity grid)
 - bluesky account card (showing follow button, follower count, avatar, name, cover image)
 - youtube channel card (showing channel name, latest videos, follow button?)
 - bluesky posts workcloud
···
 - teal.fm
   - [x] last played songs
 - tangled.sh
+  - pinned repos
+  - activity heatmap?
 - popfeed.social
   - reading goal
   - [x] latest ratings
   - lists
-- smokesignal.events (https://pdsls.dev/at://did:plc:xbtmt2zjwlrfegqvch7fboei/events.smokesignal.calendar.event/3ltn2qrxf3626)
-- statusphere.xyz (https://googlefonts.github.io/noto-emoji-animation/, https://gist.github.com/sanjacob/a0ccdf6d88f15bf158d8895090722d14)
+- smokesignal.events
+  - [x] specific event
+  - all future events i'm hosting/attending
+- [x] statusphere.xyz (TODO: assing to specific record)
 - goals.garden
 - flashes.blue (https://pdsls.dev/at://did:plc:aytgljyikzbtgrnac2u4ccft/blue.flashes.actor.portfolio, https://app.flashes.blue/profile/j4ck.xyz)
 - room: flo-bit.dev/room

src/lib/atproto/UI/Button.svelte

···
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	type Props = HTMLButtonAttributes & {
+		children: () => any;
+		ref?: HTMLButtonElement | null;
+	};
+
+	let { children, ref = $bindable(), class: className, ...props }: Props = $props();
+</script>
+
+<button
+	bind:this={ref}
+	class={[
+		'bg-accent-600 hover:bg-accent-500 focus-visible:outline-accent-600 text-white',
+		'inline-flex cursor-pointer justify-center rounded-full px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	]}
+	{...props}
+>
+	{@render children()}
+</button>

src/lib/atproto/UI/HandleInput.svelte

···
+<script lang="ts">
+	import { AppBskyActorDefs } from '@atcute/bluesky';
+	import { Combobox } from 'bits-ui';
+	import { searchActorsTypeahead } from '$lib/atproto';
+	import { Avatar } from '@foxui/core';
+
+	let results: AppBskyActorDefs.ProfileViewBasic[] = $state([]);
+
+	async function search(q: string) {
+		if (!q || q.length < 2) {
+			results = [];
+			return;
+		}
+		results = (await searchActorsTypeahead(q, 5)).actors;
+	}
+	let open = $state(false);
+
+	let {
+		value = $bindable(),
+		onselected,
+		ref = $bindable()
+	}: {
+		value: string;
+		onselected: (actor: AppBskyActorDefs.ProfileViewBasic) => void;
+		ref?: HTMLInputElement | null;
+	} = $props();
+</script>
+
+<Combobox.Root
+	type="single"
+	onOpenChangeComplete={(o) => {
+		if (!o) results = [];
+	}}
+	bind:value={
+		() => {
+			return value;
+		},
+		(val) => {
+			const profile = results.find((v) => v.handle === val);
+			if (profile) onselected?.(profile);
+
+			value = val;
+		}
+	}
+	bind:open={
+		() => {
+			return open && results.length > 0;
+		},
+		(val) => {
+			open = val;
+		}
+	}
+>
+	<Combobox.Input
+		bind:ref
+		oninput={(e) => {
+			value = e.currentTarget.value;
+			search(e.currentTarget.value);
+		}}
+		class="focus-within:outline-accent-600 dark:focus-within:outline-accent-500 dark:placeholder:text-base-400 w-full touch-none rounded-full border-0 bg-white ring-0 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 dark:bg-white/5 dark:outline-white/10"
+		placeholder="handle"
+		id=""
+		aria-label="enter your handle"
+	/>
+	<Combobox.Content
+		class="border-base-300 bg-base-50 dark:bg-base-900 dark:border-base-800 z-100 max-h-[30dvh] w-full rounded-2xl border shadow-lg"
+		sideOffset={10}
+		align="start"
+		side="top"
+	>
+		<Combobox.Viewport class="w-full p-1">
+			{#each results as actor (actor.did)}
+				<Combobox.Item
+					class="rounded-button data-highlighted:bg-accent-100 dark:data-highlighted:bg-accent-600/30 my-0.5 flex w-full cursor-pointer items-center gap-2 rounded-xl p-2 px-2"
+					value={actor.handle}
+					label={actor.handle}
+				>
+					<Avatar
+						src={actor.avatar?.replace('avatar', 'avatar_thumbnail')}
+						alt=""
+						class="size-6 rounded-full"
+					/>
+					{actor.handle}
+				</Combobox.Item>
+			{/each}
+		</Combobox.Viewport>
+	</Combobox.Content>
+</Combobox.Root>

src/lib/atproto/UI/LoginModal.svelte

···
+<script lang="ts" module>
+	export const loginModalState = $state({
+		visible: false,
+		show: () => (loginModalState.visible = true),
+		hide: () => (loginModalState.visible = false)
+	});
+</script>
+
+<script lang="ts">
+	import { login, signup } from '$lib/atproto';
+	import type { ActorIdentifier, Did } from '@atcute/lexicons';
+	import Button from './Button.svelte';
+	import { onMount, tick } from 'svelte';
+	import SecondaryButton from './SecondaryButton.svelte';
+	import HandleInput from './HandleInput.svelte';
+	import { AppBskyActorDefs } from '@atcute/bluesky';
+	import { Avatar } from '@foxui/core';
+
+	let { signUp = true, loginOnSelect = true }: { signUp?: boolean; loginOnSelect?: boolean } =
+		$props();
+
+	let value = $state('');
+	let error: string | null = $state(null);
+	let loadingLogin = $state(false);
+	let loadingSignup = $state(false);
+
+	async function onSubmit(event?: Event) {
+		event?.preventDefault();
+		if (loadingLogin) return;
+
+		error = null;
+		loadingLogin = true;
+
+		try {
+			await login(value as ActorIdentifier);
+		} catch (err) {
+			error = err instanceof Error ? err.message : String(err);
+		} finally {
+			loadingLogin = false;
+		}
+	}
+
+	let input: HTMLInputElement | null = $state(null);
+	let submitButton: HTMLButtonElement | null = $state(null);
+
+	$effect(() => {
+		if (!loginModalState.visible) {
+			error = null;
+			value = '';
+			loadingLogin = false;
+			selectedActor = undefined;
+		} else {
+			focusInput();
+		}
+	});
+
+	function focusInput() {
+		tick().then(() => {
+			input?.focus();
+		});
+	}
+	function focusSubmit() {
+		tick().then(() => {
+			submitButton?.focus();
+		});
+	}
+
+	let selectedActor: AppBskyActorDefs.ProfileViewBasic | undefined = $state();
+
+	let recentLogins: Record<Did, AppBskyActorDefs.ProfileViewBasic> = $state({});
+
+	onMount(() => {
+		try {
+			recentLogins = JSON.parse(localStorage.getItem('recent-logins') || '{}');
+		} catch {
+			console.error('Failed to load recent logins');
+		}
+	});
+
+	function removeRecentLogin(did: Did) {
+		try {
+			delete recentLogins[did];
+
+			localStorage.setItem('recent-logins', JSON.stringify(recentLogins));
+		} catch {
+			console.error('Failed to remove recent login');
+		}
+	}
+
+	let recentLoginsView = $state(true);
+
+	let showRecentLogins = $derived(
+		Object.keys(recentLogins).length > 0 && !loadingLogin && !selectedActor && recentLoginsView
+	);
+</script>
+
+{#if loginModalState.visible}
+	<div
+		class="fixed inset-0 z-100 w-screen overflow-y-auto"
+		aria-labelledby="modal-title"
+		role="dialog"
+		aria-modal="true"
+	>
+		<div
+			class="bg-base-50/90 dark:bg-base-950/90 fixed inset-0 backdrop-blur-sm transition-opacity"
+			onclick={() => (loginModalState.visible = false)}
+			aria-hidden="true"
+		></div>
+
+		<div class="pointer-events-none fixed inset-0 isolate z-10 w-screen overflow-y-auto">
+			<div
+				class="flex min-h-full w-screen items-end justify-center p-4 text-center sm:items-center sm:p-0"
+			>
+				<div
+					class="border-base-200 bg-base-100 dark:border-base-700 dark:bg-base-800 pointer-events-auto relative w-full transform overflow-hidden rounded-2xl border px-4 pt-4 pb-4 text-left shadow-xl transition-all sm:my-8 sm:max-w-sm sm:p-6"
+				>
+					<h3 class="text-base-900 dark:text-base-100 font-semibold" id="modal-title">
+						Login with your internet handle
+					</h3>
+
+					<div class="text-base-800 dark:text-base-200 mt-2 mb-2 text-xs font-light">
+						e.g. your bluesky account
+					</div>
+
+					<form onsubmit={onSubmit} class="mt-2 flex w-full flex-col gap-2">
+						{#if showRecentLogins}
+							<div class="mt-2 mb-2 text-sm font-medium">Recent logins</div>
+							<div class="flex flex-col gap-2">
+								{#each Object.values(recentLogins)
+									.filter((l) => l.handle && l.handle !== 'handle.invalid')
+									.slice(0, 4) as recentLogin (recentLogin.did)}
+									<div class="group">
+										<div
+											class="group-hover:bg-base-300 bg-base-200 dark:bg-base-700 dark:hover:bg-base-600 dark:border-base-500/50 border-base-300 relative flex h-10 w-full items-center justify-between gap-2 rounded-full border px-2 font-semibold transition-colors duration-100"
+										>
+											<div class="flex items-center gap-2">
+												<Avatar class="size-6" src={recentLogin.avatar} />
+												{recentLogin.handle}
+											</div>
+											<button
+												class="z-20 cursor-pointer"
+												onclick={() => {
+													value = recentLogin.handle;
+													selectedActor = recentLogin;
+													if (loginOnSelect) onSubmit();
+													else focusSubmit();
+												}}
+											>
+												<div class="absolute inset-0 h-full w-full"></div>
+												<span class="sr-only">login</span>
+											</button>
+
+											<button
+												onclick={() => {
+													removeRecentLogin(recentLogin.did);
+												}}
+												class="z-30 cursor-pointer rounded-full p-0.5"
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													class="size-3"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M6 18 18 6M6 6l12 12"
+													/>
+												</svg>
+												<span class="sr-only">sign in with other account</span>
+											</button>
+										</div>
+									</div>
+								{/each}
+							</div>
+						{:else if !selectedActor}
+							<div class="mt-4 w-full">
+								<HandleInput
+									bind:value
+									onselected={(a) => {
+										selectedActor = a;
+										value = a.handle;
+										if (loginOnSelect) onSubmit();
+										else focusSubmit();
+									}}
+									bind:ref={input}
+								/>
+							</div>
+						{:else}
+							<div
+								class="bg-base-200 dark:bg-base-700 border-base-300 dark:border-base-600 mt-4 flex h-10 w-full items-center justify-between gap-2 rounded-full border px-2 font-semibold"
+							>
+								<div class="flex items-center gap-2">
+									<Avatar class="size-6" src={selectedActor.avatar} />
+									{selectedActor.handle}
+								</div>
+
+								<button
+									onclick={() => {
+										selectedActor = undefined;
+										value = '';
+									}}
+									class="cursor-pointer rounded-full p-0.5"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="size-3"
+									>
+										<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+									</svg>
+									<span class="sr-only">sign in with other account</span>
+								</button>
+							</div>
+						{/if}
+
+						{#if error}
+							<p class="text-accent-500 text-sm font-semibold">{error}</p>
+						{/if}
+
+						<div class="mt-4">
+							{#if showRecentLogins}
+								<div class="mt-2 mb-4 text-sm font-medium">Or login with new handle</div>
+
+								<Button
+									onclick={() => {
+										recentLoginsView = false;
+										focusInput();
+									}}
+									class="w-full">Login with new handle</Button
+								>
+							{:else}
+								<Button bind:ref={submitButton} type="submit" disabled={loadingLogin} class="w-full"
+									>{loadingLogin ? 'Loading...' : 'Login'}</Button
+								>
+							{/if}
+						</div>
+
+						{#if signUp}
+							<div
+								class="border-base-200 dark:border-base-700 text-base-800 dark:text-base-200 mt-4 border-t pt-4 text-sm leading-7"
+							>
+								Don't have an account?
+								<div class="mt-3">
+									<SecondaryButton
+										onclick={async () => {
+											loadingSignup = true;
+											await signup();
+										}}
+										disabled={loadingSignup}
+										class="w-full">{loadingSignup ? 'Loading...' : 'Sign Up'}</SecondaryButton
+									>
+								</div>
+							</div>
+						{/if}
+					</form>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}

src/lib/atproto/UI/SecondaryButton.svelte

···
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	type Props = HTMLButtonAttributes & {
+		children: () => any;
+	};
+
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<button
+	class={[
+		'bg-base-300 dark:bg-base-700 dark:text-base-50 dark:hover:bg-base-600 hover:bg-base-200 focus-visible:outline-base-600 text-black transition-colors duration-100',
+		'inline-flex cursor-pointer justify-center rounded-full px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	]}
+	{...props}
+>
+	{@render children()}
+</button>

src/lib/atproto/auth.svelte.ts

···
 	WellKnownHandleResolver
 } from '@atcute/identity-resolver';
 import { Client } from '@atcute/client';
-import type { ActorIdentifier, Did } from '@atcute/lexicons';
 
 import { dev } from '$app/environment';
 import { replaceState } from '$app/navigation';
 
 import { metadata } from './metadata';
-import { getDetailedProfile } from './methods';
-import { signUpPDS } from './settings';
+import { describeRepo, getDetailedProfile } from './methods';
+import { DOH_RESOLVER, REDIRECT_PATH, signUpPDS } from './settings';
 import { SvelteURLSearchParams } from 'svelte/reactivity';
+
+import type { ActorIdentifier, Did } from '@atcute/lexicons';
 
 export const user = $state({
 	agent: null as OAuthUserAgent | null,
···
 
 	const clientId = dev
 		? `http://localhost` +
-			`?redirect_uri=${encodeURIComponent('http://127.0.0.1:5179/oauth/callback')}` +
+			`?redirect_uri=${encodeURIComponent('http://127.0.0.1:5179' + REDIRECT_PATH)}` +
 			`&scope=${encodeURIComponent(metadata.scope)}`
 		: metadata.client_id;
 
 	const handleResolver = new CompositeHandleResolver({
 		methods: {
-			dns: new DohJsonHandleResolver({ dohUrl: 'https://mozilla.cloudflare-dns.com/dns-query' }),
+			dns: new DohJsonHandleResolver({ dohUrl: DOH_RESOLVER }),
 			http: new WellKnownHandleResolver()
 		}
 	});
···
 	configureOAuth({
 		metadata: {
 			client_id: clientId,
-			redirect_uri: dev ? 'http://127.0.0.1:5179/oauth/callback' : metadata.redirect_uris[0]
+			redirect_uri: dev ? 'http://127.0.0.1:5179' + REDIRECT_PATH : metadata.redirect_uris[0]
 		},
 		identityResolver: new LocalActorResolver({
 			handleResolver: handleResolver,
···
 	}
 }
 
-async function finalizeLogin(params: URLSearchParams, did?: Did) {
+async function finalizeLogin(params: SvelteURLSearchParams, did?: Did) {
 	try {
 		const { session } = await finalizeAuthorization(params);
 		replaceState(location.pathname + location.search, {});
···
 
 	const response = await getDetailedProfile();
 
-	user.profile = response;
-	localStorage.setItem(`profile-${actor}`, JSON.stringify(response));
+	if (!response || response.handle === 'handle.invalid') {
+		console.log('invalid handle or no profile from bsky, fetching from repo description');
+		const repo = await describeRepo({ did: actor });
+		user.profile = {
+			did: actor,
+			handle: repo?.handle || 'handle.invalid'
+		};
+		localStorage.setItem(`profile-${actor}`, JSON.stringify(user.profile));
+	} else {
+		user.profile = response;
+		localStorage.setItem(`profile-${actor}`, JSON.stringify(response));
+	}
 }

src/lib/atproto/image-helper.ts

···
+import { getCDNImageBlobUrl, uploadBlob } from './methods';
+
+export function compressImage(
+	file: File | Blob,
+	maxSize: number = 900 * 1024,
+	maxDimension: number = 2048
+): Promise<{
+	blob: Blob;
+	aspectRatio: {
+		width: number;
+		height: number;
+	};
+}> {
+	return new Promise((resolve, reject) => {
+		const img = new Image();
+		const reader = new FileReader();
+
+		reader.onload = (e) => {
+			if (!e.target?.result) {
+				return reject(new Error('Failed to read file.'));
+			}
+			img.src = e.target.result as string;
+		};
+
+		reader.onerror = (err) => reject(err);
+		reader.readAsDataURL(file);
+
+		img.onload = () => {
+			let width = img.width;
+			let height = img.height;
+
+			// If image is already small enough, return original
+			if (file.size <= maxSize) {
+				console.log('skipping compression+resizing, already small enough');
+				return resolve({
+					blob: file,
+					aspectRatio: {
+						width,
+						height
+					}
+				});
+			}
+
+			if (width > maxDimension || height > maxDimension) {
+				if (width > height) {
+					height = Math.round((maxDimension / width) * height);
+					width = maxDimension;
+				} else {
+					width = Math.round((maxDimension / height) * width);
+					height = maxDimension;
+				}
+			}
+
+			// Create a canvas to draw the image
+			const canvas = document.createElement('canvas');
+			canvas.width = width;
+			canvas.height = height;
+			const ctx = canvas.getContext('2d');
+			if (!ctx) return reject(new Error('Failed to get canvas context.'));
+			ctx.drawImage(img, 0, 0, width, height);
+
+			// Use WebP for both compression and transparency support
+			let quality = 0.9;
+
+			function attemptCompression() {
+				canvas.toBlob(
+					(blob) => {
+						if (!blob) {
+							return reject(new Error('Compression failed.'));
+						}
+						if (blob.size <= maxSize || quality < 0.3) {
+							resolve({
+								blob,
+								aspectRatio: {
+									width,
+									height
+								}
+							});
+						} else {
+							quality -= 0.1;
+							attemptCompression();
+						}
+					},
+					'image/webp',
+					quality
+				);
+			}
+
+			attemptCompression();
+		};
+
+		img.onerror = (err) => reject(err);
+	});
+}
+
+export async function checkAndUploadImage(
+	recordWithImage: Record<string, any>,
+	key: string = 'image',
+	// e.g. /api/image-proxy?url=
+	imageProxy?: string
+) {
+	if (!recordWithImage[key]) return;
+
+	// Already uploaded as blob
+	if (typeof recordWithImage[key] === 'object' && recordWithImage[key].$type === 'blob') {
+		return;
+	}
+
+	if (typeof recordWithImage[key] === 'string' && imageProxy) {
+		const proxyUrl = imageProxy + encodeURIComponent(recordWithImage[key]);
+		const response = await fetch(proxyUrl);
+		if (!response.ok) {
+			throw Error('failed to get image from image proxy');
+		}
+
+		const blob = await response.blob();
+		const compressedBlob = await compressImage(blob);
+
+		recordWithImage[key] = await uploadBlob({ blob: compressedBlob.blob });
+
+		return;
+	}
+
+	if (recordWithImage[key]?.blob) {
+		if (recordWithImage[key].objectUrl) {
+			URL.revokeObjectURL(recordWithImage[key].objectUrl);
+		}
+		const compressedBlob = await compressImage(recordWithImage[key].blob);
+		recordWithImage[key] = await uploadBlob({ blob: compressedBlob.blob });
+	}
+}
+
+export function getImageFromRecord(
+	recordWithImage: Record<string, any> | undefined,
+	did: string,
+	key: string = 'image'
+): string | undefined {
+	if (!recordWithImage?.[key]) return;
+
+	if (typeof recordWithImage[key] === 'object' && recordWithImage[key].$type === 'blob') {
+		return getCDNImageBlobUrl({ did, blob: recordWithImage[key] });
+	}
+
+	if (recordWithImage[key].objectUrl) return recordWithImage[key].objectUrl;
+
+	if (recordWithImage[key].blob) {
+		recordWithImage[key].objectUrl = URL.createObjectURL(recordWithImage[key].blob);
+		return recordWithImage[key].objectUrl;
+	}
+
+	return recordWithImage[key];
+}

src/lib/atproto/index.ts

···
 	uploadBlob,
 	describeRepo,
 	getBlobURL,
-	getImageBlobUrl,
-	searchActorsTypeahead
+	getCDNImageBlobUrl,
+	searchActorsTypeahead,
+	getAuthorFeed
 } from './methods';

src/lib/atproto/metadata.ts

···
 import { resolve } from '$app/paths';
-import { blobs, collections, rpcCalls, SITE } from './settings';
+import { permissions, REDIRECT_PATH, SITE } from './settings';
 
 function constructScope() {
-	const repos = collections.map((collection) => 'repo:' + collection).join(' ');
+	const repos = permissions.collections.map((collection) => 'repo:' + collection).join(' ');
 
 	let rpcs = '';
-	for (const [key, value] of Object.entries(rpcCalls)) {
+	for (const [key, value] of Object.entries(permissions.rpc ?? {})) {
 		if (Array.isArray(value)) {
 			rpcs += value.map((lxm) => 'rpc?lxm=' + lxm + '&aud=' + key).join(' ');
 		} else {
 			rpcs += 'rpc?lxm=' + value + '&aud=' + key;
 		}
 	}
+
 	let blobScope: string | undefined = undefined;
-	if (Array.isArray(blobs)) {
-		blobScope = 'blob?' + blobs.map((b) => 'accept=' + b).join('&');
-	} else if (blobs) {
-		blobScope = 'blob:' + blobs;
+	if (Array.isArray(permissions.blobs) && permissions.blobs.length > 0) {
+		blobScope = 'blob?' + permissions.blobs.map((b) => 'accept=' + b).join('&');
+	} else if (permissions.blobs && permissions.blobs.length > 0) {
+		blobScope = 'blob:' + permissions.blobs;
 	}
 
 	const scope = ['atproto', repos, rpcs, blobScope].filter((v) => v?.trim()).join(' ');
···
 
 export const metadata = {
 	client_id: SITE + resolve('/oauth-client-metadata.json'),
-	redirect_uris: [SITE + resolve('/oauth/callback')],
+	redirect_uris: [SITE + resolve(REDIRECT_PATH)],
 	scope: constructScope(),
 	grant_types: ['authorization_code', 'refresh_token'],
 	response_types: ['code'],

src/lib/atproto/methods.ts

···
-import type { Did, Handle } from '@atcute/lexicons';
+import {
+	parseResourceUri,
+	type ActorIdentifier,
+	type Did,
+	type Handle,
+	type ResourceUri
+} from '@atcute/lexicons';
 import { user } from './auth.svelte';
+import type { AllowedCollection } from './settings';
 import {
 	CompositeDidDocumentResolver,
 	CompositeHandleResolver,
···
 	WellKnownHandleResolver
 } from '@atcute/identity-resolver';
 import { Client, simpleFetchHandler } from '@atcute/client';
-import type { AppBskyActorDefs } from '@atcute/bluesky';
-import { redirect } from '@sveltejs/kit';
+import { type AppBskyActorDefs } from '@atcute/bluesky';
 
 export type Collection = `${string}.${string}.${string}`;
+import * as TID from '@atcute/tid';
 
+/**
+ * Parses an AT Protocol URI into its components.
+ * @param uri - The AT URI to parse (e.g., "at://did:plc:xyz/app.bsky.feed.post/abc123")
+ * @returns An object containing the repo, collection, and rkey or undefined if not an AT uri
+ */
 export function parseUri(uri: string) {
-	const [did, collection, rkey] = uri.replace('at://', '').split('/');
-	return { did, collection, rkey } as {
-		collection: `${string}.${string}.${string}`;
-		rkey: string;
-		did: Did;
-	};
+	const parts = parseResourceUri(uri);
+	if (!parts.ok) return;
+	return parts.value;
 }
 
+/**
+ * Resolves a handle to a DID using DNS and HTTP methods.
+ * @param handle - The handle to resolve (e.g., "alice.bsky.social")
+ * @returns The DID associated with the handle
+ */
 export async function resolveHandle({ handle }: { handle: Handle }) {
 	const handleResolver = new CompositeHandleResolver({
 		methods: {
···
 		}
 	});
 
-	try {
-		const data = await handleResolver.resolve(handle);
-		return data;
-	} catch (error) {
-		redirect(307, '/?error=handle_not_found&handle=' + handle);
-	}
+	const data = await handleResolver.resolve(handle);
+	return data;
 }
 
 const didResolver = new CompositeDidDocumentResolver({
···
 	}
 });
 
+/**
+ * Gets the PDS (Personal Data Server) URL for a given DID.
+ * @param did - The DID to look up
+ * @returns The PDS service endpoint URL
+ * @throws If no PDS is found in the DID document
+ */
 export async function getPDS(did: Did) {
-	const doc = await didResolver.resolve(did as `did:plc:${string}` | `did:web:${string}`);
+	const doc = await didResolver.resolve(did as Did<'plc'> | Did<'web'>);
 	if (!doc.service) throw new Error('No PDS found');
 	for (const service of doc.service) {
 		if (service.id === '#atproto_pds') {
···
 	}
 }
 
+/**
+ * Fetches a detailed Bluesky profile for a user.
+ * @param data - Optional object with did and client
+ * @param data.did - The DID to fetch the profile for (defaults to current user)
+ * @param data.client - The client to use (defaults to public Bluesky API)
+ * @returns The profile data or undefined if not found
+ */
 export async function getDetailedProfile(data?: { did?: Did; client?: Client }) {
 	data ??= {};
 	data.did ??= user.did;
···
 		params: { actor: data.did }
 	});
 
-	if (!response.ok) return;
-
-	return response.data;
-}
-
-export async function getAuthorFeed(data?: {
-	did?: Did;
-	client?: Client;
-	filter?: string;
-	limit?: number;
-}) {
-	data ??= {};
-	data.did ??= user.did;
-
-	if (!data.did) throw new Error('Error getting detailed profile: no did');
-
-	data.client ??= new Client({
-		handler: simpleFetchHandler({ service: 'https://public.api.bsky.app' })
-	});
-
-	const response = await data.client.get('app.bsky.feed.getAuthorFeed', {
-		params: { actor: data.did, filter: data.filter ?? 'posts_with_media', limit: data.limit || 100 }
-	});
-
-	if (!response.ok) return;
+	if (!response.ok || response.data.handle === 'handle.invalid') {
+		const repo = await describeRepo({ did: data.did });
+		return { handle: repo?.handle ?? 'handle.invalid', did: data.did };
+	}
 
 	return response.data;
 }
 
+/**
+ * Creates an AT Protocol client for a user's PDS.
+ * @param did - The DID of the user
+ * @returns A client configured for the user's PDS
+ * @throws If the PDS cannot be found
+ */
 export async function getClient({ did }: { did: Did }) {
 	const pds = await getPDS(did);
 	if (!pds) throw new Error('PDS not found');
···
 	return client;
 }
 
+/**
+ * Lists records from a repository collection with pagination support.
+ * @param did - The DID of the repository (defaults to current user)
+ * @param collection - The collection to list records from
+ * @param cursor - Pagination cursor for continuing from a previous request
+ * @param limit - Maximum number of records to return (default 100, set to 0 for all records)
+ * @param client - The client to use (defaults to user's PDS client)
+ * @returns An array of records from the collection
+ */
 export async function listRecords({
 	did,
 	collection,
 	cursor,
-	limit = 0,
+	limit = 100,
 	client
 }: {
 	did?: Did;
···
 			params: {
 				repo: did,
 				collection,
-				limit: limit || 100,
+				limit: !limit || limit > 100 ? 100 : limit,
 				cursor: currentCursor
 			}
 		});
···
 	return allRecords;
 }
 
+/**
+ * Fetches a single record from a repository.
+ * @param did - The DID of the repository (defaults to current user)
+ * @param collection - The collection the record belongs to
+ * @param rkey - The record key (defaults to "self")
+ * @param client - The client to use (defaults to user's PDS client)
+ * @returns The record data
+ */
 export async function getRecord({
 	did,
 	collection,
-	rkey,
+	rkey = 'self',
 	client
 }: {
 	did?: Did;
···
 	client?: Client;
 }) {
 	did ??= user.did;
-	rkey ??= 'self';
 
 	if (!collection) {
 		throw new Error('Missing parameters for getRecord');
···
 		}
 	});
 
-	if (!record.ok) return;
-
 	return JSON.parse(JSON.stringify(record.data));
 }
 
+/**
+ * Creates or updates a record in the current user's repository.
+ * Only accepts collections that are configured in permissions.
+ * @param collection - The collection to write to (must be in permissions.collections)
+ * @param rkey - The record key (defaults to "self")
+ * @param record - The record data to write
+ * @returns The response from the PDS
+ * @throws If the user is not logged in
+ */
 export async function putRecord({
 	collection,
-	rkey,
+	rkey = 'self',
 	record
 }: {
-	collection: Collection;
-	rkey: string;
+	collection: AllowedCollection;
+	rkey?: string;
 	record: Record<string, unknown>;
 }) {
 	if (!user.client || !user.did) throw new Error('No rpc or did');
···
 	return response;
 }
 
-export async function deleteRecord({ collection, rkey }: { collection: Collection; rkey: string }) {
+/**
+ * Deletes a record from the current user's repository.
+ * Only accepts collections that are configured in permissions.
+ * @param collection - The collection the record belongs to (must be in permissions.collections)
+ * @param rkey - The record key (defaults to "self")
+ * @returns True if the deletion was successful
+ * @throws If the user is not logged in
+ */
+export async function deleteRecord({
+	collection,
+	rkey = 'self'
+}: {
+	collection: AllowedCollection;
+	rkey: string;
+}) {
 	if (!user.client || !user.did) throw new Error('No profile or rpc or did');
 
 	const response = await user.client.post('com.atproto.repo.deleteRecord', {
···
 	return response.ok;
 }
 
+/**
+ * Uploads a blob to the current user's PDS.
+ * @param blob - The blob data to upload
+ * @returns The blob metadata including ref, mimeType, and size, or undefined on failure
+ * @throws If the user is not logged in
+ */
 export async function uploadBlob({ blob }: { blob: Blob }) {
 	if (!user.did || !user.client) throw new Error("Can't upload blob: Not logged in");
 
 	const blobResponse = await user.client.post('com.atproto.repo.uploadBlob', {
-		input: blob,
-		data: {
+		params: {
 			repo: user.did
-		}
+		},
+		input: blob
 	});
 
-	if (!blobResponse?.ok) {
-		return;
-	}
+	if (!blobResponse?.ok) return;
 
 	const blobInfo = blobResponse?.data.blob as {
 		$type: 'blob';
···
 	return blobInfo;
 }
 
+/**
+ * Gets metadata about a repository.
+ * @param client - The client to use
+ * @param did - The DID of the repository (defaults to current user)
+ * @returns Repository metadata or undefined on failure
+ */
 export async function describeRepo({ client, did }: { client?: Client; did?: Did }) {
 	did ??= user.did;
 	if (!did) {
···
 	return repo.data;
 }
 
+/**
+ * Constructs a URL to fetch a blob directly from a user's PDS.
+ * @param did - The DID of the user who owns the blob
+ * @param blob - The blob reference object
+ * @returns The URL to fetch the blob
+ */
 export async function getBlobURL({
 	did,
 	blob
···
 	return `${pds}/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${blob.ref.$link}`;
 }
 
-export function getImageBlobUrl({
+/**
+ * Constructs a Bluesky CDN URL for an image blob.
+ * @param did - The DID of the user who owns the blob (defaults to current user)
+ * @param blob - The blob reference object
+ * @returns The CDN URL for the image in webp format
+ */
+export function getCDNImageBlobUrl({
 	did,
 	blob
 }: {
-	did: string;
+	did?: string;
 	blob: {
 		$type: 'blob';
 		ref: {
···
 		};
 	};
 }) {
-	if (!did || !blob?.ref?.$link) return '';
+	did ??= user.did;
+
 	return `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${blob.ref.$link}@webp`;
 }
 
+/**
+ * Searches for actors with typeahead/autocomplete functionality.
+ * @param q - The search query
+ * @param limit - Maximum number of results (default 10)
+ * @param host - The API host to use (defaults to public Bluesky API)
+ * @returns An object containing matching actors and the original query
+ */
 export async function searchActorsTypeahead(
 	q: string,
 	limit: number = 10,
···
 
 	return { actors: response.data.actors, q };
 }
+
+/**
+ * Return a TID based on current time
+ *
+ * @returns TID for current time
+ */
+export function createTID() {
+	return TID.now();
+}
+
+export async function getAuthorFeed(data?: {
+	did?: Did;
+	client?: Client;
+	filter?: string;
+	limit?: number;
+}) {
+	data ??= {};
+	data.did ??= user.did;
+
+	if (!data.did) throw new Error('Error getting detailed profile: no did');
+
+	data.client ??= new Client({
+		handler: simpleFetchHandler({ service: 'https://public.api.bsky.app' })
+	});
+
+	const response = await data.client.get('app.bsky.feed.getAuthorFeed', {
+		params: { actor: data.did, filter: data.filter ?? 'posts_with_media', limit: data.limit || 100 }
+	});
+
+	if (!response.ok) return;
+
+	return response.data;
+}
+
+/**
+ * Fetches posts by their AT URIs.
+ * @param uris - Array of AT URIs (e.g., "at://did:plc:xyz/app.bsky.feed.post/abc123")
+ * @param client - The client to use (defaults to public Bluesky API)
+ * @returns Array of posts or undefined on failure
+ */
+export async function getPosts(data: { uris: string[]; client?: Client }) {
+	data.client ??= new Client({
+		handler: simpleFetchHandler({ service: 'https://public.api.bsky.app' })
+	});
+
+	const response = await data.client.get('app.bsky.feed.getPosts', {
+		params: { uris: data.uris as ResourceUri[] }
+	});
+
+	if (!response.ok) return;
+
+	return response.data.posts;
+}
+
+export function getHandleOrDid(profile: AppBskyActorDefs.ProfileViewDetailed): ActorIdentifier {
+	if (profile.handle && profile.handle !== 'handle.invalid') {
+		return profile.handle;
+	} else {
+		return profile.did;
+	}
+}

src/lib/atproto/settings.ts

···
+import { dev } from '$app/environment';
+
 export const SITE = 'https://blento.app';
 
-export const collections: string[] = [
-	'app.blento.card',
-	'app.blento.page',
-	'app.blento.settings',
-	'app.blento.comment',
-	'app.blento.guestbook.entry',
-	'site.standard.publication',
-	'site.standard.document',
-	'xyz.statusphere.status'
-];
-
-export const rpcCalls: Record<string, string | string[]> = {
-	//'did:web:api.bsky.app#bsky_appview': ['app.bsky.actor.getProfile']
+type Permissions = {
+	collections: readonly string[];
+	rpc: Record<string, string | string[]>;
+	blobs: readonly string[];
 };
 
-export const blobs = ['*/*'] as string | string[] | undefined;
+export const permissions = {
+	// collections you can create/delete/update
 
-export const signUpPDS = 'https://pds.rip/';
+	// example: only allow create and delete
+	// collections: ['xyz.statusphere.status?action=create&action=update'],
+	collections: [
+		'app.blento.card',
+		'app.blento.page',
+		'app.blento.settings',
+		'app.blento.comment',
+		'app.blento.guestbook.entry',
+		'site.standard.publication',
+		'site.standard.document',
+		'xyz.statusphere.status'
+	],
+
+	// what types of authenticated proxied requests you can make to services
+
+	// example: allow authenticated proxying to bsky appview to get a users liked posts
+	//rpc: {'did:web:api.bsky.app#bsky_appview': ['app.bsky.feed.getActorLikes']}
+	rpc: {},
+
+	// what types of blobs you can upload to a users PDS
+
+	// example: allowing video and html uploads
+	// blobs: ['video/*', 'text/html']
+	// example: allowing all blob types
+	// blobs: ['*/*']
+	blobs: ['*/*']
+} as const satisfies Permissions;
+
+// Extract base collection name (before any query params)
+type ExtractCollectionBase<T extends string> = T extends `${infer Base}?${string}` ? Base : T;
+
+export type AllowedCollection = ExtractCollectionBase<(typeof permissions.collections)[number]>;
+
+// which PDS to use for signup
+// ATTENTION: pds.rip is only for development, all accounts get deleted automatically after a week
+const devPDS = 'https://pds.rip/';
+const prodPDS = 'https://selfhosted.social/';
+export const signUpPDS = dev ? devPDS : prodPDS;
+
+// where to redirect after oauth login/signup, e.g. /oauth/callback
+export const REDIRECT_PATH = '/oauth/callback';
+
+export const DOH_RESOLVER = 'https://mozilla.cloudflare-dns.com/dns-query';

src/lib/cards/BlueskyPostCard/BlueskyPostCard.svelte

···
 	import type { Item } from '$lib/types';
 	import { onMount } from 'svelte';
 	import { BlueskyPost } from '../../components/bluesky-post';
-	import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
-	import { CardDefinitionsByType } from '..';
+	import { getAdditionalUserData } from '$lib/website/context';
+	import { getPosts, resolveHandle } from '$lib/atproto/methods';
+	import type { PostView } from '@atcute/bluesky/types/app/feed/defs';
+	import type { Handle } from '@atcute/lexicons';
+	import { isDid } from '@atcute/lexicons/syntax';
+	import { resolveUri } from './utils';
 
 	let { item }: { item: Item } = $props();
 
 	const data = getAdditionalUserData();
+	let uri = $derived(item.cardData.uri as string);
+
 	// svelte-ignore state_referenced_locally
-	let feed = $state((data[item.cardType] as any)?.feed);
-
-	let did = getDidContext();
-	let handle = getHandleContext();
+	let post = $state((data['blueskyPost'] as Record<string, PostView>)?.[uri]);
 
 	onMount(async () => {
-		if (!feed) {
-			feed = (
-				(await CardDefinitionsByType[item.cardType]?.loadData?.([], {
-					did,
-					handle
-				})) as any
-			).feed;
-
-			console.log(feed);
+		if (!post && uri) {
+			// Resolve handle to DID if needed
+			const resolvedUri = await resolveUri(uri);
 
-			data[item.cardType] = feed;
+			const posts = await getPosts({ uris: [resolvedUri] });
+			if (posts && posts.length > 0) {
+				post = posts[0];
+				// Store in data for future use (keyed by resolved URI)
+				if (!data['blueskyPost']) {
+					data['blueskyPost'] = {};
+				}
+				(data['blueskyPost'] as Record<string, PostView>)[resolvedUri] = post;
+				// Also store under original URI for lookup
+				(data['blueskyPost'] as Record<string, PostView>)[uri] = post;
+			}
 		}
 	});
 </script>
 
 <div class="flex h-full flex-col justify-center-safe overflow-y-scroll p-4">
-	<div
-		class="accent:text-base-950 bg-base-200/50 dark:bg-base-700/30 mx-auto mb-6 w-fit rounded-xl p-1 px-2 text-2xl font-semibold"
-	>
-		My latest bluesky post
-	</div>
-	{#if feed?.[0]?.post}
-		<BlueskyPost showLogo feedViewPost={feed?.[0].post}></BlueskyPost>
+	{#if post}
+		<BlueskyPost showLogo feedViewPost={post}></BlueskyPost>
 		<div class="h-4 w-full"></div>
 	{:else}
-		Your latest bluesky post will appear here.
+		<p class="text-base-600 dark:text-base-400 text-center">A bluesky post will appear here</p>
 	{/if}
 </div>

src/lib/cards/BlueskyPostCard/CreateBlueskyPostCardModal.svelte

···
+<script lang="ts">
+	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import type { CreationModalComponentProps } from '../types';
+	import { parseBlueskyPostUrl } from './utils';
+
+	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+
+	let isValidating = $state(false);
+	let errorMessage = $state('');
+	let postUrl = $state('');
+
+	async function validateAndCreate() {
+		errorMessage = '';
+		isValidating = true;
+
+		try {
+			const parsed = parseBlueskyPostUrl(postUrl.trim());
+
+			if (!parsed) {
+				throw new Error('Invalid URL format');
+			}
+
+			// Construct AT URI using handle (will be resolved to DID when loading)
+			item.cardData.uri = `at://${parsed.handle}/app.bsky.feed.post/${parsed.rkey}`;
+			item.cardData.href = postUrl.trim();
+
+			return true;
+		} catch (err) {
+			errorMessage =
+				err instanceof Error && err.message === 'Post not found'
+					? "Couldn't find that post. Please check the URL and try again."
+					: err instanceof Error && err.message === 'Could not resolve handle'
+						? "Couldn't find that user. Please check the URL and try again."
+						: 'Invalid URL. Please enter a valid Bluesky post URL (e.g., https://bsky.app/profile/handle/post/rkey).';
+			return false;
+		} finally {
+			isValidating = false;
+		}
+	}
+</script>
+
+<Modal open={true} closeButton={false}>
+	<form
+		onsubmit={async () => {
+			if (await validateAndCreate()) oncreate();
+		}}
+		class="flex flex-col gap-2"
+	>
+		<Subheading>Enter a Bluesky post URL</Subheading>
+		<Input
+			bind:value={postUrl}
+			placeholder="https://bsky.app/profile/handle/post/..."
+			class="mt-4"
+		/>
+
+		{#if errorMessage}
+			<Alert type="error" title="Failed to create post card"><span>{errorMessage}</span></Alert>
+		{/if}
+
+		<p class="text-base-500 dark:text-base-400 mt-2 text-xs">
+			Paste a URL from <a
+				href="https://bsky.app"
+				class="text-accent-800 dark:text-accent-300"
+				target="_blank">bsky.app</a
+			> to embed a Bluesky post.
+		</p>
+
+		<div class="mt-4 flex justify-end gap-2">
+			<Button onclick={oncancel} variant="ghost">Cancel</Button>
+			<Button type="submit" disabled={isValidating || !postUrl.trim()}
+				>{isValidating ? 'Creating...' : 'Create'}</Button
+			>
+		</div>
+	</form>
+</Modal>

src/lib/cards/BlueskyPostCard/index.ts

···
 import type { CardDefinition } from '../types';
 import BlueskyPostCard from './BlueskyPostCard.svelte';
-import SidebarItemBlueskyPostCard from './SidebarItemBlueskyPostCard.svelte';
-import { getAuthorFeed } from '$lib/atproto/methods';
+import CreateBlueskyPostCardModal from './CreateBlueskyPostCardModal.svelte';
+import { getPosts } from '$lib/atproto/methods';
+import type { PostView } from '@atcute/bluesky/types/app/feed/defs';
+import { parseBlueskyPostUrl, resolveUri } from './utils';
 
 export const BlueskyPostCardDefinition = {
-	type: 'latestPost',
+	type: 'blueskyPost',
 	contentComponent: BlueskyPostCard,
+	creationModalComponent: CreateBlueskyPostCardModal,
+	sidebarButtonText: 'Bluesky Post',
 	createNew: (card) => {
-		card.cardType = 'latestPost';
+		card.cardType = 'blueskyPost';
 		card.w = 4;
 		card.mobileW = 8;
 		card.h = 4;
 		card.mobileH = 8;
 	},
-	sidebarButtonText: 'Latest Bluesky Post',
-	loadData: async (items, { did }) => {
-		const authorFeed = await getAuthorFeed({ did, filter: 'posts_no_replies', limit: 2 });
 
-		return JSON.parse(JSON.stringify(authorFeed));
+	onUrlHandler: (url, item) => {
+		const parsed = parseBlueskyPostUrl(url);
+		if (!parsed) return null;
+
+		// Construct AT URI using handle (will be resolved to DID when loading)
+		item.cardData.uri = `at://${parsed.handle}/app.bsky.feed.post/${parsed.rkey}`;
+		item.cardData.href = url;
+
+		item.w = 4;
+		item.mobileW = 8;
+		item.h = 4;
+		item.mobileH = 8;
+
+		return item;
 	},
-	minW: 4
-} as CardDefinition & { type: 'latestPost' };
+	urlHandlerPriority: 2,
+
+	loadData: async (items) => {
+		// Collect all unique URIs from blueskyPost cards
+		const originalUris = items
+			.filter((item) => item.cardData?.uri)
+			.map((item) => item.cardData.uri as string);
+
+		if (originalUris.length === 0) return {};
+
+		// Resolve handles to DIDs
+		const resolvedUris = await Promise.all(originalUris.map(resolveUri));
+
+		const posts = await getPosts({ uris: resolvedUris });
+		if (!posts) return {};
+
+		// Create a map of URI -> PostView (keyed by both original and resolved URIs)
+		const postsMap: Record<string, PostView> = {};
+		for (let i = 0; i < posts.length; i++) {
+			const post = posts[i];
+			postsMap[post.uri] = post;
+			// Also map by original URI for lookup
+			if (originalUris[i] && originalUris[i] !== post.uri) {
+				postsMap[originalUris[i]] = post;
+			}
+		}
+
+		return postsMap;
+	},
+	minW: 4,
+	name: 'Bluesky Post'
+} as CardDefinition & { type: 'blueskyPost' };

src/lib/cards/BlueskyPostCard/utils.ts

···
+import { resolveHandle } from '$lib/atproto';
+import type { Handle } from '@atcute/lexicons';
+
+// Matches URLs like https://bsky.app/profile/jyc.dev/post/3mdfjepjpls24
+const blueskyPostUrlPattern =
+	/^https?:\/\/(?:www\.)?bsky\.app\/profile\/([^/]+)\/post\/([A-Za-z0-9]+)\/?$/;
+
+/**
+ * Extract handle and rkey from a Bluesky post URL
+ * @param url URL to parse
+ * @returns Object with handle and rkey, or undefined if not a valid Bluesky post URL
+ */
+export function parseBlueskyPostUrl(url: string): { handle: string; rkey: string } | undefined {
+	const match = url.match(blueskyPostUrlPattern);
+	if (!match) return undefined;
+	return { handle: match[1], rkey: match[2] };
+}
+
+// Resolve handle to DID if URI contains a handle (not starting with did:)
+export async function resolveUri(atUri: string): Promise<string> {
+	const match = atUri.match(/^at:\/\/([^/]+)\/(.+)$/);
+	if (!match) return atUri;
+
+	const [, authority, rest] = match;
+
+	// If already a DID, return as-is
+	if (authority.startsWith('did:')) return atUri;
+
+	// Resolve handle to DID
+	try {
+		const did = await resolveHandle({ handle: authority as Handle });
+		if (!did) return atUri;
+		return `at://${did}/${rest}`;
+	} catch {
+		return atUri;
+	}
+}

src/lib/cards/EventCard/EventCard.svelte

···
 	import { parseUri } from '$lib/atproto';
 	import { browser } from '$app/environment';
 	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
+	import type { Did } from '@atcute/lexicons';
 
 	let { item }: ContentComponentProps = $props();
 
···
 	let parsedUri = $derived(item.cardData?.uri ? parseUri(item.cardData.uri) : null);
 
 	onMount(async () => {
-		if (!eventData && item.cardData?.uri) {
+		if (!eventData && item.cardData?.uri && parsedUri?.repo) {
 			const loadedData = (await CardDefinitionsByType[item.cardType]?.loadData?.([item], {
-				did: parsedUri?.did ?? ('' as `did:${string}:${string}`),
+				did: parsedUri.repo as Did,
 				handle: ''
 			})) as Record<string, EventData> | undefined;
 
···
 	let eventUrl = $derived(() => {
 		if (eventData?.url) return eventData.url;
 		if (parsedUri) {
-			return `https://smokesignal.events/${parsedUri.did}/${parsedUri.rkey}`;
+			return `https://smokesignal.events/${parsedUri.repo}/${parsedUri.rkey}`;
 		}
 		return '#';
 	});
···
 		const header = eventData.media.find((m) => m.role === 'header');
 		if (!header?.content?.ref?.$link) return null;
 		return {
-			url: `https://cdn.bsky.app/img/feed_thumbnail/plain/${parsedUri.did}/${header.content.ref.$link}@jpeg`,
+			url: `https://cdn.bsky.app/img/feed_thumbnail/plain/${parsedUri.repo}/${header.content.ref.$link}@jpeg`,
 			alt: header.alt || eventData.name
 		};
 	});

src/lib/cards/EventCard/index.ts

···
 			const uri = item.cardData?.uri;
 			if (!uri) continue;
 
-			const { did, rkey } = parseUri(uri);
+			const parsedUri = parseUri(uri);
+			if (!parsedUri || !parsedUri.rkey || !parsedUri.repo) continue;
 
 			try {
 				const response = await fetch(
-					`https://smokesignal.events/xrpc/community.lexicon.calendar.GetEvent?repository=${encodeURIComponent(did)}&record_key=${encodeURIComponent(rkey)}`
+					`https://smokesignal.events/xrpc/community.lexicon.calendar.GetEvent?repository=${encodeURIComponent(parsedUri.repo)}&record_key=${encodeURIComponent(parsedUri.rkey)}`
 				);
 
 				if (response.ok) {

src/lib/cards/FluidTextCard/EditingFluidTextCard.svelte

···
 <script lang="ts">
 	import type { Item } from '$lib/types';
+	import { onMount, tick } from 'svelte';
 	import type { ContentComponentProps } from '../types';
 	import FluidTextCard from './FluidTextCard.svelte';
 
···
 			isEditing = false;
 		}
 	}
+
+	let rerender = $state(0);
+	onMount(() => {
+		window.addEventListener('theme-changed', async () => {
+			// Force re-render to update FluidTextCard colors
+			await tick();
+			rerender = Math.random();
+		});
+	});
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
···
 		: ''}"
 	onclick={handleClick}
 >
-	{#key item.color}
+	{#key item.color + '-' + rerender.toString()}
 		<FluidTextCard {item} />
 	{/key}
 

src/lib/cards/LatestBlueskyPostCard/LatestBlueskyPostCard.svelte

···
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import { onMount } from 'svelte';
+	import { BlueskyPost } from '../../components/bluesky-post';
+	import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
+	import { CardDefinitionsByType } from '..';
+
+	let { item }: { item: Item } = $props();
+
+	const data = getAdditionalUserData();
+	// svelte-ignore state_referenced_locally
+	let feed = $state((data[item.cardType] as any)?.feed);
+
+	let did = getDidContext();
+	let handle = getHandleContext();
+
+	onMount(async () => {
+		if (!feed) {
+			feed = (
+				(await CardDefinitionsByType[item.cardType]?.loadData?.([], {
+					did,
+					handle
+				})) as any
+			).feed;
+
+			console.log(feed);
+
+			data[item.cardType] = feed;
+		}
+	});
+</script>
+
+<div class="flex h-full flex-col justify-center-safe overflow-y-scroll p-4">
+	<div
+		class="accent:text-base-950 bg-base-200/50 dark:bg-base-700/30 mx-auto mb-6 w-fit rounded-xl p-1 px-2 text-2xl font-semibold"
+	>
+		My latest bluesky post
+	</div>
+	{#if feed?.[0]?.post}
+		<BlueskyPost showLogo feedViewPost={feed?.[0].post}></BlueskyPost>
+		<div class="h-4 w-full"></div>
+	{:else}
+		Your latest bluesky post will appear here.
+	{/if}
+</div>

src/lib/cards/LatestBlueskyPostCard/index.ts

···
+import type { CardDefinition } from '../types';
+import LatestBlueskyPostCard from './LatestBlueskyPostCard.svelte';
+import { getAuthorFeed } from '$lib/atproto/methods';
+
+export const LatestBlueskyPostCardDefinition = {
+	type: 'latestPost',
+	contentComponent: LatestBlueskyPostCard,
+	createNew: (card) => {
+		card.cardType = 'latestPost';
+		card.w = 4;
+		card.mobileW = 8;
+		card.h = 4;
+		card.mobileH = 8;
+	},
+	sidebarButtonText: 'Latest Bluesky Post',
+	loadData: async (items, { did }) => {
+		const authorFeed = await getAuthorFeed({ did, filter: 'posts_no_replies', limit: 2 });
+
+		return JSON.parse(JSON.stringify(authorFeed));
+	},
+	minW: 4
+} as CardDefinition & { type: 'latestPost' };

src/lib/cards/LivestreamCard/index.ts

···
-import { user, listRecords, getImageBlobUrl } from '$lib/atproto';
+import { user, listRecords, getCDNImageBlobUrl } from '$lib/atproto';
 import type { CardDefinition } from '../types';
 import LivestreamCard from './LivestreamCard.svelte';
 import LivestreamEmbedCard from './LivestreamEmbedCard.svelte';
···
 				createdAt: latest.value.createdAt,
 				title: latest.value?.title as string,
 				thumb: latest.value?.thumb?.ref?.$link
-					? getImageBlobUrl({ blob: latest.value.thumb, did })
+					? getCDNImageBlobUrl({ blob: latest.value.thumb, did })
 					: undefined,
 				href: latest.value?.canonicalUrl || latest.value.url,
 				online: undefined

src/lib/cards/PhotoGalleryCard/PhotoGalleryCard.svelte

···
 		getIsMobile
 	} from '$lib/website/context';
 	import { CardDefinitionsByType } from '..';
-	import { getImageBlobUrl, parseUri } from '$lib/atproto';
+	import { getCDNImageBlobUrl, parseUri } from '$lib/atproto';
 
 	import { ImageMasonry } from '@foxui/visual';
 
···
 				return (a.value.position ?? 0) - (b.value.position ?? 0);
 			})
 			.map((i: PhotoItem) => {
-				const { did: photoDid } = parseUri(i.uri);
+				const item = parseUri(i.uri);
 				return {
-					src: getImageBlobUrl({ did: photoDid, blob: i.value.photo }),
+					src: getCDNImageBlobUrl({ did: item?.repo, blob: i.value.photo }),
 					name: '',
 					width: i.value.aspectRatio.width,
 					height: i.value.aspectRatio.height,

src/lib/cards/PhotoGalleryCard/index.ts

···
 import type { CardDefinition } from '../types';
 import { getRecord, listRecords, parseUri } from '$lib/atproto';
 import PhotoGalleryCard from './PhotoGalleryCard.svelte';
+import type { Did } from '@atcute/lexicons';
 
 interface GalleryItem {
 	value: {
···
 		for (const item of items) {
 			if (!item.cardData.galleryUri) continue;
 
-			const { did, collection } = parseUri(item.cardData.galleryUri);
+			const parsedUri = parseUri(item.cardData.galleryUri);
 
-			if (collection === 'social.grain.gallery') {
+			if (parsedUri?.collection === 'social.grain.gallery') {
 				const itemCollection = 'social.grain.gallery.item';
 
 				if (!galleryItems[itemCollection]) {
 					galleryItems[itemCollection] = (await listRecords({
-						did,
+						did: parsedUri.repo as Did,
 						collection: itemCollection
 					})) as unknown as GalleryItem[];
 				}
···
 					.filter((i) => i.value.gallery === item.cardData.galleryUri)
 					.map(async (i) => {
 						const itemData = parseUri(i.value.item);
-						const record = await getRecord(itemData);
+						if (!itemData) return null;
+						const record = await getRecord({
+							did: itemData.repo as Did,
+							collection: itemData.collection!,
+							rkey: itemData.rkey
+						});
 						return { ...record, value: { ...record.value, ...i.value } };
 					});
 

src/lib/cards/SpecialCards/UpdatedBlentos/UpdatedBlentosCard.svelte

···
 	import type { ContentComponentProps } from '$lib/cards/types';
 	import { getAdditionalUserData } from '$lib/website/context';
 	import type { AppBskyActorDefs } from '@atcute/bluesky';
+	import { Avatar } from '@foxui/core';
 
 	let { item }: ContentComponentProps = $props();
 
 	const data = getAdditionalUserData();
 	// svelte-ignore state_referenced_locally
 	const profiles = data[item.cardType] as AppBskyActorDefs.ProfileViewDetailed[];
+
+	function getLink(profile: AppBskyActorDefs.ProfileViewDetailed): string {
+		if (profile.handle && profile.handle !== 'handle.invalid') {
+			return `/${profile.handle}`;
+		} else {
+			return `/${profile.did}`;
+		}
+	}
 </script>
 
 <div class="flex h-full flex-col">
···
 	<div class="flex max-w-full grow items-center gap-4 overflow-x-scroll overflow-y-hidden px-4">
 		{#each profiles as profile (profile.did)}
 			<a
-				href="/{profile.handle}"
+				href={getLink(profile)}
 				class="bg-base-100 dark:bg-base-800 hover:bg-base-200 dark:hover:bg-base-700 accent:bg-accent-200/30 accent:hover:bg-accent-200/50 flex h-52 w-44 min-w-44 flex-col items-center justify-center gap-2 rounded-xl p-2 transition-colors duration-150"
 				target="_blank"
 			>
-				<img
-					src={profile.avatar}
-					class="bg-base-200 dark:bg-base-700 accent:bg-accent-300 aspect-square size-28 rounded-full"
-					alt=""
-					loading="lazy"
-				/>
+				<Avatar src={profile.avatar} class="size-28" alt="" />
 				<div class="text-md line-clamp-1 max-w-full text-center font-bold">
 					{profile.displayName || profile.handle}
 				</div>

src/lib/cards/SpecialCards/UpdatedBlentos/index.ts

···
 			for (const did of Array.from(uniqueDids)) {
 				const profile = getDetailedProfile({ did });
 				profiles.push(profile);
-				if (profiles.length > 20) break;
+				if (profiles.length > 30) break;
 			}
 
-			const result = [...(await Promise.all(profiles)), ...existingUsersArray];
+			for (let i = existingUsersArray.length - 1; i >= 0; i--) {
+				// if handle is handle.invalid, remove from existing users and add to profiles to refresh
+				if (existingUsersArray[i].handle === 'handle.invalid') {
+					const removed = existingUsersArray.splice(i, 1)[0];
+					profiles.push(getDetailedProfile({ did: removed.did }));
+				}
+			}
+
+			const result = [...(await Promise.all(profiles)), ...existingUsersArray].filter(
+				(v) => v && v.handle !== 'handle.invalid'
+			);
 
 			if (cache) {
 				await cache?.put('updatedBlentos', JSON.stringify(result));

src/lib/cards/StandardSiteDocumentListCard/index.ts

···
 				if (!publications[site]) {
 					const siteParts = parseUri(site);
 
-					const publicationRecord = await getRecord(siteParts);
+					if (!siteParts) continue;
+
+					const publicationRecord = await getRecord({
+						did: siteParts.repo as `did:${string}:${string}`,
+						collection: siteParts.collection!,
+						rkey: siteParts.rkey
+					});
 
 					publications[site] = publicationRecord.value.url as string;
 				}

src/lib/cards/TimerCard/TimerCard.svelte

···
 <script lang="ts">
-	import { Button } from '@foxui/core';
-	import { Timer, TimerState } from '@foxui/time';
 	import NumberFlow, { NumberFlowGroup } from '@number-flow/svelte';
 	import type { ContentComponentProps } from '../types';
 	import type { TimerCardData } from './index';
 	import { onMount } from 'svelte';
 
-	let { item, isEditing }: ContentComponentProps = $props();
+	let { item }: ContentComponentProps = $props();
 
 	let cardData = $derived(item.cardData as TimerCardData);
-
-	// For timer mode
-	let timer = $state(new TimerState(cardData.duration ?? 1000 * 60 * 5));
 
 	// For clock and event modes - current time
 	let now = $state(new Date());
···
 	});
 </script>
 
-<div class="flex h-full w-full flex-col items-center justify-center p-4">
-	<!-- Label -->
-	{#if cardData.label}
-		<div
-			class="text-base-600 dark:text-base-400 accent:text-base-700 mb-1 text-center text-sm font-medium"
-		>
-			{cardData.label}
-		</div>
-	{/if}
-
+<div class="@container flex h-full w-full flex-col items-center justify-center p-4">
 	<!-- Clock Mode -->
 	{#if cardData.mode === 'clock'}
 		<NumberFlowGroup>
 			<div
-				class="text-base-900 dark:text-base-100 accent:text-base-900 flex items-center text-4xl font-bold"
+				class="text-base-900 dark:text-base-100 accent:text-base-900 flex items-center text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
 				style="font-variant-numeric: tabular-nums;"
 			>
 				<NumberFlow value={clockHours} format={{ minimumIntegerDigits: 2 }} />
···
 					value={clockMinutes}
 					format={{ minimumIntegerDigits: 2 }}
 					digits={{ 1: { max: 5 } }}
+					trend={1}
 				/>
 				<span class="text-base-400 dark:text-base-500 accent:text-accent-950 mx-0.5">:</span>
 				<NumberFlow
 					value={clockSeconds}
 					format={{ minimumIntegerDigits: 2 }}
 					digits={{ 1: { max: 5 } }}
+					trend={1}
 				/>
 			</div>
 		</NumberFlowGroup>
 		{#if timezoneDisplay}
-			<div class="text-base-500 dark:text-base-400 accent:text-base-600 mt-1 text-xs">
+			<div class="text-base-500 dark:text-base-400 accent:text-base-600 mt-1 text-xs @sm:text-sm">
 				{timezoneDisplay}
 			</div>
 		{/if}
 
-		<!-- Timer Mode -->
-	{:else if cardData.mode === 'timer'}
-		<Timer
-			bind:timer
-			showHours
-			showMinutes
-			showSeconds
-			class="text-base-900 dark:text-base-100 accent:text-base-900 text-4xl"
-		/>
-		{#if isEditing}
-			<div class="mt-3 flex gap-2">
-				{#if timer.isStopped}
-					<Button size="sm" onclick={() => timer.start()}>Start</Button>
-				{:else if timer.isRunning}
-					<Button size="sm" variant="secondary" onclick={() => timer.pause()}>Pause</Button>
-				{:else if timer.isPaused}
-					<Button size="sm" onclick={() => timer.resume()}>Resume</Button>
-				{/if}
-				{#if !timer.isStopped}
-					<Button size="sm" variant="ghost" onclick={() => timer.reset()}>Reset</Button>
-				{/if}
-			</div>
-		{/if}
-
 		<!-- Event Countdown Mode -->
 	{:else if cardData.mode === 'event'}
 		{#if eventDiff !== null && !isEventComplete}
 			<NumberFlowGroup>
 				<div
-					class="text-base-900 dark:text-base-100 accent:text-base-900 flex items-baseline gap-3 text-center"
+					class="text-base-900 dark:text-base-100 accent:text-base-900 flex items-baseline gap-4 text-center @sm:gap-6 @md:gap-8"
 					style="font-variant-numeric: tabular-nums;"
 				>
 					{#if eventDays > 0}
···
 							value={eventHours}
 							trend={-1}
 							format={{ minimumIntegerDigits: 2 }}
-							class="text-4xl font-bold"
+							class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
 						/>
 						<span class="text-base-500 dark:text-base-400 accent:text-base-700 text-xs">hrs</span>
 					</div>
···
 							trend={-1}
 							format={{ minimumIntegerDigits: 2 }}
 							digits={{ 1: { max: 5 } }}
-							class="text-4xl font-bold"
+							class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
 						/>
 						<span class="text-base-500 dark:text-base-400 accent:text-base-700 text-xs">min</span>
 					</div>
···
 							trend={-1}
 							format={{ minimumIntegerDigits: 2 }}
 							digits={{ 1: { max: 5 } }}
-							class="text-4xl font-bold"
+							class="text-3xl font-bold @xs:text-4xl @sm:text-5xl @md:text-6xl @lg:text-7xl"
 						/>
 						<span class="text-base-500 dark:text-base-400 accent:text-base-700 text-xs">sec</span>
 					</div>
 				</div>
 			</NumberFlowGroup>
 		{:else if isEventComplete}
-			<div class="text-accent-600 dark:text-accent-400 accent:text-accent-900 text-2xl font-bold">
+			<div
+				class="text-accent-600 dark:text-accent-400 accent:text-accent-900 text-xl font-bold @xs:text-2xl @sm:text-3xl @md:text-4xl"
+			>
 				Event Started!
 			</div>
 		{:else}

src/lib/cards/TimerCard/TimerCardSettings.svelte

···
 <script lang="ts">
 	import type { Item } from '$lib/types';
-	import { Input, Label } from '@foxui/core';
+	import { Button, Input, Label } from '@foxui/core';
 	import type { TimerCardData, TimerMode } from './index';
+	import { onMount } from 'svelte';
 
 	let { item }: { item: Item; onclose: () => void } = $props();
 
···
 
 	const modeOptions = [
 		{ value: 'clock', label: 'Clock', desc: 'Show current time' },
-		{ value: 'timer', label: 'Timer', desc: 'Countdown timer' },
 		{ value: 'event', label: 'Event', desc: 'Countdown to date' }
 	];
 
+	// All 24 timezones with representative cities
 	const timezoneOptions = [
-		{ value: 'UTC', label: 'UTC' },
-		{ value: 'America/New_York', label: 'New York' },
-		{ value: 'America/Chicago', label: 'Chicago' },
-		{ value: 'America/Denver', label: 'Denver' },
-		{ value: 'America/Los_Angeles', label: 'Los Angeles' },
-		{ value: 'Europe/London', label: 'London' },
-		{ value: 'Europe/Paris', label: 'Paris' },
-		{ value: 'Europe/Berlin', label: 'Berlin' },
-		{ value: 'Asia/Tokyo', label: 'Tokyo' },
-		{ value: 'Asia/Shanghai', label: 'Shanghai' },
-		{ value: 'Asia/Dubai', label: 'Dubai' },
-		{ value: 'Asia/Kolkata', label: 'Mumbai' },
-		{ value: 'Australia/Sydney', label: 'Sydney' }
+		{ value: 'Pacific/Midway', label: 'UTC-11 (Midway)' },
+		{ value: 'Pacific/Honolulu', label: 'UTC-10 (Honolulu)' },
+		{ value: 'America/Anchorage', label: 'UTC-9 (Anchorage)' },
+		{ value: 'America/Los_Angeles', label: 'UTC-8 (Los Angeles)' },
+		{ value: 'America/Denver', label: 'UTC-7 (Denver)' },
+		{ value: 'America/Chicago', label: 'UTC-6 (Chicago)' },
+		{ value: 'America/New_York', label: 'UTC-5 (New York)' },
+		{ value: 'America/Halifax', label: 'UTC-4 (Halifax)' },
+		{ value: 'America/Sao_Paulo', label: 'UTC-3 (São Paulo)' },
+		{ value: 'Atlantic/South_Georgia', label: 'UTC-2 (South Georgia)' },
+		{ value: 'Atlantic/Azores', label: 'UTC-1 (Azores)' },
+		{ value: 'UTC', label: 'UTC+0 (London)' },
+		{ value: 'Europe/Paris', label: 'UTC+1 (Paris)' },
+		{ value: 'Europe/Helsinki', label: 'UTC+2 (Helsinki)' },
+		{ value: 'Europe/Moscow', label: 'UTC+3 (Moscow)' },
+		{ value: 'Asia/Dubai', label: 'UTC+4 (Dubai)' },
+		{ value: 'Asia/Karachi', label: 'UTC+5 (Karachi)' },
+		{ value: 'Asia/Kolkata', label: 'UTC+5:30 (Mumbai)' },
+		{ value: 'Asia/Dhaka', label: 'UTC+6 (Dhaka)' },
+		{ value: 'Asia/Bangkok', label: 'UTC+7 (Bangkok)' },
+		{ value: 'Asia/Shanghai', label: 'UTC+8 (Shanghai)' },
+		{ value: 'Asia/Tokyo', label: 'UTC+9 (Tokyo)' },
+		{ value: 'Australia/Sydney', label: 'UTC+10 (Sydney)' },
+		{ value: 'Pacific/Noumea', label: 'UTC+11 (Noumea)' },
+		{ value: 'Pacific/Auckland', label: 'UTC+12 (Auckland)' }
 	];
 
-	const durationOptions = [
-		{ value: 1000 * 60, label: '1 minute' },
-		{ value: 1000 * 60 * 5, label: '5 minutes' },
-		{ value: 1000 * 60 * 10, label: '10 minutes' },
-		{ value: 1000 * 60 * 15, label: '15 minutes' },
-		{ value: 1000 * 60 * 30, label: '30 minutes' },
-		{ value: 1000 * 60 * 60, label: '1 hour' }
-	];
+	// Auto-detect timezone on mount if not set
+	onMount(() => {
+		if (!cardData.timezone) {
+			try {
+				item.cardData.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+			} catch {
+				item.cardData.timezone = 'UTC';
+			}
+		}
+	});
+
+	function useLocalTimezone() {
+		try {
+			item.cardData.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+		} catch {
+			item.cardData.timezone = 'UTC';
+		}
+	}
 
 	// Parse target date for inputs
 	let targetDateValue = $derived.by(() => {
···
 	<!-- Mode Selection -->
 	<div class="flex flex-col gap-2">
 		<Label>Mode</Label>
-		<div class="grid grid-cols-3 gap-2">
+		<div class="grid grid-cols-2 gap-2">
 			{#each modeOptions as opt (opt.value)}
 				<button
 					type="button"
···
 		</div>
 	</div>
 
-	<!-- Label -->
-	<div class="flex flex-col gap-2">
-		<Label for="label">Label (optional)</Label>
-		<Input
-			id="label"
-			value={cardData.label || ''}
-			oninput={(e) => (item.cardData.label = e.currentTarget.value || undefined)}
-			placeholder={cardData.mode === 'clock'
-				? 'e.g. Tokyo Time'
-				: cardData.mode === 'event'
-					? 'e.g. New Year'
-					: 'e.g. Focus Time'}
-		/>
-	</div>
-
 	<!-- Clock Settings -->
 	{#if cardData.mode === 'clock'}
 		<div class="flex flex-col gap-2">
 			<Label for="timezone">Timezone</Label>
-			<select
-				id="timezone"
-				value={cardData.timezone || 'UTC'}
-				onchange={(e) => (item.cardData.timezone = e.currentTarget.value)}
-				class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 text-base-900 dark:text-base-100 rounded-xl border px-3 py-2"
-			>
-				{#each timezoneOptions as tz (tz.value)}
-					<option value={tz.value}>{tz.label}</option>
-				{/each}
-			</select>
-		</div>
-	{/if}
-
-	<!-- Timer Settings -->
-	{#if cardData.mode === 'timer'}
-		<div class="flex flex-col gap-2">
-			<Label for="duration">Duration</Label>
-			<select
-				id="duration"
-				value={cardData.duration || 1000 * 60 * 5}
-				onchange={(e) => (item.cardData.duration = parseInt(e.currentTarget.value))}
-				class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 text-base-900 dark:text-base-100 rounded-xl border px-3 py-2"
-			>
-				{#each durationOptions as dur (dur.value)}
-					<option value={dur.value}>{dur.label}</option>
-				{/each}
-			</select>
+			<div class="flex gap-2">
+				<select
+					id="timezone"
+					value={cardData.timezone || 'UTC'}
+					onchange={(e) => (item.cardData.timezone = e.currentTarget.value)}
+					class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 text-base-900 dark:text-base-100 flex-1 rounded-xl border px-3 py-2"
+				>
+					{#each timezoneOptions as tz (tz.value)}
+						<option value={tz.value}>{tz.label}</option>
+					{/each}
+				</select>
+				<Button size="sm" variant="ghost" onclick={useLocalTimezone}>Local</Button>
+			</div>
 		</div>
 	{/if}
 

src/lib/cards/TimerCard/index.ts

···
 import TimerCard from './TimerCard.svelte';
 import TimerCardSettings from './TimerCardSettings.svelte';
 
-export type TimerMode = 'clock' | 'timer' | 'event';
+export type TimerMode = 'clock' | 'event';
 
 export type TimerCardData = {
 	mode: TimerMode;
···
 	timezone?: string;
 	// For event mode: target date as ISO string
 	targetDate?: string;
-	// For timer mode: duration in ms
-	duration?: number;
 };
 
 export const TimerCardDefinition = {
···
 	},
 
 	allowSetColor: true,
-	name: 'Timer Card'
+	name: 'Timer Card',
+	minW: 4,
+	canHaveLabel: true
 } as CardDefinition & { type: 'timer' };

src/lib/cards/index.ts

···
 import { BigSocialCardDefinition } from './BigSocialCard';
 import { BlueskyMediaCardDefinition } from './BlueskyMediaCard';
 import { BlueskyPostCardDefinition } from './BlueskyPostCard';
+import { LatestBlueskyPostCardDefinition } from './LatestBlueskyPostCard';
 import { DinoGameCardDefinition } from './GameCards/DinoGameCard';
 import { EmbedCardDefinition } from './EmbedCard';
 import { TetrisCardDefinition } from './GameCards/TetrisCard';
···
 	UpdatedBlentosCardDefitition,
 	YoutubeCardDefinition,
 	BlueskyPostCardDefinition,
+	LatestBlueskyPostCardDefinition,
 	LivestreamCardDefitition,
 	LivestreamEmbedCardDefitition,
 	EmbedCardDefinition,

src/lib/components/select-theme/SelectTheme.svelte

···
+<script lang="ts">
+	import { Paragraph } from '@foxui/core';
+	import { ColorSelect } from '@foxui/colors';
+
+	let accentColors = [
+		{ class: 'text-red-500', label: 'red' },
+		{ class: 'text-orange-500', label: 'orange' },
+		{ class: 'text-amber-500', label: 'amber' },
+		{ class: 'text-yellow-500', label: 'yellow' },
+		{ class: 'text-lime-500', label: 'lime' },
+		{ class: 'text-green-500', label: 'green' },
+		{ class: 'text-emerald-500', label: 'emerald' },
+		{ class: 'text-teal-500', label: 'teal' },
+		{ class: 'text-cyan-500', label: 'cyan' },
+		{ class: 'text-sky-500', label: 'sky' },
+		{ class: 'text-blue-500', label: 'blue' },
+		{ class: 'text-indigo-500', label: 'indigo' },
+		{ class: 'text-violet-500', label: 'violet' },
+		{ class: 'text-purple-500', label: 'purple' },
+		{ class: 'text-fuchsia-500', label: 'fuchsia' },
+		{ class: 'text-pink-500', label: 'pink' },
+		{ class: 'text-rose-500', label: 'rose' }
+	];
+
+	let baseColors = [
+		{ class: 'text-gray-500', label: 'gray' },
+		{ class: 'text-stone-500', label: 'stone' },
+		{ class: 'text-zinc-500', label: 'zinc' },
+		{ class: 'text-neutral-500', label: 'neutral' },
+		{ class: 'text-slate-500', label: 'slate' }
+	];
+
+	let {
+		accentColor = $bindable('pink'),
+		baseColor = $bindable('stone'),
+		selectAccentColor = true,
+		selectBaseColor = true,
+		onchanged
+	}: {
+		accentColor?: string;
+		baseColor?: string;
+		selectAccentColor?: boolean;
+		selectBaseColor?: boolean;
+		onchanged?: (accentColor: string, baseColor: string) => void;
+	} = $props();
+
+	let selectedAccentColor = $derived(
+		accentColors.find((c) => c.label === accentColor) ?? accentColors[15]
+	);
+
+	let selectedBaseColor = $derived(baseColors.find((c) => c.label === baseColor) ?? baseColors[1]);
+</script>
+
+{#if selectAccentColor}
+	<Paragraph class="mb-2">Accent Color</Paragraph>
+	<ColorSelect
+		selected={selectedAccentColor}
+		colors={accentColors}
+		onselected={(color, previous) => {
+			if (typeof previous === 'string' || typeof color === 'string') {
+				return;
+			}
+
+			document.documentElement.classList.remove(previous.label.toLowerCase());
+			document.documentElement.classList.add(color.label.toLowerCase());
+
+			accentColor = color.label;
+
+			window.dispatchEvent(
+				new CustomEvent('theme-changed', { detail: { accentColor: color.label } })
+			);
+
+			onchanged?.(accentColor, baseColor);
+		}}
+		class="w-64"
+	/>
+{/if}
+
+{#if selectBaseColor}
+	<Paragraph class="mt-4 mb-2">Base Color</Paragraph>
+	<ColorSelect
+		selected={selectedBaseColor}
+		colors={baseColors}
+		onselected={(color, previous) => {
+			if (typeof previous === 'string' || typeof color === 'string') {
+				return;
+			}
+
+			document.documentElement.classList.remove(previous.label.toLowerCase());
+			document.documentElement.classList.add(color.label.toLowerCase());
+
+			baseColor = color.label;
+
+			window.dispatchEvent(
+				new CustomEvent('theme-changed', { detail: { baseColor: color.label } })
+			);
+
+			onchanged?.(accentColor, baseColor);
+		}}
+	/>
+{/if}

src/lib/components/select-theme/SelectThemePopover.svelte

···
+<script lang="ts">
+	import { buttonVariants, Popover, cn } from '@foxui/core';
+	import SelectTheme from './SelectTheme.svelte';
+
+	let {
+		accentColor = $bindable('pink'),
+		baseColor = $bindable('stone'),
+		selectAccentColor = true,
+		selectBaseColor = true,
+		onchanged
+	}: {
+		accentColor?: string;
+		baseColor?: string;
+		selectAccentColor?: boolean;
+		selectBaseColor?: boolean;
+		onchanged?: (accentColor: string, baseColor: string) => void;
+	} = $props();
+</script>
+
+<Popover>
+	{#snippet child({ props })}
+		<button
+			{...props}
+			class={cn(
+				buttonVariants({ variant: 'link', size: 'default' }),
+				'flex cursor-pointer items-center gap-0 -space-x-2 backdrop-blur-none'
+			)}
+		>
+			{#if selectAccentColor}
+				<div
+					class=" from-accent-500 to-accent-600 border-accent-700 dark:border-accent-400 z-10 size-6 rounded-full border bg-linear-to-b"
+				></div>
+			{/if}
+
+			{#if selectBaseColor}
+				<div
+					class=" from-base-500 to-base-600 border-base-700 dark:border-base-400 size-6 rounded-full border bg-linear-to-b"
+				></div>
+			{/if}
+		</button>
+	{/snippet}
+	<SelectTheme bind:accentColor bind:baseColor {selectAccentColor} {selectBaseColor} {onchanged} />
+</Popover>

src/lib/components/select-theme/index.ts

···
+export { default as SelectTheme } from './SelectTheme.svelte';
+export { default as SelectThemePopover } from './SelectThemePopover.svelte';

src/lib/helper.ts

···
 import type { Item, WebsiteData } from './types';
 import { COLUMNS, margin, mobileMargin } from '$lib';
 import { CardDefinitionsByType } from './cards';
-import { deleteRecord, getImageBlobUrl, putRecord, uploadBlob } from '$lib/atproto';
-import { toast } from '@foxui/core';
+import { deleteRecord, getCDNImageBlobUrl, putRecord, uploadBlob } from '$lib/atproto';
 import * as TID from '@atcute/tid';
 
 export function clamp(value: number, min: number, max: number): number {
···
 	if (objectWithImage[key].objectUrl) return objectWithImage[key].objectUrl;
 
 	if (typeof objectWithImage[key] === 'object' && objectWithImage[key].$type === 'blob') {
-		return getImageBlobUrl({ did, blob: objectWithImage[key] });
+		return getCDNImageBlobUrl({ did, blob: objectWithImage[key] });
 	}
 	return objectWithImage[key];
 }

src/lib/types.ts

···
 
 			// 'side' (default on desktop) or 'top' (always top like mobile view)
 			profilePosition?: 'side' | 'top';
+
+			// theme colors
+			accentColor?: string;
+			baseColor?: string;
 		};
 	};
 	profile: AppBskyActorDefs.ProfileViewDetailed;

src/lib/website/Account.svelte

···
 	import { user, login, logout } from '$lib/atproto';
 	import type { WebsiteData } from '$lib/types';
 	import type { ActorIdentifier } from '@atcute/lexicons';
-	import { Button, Popover } from '@foxui/core';
+	import { Avatar, Button, Popover } from '@foxui/core';
 
 	let {
 		data
···
 		<Popover sideOffset={8} bind:open={settingsPopoverOpen} class="bg-base-100 dark:bg-base-900">
 			{#snippet child({ props })}
 				<button {...props}>
-					<img src={user.profile?.avatar} alt="" class="size-15 rounded-full" />
+					<Avatar src={user.profile?.avatar} alt="" class="size-15 rounded-full" />
 				</button>
 			{/snippet}
 

src/lib/website/Controls.svelte

···
+<script lang="ts">
+	import { SelectThemePopover } from '$lib/components/select-theme';
+	import { getHideProfileSection, getProfilePosition } from '$lib/helper';
+	import type { WebsiteData } from '$lib/types';
+	import { Button } from '@foxui/core';
+	import { getIsMobile } from './context';
+
+	let { data = $bindable() }: { data: WebsiteData } = $props();
+
+	let accentColor = $derived(data.publication?.preferences?.accentColor ?? 'pink');
+	let baseColor = $derived(data.publication?.preferences?.baseColor ?? 'stone');
+
+	function updateTheme(newAccent: string, newBase: string) {
+		data.publication.preferences ??= {};
+		data.publication.preferences.accentColor = newAccent;
+		data.publication.preferences.baseColor = newBase;
+		data = { ...data };
+	}
+
+	let profilePosition = $derived(getProfilePosition(data));
+
+	function toggleProfilePosition() {
+		data.publication.preferences ??= {};
+		data.publication.preferences.profilePosition = profilePosition === 'side' ? 'top' : 'side';
+		data = { ...data };
+	}
+
+	let isMobile = getIsMobile();
+</script>
+
+<div class={['fixed top-2 left-14 z-20 flex gap-2']}>
+	<Button
+		size="icon"
+		onclick={() => {
+			data.publication.preferences ??= {};
+			data.publication.preferences.hideProfileSection =
+				!data.publication.preferences?.hideProfileSection;
+			data = { ...data };
+		}}
+		variant="ghost"
+	>
+		{#if !getHideProfileSection(data)}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="size-5!"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
+				/>
+			</svg>
+		{:else}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="size-5!"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
+				/>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+				/>
+			</svg>
+		{/if}
+	</Button>
+
+	<!-- Position toggle button (desktop only) -->
+	{#if !isMobile() && !getHideProfileSection(data)}
+		<Button size="icon" type="button" onclick={toggleProfilePosition} variant="ghost">
+			{#if profilePosition === 'side'}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="size-5!"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
+					/>
+				</svg>
+			{:else}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="size-5!"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="m19.5 4.5-15 15m0 0h11.25m-11.25 0V8.25"
+					/>
+				</svg>
+			{/if}
+		</Button>
+	{/if}
+
+	<!-- Theme selection -->
+	<SelectThemePopover
+		{accentColor}
+		{baseColor}
+		onchanged={(newAccent, newBase) => updateTheme(newAccent, newBase)}
+	/>
+</div>

src/lib/website/EditableProfile.svelte

···
 	import { getImage, compressImage, getProfilePosition } from '$lib/helper';
 	import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
 	import MarkdownTextEditor from '$lib/components/MarkdownTextEditor.svelte';
-	import { Button } from '@foxui/core';
+	import { Avatar, Button } from '@foxui/core';
 	import { getIsMobile } from './context';
-	import type { Editor } from '@tiptap/core';
 	import MadeWithBlento from './MadeWithBlento.svelte';
+	import { SelectThemePopover } from '$lib/components/select-theme';
 
 	let { data = $bindable(), hideBlento = false }: { data: WebsiteData; hideBlento?: boolean } =
 		$props();
-
-	let profilePosition = $derived(getProfilePosition(data));
-
-	function toggleProfilePosition() {
-		data.publication.preferences ??= {};
-		data.publication.preferences.profilePosition = profilePosition === 'side' ? 'top' : 'side';
-		data = { ...data };
-	}
 
 	let fileInput: HTMLInputElement;
 	let isHoveringAvatar = $state(false);
···
 		fileInput.click();
 	}
 
-	let isMobile = getIsMobile();
+	let profilePosition = $derived(getProfilePosition(data));
 </script>
 
 <div
···
 >
 	<div
 		class={[
-			'absolute left-2 z-20 flex gap-2',
-			profilePosition === 'side' ? 'top-2 left-14' : 'top-2'
-		]}
-	>
-		<Button
-			size="icon"
-			onclick={() => {
-				data.publication.preferences ??= {};
-				data.publication.preferences.hideProfileSection = true;
-				data = { ...data };
-			}}
-			variant="ghost"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				class="size-6"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
-				/>
-			</svg>
-		</Button>
-
-		<!-- Position toggle button (desktop only) -->
-		{#if !isMobile()}
-			<Button size="icon" type="button" onclick={toggleProfilePosition} variant="ghost">
-				{#if profilePosition === 'side'}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="size-6"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
-						/>
-					</svg>
-				{:else}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="size-6"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="m19.5 4.5-15 15m0 0h11.25m-11.25 0V8.25"
-						/>
-					</svg>
-				{/if}
-			</Button>
-		{/if}
-	</div>
-
-	<div
-		class={[
-			'flex flex-col gap-4 pt-16 pb-8',
+			'flex flex-col gap-4 pt-16 pb-4',
 			profilePosition === 'side' && '@5xl/wrapper:h-screen @5xl/wrapper:pt-24'
 		]}
 	>
···
 			onmouseleave={() => (isHoveringAvatar = false)}
 			onclick={handleFileInputClick}
 		>
-			{#if getAvatarUrl()}
-				<img
-					class="border-base-400 dark:border-base-800 size-full shrink-0 rounded-full border object-cover"
-					src={getAvatarUrl()}
-					alt=""
-				/>
-			{:else}
-				<div class="bg-base-300 dark:bg-base-700 size-full rounded-full"></div>
-			{/if}
+			<Avatar
+				src={getAvatarUrl()}
+				class={[
+					'border-base-400 dark:border-base-800 size-32 shrink-0 rounded-full border object-cover',
+					profilePosition === 'side' && '@5xl/wrapper:size-44'
+				]}
+			/>
 
 			<!-- Hover overlay -->
 			<div
···
 				/>
 			{/if}
 		</div>
-
-		<div class={['h-10.5 w-1', profilePosition === 'side' && '@5xl/wrapper:hidden']}></div>
 
 		{#if !hideBlento}
 			<MadeWithBlento class="hidden {profilePosition === 'side' && '@5xl/wrapper:block'}" />

src/lib/website/EditableWebsite.svelte

···
 		savePage,
 		scrollToItem,
 		setPositionOfNewItem,
-		validateLink
+		validateLink,
+		getImage
 	} from '../helper';
 	import EditableProfile from './EditableProfile.svelte';
 	import type { Item, WebsiteData } from '../types';
···
 	import BaseEditingCard from '../cards/BaseCard/BaseEditingCard.svelte';
 	import Context from './Context.svelte';
 	import Head from './Head.svelte';
-	import { compressImage } from '../helper';
 	import Account from './Account.svelte';
+	import { SelectThemePopover } from '$lib/components/select-theme';
 	import EditBar from './EditBar.svelte';
 	import SaveModal from './SaveModal.svelte';
 	import FloatingEditButton from './FloatingEditButton.svelte';
 	import { user } from '$lib/atproto';
 	import { launchConfetti } from '@foxui/visual';
+	import Controls from './Controls.svelte';
 
 	let {
 		data
···
 
 	// Check if floating login button will be visible (to hide MadeWithBlento)
 	const showLoginOnEditPage = $derived(!user.isInitializing && !user.isLoggedIn);
+
+	let accentColor = $derived(data.publication?.preferences?.accentColor ?? 'pink');
+	let baseColor = $derived(data.publication?.preferences?.baseColor ?? 'stone');
+
+	function updateTheme(newAccent: string, newBase: string) {
+		data.publication.preferences ??= {};
+		data.publication.preferences.accentColor = newAccent;
+		data.publication.preferences.baseColor = newBase;
+		data = { ...data };
+	}
 
 	let imageDragOver = $state(false);
 
···
 />
 
 <Head
-	favicon={data.profile.avatar ?? null}
+	favicon={getImage(data.publication, data.did, 'icon') || data.profile.avatar}
 	title={getName(data)}
 	image={'/' + data.handle + '/og.png'}
+	accentColor={data.publication?.preferences?.accentColor}
+	baseColor={data.publication?.preferences?.baseColor}
 />
 
 <Account {data} />
···
 			Editing on mobile is not supported yet. Please use a desktop browser.
 		</div>
 	{/if}
+
+	<Controls bind:data />
 
 	{#if showingMobileView}
 		<div
···
 					: '@5xl/wrapper:max-w-4xl'
 			]}
 		>
-			{#if getHideProfileSection(data)}
-				<Button
-					size="icon"
-					variant="ghost"
-					onclick={() => {
-						data.publication.preferences ??= {};
-						data.publication.preferences.hideProfileSection = false;
-						data = { ...data };
-					}}
-					class="pointer-events-auto absolute top-2 left-2 z-20"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="size-6"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
-						/>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-						/>
-					</svg>
-				</Button>
-			{/if}
 			<div class="pointer-events-none"></div>
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div

src/lib/website/EmptyState.svelte

···
 <script lang="ts">
-	import { login, user } from '$lib/atproto';
 	import BaseCard from '$lib/cards/BaseCard/BaseCard.svelte';
 	import Card from '$lib/cards/Card/Card.svelte';
 	import type { Item, WebsiteData } from '$lib/types';
-	import type { ActorIdentifier } from '@atcute/lexicons';
-	import { Button } from '@foxui/core';
 
 	let { data }: { data: WebsiteData } = $props();
 
···
 			mobileW: 8,
 			mobileH: 3,
 			cardType: 'text',
-			color: 'red',
+			color: 'cyan',
 			cardData: {
 				text: `## No blento yet!`,
 				textAlign: 'center',
···
 		// Bluesky social icon
 		items.push({
 			id: 'empty-bluesky',
-			x: 0,
-			y: 2,
+			x: 6,
+			y: 0,
 			w: 2,
 			h: 2,
 			mobileX: 0,

src/lib/website/FloatingEditButton.svelte

···
 	import type { WebsiteData } from '$lib/types';
 	import { page } from '$app/state';
 	import type { ActorIdentifier } from '@atcute/lexicons';
+	import { loginModalState } from '$lib/atproto/UI/LoginModal.svelte';
+	import { getHandleOrDid } from '$lib/atproto/methods';
 
 	let { data }: { data: WebsiteData } = $props();
 
···
 	const showEditBlentoButton = $derived(
 		isBlento && user.isLoggedIn && user.profile?.handle !== data.handle
 	);
+
+	function getUserIdentifier(): ActorIdentifier {
+		const id = user.profile ? getHandleOrDid(user.profile) : (data.did as ActorIdentifier);
+		return id;
+	}
 </script>
 
 {#if isOwnPage && !isEditPage}
···
 	</div>
 {:else if showLoginOnEditPage}
 	<div class="fixed bottom-6 left-6 z-49">
-		<Button size="lg" onclick={() => login(data.handle as ActorIdentifier)}>
+		<Button size="lg" onclick={() => login(getUserIdentifier())}>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				fill="none"
···
 	</div>
 {:else if showLoginOnBlento}
 	<div class="fixed bottom-6 left-6 z-49">
-		<BlueskyLogin
-			login={async (handle) => {
-				await login(handle as ActorIdentifier);
-				return true;
-			}}
-		/>
+		<Button size="lg" onclick={() => loginModalState.show()}>Login</Button>
 	</div>
 {:else if showEditBlentoButton}
 	<div class="fixed bottom-6 left-6 z-49">
-		<Button size="lg" href="/{env.PUBLIC_IS_SELFHOSTED ? '' : user.profile?.handle}/edit">
+		<Button size="lg" href="/{env.PUBLIC_IS_SELFHOSTED ? '' : getUserIdentifier()}/edit">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				fill="none"

src/lib/website/Head.svelte

···
 <script lang="ts">
+	import ThemeScript from './ThemeScript.svelte';
+
 	let {
 		favicon,
 		title,
 		image,
-		description
-	}: { favicon: string | null; title: string | null; image?: string; description?: string } =
-		$props();
+		description,
+		accentColor,
+		baseColor
+	}: {
+		favicon: string | null;
+		title: string | null;
+		image?: string;
+		description?: string;
+		accentColor?: string;
+		baseColor?: string;
+	} = $props();
 </script>
+
+<ThemeScript {accentColor} {baseColor} />
 
 <svelte:head>
 	{#if favicon}

src/lib/website/Profile.svelte

···
 	import { page } from '$app/state';
 	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
 	import MadeWithBlento from './MadeWithBlento.svelte';
+	import { Avatar } from '@foxui/core';
 
 	let {
 		data,
···
 >
 	<div
 		class={[
-			'flex flex-col gap-4 pt-16 pb-8',
+			'flex flex-col gap-4 pt-16 pb-4',
 			profilePosition === 'side' && '@5xl/wrapper:h-screen @5xl/wrapper:pt-24'
 		]}
 	>
···
 				}
 			}}
 		>
-			{#if data.publication?.icon || data.profile.avatar}
-				<img
-					class={[
-						'border-base-400 dark:border-base-800 size-32 shrink-0 rounded-full border object-cover',
-						profilePosition === 'side' && '@5xl/wrapper:size-44'
-					]}
-					src={getImage(data.publication, data.did, 'icon') || data.profile.avatar}
-					alt=""
-				/>
-			{:else}
-				<div
-					class={[
-						'bg-base-300 dark:bg-base-700 size-32 shrink-0 rounded-full',
-						profilePosition === 'side' && '@5xl/wrapper:size-44'
-					]}
-				></div>
-			{/if}
+			<Avatar
+				src={getImage(data.publication, data.did, 'icon') || data.profile.avatar}
+				class={[
+					'border-base-400 dark:border-base-800 size-32 shrink-0 rounded-full border object-cover',
+					profilePosition === 'side' && '@5xl/wrapper:size-44'
+				]}
+			/>
 		</a>
 
 		<div class="text-4xl font-bold wrap-anywhere">

src/lib/website/ThemeScript.svelte

···
+<script lang="ts">
+	let {
+		accentColor = 'pink',
+		baseColor = 'stone'
+	}: {
+		accentColor?: string;
+		baseColor?: string;
+	} = $props();
+
+	let script = $derived(
+		`<script>(function(){document.documentElement.classList.add(${JSON.stringify(accentColor)},${JSON.stringify(baseColor)});})();<` +
+			'/script>'
+	);
+</script>
+
+<svelte:head>
+	{@html script}
+</svelte:head>

src/lib/website/Website.svelte

···
 		getHideProfileSection,
 		getProfilePosition,
 		getName,
-		sortItems
+		sortItems,
+		getImage
 	} from '../helper';
 	import { innerWidth } from 'svelte/reactivity/window';
 	import { setDidContext, setHandleContext, setIsMobile } from './context';
···
 </script>
 
 <Head
-	favicon={data.profile.avatar ?? null}
+	favicon={getImage(data.publication, data.did, 'icon') || data.profile.avatar}
 	title={getName(data)}
 	image={'/' + data.handle + '/og.png'}
 	description={getDescription(data)}
+	accentColor={data.publication?.preferences?.accentColor}
+	baseColor={data.publication?.preferences?.baseColor}
 />
 
 <Context {data}>
···
 		>
 			<div></div>
 			<div bind:this={container} class="@container/grid relative col-span-3 px-2 py-8 lg:px-8">
-				{#if data.cards.length === 0}
+				{#if data.cards.length === 0 && data.page === 'blento.self'}
 					<EmptyState {data} />
 				{:else}
 					{#each data.cards.toSorted(sortItems) as item (item.id)}

src/lib/website/load.ts

···
 import type { Item, UserCache, WebsiteData } from '$lib/types';
 import { compactItems, fixAllCollisions } from '$lib/helper';
 import { error } from '@sveltejs/kit';
-import type { Handle } from '@atcute/lexicons';
+import type { ActorIdentifier, Did } from '@atcute/lexicons';
+
+import { isDid, isHandle } from '@atcute/lexicons/syntax';
 
 const CURRENT_CACHE_VERSION = 1;
 
···
 		result.page = 'blento.' + page;
 
 		result.publication = (result.publications as Awaited<ReturnType<typeof listRecords>>).find(
-			(v) => parseUri(v.uri).rkey === result.page
+			(v) => parseUri(v.uri)?.rkey === result.page
 		)?.value;
 		result.publication ??= {
 			name: result.profile?.displayName || result.profile?.handle,
···
 }
 
 export async function loadData(
-	handle: Handle,
+	handle: ActorIdentifier,
 	cache: UserCache | undefined,
 	forceUpdate: boolean = false,
 	page: string = 'self'
···
 		if (cachedResult) return cachedResult;
 	}
 
-	const did = await resolveHandle({ handle });
+	let did: Did | undefined = undefined;
+	if (isHandle(handle)) {
+		did = await resolveHandle({ handle });
+	} else if (isDid(handle)) {
+		did = handle;
+	} else {
+		throw error(404);
+	}
 
 	const cards = await listRecords({ did, collection: 'app.blento.card' }).catch(() => {
 		console.error('error getting records for collection app.blento.card');
···
 
 	parsedResult.publication = (
 		parsedResult.publications as Awaited<ReturnType<typeof listRecords>>
-	).find((v) => parseUri(v.uri).rkey === parsedResult.page)?.value;
+	).find((v) => parseUri(v.uri)?.rkey === parsedResult.page)?.value;
 	parsedResult.publication ??= {
 		name: profile?.displayName || profile?.handle,
 		description: profile?.description

src/params/handle.ts

···
 import type { ParamMatcher } from '@sveltejs/kit';
 
 export const match = ((param: string) => {
-	return param.includes('.');
+	return param.includes('.') || param.startsWith('did:');
 }) satisfies ParamMatcher;

src/routes/(auth)/oauth/callback/+page.svelte

···
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { user } from '$lib/atproto';
+	import { getHandleOrDid } from '$lib/atproto/methods';
 
 	$effect(() => {
 		console.log('hello', user);
 		if (user.profile) {
-			goto('/' + user.profile.handle + '/edit', {});
+			goto('/' + getHandleOrDid(user.profile) + '/edit', {});
 		}
 	});
 </script>

src/routes/+layout.svelte

···
 	import YoutubeVideoPlayer, { videoPlayer } from '$lib/components/YoutubeVideoPlayer.svelte';
 	import { page } from '$app/state';
 	import { goto } from '$app/navigation';
+	import LoginModal from '$lib/atproto/UI/LoginModal.svelte';
 
 	let { children } = $props();
 
···
 {#if videoPlayer.id}
 	<YoutubeVideoPlayer />
 {/if}
+
+<LoginModal />