guestbook card

.claude/settings.local.json

···
 			"Bash(pnpm dev)",
 			"Bash(pnpm exec svelte-kit:*)",
 			"Bash(pnpm build:*)",
-			"Bash(pnpm remove:*)"
+			"Bash(pnpm remove:*)",
+			"Bash(grep:*)"
 		]
 	}
 }

src/lib/atproto/index.ts

···
 	getBlobURL,
 	getCDNImageBlobUrl,
 	searchActorsTypeahead,
-	getAuthorFeed
+	getAuthorFeed,
+	getPostThread,
+	createPost
 } from './methods';

src/lib/atproto/methods.ts

···
 		return profile.did;
 	}
 }
+
+/**
+ * Fetches a post's thread including replies.
+ * @param uri - The AT URI of the post
+ * @param depth - How many levels of replies to fetch (default 1)
+ * @param client - The client to use (defaults to public Bluesky API)
+ * @returns The thread data or undefined on failure
+ */
+export async function getPostThread({
+	uri,
+	depth = 1,
+	client
+}: {
+	uri: string;
+	depth?: number;
+	client?: Client;
+}) {
+	client ??= new Client({
+		handler: simpleFetchHandler({ service: 'https://public.api.bsky.app' })
+	});
+
+	const response = await client.get('app.bsky.feed.getPostThread', {
+		params: { uri: uri as ResourceUri, depth }
+	});
+
+	if (!response.ok) return;
+
+	return response.data.thread;
+}
+
+/**
+ * Creates a Bluesky post on the authenticated user's account.
+ * @param text - The post text
+ * @param facets - Optional rich text facets (links, mentions, etc.)
+ * @returns The response containing the post's URI and CID
+ * @throws If the user is not logged in
+ */
+export async function createPost({
+	text,
+	facets
+}: {
+	text: string;
+	facets?: Array<{
+		index: { byteStart: number; byteEnd: number };
+		features: Array<{ $type: string; uri?: string; did?: string; tag?: string }>;
+	}>;
+}) {
+	if (!user.client || !user.did) throw new Error('No client or did');
+
+	const record: Record<string, unknown> = {
+		$type: 'app.bsky.feed.post',
+		text,
+		createdAt: new Date().toISOString()
+	};
+
+	if (facets) {
+		record.facets = facets;
+	}
+
+	const response = await user.client.post('com.atproto.repo.createRecord', {
+		input: {
+			collection: 'app.bsky.feed.post',
+			repo: user.did,
+			record
+		}
+	});
+
+	return response;
+}

src/lib/atproto/settings.ts

···
 		'app.blento.settings',
 		'app.blento.comment',
 		'app.blento.guestbook.entry',
+		'app.bsky.feed.post',
 		'site.standard.publication',
 		'site.standard.document',
 		'xyz.statusphere.status'

src/lib/cards/GuestbookCard/CreateGuestbookCardModal.svelte

