From ffabbdde14d81845cade772018c730478b6adeba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Juan=20Mo=C3=B1ino?= Date: Fri, 10 Jul 2026 19:28:26 +0200 Subject: [PATCH] fix: improve 404/500 error pages - Remove 'clack' text from 404 gear (looked off) - Add 2 random extension cards to 404 page - Improve gear SVG: more teeth, outer dashed ring, bolt detail - Smoother wobble animation on 404 (5s, wider arc) - More sparks + smoother seizure animation on 500 - Wider max-width on 404 to fit extension cards --- astro/src/pages/404.astro | 162 ++++++++++++++++++++++++++++++++++---- astro/src/pages/500.astro | 55 +++++++------ 2 files changed, 176 insertions(+), 41 deletions(-) diff --git a/astro/src/pages/404.astro b/astro/src/pages/404.astro index 17522fe..dd154a3 100644 --- a/astro/src/pages/404.astro +++ b/astro/src/pages/404.astro @@ -1,15 +1,24 @@ --- import Base from '../layouts/Base.astro'; +import { getCollection } from 'astro:content'; -const gearSvg = ` +const extensions = await getCollection('extensions'); + +// Pick 2 random extensions +const shuffled = [...extensions].sort(() => Math.random() - 0.5); +const randomExts = shuffled.slice(0, 2); + +const gearSvg = ` - - - + + + - - clack + + + + `; --- @@ -34,6 +43,24 @@ const gearSvg = ` try { find('/page') } catch (GearStrippedError) { redirect('/') } + + {randomExts.length > 0 && ( +
+

While you're here, check these out

+
+ {randomExts.map((ext) => ( +
+ {ext.slug} +

{ext.data.name}

+

{ext.data.tagline}

+
+ Learn more → +
+
+ ))} +
+
+ )} @@ -49,26 +76,45 @@ const gearSvg = ` +const gearSvg = ` - - - + + + - - - - - - - + + + + + + + + `; --- @@ -58,35 +59,37 @@ const gearSvg = `