From d4b6e756920fca10c329ac246be111baae8c55f1 Mon Sep 17 00:00:00 2001
From: Thilo Maier <git@maier.asia>
Date: Mon, 8 Dec 2025 21:46:22 +0100
Subject: [PATCH 1/3] Use a Grid to render items with `LinkPreview` in `/posts`
 and `/notes` Fixes #1133

---
 src/routes/notes/+page@.svelte | 27 ++++++++++++++++++---------
 src/routes/posts/+page@.svelte | 27 ++++++++++++++++++---------
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/routes/notes/+page@.svelte b/src/routes/notes/+page@.svelte
index ff4ed9ad..e480cd8c 100644
--- a/src/routes/notes/+page@.svelte
+++ b/src/routes/notes/+page@.svelte
@@ -1,16 +1,25 @@
 <script lang="ts">
-	import { Ul } from '@maiertech/sveltekit-helpers';
+	import { H1, LinkPreview, type LinkMeta } from '@maiertech/sveltekit-helpers';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
+
+	const links = $derived.by(() =>
+		data.notes.map((note) => ({
+			href: note.path,
+			text: note.title,
+			description: note.description,
+			ogImageUrl: note.ogImageUrl
+		}))
+	);
 </script>
 
-<h1 class="mb-[clamp(1rem,2vw,1.5rem)] text-4xl font-bold">{data.seo.title}</h1>
+<H1>{data.seo.title}</H1>
 
