blog/src/index.tsx

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 { Post } from '@blog/templates/Pages/Post';
import { readdir } from 'node:fs/promises';
import { readPostMarkdown } from '@blog/util/readPostMarkdown';

const app = new Hono();

app.get(
  '*',
  jsxRenderer(
    ({ children }) => {
      return (<Page>{children}</Page>);
    },
    {
      docType: true
    }
  )
);

// read all posts
// create listing of posts

app.get('/', async (c) => {
  const files = await readdir('../posts', { recursive: true });
  const posts = files.filter(f => f === '.' || f === '..');
  return c.render(<Home posts={posts}/>);
});

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 />);
  }

  const post = await readPostMarkdown(__dirname + "/../posts/" + postFile);
  return c.render(<Post post={post} />);
});

export default app;