Start fleshing out the route of reading a post.

src/index.tsx

@@ -2,6 +2,7 @@ import { Hono } from 'hono';
 import { jsxRenderer, useRequestContext } from 'hono/jsx-renderer';
 import { Page } from '@blog/templates/Page';
 import { Home } from '@blog/templates/Pages/Home';
+import { FourOhFour } from '@blog/templates/Pages/FourOhFour';
 import { readdir } from 'node:fs/promises';
 
 const app = new Hono();
@@ -28,8 +29,16 @@ app.get('/', async (c) => {
   return c.render(<Home posts={posts}/>);
 });
 
-app.get('/posts/:slug', (c) => {
+app.get('/posts/:slug', async (c) => {
   const postSlug: string = c.req.param("slug");
+  const fileName: string = postSlug + '.md';
+  const files = await readdir(__dirname + "/../posts");
+
+  const postFile = files.find(f => f === fileName);
+  if (!postFile) {
+    c.status(404);
+    return c.render(<FourOhFour />);
+  }
 
   // render post
   // send to Post layout

src/templates/Pages/FourOhFour.tsx

@@ -0,0 +1,10 @@
+import { Page } from '@blog/templates/Page';
+
+export function FourOhFour() {
+  return (
+    <>
+      <h1>404 Error</h1>
+      <div>Unable to find what you're looking for.</div>
+    </>
+  );
+}