From a9a4cf8ef481cea9efff2219d5016bbb10f812f0 Mon Sep 17 00:00:00 2001
From: Mordechai Dror <vorant94@pm.me>
Date: Wed, 10 Apr 2024 20:28:05 +0300
Subject: [PATCH] add generic 404 page

---
 .../blog-ssr/src/posts/handlers/post.handler.tsx |  2 ++
 packages/blog-ssr/src/server.tsx                 | 16 +++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/blog-ssr/src/posts/handlers/post.handler.tsx b/packages/blog-ssr/src/posts/handlers/post.handler.tsx
index bffc7328..b7c4884c 100644
--- a/packages/blog-ssr/src/posts/handlers/post.handler.tsx
+++ b/packages/blog-ssr/src/posts/handlers/post.handler.tsx
@@ -15,6 +15,8 @@ export const postHandler: FastifyPluginAsync = async function (app) {
         post = await queryPost(request.params.slug);
       } catch (e) {
         if (isErrnoException(e)) {
+          // TODO make 404 response handling DRY,
+          //  see https://github.com/fastify/fastify/issues/402#issuecomment-340370348
           return reply
             .code(statusCode.notFound)
             .type('text/html')
diff --git a/packages/blog-ssr/src/server.tsx b/packages/blog-ssr/src/server.tsx
index 528645fa..c7a87904 100644
--- a/packages/blog-ssr/src/server.tsx
+++ b/packages/blog-ssr/src/server.tsx
@@ -1,8 +1,9 @@
 import { envSchema, isCiEnv } from '@/config/index.js';
 import { homeModule } from '@/home/index.js';
+import { NotFound, statusCode } from '@/network/index.js';
 import { postsModule } from '@/posts/index.js';
 import { projectsModule } from '@/projects/projects.module.js';
-import { uiModule } from '@/ui/index.js';
+import { CenteredLayout, render, uiModule } from '@/ui/index.js';
 import fastifyStatic from '@fastify/static';
 import consola from 'consola';
 import fastify from 'fastify';
@@ -32,6 +33,19 @@ await app.register(homeModule);
 await app.register(postsModule);
 await app.register(projectsModule);
 
+app.setNotFoundHandler(async (_, reply) => {
+  return reply
+    .status(statusCode.notFound)
+    .type(`text/html`)
+    .send(
+      render(
+        <CenteredLayout title={`404 Not found`}>
+          <NotFound />
+        </CenteredLayout>,
+      ),
+    );
+});
+
 app.listen({ port: env.PORT }, (err, address) => {
   if (err) {
     consola.error(err);