✨ (web): Add fanfiction view

server/web/router.ts

@@ -3,13 +3,15 @@ import home from "./views/home.ts";
 import notFound from "./views/not-found.ts";
 import tags from "./views/tags.ts";
 import createFanfiction from "./views/create-fanfiction.ts";
+import fanfiction from "./views/fanfiction.ts";
 
 const WebRouter = express.Router({
   mergeParams: true,
 });
 
 WebRouter.get(home.path, ...home.handlers);
 WebRouter.get(tags.path, ...tags.handlers);
+WebRouter.get(fanfiction.path, ...fanfiction.handlers);
 WebRouter.get(createFanfiction.path, ...createFanfiction.handlers);
 
 WebRouter.get(notFound.path, ...notFound.handlers);

server/web/views/fanfiction.ts

@@ -0,0 +1,35 @@
+import * as endpoint from "@endpoint";
+import { Fanfictions, z } from "@deps";
+import { getFanfictionById } from "@queries";
+
+const fanfiction = endpoint.init({
+  path: "/fanfictions/:id",
+  view: "fanfiction",
+  payload: {
+    params: z.object({
+      id: z.string().uuid(),
+    }),
+  },
+  context: z.object({
+    subtitle: z.string(),
+    fanfiction: z.custom<Fanfictions.Fanfiction.output>(),
+  }),
+});
+
+export default fanfiction.registerHandler(
+  async function mainHandler(this: typeof fanfiction, req, res, next) {
+    const retrieved = await getFanfictionById(
+      res.app.db.fanfictions,
+      req.params.id,
+    );
+
+    if (retrieved === null) {
+      return next();
+    }
+
+    return this.renderOk(res, {
+      fanfiction: retrieved,
+      subtitle: retrieved.title.original.raw,
+    });
+  },
+);

views/fanfiction.handlebars

@@ -0,0 +1,16 @@
+<section>
+  {{#with fanfiction}}
+    {{#with title}}
+      <h1 class="text-center" lang="{{original.language_code}}">
+        {{#if original.rich}}
+          {{original.rich}}
+        {{else}}
+          {{original.raw}}
+        {{/if}}
+        {{#with translations}}
+          <h2 class="text-center" lang="{{0.language_code}}">{{0.raw}}</h2>
+        {{/with}}
+      </h1>
+    {{/with}}
+  {{/with}}
+</section>