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;