added new blog post

src/lib/banner2.svelte

@@ -30,7 +30,7 @@
 {/snippet}
 
 <div class="container">
-    {#if banner}
+    {#if banner && banner !== ""}
         {#if pixelated}
             <img class="banner pixelated-img" src="{banner}" alt="{bannerAlt}">
         {:else}

src/lib/lists/gallery.svelte

@@ -25,7 +25,11 @@
 {#snippet galleryEntry({entry, reverseTextOrder}: {entry: GalleryEntry, reverseTextOrder?: boolean})}
 <!-- {#snippet galleryEntry({key, post, index}: {key: string, post: DevlogPost, index: number})} -->
     <a class="gallery-container" href="{entry.link}">
+        {#if entry.img && entry.img !== ""}
             <img class="gallery-img" src="{entry.img}" alt="{entry.imgAlt}">
+        {:else}
+            <div class="gallery-img-placeholder"></div>
+        {/if}
         <div class="gallery-text-container">
             {#if reverseTextOrder}
                 <p class="gallery-subtitle">{@html entry.subtitle}</p>
@@ -60,7 +64,7 @@
         margin: 6px 0;
     }
 
-    .gallery-img {
+    .gallery-img, .gallery-img-placeholder {
         width: 145px;
         min-width: 145px;
         height: 100%;
@@ -70,6 +74,10 @@
         transition: filter 0.1s ease-out;
     }
 
+    .gallery-img-placeholder {
+        background-color: var(--color-highlight-dark);
+    }
+
     .gallery-text-container {
         display: flex;
         flex-direction: column;
@@ -101,7 +109,7 @@
     .gallery-container:hover .gallery-text-container {
         border-color: var(--color-highlight);
     }
-    .gallery-container:hover .gallery-img {
+    .gallery-container:hover .gallery-img, .gallery-container:hover .gallery-img-placeholder {
         filter: grayscale(0%);
     }
     .gallery-container:hover p {

src/routes/blog/+page.svelte

@@ -7,10 +7,14 @@
     let entries: GalleryEntry[] = posts.map(mapEntries);
 
     function mapEntries(entry: BlogPostLink, index: number): GalleryEntry {
+        let banner = "";
+        if (entry.post.banner && entry.post.banner !== "") {
+            banner = `/blog/${entry.key}/${entry.post.banner}`;
+        }
         return {
             title: `${entry.post.title}`,
             subtitle: `#${posts.length - index} // ${entry.post.date}, ${entry.post.time}`,
-            img: `/blog/${entry.key}/${entry.post.banner}`,
+            img: banner,
             link: `/blog/${entry.key}/`,
             imgAlt: `Preview image for ${entry.post.title}`,
         };

src/routes/blog/2026/0131.md

@@ -0,0 +1,11 @@
+Today I randomly clicked on one of my devlogs after discovering it on a search engine, only to find... an error? The website showed 500 (internal error), the console showed 404 (page not found). This was very strange considering the page opened no problemo on my dev server (using `npm run dev`). Even stranger: navigating to the page manually was no problem, but refreshing the page or hotlinking triggered the error. It didn't make any sense to me, as this didn't affect all pages.
+
+I tested and tested and then noticed – hold on, the first three devlogs work but all older ones error out. This was interesting, as I recently changed the devlog overview page so that it would only show the first three entries and presented a button to view all the others as well – hidden by default. Once I removed the button and showed all entries by default, it worked. Phew.
+
+I suspect SvelteKit has issues rendering pages that aren't directly linked anywhere – though how plausible that is, I'm not sure, as I was able to open a page that I know for sure isn't linked anywhere just by typing in its direct link...
+
+I had this fixed just before realising that the devlog overview page itself errors out on refresh as well! Even more strangely: the blog overview page was also affected. I suspected there was some common cause, and indeed, `journalctl` revealed it: a function I called to map a `Map` to an `Array` failed because the `Map` didn't exist. I used these `Map` objects to store data about individual posts, so their functionality was partially shared between the devlog and the blog.
+
+To be honest, this error still doesn't make any sense to me, but I was able to fix it by creating a custom data type that mimicked a key-value structure. This made remapping a lot simpler as the data was then already in `Array` format.
+
+Lesson learned: if you ever work on something that you need to transfer over from a work-in-progress version to a finished version, make sure that the finished version works as you intend it to! Do not assume that everything will work fine.

src/routes/blog/[year]/[date]/+page.ts

@@ -9,7 +9,7 @@ export async function load({ params }) {
 	const title: string = postValues?.title ?? "";
 	const date: string = postValues?.date ?? "";
 	const time: string = postValues?.time ?? "";
-	const banner: string = (postValues?.banner === "" ? "preview.webp" : postValues?.banner)!;
+	const banner: string = postValues?.banner ?? "";
 	const description: string = postValues?.description ?? "";
 
 	return {

src/routes/blog/posts.ts

@@ -29,6 +29,16 @@ export const posts: BlogPostLink[] = [
 	// 	title: "Portsmouth Postmortem",
 	// 	description: "",
 	// }],
+	{
+		key: "2026/0131",
+		post: {
+			date: "2026-01-31",
+			time: "20:24",
+			banner: "colossus.webp",
+			title: "Lessons Learned",
+			description: "Colossus standing in the National Museum of Computing in Bletchley, UK.",
+		}
+	},
 	{
 		key: "2026/0129",
 		post: {