···
+<script lang="ts">
+	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import type { CreationModalComponentProps } from '../types';
+	import { createPost } from '$lib/atproto/methods';
+	import { user } from '$lib/atproto/auth.svelte';
+	import { parseBlueskyPostUrl } from '../BlueskyPostCard/utils';
+
+	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+
+	let mode = $state<'create' | 'existing'>('create');
+
+	const profileUrl = `https://blento.app/${user.profile?.handle ?? ''}`;
+	let postText = $state(`Comment on this post to appear on my Blento! ${profileUrl}`);
+	let postUrl = $state('');
+	let isPosting = $state(false);
+	let errorMessage = $state('');
+
+	function buildFacets(text: string, url: string) {
+		const encoder = new TextEncoder();
+		const encoded = encoder.encode(text);
+		const urlBytes = encoder.encode(url);
+
+		let byteStart = -1;
+		for (let i = 0; i <= encoded.length - urlBytes.length; i++) {
+			let match = true;
+			for (let j = 0; j < urlBytes.length; j++) {
+				if (encoded[i + j] !== urlBytes[j]) {
+					match = false;
+					break;
+				}
+			}
+			if (match) {
+				byteStart = i;
+				break;
+			}
+		}
+
+		if (byteStart === -1) return undefined;
+
+		return [
+			{
+				index: { byteStart, byteEnd: byteStart + urlBytes.length },
+				features: [{ $type: 'app.bsky.richtext.facet#link', uri: url }]
+			}
+		];
+	}
+
+	async function handleCreateNew() {
+		if (!postText.trim()) {
+			errorMessage = 'Post text cannot be empty.';
+			return;
+		}
+
+		isPosting = true;
+		errorMessage = '';
+
+		try {
+			const facets = buildFacets(postText, profileUrl);
+			const response = await createPost({ text: postText, facets });
+
+			if (!response.ok) {
+				throw new Error('Failed to create post');
+			}
+
+			item.cardData.uri = response.data.uri;
+
+			const rkey = response.data.uri.split('/').pop();
+			item.cardData.href = `https://bsky.app/profile/${user.profile?.handle}/post/${rkey}`;
+
+			oncreate();
+		} catch (err) {
+			errorMessage =
+				err instanceof Error ? err.message : 'Failed to create post. Please try again.';
+		} finally {
+			isPosting = false;
+		}
+	}
+
+	function handleExisting() {
+		errorMessage = '';
+		const parsed = parseBlueskyPostUrl(postUrl.trim());
+
+		if (!parsed) {
+			errorMessage =
+				'Invalid URL. Please enter a valid Bluesky post URL (e.g., https://bsky.app/profile/handle/post/...)';
+			return;
+		}
+
+		item.cardData.uri = `at://${parsed.handle}/app.bsky.feed.post/${parsed.rkey}`;
+		item.cardData.href = postUrl.trim();
+
+		oncreate();
+	}
+
+	async function handleSubmit() {
+		if (mode === 'create') {
+			await handleCreateNew();
+		} else {
+			handleExisting();
+		}
+	}
+</script>
+
+<Modal open={true} closeButton={false}>
+	<form
+		onsubmit={(e) => {
+			e.preventDefault();
+			handleSubmit();
+		}}
+		class="flex flex-col gap-2"
+	>
+		<Subheading>Guestbook</Subheading>
+
+		<div class="flex gap-2">
+			<Button
+				size="sm"
+				variant="ghost"
+				class={mode === 'create' ? 'bg-base-200 dark:bg-base-700' : ''}
+				onclick={() => (mode = 'create')}
+			>
+				Create new post
+			</Button>
+			<Button
+				size="sm"
+				variant="ghost"
+				class={mode === 'existing' ? 'bg-base-200 dark:bg-base-700' : ''}
+				onclick={() => (mode = 'existing')}
+			>
+				Use existing post
+			</Button>
+		</div>
+
+		{#if mode === 'create'}
+			<p class="text-base-500 dark:text-base-400 text-sm">
+				This will create a post on your Bluesky account. Replies to that post will appear on your
+				guestbook card.
+			</p>
+			<textarea
+				bind:value={postText}
+				rows="4"
+				class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-600 mt-2 w-full rounded-lg border p-3 text-sm focus:outline-none"
+			></textarea>
+		{:else}
+			<p class="text-base-500 dark:text-base-400 text-sm">
+				Paste a Bluesky post URL to use as your guestbook. Replies to that post will appear on your
+				card.
+			</p>
+			<Input bind:value={postUrl} placeholder="https://bsky.app/profile/handle/post/..." />
+		{/if}
+
+		{#if errorMessage}
+			<Alert type="error" title="Error"><span>{errorMessage}</span></Alert>
+		{/if}
+
+		<div class="mt-4 flex justify-end gap-2">
+			<Button onclick={oncancel} variant="ghost">Cancel</Button>
+			{#if mode === 'create'}
+				<Button type="submit" disabled={isPosting || !postText.trim()}>
+					{isPosting ? 'Posting...' : 'Post to Bluesky & Create'}
+				</Button>
+			{:else}
+				<Button type="submit" disabled={!postUrl.trim()}>Create</Button>
+			{/if}
+		</div>
+	</form>
+</Modal>

src/lib/cards/GuestbookCard/GuestbookCard.svelte

···
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
+	import { CardDefinitionsByType } from '..';
+	import type { ContentComponentProps } from '../types';
+	import { Button } from '@foxui/core';
+	import { BlueskyPost } from '$lib/components/bluesky-post';
+	import type { PostView } from '@atcute/bluesky/types/app/feed/defs';
+
+	let { item }: ContentComponentProps = $props();
+
+	const data = getAdditionalUserData();
+	const did = getDidContext();
+	const handle = getHandleContext();
+
+	type Reply = {
+		$type: string;
+		post: PostView;
+	};
+
+	let isLoaded = $state(false);
+
+	let cardUri = $derived(item.cardData.uri as string);
+
+	// svelte-ignore state_referenced_locally
+	let replies = $state<Reply[]>(
+		((data['guestbook'] as Record<string, Reply[]>)?.[item.cardData.uri as string] ?? []) as Reply[]
+	);
+
+	onMount(async () => {
+		if (!cardUri) {
+			isLoaded = true;
+			return;
+		}
+
+		try {
+			const loaded = await CardDefinitionsByType[item.cardType]?.loadData?.([item], {
+				did,
+				handle
+			});
+			const result = loaded as Record<string, Reply[]> | undefined;
+			const freshReplies = result?.[cardUri] ?? [];
+
+			if (freshReplies.length > 0) {
+				replies = freshReplies;
+			}
+
+			if (!data['guestbook']) {
+				data['guestbook'] = {};
+			}
+			(data['guestbook'] as Record<string, Reply[]>)[cardUri] = replies;
+		} catch (e) {
+			console.error('Failed to load guestbook replies', e);
+		}
+
+		isLoaded = true;
+	});
+</script>
+
+<div class="flex h-full flex-col overflow-hidden p-4">
+	{#if item.cardData.href}
+		<div class="mb-2 flex justify-end">
+			<a href={item.cardData.href} target="_blank" rel="noopener noreferrer">
+				<Button size="sm">Add a comment on Bluesky</Button>
+			</a>
+		</div>
+	{/if}
+
+	<div class="flex-1 overflow-y-auto">
+		{#if replies.length > 0}
+			<div class="replies">
+				{#each replies as reply (reply.post.uri)}
+					<div class="reply">
+						<BlueskyPost feedViewPost={reply.post} showAvatar compact showLogo={false} />
+					</div>
+				{/each}
+			</div>
+		{:else if isLoaded}
+			<div
+				class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
+			>
+				No comments yet — share your Bluesky post to get started!
+			</div>
+		{:else}
+			<div
+				class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
+			>
+				Loading comments...
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.reply {
+		padding-bottom: 1rem;
+		margin-bottom: 1rem;
+		border-bottom: 1px solid oklch(0.5 0 0 / 0.1);
+	}
+
+	.reply:last-child {
+		border-bottom: none;
+		margin-bottom: 0;
+		padding-bottom: 0;
+	}
+
+	.reply :global(img:not([class*='rounded-full'])) {
+		max-height: 10rem;
+	}
+
+	.reply :global(article) {
+		max-height: 10rem;
+	}
+
+	@container card (width >= 30rem) {
+		.replies {
+			columns: 2;
+			column-gap: 1.5rem;
+			column-rule: 1px solid oklch(0.5 0 0 / 0.15);
+		}
+
+		.reply {
+			break-inside: avoid;
+		}
+	}
+</style>

src/lib/cards/GuestbookCard/index.ts

···
+import { getPostThread } from '$lib/atproto/methods';
+import type { CardDefinition } from '../types';
+import GuestbookCard from './GuestbookCard.svelte';
+import CreateGuestbookCardModal from './CreateGuestbookCardModal.svelte';
+
+export const GuestbookCardDefinition = {
+	type: 'guestbook',
+	contentComponent: GuestbookCard,
+	creationModalComponent: CreateGuestbookCardModal,
+	sidebarButtonText: 'Guestbook',
+	createNew: (card) => {
+		card.w = 4;
+		card.h = 6;
+		card.mobileW = 8;
+		card.mobileH = 12;
+		card.cardData.label = 'Guestbook';
+	},
+	minW: 4,
+	minH: 4,
+	defaultColor: 'base',
+	canHaveLabel: true,
+	loadData: async (items) => {
+		const uris = items
+			.filter((item) => item.cardData?.uri)
+			.map((item) => item.cardData.uri as string);
+
+		if (uris.length === 0) return {};
+
+		const results: Record<string, unknown[]> = {};
+
+		await Promise.all(
+			uris.map(async (uri) => {
+				try {
+					const thread = await getPostThread({ uri, depth: 1 });
+					if (thread && '$type' in thread && thread.$type === 'app.bsky.feed.defs#threadViewPost') {
+						const typedThread = thread as { replies?: unknown[] };
+						results[uri] = (typedThread.replies ?? [])
+							.filter(
+								(r: unknown) =>
+									r != null &&
+									typeof r === 'object' &&
+									'$type' in r &&
+									(r as { $type: string }).$type === 'app.bsky.feed.defs#threadViewPost'
+							)
+							.sort((a: unknown, b: unknown) => {
+								const timeA = new Date(
+									((a as any).post?.record?.createdAt as string) ?? 0
+								).getTime();
+								const timeB = new Date(
+									((b as any).post?.record?.createdAt as string) ?? 0
+								).getTime();
+								return timeB - timeA;
+							});
+					}
+				} catch (e) {
+					console.error('Failed to load guestbook thread for', uri, e);
+				}
+			})
+		);
+
+		return results;
+	},
+	name: 'Guestbook'
+} as CardDefinition & { type: 'guestbook' };

src/lib/cards/index.ts

···
 import { TimerCardDefinition } from './TimerCard';
 import { SpotifyCardDefinition } from './SpotifyCard';
 import { ButtonCardDefinition } from './ButtonCard';
+import { GuestbookCardDefinition } from './GuestbookCard';
 // import { Model3DCardDefinition } from './Model3DCard';
 
 export const AllCardDefinitions = [
+	GuestbookCardDefinition,
 	ButtonCardDefinition,
 	ImageCardDefinition,
 	VideoCardDefinition,

src/lib/components/bluesky-post/BlueskyPost.svelte

···
 		feedViewPost,
 		children,
 		showLogo = false,
+		showAvatar = false,
+		compact = false,
 		...restProps
-	}: { feedViewPost?: PostView; children?: Snippet; showLogo?: boolean } = $props();
+	}: {
+		feedViewPost?: PostView;
+		children?: Snippet;
+		showLogo?: boolean;
+		showAvatar?: boolean;
+		compact?: boolean;
+	} = $props();
 
 	const postData = $derived(feedViewPost ? blueskyPostToPostData(feedViewPost) : undefined);
 </script>
···
 		likeHref={postData?.href}
 		showBookmark={false}
 		logo={showLogo ? logo : undefined}
+		{showAvatar}
+		{compact}
 		{...restProps}
 	>
 		{@render children?.()}

src/lib/components/post/Post.svelte

···
 
 		children,
 
-		logo
+		logo,
+
+		showAvatar = false,
+		compact = false
 	}: WithElementRef<WithChildren<HTMLAttributes<HTMLDivElement>>> & {
 		data: PostData;
 		class?: string;
···
 		customActions?: Snippet;
 
 		logo?: Snippet;
+
+		showAvatar?: boolean;
+		compact?: boolean;
 	} = $props();
 </script>
 
···
 		</div>
 	{/if}
 	<div class="flex gap-4">
+		{#if showAvatar && data.author.avatar}
+			<a href={data.author.href} class="flex-shrink-0">
+				<img
+					src={data.author.avatar}
+					alt=""
+					class={compact ? 'size-7 rounded-full object-cover' : 'size-10 rounded-full object-cover'}
+				/>
+			</a>
+		{/if}
 		<div class="w-full">
 			<div class="mb-1 flex items-start justify-between gap-2">
 				<div class="flex items-start gap-4">
···
 					{/if}
 
 					<div
-						class="text-base-600 dark:text-base-400 accent:text-accent-950 block text-sm no-underline"
+						class={cn(
+							'text-base-600 dark:text-base-400 accent:text-accent-950 block no-underline',
+							compact ? 'text-xs' : 'text-sm'
+						)}
 					>
 						<RelativeTime date={new Date(data.createdAt)} locale="en" />
 					</div>
···
 			</div>
 
 			<Prose
-				size="md"
+				size={compact ? 'default' : 'md'}
 				class="accent:prose-a:text-accent-950 accent:text-base-900 accent:prose-p:text-base-900 accent:prose-a:underline"
 			>
 				{#if data.htmlContent}
···
 
 			<PostEmbed {data} />
 
-			{#if showReply || showRepost || showLike || showBookmark || customActions}
+			{#if !compact && (showReply || showRepost || showLike || showBookmark || customActions)}
 				<div
 					class="text-base-500 dark:text-base-400 accent:text-base-900 mt-4 flex justify-between gap-2"
 				>