From 95d4d1ca1cee64f115d4f8a9d883d27d85a017f5 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Wed, 19 Aug 2026 12:45:20 +0100
Subject: [PATCH] web/components: add announcements to timeline

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../timeline/Announcements.stories.svelte     | 30 ++++++++++++++++++
 .../components/timeline/Announcements.svelte  | 31 +++++++++++++++++++
 web/src/routes/timeline/+page.svelte          |  7 ++++-
 3 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 web/src/lib/components/timeline/Announcements.stories.svelte
 create mode 100644 web/src/lib/components/timeline/Announcements.svelte

diff --git a/web/src/lib/components/timeline/Announcements.stories.svelte b/web/src/lib/components/timeline/Announcements.stories.svelte
new file mode 100644
index 000000000..6710c2041
--- /dev/null
+++ b/web/src/lib/components/timeline/Announcements.stories.svelte
@@ -0,0 +1,30 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Announcements from "./Announcements.svelte";
+	import type { BlogPost } from "./types";
+
+	const posts: BlogPost[] = [
+		{
+			slug: "spindle-microvm",
+			title: "Spindle learns to boot microVMs",
+			subtitle: "Containers, Postgres, and non-NixOS images on CI.",
+			date: "2025-05-28T00:00:00Z"
+		},
+		{
+			slug: "vouching",
+			title: "Building a web of trust",
+			date: "2025-04-11T00:00:00Z"
+		}
+	];
+
+	const { Story } = defineMeta({
+		title: "Timeline/Announcements",
+		component: Announcements,
+		tags: ["autodocs"],
+		args: { posts: [] }
+	});
+</script>
+
+<Story name="Default" />
+
+<Story name="WithBlogPosts" args={{ posts }} />
diff --git a/web/src/lib/components/timeline/Announcements.svelte b/web/src/lib/components/timeline/Announcements.svelte
new file mode 100644
index 000000000..700d42576
--- /dev/null
+++ b/web/src/lib/components/timeline/Announcements.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import Megaphone from "$icon/megaphone";
+	import { formatDate } from "$lib/format";
+	import PreviewCard from "./PreviewCard.svelte";
+	import type { BlogPost } from "./types";
+
+	let { posts = [] }: { posts?: BlogPost[] } = $props();
+</script>
+
+<PreviewCard title="Announcements" icon={Megaphone}>
+	<div
+		class="flex min-h-32 flex-col divide-y divide-border-default rounded-b bg-background-default"
+	>
+		{#if posts.length > 0}
+			<div class="flex flex-col">
+				{#each posts as post (post.slug)}
+					<a
+						href="https://blog.tangled.org/{post.slug}"
+						class="flex flex-col gap-0.5 overflow-hidden p-4 typography-paragraph-small no-underline hover:bg-background-subtle hover:no-underline"
+					>
+						<span class="truncate text-foreground-subtle">{formatDate(post.date)}</span>
+						<span class="truncate text-foreground-default">{post.title}</span>
+						{#if post.subtitle}
+							<span class="line-clamp-1 text-foreground-subtle">{post.subtitle}</span>
+						{/if}
+					</a>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</PreviewCard>
diff --git a/web/src/routes/timeline/+page.svelte b/web/src/routes/timeline/+page.svelte
index b6c5dc369..8e58d7d6d 100644
--- a/web/src/routes/timeline/+page.svelte
+++ b/web/src/routes/timeline/+page.svelte
@@ -3,6 +3,7 @@
 	import GalleryVertical from "$icon/gallery-vertical";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
+	import Announcements from "$lib/components/timeline/Announcements.svelte";
 	import NotificationsPreview from "$lib/components/timeline/NotificationsPreview.svelte";
 	import RecentsPreview from "$lib/components/timeline/RecentsPreview.svelte";
 	import Timeline from "$lib/components/timeline/Timeline.svelte";
@@ -57,10 +58,14 @@
 		</div>
 	</div>
 
-	<!-- right rail: leads on mobile, scrolls independently of the feed on desktop -->
+	<!-- right rail: leads on mobile, where only trending shows -->
 	<div
 		class="order-1 flex flex-col gap-4 px-2 pt-4 md:sticky md:top-0 md:order-0 md:col-start-3 md:row-start-1 md:ml-auto md:h-screen md:w-full md:max-w-100 md:overflow-y-auto md:p-4"
 	>
 		<TrendingRepos repos={data.trending ?? []} />
+
+		<div class="hidden md:block">
+			<Announcements />
+		</div>
 	</div>
 </div>
-- 
2.51.2