-<Ul>
-	{#each data.notes as note (note.path)}
-		<li>
-			<a href={note.path}>{note.title}</a>
-		</li>
-	{/each}
-</Ul>
+<div class="@container">
+	<div class="grid grid-cols-1 gap-4 @lg:grid-cols-2 @4xl:grid-cols-3">
+		{#each links as link (link.href)}
+			<LinkPreview value={link} />
+		{/each}
+	</div>
+</div>
diff --git a/src/routes/posts/+page@.svelte b/src/routes/posts/+page@.svelte
index 187b418a..975e6191 100644
--- a/src/routes/posts/+page@.svelte
+++ b/src/routes/posts/+page@.svelte
@@ -1,16 +1,25 @@
 <script lang="ts">
-	import { Ul } from '@maiertech/sveltekit-helpers';
+	import { H1, LinkPreview, type LinkMeta } from '@maiertech/sveltekit-helpers';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
+
+	const links = $derived.by(() =>
+		data.posts.map((post) => ({
+			href: post.path,
+			text: post.title,
+			description: post.description,
+			ogImageUrl: post.ogImageUrl
+		}))
+	);
 </script>
 
-<h1 class="mb-[clamp(1rem,2vw,1.5rem)] text-4xl font-bold">{data.seo.title}</h1>
+<H1>{data.seo.title}</H1>
 
-<Ul>
-	{#each data.posts as post (post.path)}
-		<li>
-			<a href={post.path}>{post.title}</a>
-		</li>
-	{/each}
-</Ul>
+<div class="@container">
+	<div class="grid grid-cols-1 gap-5 @lg:grid-cols-2 @4xl:grid-cols-3">
+		{#each links as link (link.href)}
+			<LinkPreview value={link} />
+		{/each}
+	</div>
+</div>

From 3f7a5475c26ccb5b9f505b366bc84713ed9e5c56 Mon Sep 17 00:00:00 2001
From: Thilo Maier <git@maier.asia>
Date: Mon, 8 Dec 2025 21:49:25 +0100
Subject: [PATCH 2/3] Fix lint errors

---
 src/routes/notes/+page@.svelte | 4 ++--
 src/routes/posts/+page@.svelte | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/notes/+page@.svelte b/src/routes/notes/+page@.svelte
index e480cd8c..a2c9631f 100644
--- a/src/routes/notes/+page@.svelte
+++ b/src/routes/notes/+page@.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { H1, LinkPreview, type LinkMeta } from '@maiertech/sveltekit-helpers';
+	import { H1, LinkPreview } from '@maiertech/sveltekit-helpers';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
@@ -17,7 +17,7 @@
 <H1>{data.seo.title}</H1>
 
 <div class="@container">
-	<div class="grid grid-cols-1 gap-4 @lg:grid-cols-2 @4xl:grid-cols-3">
+	<div class="grid grid-cols-1 gap-5 @lg:grid-cols-2 @4xl:grid-cols-3">
 		{#each links as link (link.href)}
 			<LinkPreview value={link} />
 		{/each}
diff --git a/src/routes/posts/+page@.svelte b/src/routes/posts/+page@.svelte
index 975e6191..cfdcc348 100644
--- a/src/routes/posts/+page@.svelte
+++ b/src/routes/posts/+page@.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { H1, LinkPreview, type LinkMeta } from '@maiertech/sveltekit-helpers';
+	import { H1, LinkPreview } from '@maiertech/sveltekit-helpers';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();

From 95ba131e441e89c6b5fcb3ff42ecbe6f00bd06da Mon Sep 17 00:00:00 2001
From: Thilo Maier <git@maier.asia>
Date: Sun, 11 Jan 2026 15:58:03 +0100
Subject: [PATCH 3/3] Do not render OG images

---
 src/collections/posts/lastmod.json | 3 ++-
 src/routes/notes/+page@.svelte     | 7 +++----
 src/routes/posts/+page@.svelte     | 7 +++----
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/collections/posts/lastmod.json b/src/collections/posts/lastmod.json
index d1dfdf4a..510bff78 100644
--- a/src/collections/posts/lastmod.json
+++ b/src/collections/posts/lastmod.json
@@ -22,5 +22,6 @@
 	"src/routes/posts/(2025)/dropping-requests-in-sveltekit/+page.md": "2025-11-05T14:06:22.000Z",
 	"src/routes/posts/(2025)/environment-variables-in-sveltekit/+page.md": "2025-11-05T14:06:22.000Z",
 	"src/routes/posts/(2025)/it-aint-easy-to-move-a-side-project-off-big-tech/+page.md": "2025-11-07T20:24:14.000Z",
-	"src/routes/posts/(2025)/managing-environment-variables-with-vercel/+page.md": "2025-11-12T20:58:01.000Z"
+	"src/routes/posts/(2025)/managing-environment-variables-with-vercel/+page.md": "2025-11-12T20:58:01.000Z",
+	"src/routes/posts/(2026)/the-privacy-friendly-video-doorbell-that-failed-in-cold-weather/+page.md": "2026-01-11T14:13:07.000Z"
 }
diff --git a/src/routes/notes/+page@.svelte b/src/routes/notes/+page@.svelte
index a2c9631f..cff14c34 100644
--- a/src/routes/notes/+page@.svelte
+++ b/src/routes/notes/+page@.svelte
@@ -7,14 +7,13 @@
 	const links = $derived.by(() =>
 		data.notes.map((note) => ({
 			href: note.path,
-			text: note.title,
-			description: note.description,
-			ogImageUrl: note.ogImageUrl
+			title: note.title,
+			description: note.description
 		}))
 	);
 </script>
 
-<H1>{data.seo.title}</H1>
+<H1 class="mb-8">{data.seo.title}</H1>
 
 <div class="@container">
 	<div class="grid grid-cols-1 gap-5 @lg:grid-cols-2 @4xl:grid-cols-3">
diff --git a/src/routes/posts/+page@.svelte b/src/routes/posts/+page@.svelte
index cfdcc348..87f64c63 100644
--- a/src/routes/posts/+page@.svelte
+++ b/src/routes/posts/+page@.svelte
@@ -7,14 +7,13 @@
 	const links = $derived.by(() =>
 		data.posts.map((post) => ({
 			href: post.path,
-			text: post.title,
-			description: post.description,
-			ogImageUrl: post.ogImageUrl
+			title: post.title,
+			description: post.description
 		}))
 	);
 </script>
 
-<H1>{data.seo.title}</H1>
+<H1 class="mb-8">{data.seo.title}</H1>
 
 <div class="@container">
 	<div class="grid grid-cols-1 gap-5 @lg:grid-cols-2 @4xl:grid-cols-3">