diff --git a/src/lib/banner2.svelte b/src/lib/banner2.svelte index e32888f..9d5a97e 100644 --- a/src/lib/banner2.svelte +++ b/src/lib/banner2.svelte @@ -30,7 +30,7 @@ {/snippet}
- {#if banner} + {#if banner && banner !== ""} {#if pixelated} {:else} diff --git a/src/lib/lists/gallery.svelte b/src/lib/lists/gallery.svelte index efe8958..bd45aee 100644 --- a/src/lib/lists/gallery.svelte +++ b/src/lib/lists/gallery.svelte @@ -25,7 +25,11 @@ {#snippet galleryEntry({entry, reverseTextOrder}: {entry: GalleryEntry, reverseTextOrder?: boolean})} - {entry.imgAlt} + {#if entry.img && entry.img !== ""} + {entry.imgAlt} + {:else} +
+ {/if}
{#if reverseTextOrder}

{@html entry.subtitle}

@@ -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 { diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte index 888b77d..325df41 100644 --- a/src/routes/blog/+page.svelte +++ b/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}`, }; diff --git a/src/routes/blog/2026/0131.md b/src/routes/blog/2026/0131.md new file mode 100644 index 0000000..86dd0ba --- /dev/null +++ b/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. \ No newline at end of file diff --git a/src/routes/blog/[year]/[date]/+page.ts b/src/routes/blog/[year]/[date]/+page.ts index 2b9ddba..6363e1c 100644 --- a/src/routes/blog/[year]/[date]/+page.ts +++ b/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 { diff --git a/src/routes/blog/posts.ts b/src/routes/blog/posts.ts index 031ab61..4e97b9b 100644 --- a/src/routes/blog/posts.ts +++ b/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: { diff --git a/static/blog/2026/0131/colossus.webp b/static/blog/2026/0131/colossus.webp new file mode 100644 index 0000000..99157be Binary files /dev/null and b/static/blog/2026/0131/colossus.webp differ