1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/** @jsxImportSource npm:hono@3/jsx */
import { blob } from "https://esm.town/v/std/blob?v=10";
import { Hono } from "npm:hono";
const app = new Hono();
app.get("/", async (c) => {
const comments = await blob.getJSON("comments") || [];
return c.html(
<div>
<h2>Comments</h2>
<div>
{comments.map((comment) => (
<div key={comment.id} style={{ marginBottom: "10px", padding: "10px", border: "1px solid #ccc" }}>
{comment.text}
<form method="POST" action={`/comment/${comment.id}/delete`} style={{ display: "inline" }}>
<input type="submit" value="x" style={{ marginLeft: "10px" }} />
</form>
</div>
))}
</div>
<form method="POST" action="/comment">
<input type="text" name="comment" placeholder="New comment..." /> <input type="submit" />
</form>
</div>,
);
});
app.post("/comment", async (c) => {
const formData = await c.req.parseBody();
const newComment = formData.comment as string;
let comments = await blob.getJSON("comments") || [];
comments.push({ text: newComment, id: Math.floor(Math.random() * 1000).toString() });
await blob.setJSON("comments", comments);
return c.redirect("/");
});
app.post("/comment/:id/delete", async (c) => {
const id = c.req.param("id");
let comments = await blob.getJSON("comments");
await blob.setJSON("comments", comments.filter((comment) => comment.id !== id));
return c.redirect("/");
});
export default app.fetch;