📓 Remix 3 Guestbook

A demo of @remix-run/fetch-router running on Val Town.

\n\n

Sign the Guestbook

\n \n

\n\n

Recent Messages

\n ${\n messages.length === 0\n ? `

No messages yet — be the first!

`\n : messages.map((m) => messageCard(m)).join(\"\")\n }\n ${\n messages.length > 0\n ? `View all messages →`\n : \"\"\n }\n

\n\n \n `,\n );\n },\n\n messages: {\n async index() {\n await ensureTable();\n const result = await sqlite.execute(\n `SELECT * FROM ${TABLE} ORDER BY created_at DESC`,\n );\n const messages = result.rows as unknown as Message[];\n\n return htmlResponse(\n \"All Messages\",\n routes.messages.index.href(),\n /*html*/ `\n

All Messages

${messages.length} message${\n messages.length !== 1 ? \"s\" : \"\"\n } total

\n ${\n messages.length === 0\n ? `

No messages yet. Sign the guestbook!

`\n : messages.map((m) => messageCard(m)).join(\"\")\n }\n `,\n );\n },\n\n async create({ request }) {\n await ensureTable();\n const formData = await request.formData();\n const name = (formData.get(\"name\") as string || \"\").trim();\n const message = (formData.get(\"message\") as string || \"\").trim();\n\n if (!name || !message) {\n return new Response(\"Name and message are required\", { status: 400 });\n }\n\n const result = await sqlite.execute({\n sql: `INSERT INTO ${TABLE} (name, message) VALUES (?, ?)`,\n args: [name.slice(0, 100), message.slice(0, 500)],\n });\n\n const newId = result.lastInsertRowid;\n const to = new URL(\n routes.messages.show.href({ id: String(newId) }),\n request.url,\n );\n return Response.redirect(to, 303);\n },\n\n async show({ params, request }) {\n await ensureTable();\n const result = await sqlite.execute({\n sql: `SELECT * FROM ${TABLE} WHERE id = ?`,\n args: [params.id],\n });\n\n if (result.rows.length === 0) {\n return htmlResponse(\n \"Not Found\",\n \"\",\n /*html*/ `\n

Message not found

Back to all messages

\n `,\n 404,\n );\n }\n\n const m = result.rows[0] as unknown as Message;\n return htmlResponse(\n `Message from ${m.name}`,\n routes.messages.show.href({ id: String(m.id) }),\n /*html*/ `\n

${escapeHtml(m.name)}

\n ${formatDate(m.created_at)}\n

${escapeHtml(m.message)}

\n \n `,\n );\n },\n },\n\n // Serve frontend static files\n frontend(context) {\n return serveFile(context.url.pathname);\n },\n});\n\n// --- HTML helpers ---\n\nfunction escapeHtml(s: string): string {\n return s\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\");\n}\n\nfunction formatDate(iso: string): string {\n const d = new Date(iso);\n return d.toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n hour: \"numeric\",\n minute: \"2-digit\",\n });\n}\n\nfunction messageCard(m: Message): string {\n return /*html*/ `\n \n ${escapeHtml(m.name)}\n

${escapeHtml(m.message)}

\n ${formatDate(m.created_at)}\n \n `;\n}\n\nfunction nav(currentHref: string): string {\n const links = [\n { href: routes.home.href(), label: \"Home\" },\n { href: routes.messages.index.href(), label: \"Messages\" },\n ];\n return /*html*/ `\n \n `;\n}\n\nfunction htmlResponse(\n title: string,\n currentHref: string,\n body: string,\n status = 200,\n): Response {\n const page = /*html*/ `\n\n\n \n \n ${escapeHtml(title)} | Remix 3 Guestbook\n \n\n\n ${nav(currentHref)}\n

${body}

\n \n\n`;\n\n return new Response(page, {\n status,\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}\n\n// --- Export ---\nexport default (req: Request) => router.fetch(req);","deleted","label",[100],"permalink","https://www.val.town/x/stevekrouse/remix3-guestbook/code/server.ts","extension","actionData","errors"]