From 23e1a609b222f9f2516df26152c9b128549a8b7a Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Wed, 18 Feb 2026 01:32:56 +0100
Subject: [PATCH] blog creation pt1

---
 src/routes/[[actor=actor]]/blog/+page.svelte  |  13 +-
 .../[[actor=actor]]/blog/new/+page.svelte     | 263 ++++++++++++++++++
 .../[[actor=actor]]/events/+page.svelte       |  81 +++---
 .../events/[rkey]/+page.server.ts             |   1 +
 .../events/[rkey]/+page.svelte                |  83 ++++--
 .../events/[rkey]/EventRsvp.svelte            |   2 +-
 6 files changed, 380 insertions(+), 63 deletions(-)
 create mode 100644 src/routes/[[actor=actor]]/blog/new/+page.svelte

diff --git a/src/routes/[[actor=actor]]/blog/+page.svelte b/src/routes/[[actor=actor]]/blog/+page.svelte
index 02d116a..06f5b6b 100644
--- a/src/routes/[[actor=actor]]/blog/+page.svelte
+++ b/src/routes/[[actor=actor]]/blog/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getCDNImageBlobUrl } from '$lib/atproto';
-	import { Avatar as FoxAvatar } from '@foxui/core';
+	import { user } from '$lib/atproto/auth.svelte';
+	import { Avatar as FoxAvatar, Button } from '@foxui/core';
 
 	let { data } = $props();
 
@@ -23,6 +24,9 @@
 		return date.toLocaleDateString('en-US', options);
 	}
 
