feat: 404 page

brettkolodny · brettkolodny · commit befd0bfbc887 · 2025-07-01T18:59:15.000Z
diff --git a/src/server/index.tsx b/src/server/index.tsx
@@ -4,7 +4,8 @@ import { Hono } from "hono";
 import { renderToString } from "react-dom/server";
 import { getShareData } from "./blob";
 import { trimTrailingSlash } from "hono/trailing-slash";
-import { BaseHeader, getAssetPath, HmrScript } from "./utils";
+import { BaseHeader, defaultCode, getAssetPath, HmrScript } from "./utils";
+import { notFound } from "./routes/404";
 
 // This must be exported for the dev server to work
 export const app = new Hono();
@@ -24,7 +25,7 @@ app.use(trimTrailingSlash());
 app.get("/", (c) => c.redirect("/parameters"));
 
 // Serves the main web application. This must come after the API route.
-app.get("/parameters/:shareId?/:example?", async (c) => {
+app.get("/parameters/:shareId?/:example?", async (c, next) => {
 	const getExampleCode = async (): Promise<string | null> => {
 		const { shareId, example } = c.req.param();
 
@@ -33,14 +34,17 @@ app.get("/parameters/:shareId?/:example?", async (c) => {
 			return shareData?.code ?? null;
 		}
 
-		if (!example) {
-			return null;
+		if (example) {
+			return examples[example] ?? null;
 		}
 
-		return examples[example] ?? null;
+		return defaultCode;
 	};
 
 	const exampleCode = await getExampleCode();
+	if (!exampleCode) {
+		return notFound(c, next);
+	}
 
 	return c.html(
 		[
@@ -55,13 +59,13 @@ app.get("/parameters/:shareId?/:example?", async (c) => {
 					</head>
 					<body>
 						<div id="root"></div>
-						{exampleCode ? (
 							<script type="module">{`window.CODE = ${JSON.stringify(exampleCode)}`}</script>
-						) : null}
 						<script type="module" src={getAssetPath("/src/client/index.tsx")}></script>
 					</body>
 				</html>,
 			),
 		].join("\n"),
 	);
 });
+
+app.get("*", notFound);
diff --git a/src/server/routes/404.tsx b/src/server/routes/404.tsx
@@ -0,0 +1,48 @@
+import type { Handler } from "hono";
+import { BaseHeader } from "../utils";
+import { renderToString } from "react-dom/server";
+import type { FC } from "react";
+import { ArrowRightIcon } from "lucide-react";
+
+export const notFound: Handler = (c) => {
+	return c.html(
+		["<!doctype html>", renderToString(<NotFound />)].join("\n"),
+		404,
+	);
+};
+
+const NotFound: FC = () => {
+	return (
+		<html lang="en">
+			<head>
+				<title>Not Found</title>
+				<BaseHeader />
+			</head>
+			<body>
+				<main className="flex items-center justify-center w-screen h-dvh">
+					<div className="flex flex-col gap-2 md:gap-4 items-center">
+						<div className="flex flex-col items-center gap-1 md:gap-2">
+							<p className="font-mono text-sky-700">404</p>
+							<h1 className="text-3xl md:text-6xl font-semibold text-content-primary text-center">
+								Page not found
+							</h1>
+						</div>
+						<p className="text text-content-secondary md:text-lg text-center">
+							Sorry, we couldn't find this page
+						</p>
+						<a
+							href="/parameters"
+							className="flex text-center hover:underline gap-1 text-blue-700 md:text-content-primary hover:text-blue-700 transition-colors group underline md:no-underline"
+						>
+							Return home{" "}
+							<ArrowRightIcon
+								className="group-hover:translate-x-1 transform transition-transform"
+								width={16}
+							/>
+						</a>
+					</div>
+				</main>
+			</body>
+		</html>
+	);
+};
diff --git a/src/server/routes/api.ts b/src/server/routes/api.ts
@@ -3,7 +3,6 @@ import { Hono } from "hono";
 import * as v from "valibot";
 import { putShareData } from "@/server/blob";
 
-
 const parameters = new Hono().post(
 	"/",
 	vValidator(
diff --git a/src/server/utils.tsx b/src/server/utils.tsx
@@ -38,3 +38,12 @@ export const BaseHeader = () => {
 		</>
 	);
 };
+
+export const defaultCode = `terraform {
+  required_providers {
+    coder = {
+      source = "coder/coder"
+      version = "2.5.3"
+    }
+  }
+}`;
