feat: implement 404 page

astro.config.ts

@@ -6,9 +6,6 @@ export default defineConfig({
 	adapter: vercel({
 		webAnalytics: { enabled: true },
 	}),
-	experimental: {
-		responsiveImages: true,
-	},
 	integrations: [konamiEmojiBlast()],
 	output: "server",
 	redirects: {

package.json

@@ -77,9 +77,20 @@
 		"typescript-eslint": "^8.32.1"
 	},
 	"engines": {
-		"node": "20.11.0"
+		"node": ">=20.11.0"
 	},
 	"publishConfig": {
 		"provenance": true
+	},
+	"pnpm": {
+		"peerDependencyRules": {
+			"allowedVersions": {
+				"@astrojs/markdown-remark": "6",
+				"astro": "5"
+			}
+		},
+		"ignoredBuiltDependencies": [
+			"sharp"
+		]
 	}
 }

src/components/ImagesAndTextTwoColumn.astro

@@ -23,7 +23,7 @@ interface Props {
 	<ContentArea as="section" class="images-and-text-two-column-content">
 		<div class="images-and-text-two-column-decorations">
 			<DecorativeImage class="fish-school-dull" src={fishSchoolDull} />
-			<Image alt="" layout="responsive" src={Astro.props.images.primary} />
+			<Image alt="" src={Astro.props.images.primary} />
 		</div>
 
 		<div class="images-and-text-two-column-text">
@@ -37,11 +37,7 @@ interface Props {
 		</div>
 
 		<div class="images-secondary">
-			{
-				Astro.props.images.secondary.map((image) => (
-					<Image {...image} layout="responsive" />
-				))
-			}
+			{Astro.props.images.secondary.map((image) => <Image {...image} />)}
 		</div>
 	</ContentArea>
 </div>

src/components/explainers/ExplainerImages.astro

@@ -44,11 +44,7 @@ function computeImageSizes(
 <div
 	class:list={["explainer-images", `explainer-images-${Astro.props.direction}`]}
 >
-	<Image
-		class="explainer-image-primary"
-		layout="responsive"
-		{...Astro.props.photos.primary}
-	/>
+	<Image class="explainer-image-primary" {...Astro.props.photos.primary} />
 	{
 		Astro.props.photos.secondary.map((secondary, i) => (
 			<Image

src/pages/404.astro

@@ -0,0 +1,83 @@
+---
+import PageLayout from "~/layouts/PageLayout.astro";
+---
+
+<PageLayout description="Page not found - SquiggleConf" title="404">
+	<div class="error-container">
+		<div class="error-box">
+			<h1 class="error-title">404: NOT_FOUND</h1>
+			<div class="error-code">Code: `NOT_FOUND`</div>
+			<div class="error-message">
+				You've drifted into uncharted waters. Navigate back to the surface?
+			</div>
+		</div>
+
+		<Button as="a" href="/" variant="light">Home Page</Button>
+	</div>
+</PageLayout>
+
+<style>
+	.error-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		min-height: 60vh;
+		padding: 0 2rem 4rem;
+		height: 100vh;
+		background: var(--colorSandBackground);
+	}
+
+	.error-box {
+		background: var(--colorSandBackground);
+		border: 1px solid var(--colorSandLight);
+		border-radius: 8px;
+		padding: 2rem;
+		margin-bottom: 2rem;
+		text-align: left;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		max-width: 500px;
+		width: 100%;
+	}
+
+	.error-title {
+		font-family: var(--fontFamilyHeading);
+		font-size: var(--fontSizeLarge);
+		font-weight: var(--fontWeightBold);
+		color: var(--colorSandForeground);
+		margin-bottom: 0.5rem;
+	}
+
+	.error-code {
+		font-family: var(--fontFamilyBody);
+		font-size: var(--fontSizeSmall);
+		color: var(--colorSandForeground);
+		margin-bottom: 1rem;
+	}
+
+	.error-message {
+		font-family: var(--fontFamilyBody);
+		font-size: var(--fontSizeSmall);
+		color: var(--colorSandForeground);
+		line-height: 1.5;
+	}
+
+	.home-link {
+		background: var(--colorSandBackground);
+		border: 1px solid var(--colorSandForeground);
+		border-radius: 4px;
+		color: var(--colorSandForeground);
+		text-decoration: none;
+		padding: 0.75rem 1.5rem;
+		font-family: var(--fontFamilyBody);
+		font-size: var(--fontSizeSmall);
+		text-align: center;
+		transition: all var(--colorBlue3);
+		display: inline-block;
+	}
+
+	.home-link:hover {
+		background: var(--colorBlue3);
+		color: var(--colorForegroundAccent);
+	}
+</style>