+	let actorPrefix = $derived(hostProfile?.handle ? `/${hostProfile.handle}` : `/${did}`);
+	let isOwner = $derived(user.isLoggedIn && user.did === did);
+
 	function getCoverUrl(
 		coverImage: { $type: 'blob'; ref: { $link: string } } | undefined
 	): string | undefined {
@@ -45,7 +49,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="flex items-center justify-between gap-4">
+				<h1 class="text-base-900 dark:text-base-50 mb-2 text-2xl font-bold sm:text-3xl">Blog</h1>
+				{#if isOwner}
+					<Button href="{actorPrefix}/blog/new">New post</Button>
+				{/if}
+			</div>
 			<div class="mt-4 flex items-center gap-2">
 				<span class="text-base-500 dark:text-base-400 text-sm">Written by</span>
 				<a
diff --git a/src/routes/[[actor=actor]]/blog/new/+page.svelte b/src/routes/[[actor=actor]]/blog/new/+page.svelte
new file mode 100644
index 0000000..edaab7e
--- /dev/null
+++ b/src/routes/[[actor=actor]]/blog/new/+page.svelte
@@ -0,0 +1,263 @@
+<script lang="ts">
+	import { user } from '$lib/atproto/auth.svelte';
+	import { loginModalState } from '$lib/atproto/UI/LoginModal.svelte';
+	import { uploadBlob, createTID } from '$lib/atproto/methods';
+	import { compressImage } from '$lib/atproto/image-helper';
+	import { Button } from '@foxui/core';
+	import { goto } from '$app/navigation';
+
+	let title = $state('');
+	let description = $state('');
+	let content = $state('');
+	let coverFile: File | null = $state(null);
+	let coverPreview: string | null = $state(null);
+	let submitting = $state(false);
+	let error: string | null = $state(null);
+
+	let fileInput: HTMLInputElement | undefined = $state();
+
+	function onFileChange(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const file = input.files?.[0];
+		if (!file) return;
+		coverFile = file;
+		if (coverPreview) URL.revokeObjectURL(coverPreview);
+		coverPreview = URL.createObjectURL(file);
+	}
+
+	function removeCover() {
+		coverFile = null;
+		if (coverPreview) {
+			URL.revokeObjectURL(coverPreview);
+			coverPreview = null;
+		}
+		if (fileInput) fileInput.value = '';
+	}
+
+	async function handleSubmit() {
+		error = null;
+
+		if (!title.trim()) {
+			error = 'Title is required.';
+			return;
+		}
+		if (!user.client || !user.did) {
+			error = 'You must be logged in.';
+			return;
+		}
+
+		submitting = true;
+
+		try {
+			let coverImage: unknown | undefined;
+
+			if (coverFile) {
+				const compressed = await compressImage(coverFile);
+				const blobRef = await uploadBlob({ blob: compressed.blob });
+				if (blobRef) {
+					coverImage = blobRef;
+				}
+			}
+
+			const rkey = createTID();
+
+			const record: Record<string, unknown> = {
+				$type: 'site.standard.document',
+				title: title.trim(),
+				content: { $type: 'app.blento.markdown', value: content },
+				site: `at://${user.did}/site.standard.publication/blento.self`,
+				path: `/blog/${rkey}`,
+				publishedAt: new Date().toISOString()
+			};
+
+			if (description.trim()) {
+				record.description = description.trim();
+			}
+			if (coverImage) {
+				record.coverImage = coverImage;
+			}
+
+			const response = await user.client.post('com.atproto.repo.createRecord', {
+				input: {
+					collection: 'site.standard.document',
+					repo: user.did,
+					rkey,
+					record
+				}
+			});
+
+			if (response.ok) {
+				const handle =
+					user.profile?.handle && user.profile.handle !== 'handle.invalid'
+						? user.profile.handle
+						: user.did;
+				goto(`/${handle}/blog/${rkey}`);
+			} else {
+				error = 'Failed to create post. Please try again.';
+			}
+		} catch (e) {
+			console.error('Failed to create post:', e);
+			error = 'Failed to create post. Please try again.';
+		} finally {
+			submitting = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Create Blog Post</title>
+</svelte:head>
+
+<div class="bg-base-50 dark:bg-base-950 min-h-screen px-6 py-12">
+	<div class="mx-auto max-w-2xl">
+		<h1 class="text-base-900 dark:text-base-50 mb-8 text-3xl font-bold">Create Blog Post</h1>
+
+		{#if user.isInitializing}
+			<div class="flex items-center gap-3">
+				<div class="bg-base-300 dark:bg-base-700 size-5 animate-pulse rounded-full"></div>
+				<div class="bg-base-300 dark:bg-base-700 h-4 w-48 animate-pulse rounded"></div>
+			</div>
+		{:else if !user.isLoggedIn}
+			<div
+				class="border-base-200 dark:border-base-800 bg-base-100 dark:bg-base-900/50 rounded-2xl border p-8 text-center"
+			>
+				<p class="text-base-600 dark:text-base-400 mb-4">Log in to create a blog post.</p>
+				<Button onclick={() => loginModalState.show()}>Log in</Button>
+			</div>
+		{:else}
+			<form
+				onsubmit={(e) => {
+					e.preventDefault();
+					handleSubmit();
+				}}
+				class="space-y-6"
+			>
+				<!-- Cover image -->
+				<div>
+					<label
+						class="text-base-700 dark:text-base-300 mb-1.5 block text-sm font-medium"
+						for="cover"
+					>
+						Cover image
+					</label>
+					<input
+						bind:this={fileInput}
+						type="file"
+						id="cover"
+						accept="image/*"
+						onchange={onFileChange}
+						class="hidden"
+					/>
+					{#if coverPreview}
+						<div class="relative inline-block">
+							<img
+								src={coverPreview}
+								alt="Cover preview"
+								class="border-base-200 dark:border-base-700 h-40 w-40 rounded-xl border object-cover"
+							/>
+							<button
+								type="button"
+								onclick={removeCover}
+								aria-label="Remove cover image"
+								class="bg-base-900/70 absolute -top-2 -right-2 flex size-6 items-center justify-center rounded-full text-white hover:bg-red-600"
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 20 20"
+									fill="currentColor"
+									class="size-3.5"
+								>
+									<path
+										d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
+									/>
+								</svg>
+							</button>
+						</div>
+					{:else}
+						<button
+							type="button"
+							onclick={() => fileInput?.click()}
+							class="border-base-300 dark:border-base-700 hover:border-base-400 dark:hover:border-base-600 text-base-500 dark:text-base-400 flex h-40 w-40 flex-col items-center justify-center rounded-xl border-2 border-dashed transition-colors"
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
+								class="mb-1 size-6"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z"
+								/>
+							</svg>
+							<span class="text-xs">Upload image</span>
+						</button>
+					{/if}
+				</div>
+
+				<!-- Title -->
+				<div>
+					<label
+						class="text-base-700 dark:text-base-300 mb-1.5 block text-sm font-medium"
+						for="title"
+					>
+						Title <span class="text-red-500">*</span>
+					</label>
+					<input
+						type="text"
+						id="title"
+						bind:value={title}
+						required
+						placeholder="Post title"
+						class="border-base-300 dark:border-base-700 bg-base-50 dark:bg-base-900 text-base-900 dark:text-base-100 placeholder:text-base-400 dark:placeholder:text-base-600 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+					/>
+				</div>
+
+				<!-- Description -->
+				<div>
+					<label
+						class="text-base-700 dark:text-base-300 mb-1.5 block text-sm font-medium"
+						for="description"
+					>
+						Description
+					</label>
+					<textarea
+						id="description"
+						bind:value={description}
+						rows={2}
+						placeholder="A short summary of the post"
+						class="border-base-300 dark:border-base-700 bg-base-50 dark:bg-base-900 text-base-900 dark:text-base-100 placeholder:text-base-400 dark:placeholder:text-base-600 w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+					></textarea>
+				</div>
+
+				<!-- Content -->
+				<div>
+					<label
+						class="text-base-700 dark:text-base-300 mb-1.5 block text-sm font-medium"
+						for="content"
+					>
+						Content
+					</label>
+					<textarea
+						id="content"
+						bind:value={content}
+						rows={12}
+						placeholder="Write your post content in markdown..."
+						class="border-base-300 dark:border-base-700 bg-base-50 dark:bg-base-900 text-base-900 dark:text-base-100 placeholder:text-base-400 dark:placeholder:text-base-600 w-full rounded-lg border px-3 py-2 font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+					></textarea>
+				</div>
+
+				{#if error}
+					<p class="text-sm text-red-600 dark:text-red-400">{error}</p>
+				{/if}
+
+				<Button type="submit" disabled={submitting} class="w-full">
+					{submitting ? 'Publishing...' : 'Publish Post'}
+				</Button>
+			</form>
+		{/if}
+	</div>
+</div>
diff --git a/src/routes/[[actor=actor]]/events/+page.svelte b/src/routes/[[actor=actor]]/events/+page.svelte
index b86e504..a8be4b9 100644
--- a/src/routes/[[actor=actor]]/events/+page.svelte
+++ b/src/routes/[[actor=actor]]/events/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { EventData } from '$lib/cards/social/EventCard';
 	import { getCDNImageBlobUrl } from '$lib/atproto';
-	import { Avatar as FoxAvatar, Badge } from '@foxui/core';
+	import { user } from '$lib/atproto/auth.svelte';
+	import { Avatar as FoxAvatar, Badge, Button } from '@foxui/core';
 	import Avatar from 'svelte-boring-avatars';
 
 	let { data } = $props();
@@ -75,6 +76,7 @@
 	}
 
 	let actorPrefix = $derived(data.hostProfile?.handle ? `/${data.hostProfile.handle}` : `/${did}`);
+	let isOwner = $derived(user.isLoggedIn && user.did === did);
 </script>
 
 <svelte:head>
@@ -90,22 +92,27 @@
 <div class="bg-base-50 dark:bg-base-950 min-h-screen px-6 py-12 sm: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">
-				Upcoming events
-			</h1>
-			<div class="mt-4 flex items-center gap-2">
-				<span class="text-base-500 dark:text-base-400 text-sm">Hosted 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 class="mb-8 flex items-start justify-between">
+			<div>
+				<h1 class="text-base-900 dark:text-base-50 mb-2 text-2xl font-bold sm:text-3xl">
+					Upcoming events
+				</h1>
+				<div class="mt-4 flex items-center gap-2">
+					<span class="text-base-500 dark:text-base-400 text-sm">Hosted 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 isOwner}
+				<Button href="{actorPrefix}/events/new" variant="primary">New event</Button>
+			{/if}
 		</div>
 
 		{#if events.length === 0}
@@ -117,29 +124,31 @@
 					{@const location = getLocationString(event.locations)}
 					{@const rkey = event.rkey}
 					<a
-						href="{actorPrefix}/e/{rkey}"
-						class="border-base-200 dark:border-base-800 hover:border-base-300 dark:hover:border-base-700 group block overflow-hidden rounded-xl border transition-colors"
+						href="{actorPrefix}/events/{rkey}"
+						class="border-base-200 dark:border-base-800 hover:border-base-300 dark:hover:border-base-700 group block overflow-hidden rounded-2xl border transition-colors"
 					>
 						<!-- Thumbnail -->
-						{#if thumbnail}
-							<img
-								src={thumbnail.url}
-								alt={thumbnail.alt}
-								class="aspect-square w-full object-cover"
-							/>
-						{:else}
-							<div
-								class="bg-base-100 dark:bg-base-900 aspect-square w-full [&>svg]:h-full [&>svg]:w-full"
-							>
-								<Avatar
-									size={400}
-									name={rkey}
-									variant="marble"
-									colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
-									square
+						<div class="p-4">
+							{#if thumbnail}
+								<img
+									src={thumbnail.url}
+									alt={thumbnail.alt}
+									class="aspect-square w-full rounded-2xl object-cover"
 								/>
-							</div>
-						{/if}
+							{:else}
+								<div
+									class="bg-base-100 dark:bg-base-900 aspect-square w-full overflow-hidden rounded-2xl [&>svg]:h-full [&>svg]:w-full"
+								>
+									<Avatar
+										size={400}
+										name={rkey}
+										variant="marble"
+										colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
+										square
+									/>
+								</div>
+							{/if}
+						</div>
 
 						<!-- Content -->
 						<div class="p-4">
diff --git a/src/routes/[[actor=actor]]/events/[rkey]/+page.server.ts b/src/routes/[[actor=actor]]/events/[rkey]/+page.server.ts
index 463a15e..c99bb06 100644
--- a/src/routes/[[actor=actor]]/events/[rkey]/+page.server.ts
+++ b/src/routes/[[actor=actor]]/events/[rkey]/+page.server.ts
@@ -44,6 +44,7 @@ export async function load({ params, platform, request }) {
 		}
 
 		const eventData: EventData = eventRecord.value as EventData;
+		console.log(eventData);
 
 		return {
 			eventData,
diff --git a/src/routes/[[actor=actor]]/events/[rkey]/+page.svelte b/src/routes/[[actor=actor]]/events/[rkey]/+page.svelte
index 2f1ba2a..dd6bd6d 100644
--- a/src/routes/[[actor=actor]]/events/[rkey]/+page.svelte
+++ b/src/routes/[[actor=actor]]/events/[rkey]/+page.svelte
@@ -79,7 +79,7 @@
 
 	let location = $derived(getLocationString(eventData.locations));
 
-	let headerImage = $derived.by(() => {
+	let thumbnailImage = $derived.by(() => {
 		if (!eventData.media || eventData.media.length === 0) return null;
 		const media = eventData.media.find((m) => m.role === 'thumbnail');
 		if (!media?.content) return null;
@@ -88,6 +88,26 @@
 		return { url, alt: media.alt || eventData.name };
 	});
 
+	let bannerImage = $derived.by(() => {
+		if (!eventData.media || eventData.media.length === 0) return null;
+		const media = eventData.media.find((m) => m.role === 'header');
+		if (!media?.content) return null;
+		const url = getCDNImageBlobUrl({ did, blob: media.content, type: 'jpeg' });
+		if (!url) return null;
+		return { url, alt: media.alt || eventData.name };
+	});
+
+	// Prefer thumbnail; fall back to header/banner image
+	let displayImage = $derived(thumbnailImage ?? bannerImage);
+	let isBannerOnly = $derived(!thumbnailImage && !!bannerImage);
+
+	let isSameDay = $derived(
+		endDate &&
+			startDate.getFullYear() === endDate.getFullYear() &&
+			startDate.getMonth() === endDate.getMonth() &&
+			startDate.getDate() === endDate.getDate()
+	);
+
 	let smokesignalUrl = $derived(`https://smokesignal.events/${did}/${rkey}`);
 	let eventUri = $derived(`at://${did}/community.lexicon.calendar.event/${rkey}`);
 
@@ -108,32 +128,43 @@
 
 <div class="bg-base-50 dark:bg-base-950 min-h-screen px-6 py-12 sm:py-12">
 	<div class="mx-auto max-w-4xl">
+		<!-- Banner image (full width, only when no thumbnail) -->
+		{#if isBannerOnly && displayImage}
+			<img
+				src={displayImage.url}
+				alt={displayImage.alt}
+				class="border-base-200 dark:border-base-800 mb-8 aspect-[3/1] w-full rounded-2xl border object-cover"
+			/>
+		{/if}
+
 		<!-- Two-column layout: image left, details right -->
 		<div
 			class="grid grid-cols-1 gap-8 md:grid-cols-[14rem_1fr] md:gap-x-10 md:gap-y-6 lg:grid-cols-[16rem_1fr]"
 		>
-			<!-- Image -->
-			<div class="order-1 max-w-sm md:order-0 md:col-start-1 md:max-w-none">
-				{#if headerImage}
-					<img
-						src={headerImage.url}
-						alt={headerImage.alt}
-						class="border-base-200 dark:border-base-800 aspect-square w-full rounded-2xl border object-cover"
-					/>
-				{:else}
-					<div
-						class="border-base-200 dark:border-base-800 aspect-square w-full overflow-hidden rounded-2xl border [&>svg]:h-full [&>svg]:w-full"
-					>
-						<Avatar
-							size={256}
-							name={data.rkey}
-							variant="marble"
-							colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
-							square
+			<!-- Thumbnail image (left column) -->
+			{#if !isBannerOnly}
+				<div class="order-1 max-w-sm md:order-0 md:col-start-1 md:max-w-none">
+					{#if displayImage}
+						<img
+							src={displayImage.url}
+							alt={displayImage.alt}
+							class="border-base-200 dark:border-base-800 aspect-square w-full rounded-2xl border object-cover"
 						/>
-					</div>
-				{/if}
-			</div>
+					{:else}
+						<div
+							class="border-base-200 dark:border-base-800 aspect-square w-full overflow-hidden rounded-2xl border [&>svg]:h-full [&>svg]:w-full"
+						>
+							<Avatar
+								size={256}
+								name={data.rkey}
+								variant="marble"
+								colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
+								square
+							/>
+						</div>
+					{/if}
+				</div>
+			{/if}
 
 			<!-- Right column: event details -->
 			<div class="order-2 min-w-0 md:order-0 md:col-start-2 md:row-span-5 md:row-start-1">
@@ -167,11 +198,15 @@
 					<div>
 						<p class="text-base-900 dark:text-base-50 font-semibold">
 							{formatWeekday(startDate)}, {formatFullDate(startDate)}
+							{#if endDate && !isSameDay}
+								- {formatWeekday(endDate)}, {formatFullDate(endDate)}
+							{/if}
 						</p>
 						<p class="text-base-500 dark:text-base-400 text-sm">
 							{formatTime(startDate)}
-							{#if endDate}
-								- {formatTime(endDate)}{/if}
+							{#if endDate && isSameDay}
+								- {formatTime(endDate)}
+							{/if}
 						</p>
 					</div>
 				</div>
diff --git a/src/routes/[[actor=actor]]/events/[rkey]/EventRsvp.svelte b/src/routes/[[actor=actor]]/events/[rkey]/EventRsvp.svelte
index 2cbffeb..81c867c 100644
--- a/src/routes/[[actor=actor]]/events/[rkey]/EventRsvp.svelte
+++ b/src/routes/[[actor=actor]]/events/[rkey]/EventRsvp.svelte
@@ -120,7 +120,7 @@
 </script>
 
 <div
-	class="border-base-200 dark:border-base-800 bg-base-100 dark:bg-base-900/50 mt-8 mb-2 rounded-2xl border p-4"
+	class="border-base-200 dark:border-base-800 bg-base-100 items-between dark:bg-base-900/50 mt-8 mb-2 flex h-25 flex-col justify-center rounded-2xl border p-4"
 >
 	{#if user.isInitializing || rsvpLoading}
 		<div class="flex items-center gap-3">
-- 
2.51.2