From 1cc745459ab66ed28d4826b0b49754ffbbd6123d Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Tue, 17 Feb 2026 14:35:28 +0100
Subject: [PATCH] blog stuff pt1

---
 .../[[actor=actor]]/blog/+page.server.ts      | 102 ++++++++
 src/routes/[[actor=actor]]/blog/+page.svelte  | 105 ++++++++
 .../blog/[rkey]/+page.server.ts               |  86 +++++++
 .../[[actor=actor]]/blog/[rkey]/+page.svelte  | 238 ++++++++++++++++++
 4 files changed, 531 insertions(+)
 create mode 100644 src/routes/[[actor=actor]]/blog/+page.server.ts
 create mode 100644 src/routes/[[actor=actor]]/blog/+page.svelte
 create mode 100644 src/routes/[[actor=actor]]/blog/[rkey]/+page.server.ts
 create mode 100644 src/routes/[[actor=actor]]/blog/[rkey]/+page.svelte

diff --git a/src/routes/[[actor=actor]]/blog/+page.server.ts b/src/routes/[[actor=actor]]/blog/+page.server.ts
new file mode 100644
index 0000000..3f45427
--- /dev/null
+++ b/src/routes/[[actor=actor]]/blog/+page.server.ts
@@ -0,0 +1,102 @@
+import { error } from '@sveltejs/kit';
+import { getBlentoOrBskyProfile, getRecord, listRecords, parseUri } from '$lib/atproto/methods.js';
+import { createCache, type CachedProfile } from '$lib/cache';
+import type { Did } from '@atcute/lexicons';
+import { getActor } from '$lib/actor.js';
+
+export async function load({ params, platform, request }) {
+	const cache = createCache(platform);
+
+	const did = await getActor({ request, paramActor: params.actor, platform });
+
+	if (!did) {
+		throw error(404, 'Blog not found');
+	}
+
+	try {
+		const [records, hostProfile] = await Promise.all([
+			listRecords({
+				did: did as Did,
+				collection: 'site.standard.document',
+				limit: 100
+			}),
+			cache
+				? cache.getProfile(did as Did).catch(() => null)
+				: getBlentoOrBskyProfile({ did: did as Did })
+						.then(
+							(p): CachedProfile => ({
+								did: p.did as string,
+								handle: p.handle as string,
+								displayName: p.displayName as string | undefined,
+								avatar: p.avatar as string | undefined,
+								hasBlento: p.hasBlento,
+								url: p.url
+							})
+						)
+						.catch(() => null)
+		]);
+
+		// Resolve publication URLs for site fields
+		const publications: Record<string, string> = {};
+
+		for (const record of records) {
+			const site = record.value.site as string;
+			if (!site) continue;
+
+			if (site.startsWith('at://')) {
+				if (!publications[site]) {
+					const siteParts = parseUri(site);
+					if (!siteParts) continue;
+
+					try {
+						const publicationRecord = await getRecord({
+							did: siteParts.repo as Did,
+							collection: siteParts.collection!,
+							rkey: siteParts.rkey
+						});
+
+						if (publicationRecord.value?.url) {
+							publications[site] = publicationRecord.value.url as string;
+						}
+					} catch {
+						continue;
+					}
+				}
+
+				if (publications[site]) {
+					record.value.href = publications[site] + record.value.path;
+				}
+			} else {
+				record.value.href = site + record.value.path;
+			}
+		}
+
+		const posts = records
+			.filter((r) => r.value?.href)
+			.map((r) => {
+				const value = r.value as Record<string, unknown>;
+				return {
+					title: value.title as string,
+					description: value.description as string | undefined,
+					publishedAt: value.publishedAt as string | undefined,
+					href: value.href as string,
+					coverImage: value.coverImage as { $type: 'blob'; ref: { $link: string } } | undefined,
+					rkey: r.uri.split('/').pop() as string
+				};
+			})
+			.sort((a, b) => {
+				const dateA = a.publishedAt || '';
+				const dateB = b.publishedAt || '';
+				return dateB.localeCompare(dateA);
+			});
+
+		return {
+			posts,
+			did,
+			hostProfile: hostProfile ?? null
+		};
+	} catch (e) {
+		if (e && typeof e === 'object' && 'status' in e) throw e;
+		throw error(404, 'Blog not found');
+	}
+}
diff --git a/src/routes/[[actor=actor]]/blog/+page.svelte b/src/routes/[[actor=actor]]/blog/+page.svelte
new file mode 100644
index 0000000..02d116a
--- /dev/null
+++ b/src/routes/[[actor=actor]]/blog/+page.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+	import { getCDNImageBlobUrl } from '$lib/atproto';
+	import { Avatar as FoxAvatar } from '@foxui/core';
+
+	let { data } = $props();
+
+	let posts = $derived(data.posts);
+	let did: string = $derived(data.did);
+	let hostProfile = $derived(data.hostProfile);
+
+	let hostName = $derived(hostProfile?.displayName || hostProfile?.handle || did);
+	let hostUrl = $derived(
+		hostProfile?.url ?? `https://bsky.app/profile/${hostProfile?.handle || did}`
+	);
+
+	function formatDate(dateStr: string): string {
+		const date = new Date(dateStr);
+		const options: Intl.DateTimeFormatOptions = {
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric'
+		};
+		return date.toLocaleDateString('en-US', options);
+	}
+
+	function getCoverUrl(
+		coverImage: { $type: 'blob'; ref: { $link: string } } | undefined
+	): string | undefined {
+		if (!coverImage) return undefined;
+		return getCDNImageBlobUrl({ did, blob: coverImage, type: 'jpeg' });
+	}
+</script>
+
+<svelte:head>
+	<title>{hostName} - Blog</title>
+	<meta name="description" content="Blog posts by {hostName}" />
+	<meta property="og:title" content="{hostName} - Blog" />
+	<meta property="og:description" content="Blog posts by {hostName}" />
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:title" content="{hostName} - Blog" />
+	<meta name="twitter:description" content="Blog posts by {hostName}" />
+</svelte:head>
+
+<div class="bg-base-50 dark:bg-base-950 min-h-screen px-6 py-12">
+	<div class="mx-auto max-w-4xl">
+		<!-- Header -->
+		<div class="mb-8">
+			<h1 class="text-base-900 dark:text-base-50 mb-2 text-2xl font-bold sm:text-3xl">Blog</h1>
+			<div class="mt-4 flex items-center gap-2">
+				<span class="text-base-500 dark:text-base-400 text-sm">Written by</span>
+				<a
+					href={hostUrl}
+					target={hostProfile?.hasBlento ? undefined : '_blank'}
+					rel={hostProfile?.hasBlento ? undefined : 'noopener noreferrer'}
+					class="flex items-center gap-1.5 hover:underline"
+				>
+					<FoxAvatar src={hostProfile?.avatar} alt={hostName} class="size-5 shrink-0" />
+					<span class="text-base-900 dark:text-base-100 text-sm font-medium">{hostName}</span>
+				</a>
+			</div>
+		</div>
+
+		{#if posts.length === 0}
+			<p class="text-base-500 dark:text-base-400 py-12 text-center">No blog posts found.</p>
+		{:else}
+			<div class="divide-base-200 dark:divide-base-800 divide-y">
+				{#each posts as post (post.rkey)}
+					{@const coverUrl = getCoverUrl(post.coverImage)}
+					<a
+						href={post.href}
+						target="_blank"
+						rel="noopener noreferrer"
+						class="group flex items-start gap-4 py-6"
+					>
+						<div class="min-w-0 flex-1">
+							{#if post.publishedAt}
+								<p class="text-base-500 dark:text-base-400 mb-1 text-sm">
+									{formatDate(post.publishedAt)}
+								</p>
+							{/if}
+							<h2
+								class="text-base-900 dark:text-base-50 group-hover:text-base-700 dark:group-hover:text-base-200 mb-2 text-lg leading-snug font-semibold"
+							>
+								{post.title}
+							</h2>
+							{#if post.description}
+								<p class="text-base-600 dark:text-base-400 line-clamp-3 text-sm leading-relaxed">
+									{post.description}
+								</p>
+							{/if}
+						</div>
+
+						{#if coverUrl}
+							<img
+								src={coverUrl}
+								alt={post.title}
+								class="aspect-video w-32 shrink-0 rounded-lg object-cover"
+							/>
+						{/if}
+					</a>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/src/routes/[[actor=actor]]/blog/[rkey]/+page.server.ts b/src/routes/[[actor=actor]]/blog/[rkey]/+page.server.ts
new file mode 100644
index 0000000..60686b7
--- /dev/null
+++ b/src/routes/[[actor=actor]]/blog/[rkey]/+page.server.ts
@@ -0,0 +1,86 @@
+import { error } from '@sveltejs/kit';
+import { getBlentoOrBskyProfile, getRecord, parseUri } from '$lib/atproto/methods.js';
+import { createCache, type CachedProfile } from '$lib/cache';
+import type { Did } from '@atcute/lexicons';
+import { getActor } from '$lib/actor';
+
+export async function load({ params, platform, request }) {
+	const { rkey } = params;
+
+	const cache = createCache(platform);
+
+	const did = await getActor({ request, paramActor: params.actor, platform });
+
+	if (!did || !rkey) {
+		throw error(404, 'Post not found');
+	}
+
+	try {
+		const [postRecord, hostProfile] = await Promise.all([
+			getRecord({
+				did: did as Did,
+				collection: 'site.standard.document',
+				rkey
+			}),
+			cache
+				? cache.getProfile(did as Did).catch(() => null)
+				: getBlentoOrBskyProfile({ did: did as Did })
+						.then(
+							(p): CachedProfile => ({
+								did: p.did as string,
+								handle: p.handle as string,
+								displayName: p.displayName as string | undefined,
+								avatar: p.avatar as string | undefined,
+								hasBlento: p.hasBlento,
+								url: p.url
+							})
+						)
+						.catch(() => null)
+		]);
+
+		if (!postRecord?.value) {
+			throw error(404, 'Post not found');
+		}
+
+		const post = postRecord.value as Record<string, unknown>;
+
+		// Resolve external URL
+		let externalUrl: string | null = null;
+		const site = post.site as string | undefined;
+		const path = post.path as string | undefined;
+
+		if (site && path) {
+			if (site.startsWith('at://')) {
+				const siteParts = parseUri(site);
+				if (siteParts) {
+					try {
+						const publicationRecord = await getRecord({
+							did: siteParts.repo as Did,
+							collection: siteParts.collection!,
+							rkey: siteParts.rkey
+						});
+
+						if (publicationRecord.value?.url) {
+							externalUrl = (publicationRecord.value.url as string) + path;
+						}
+					} catch {
+						// Could not resolve publication URL
+					}
+				}
+			} else {
+				externalUrl = site + path;
+			}
+		}
+
+		return {
+			post,
+			did,
+			rkey,
+			hostProfile: hostProfile ?? null,
+			externalUrl
+		};
+	} catch (e) {
+		if (e && typeof e === 'object' && 'status' in e) throw e;
+		throw error(404, 'Post not found');
+	}
+}
diff --git a/src/routes/[[actor=actor]]/blog/[rkey]/+page.svelte b/src/routes/[[actor=actor]]/blog/[rkey]/+page.svelte
new file mode 100644
index 0000000..bfc6ef7
--- /dev/null
+++ b/src/routes/[[actor=actor]]/blog/[rkey]/+page.svelte
@@ -0,0 +1,238 @@
+<script lang="ts">
+	import { getCDNImageBlobUrl } from '$lib/atproto';
+	import { Avatar as FoxAvatar } from '@foxui/core';
+	import { marked } from 'marked';
+	import { sanitize } from '$lib/sanitize';
+
+	let { data } = $props();
+
+	let post = $derived(data.post as Record<string, unknown>);
+	let did: string = $derived(data.did);
+	let hostProfile = $derived(data.hostProfile);
+	let externalUrl = $derived(data.externalUrl as string | null);
+
+	let title = $derived((post.title as string) || '');
+	let description = $derived((post.description as string) || '');
+	let publishedAt = $derived(post.publishedAt as string | undefined);
+
+	let hostName = $derived(hostProfile?.displayName || hostProfile?.handle || did);
+	let hostUrl = $derived(
+		hostProfile?.url ?? `https://bsky.app/profile/${hostProfile?.handle || did}`
+	);
+
+	let actorPrefix = $derived(hostProfile?.handle ? `/${hostProfile.handle}` : `/${did}`);
+
+	let coverUrl = $derived.by(() => {
+		const coverImage = post.coverImage as { $type: 'blob'; ref: { $link: string } } | undefined;
+		if (!coverImage) return undefined;
+		return getCDNImageBlobUrl({ did, blob: coverImage, type: 'jpeg' });
+	});
+
+	let content = $derived(post.content as { $type: string; value: string } | undefined);
+	let isMarkdown = $derived(content?.$type === 'app.blento.markdown');
+
+	let tags = $derived((post.tags as string[]) || []);
+	let bskyPostRef = $derived(post.bskyPostRef as { uri: string; cid: string } | undefined);
+
+	let bskyDiscussUrl = $derived.by(() => {
+		if (!bskyPostRef?.uri) return undefined;
+		const parts = bskyPostRef.uri.split('/');
+		const postDid = parts[2];
+		const postRkey = parts[parts.length - 1];
+		return `https://bsky.app/profile/${postDid}/post/${postRkey}`;
+	});
+
+	function formatDate(dateStr: string): string {
+		const date = new Date(dateStr);
+		return date.toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric'
+		});
+	}
+
+	const renderer = new marked.Renderer();
+	renderer.link = ({ href, title, text }) =>
+		`<a target="_blank" rel="noopener noreferrer" href="${href}" title="${title ?? ''}">${text}</a>`;
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+	<meta name="description" content={description || `Blog post: ${title}`} />
+	<meta property="og:title" content={title} />
+	<meta property="og:description" content={description || `Blog post: ${title}`} />
+	{#if coverUrl}
+		<meta property="og:image" content={coverUrl} />
+	{/if}
+	<meta name="twitter:card" content={coverUrl ? 'summary_large_image' : 'summary'} />
+	<meta name="twitter:title" content={title} />
+	<meta name="twitter:description" content={description || `Blog post: ${title}`} />
+	{#if coverUrl}
+		<meta name="twitter:image" content={coverUrl} />
+	{/if}
+</svelte:head>
+
+<div class="bg-base-50 dark:bg-base-950 min-h-screen px-6 py-12">
+	<div class="mx-auto max-w-3xl">
+		<!-- Cover image -->
+		{#if coverUrl}
+			<img src={coverUrl} alt={title} class="mb-8 aspect-video w-full rounded-2xl object-cover" />
+		{/if}
+
+		<!-- Title & meta -->
+		<header class="mb-8">
+			<h1 class="text-base-900 dark:text-base-50 mb-4 text-3xl leading-tight font-bold sm:text-4xl">
+				{title}
+			</h1>
+
+			<div class="flex flex-wrap items-center gap-4">
+				{#if publishedAt}
+					<span class="text-base-500 dark:text-base-400 text-sm">
+						{formatDate(publishedAt)}
+					</span>
+				{/if}
+				<a
+					href={hostUrl}
+					target={hostProfile?.hasBlento ? undefined : '_blank'}
+					rel={hostProfile?.hasBlento ? undefined : 'noopener noreferrer'}
+					class="flex items-center gap-1.5 hover:underline"
+				>
+					<FoxAvatar src={hostProfile?.avatar} alt={hostName} class="size-5 shrink-0" />
+					<span class="text-base-900 dark:text-base-100 text-sm font-medium">{hostName}</span>
+				</a>
+			</div>
+
+			{#if tags.length > 0}
+				<div class="mt-4 flex flex-wrap gap-2">
+					{#each tags as tag (tag)}
+						<span
+							class="bg-base-100 dark:bg-base-800 text-base-600 dark:text-base-300 rounded-full px-3 py-1 text-xs font-medium"
+						>
+							{tag}
+						</span>
+					{/each}
+				</div>
+			{/if}
+		</header>
+
+		<!-- Content -->
+		{#if isMarkdown && content}
+			<article
+				class="prose dark:prose-invert prose-base prose-neutral prose-a:text-accent-600 dark:prose-a:text-accent-400 prose-img:rounded-xl max-w-none"
+			>
+				{@html sanitize(marked.parse(content.value, { renderer }) as string, {
+					ADD_ATTR: ['target']
+				})}
+			</article>
+		{:else}
+			<div class="py-4">
+				{#if description}
+					<p class="text-base-700 dark:text-base-300 mb-6 text-lg leading-relaxed">
+						{description}
+					</p>
+				{/if}
+
+				{#if externalUrl}
+					<a
+						href={externalUrl}
+						target="_blank"
+						rel="noopener noreferrer"
+						class="bg-base-900 dark:bg-base-50 text-base-50 dark:text-base-900 hover:bg-base-800 dark:hover:bg-base-200 inline-flex items-center gap-2 rounded-lg px-5 py-3 text-sm font-medium transition-colors"
+					>
+						Read on original page
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="2"
+							stroke="currentColor"
+							class="size-4"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
+							/>
+						</svg>
+					</a>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Footer -->
+		<footer
+			class="border-base-200 dark:border-base-800 mt-12 flex flex-wrap items-center gap-4 border-t pt-6"
+		>
+			<a
+				href="{actorPrefix}/blog"
+				class="text-base-500 dark:text-base-400 hover:text-base-700 dark:hover:text-base-200 inline-flex items-center gap-1.5 text-sm transition-colors"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="2"
+					stroke="currentColor"
+					class="size-4"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
+					/>
+				</svg>
+				Back to blog
+			</a>
+
+			{#if bskyDiscussUrl}
+				<a
+					href={bskyDiscussUrl}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-base-500 dark:text-base-400 hover:text-base-700 dark:hover:text-base-200 inline-flex items-center gap-1.5 text-sm transition-colors"
+				>
+					Discuss on Bluesky
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="2"
+						stroke="currentColor"
+						class="size-3.5"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
+						/>
+					</svg>
+				</a>
+			{/if}
+
+			{#if externalUrl && isMarkdown}
+				<a
+					href={externalUrl}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-base-500 dark:text-base-400 hover:text-base-700 dark:hover:text-base-200 inline-flex items-center gap-1.5 text-sm transition-colors"
+				>
+					View on original page
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="2"
+						stroke="currentColor"
+						class="size-3.5"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
+						/>
+					</svg>
+				</a>
+			{/if}
+		</footer>
+	</div>
+</div>
-- 
2.51.2