bluesky post card + fixes

src/lib/atproto/methods.ts

···
-import { parseResourceUri, type Did, type 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 {
···
 
 	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

···
 
 // which PDS to use for signup
 // ATTENTION: pds.rip is only for development, all accounts get deleted automatically after a week
-export const signUpPDS = 'https://selfhosted.social/';
+export const signUpPDS = 'https://pds.rip/';

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 });
+
+	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;
+	},
+	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);
 
-		return JSON.parse(JSON.stringify(authorFeed));
+		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
-} as CardDefinition & { type: 'latestPost' };
+	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/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/SpecialCards/UpdatedBlentos/UpdatedBlentosCard.svelte

···
 	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"
 			>

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/website/FloatingEditButton.svelte

···
 	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 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/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;
 
···
 }
 
 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');

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>