🗣️ Anonymous Rant Board

\n {messages.map((msg, index) => (\n

\n {msg.content}\n

\n ))}\n

setNewMessage(e.target.value)}\n          placeholder=\"Rant anonymously...\"\n          rows={3}\n        />\n        <button type=\"submit\">Send Rant 🚀</button>\n      </form>\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        className=\"source-link\"\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"Rantboard\";\n\n  // Ensure table exists\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_rants (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      content TEXT NOT NULL,\n      sessionId TEXT NOT NULL,\n      timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Handle message retrieval\n  if (request.method === 'GET' && new URL(request.url).pathname === '/messages') {\n    const result = await sqlite.execute(`\n      SELECT content, sessionId \n      FROM ${KEY}_rants \n      ORDER BY timestamp DESC \n      LIMIT 50\n    `);\n    return new Response(JSON.stringify(result.rows), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  // Handle message posting\n  if (request.method === 'POST' && new URL(request.url).pathname === '/messages') {\n    const { content, sessionId } = await request.json();\n    await sqlite.execute(`\n      INSERT INTO ${KEY}_rants (content, sessionId) \n      VALUES (?, ?)\n    `, [content, sessionId]);\n    return new Response('Message sent', { status: 200 });\n  }\n\n  // Serve HTML\n  return new Response(`\n    <html>\n      <head>\n        <title>Anonymous Rant Board</title>\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { 'Content-Type': 'text/html' }\n  });\n}\n\nconst css = `\nbody {\n  font-family: system-ui, sans-serif;\n  background-color: #f4f4f4;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  justify-content: center;\n}\n\n.rant-container {\n  width: 100%;\n  max-width: 600px;\n  background-color: white;\n  box-shadow: 0 0 10px rgba(0,0,0,0.1);\n  min-height: 100vh;\n}\n\nh1 {\n  text-align: center;\n  color: #333;\n  padding: 20px 0;\n  border-bottom: 1px solid #eee;\n}\n\n.message-list {\n  padding: 20px;\n  max-height: 70vh;\n  overflow-y: auto;\n}\n\n.message {\n  background-color: #f1f1f1;\n  border-radius: 10px;\n  padding: 10px;\n  margin-bottom: 10px;\n  word-wrap: break-word;\n}\n\n.own-message {\n  background-color: #e0f7fa;\n  text-align: right;\n}\n\n.message-form {\n  display: flex;\n  flex-direction: column;\n  padding: 20px;\n}\n\ntextarea {\n  resize: vertical;\n  padding: 10px;\n  margin-bottom: 10px;\n  border: 1px solid #ddd;\n  border-radius: 5px;\n}\n\nbutton {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 5px;\n  cursor: pointer;\n}\n\n.source-link {\n  display: block;\n  text-align: center;\n  color: #888;\n  text-decoration: none;\n  margin-top: 20px;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Nwauto/Rantboard/code/main.tsx","extension","actionData","errors"]
</article></body></html>