Steve's Blog

\n {email === \"steve@val.town\" && Create New Post}\n

\n {posts.rows.map((post) => (\n

\n {post.title}\n

{post.content.substring(0, 100)}...

\n {new Date(post.created_at).toLocaleString()}\n

\n ))}\n

\n ,\n );\n});\n\n// View single post\napp.get(\"/post/:id\", async (c) => {\n const id = c.req.param(\"id\");\n const post = (await sqlite.execute(`SELECT * FROM ${KEY}_posts_${SCHEMA} WHERE id = ?`, [id])).rows[0];\n if (!post) {\n return c.html(\n \n

Post not found

\n ,\n 404,\n );\n }\n const comments = await sqlite.execute(\n `SELECT * FROM ${KEY}_comments_${SCHEMA} WHERE post_id = ? ORDER BY created_at DESC`,\n [id],\n );\n const email = c.req.headers.get(\"X-LastLogin-Email\");\n return c.html(\n \n

{post.title}

{post.content}

\n {new Date(post.created_at).toLocaleString()}\n {email === \"steve@val.town\" && (\n

\n Edit\n \n

\n )}\n

Comments

\n {comments.rows.map((comment) => (\n

{comment.content}

\n \n \n {new Date(comment.created_at).toLocaleString()}\n \n {\" | \"}\n {comment.email}\n {email === comment.email && (\n <>\n {\" | \"}\n Edit\n \n )}\n \n

\n ))}\n

\n {email\n ? (\n <>\n

Add a comment

\n \n \n )\n : (\n

\n Please log in to leave a comment.\n

\n )}\n ,\n );\n});\n\n// Handle comment submission\napp.post(\"/post/:id/comment\", async (c) => {\n const email = c.req.headers.get(\"X-LastLogin-Email\");\n if (!email) {\n return new Response(null, { status: 302, headers: { Location: \"/auth/login\" } });\n }\n const postId = c.req.param(\"id\");\n const { content } = await c.req.parseBody();\n await sqlite.execute(`INSERT INTO ${KEY}_comments_${SCHEMA} (post_id, content, email) VALUES (?, ?, ?)`, [\n postId,\n content,\n email,\n ]);\n return new Response(null, { status: 302, headers: { Location: `/post/${postId}` } });\n});\n\n// Admin routes\napp.get(\"/admin/new\", async (c) => {\n const email = c.req.headers.get(\"X-LastLogin-Email\");\n if (email !== \"steve@val.town\") {\n return new Response(null, { status: 302, headers: { Location: \"/\" } });\n }\n return c.html(\n \n

Create New Post

\n \n ,\n );\n});\n\napp.post(\"/admin/new\", async (c) => {\n const email = c.req.headers.get(\"X-LastLogin-Email\");\n if (email !== \"steve@val.town\") {\n return new Response(null, { status: 302, headers: { Location: \"/\" } });\n }\n const { title, content } = await c.req.parseBody();\n await sqlite.execute(`INSERT INTO ${KEY}_posts_${SCHEMA} (title, content) VALUES (?, ?)`, [title, content]);\n return new Response(null, { status: 302, headers: { Location: \"/\" } });\n});\n\napp.get(\"/admin/edit/:id\", async (c) => {\n const email = c.req.headers.get(\"X-LastLogin-Email\");\n if (email !== \"steve@val.town\") {\n return new Response(null, { status: 302, headers: { Location: \"/\" } });\n }\n const id = c.req.param(\"id\");\n const post = (await sqlite.execute(`SELECT * FROM ${KEY}_posts_${SCHEMA} WHERE id = ?`, [id])).rows[0];\n if (!post) {\n return c.html(\n \n

Post not found

\n ,\n 404,\n );\n }\n return c.html(\n \n

Edit Post

\n \n ,\n );\n});\n\napp.post(\"/admin/edit/:id\", async (c) => {\n const email = c.req.headers.get(\"X-LastLogin-Email\");\n if (email !== \"steve@val.town\") {\n return new Response(null, { status: 302, headers: { Location: \"/\" } });\n }\n const id = c.req.param(\"id\");\n const { title, content } = await c.req.parseBody();\n await sqlite.execute(`UPDATE ${KEY}_posts_${SCHEMA} SET title = ?, content = ? WHERE id = ?`, [title, content, id]);\n return new Response(null, { status: 302, headers: { Location: `/post/${id}` } });\n});\n\napp.post(\"/admin/delete/:id\", async (c) => {\n const email = c.req.headers.get(\"X-LastLogin-Email\");\n if (email !== \"steve@val.town\") {\n return new Response(null, { status: 302, headers: { Location: \"/\" } });\n }\n const id = c.req.param(\"id\");\n await sqlite.execute(`DELETE FROM ${KEY}_comments_${SCHEMA} WHERE post_id = ?`, [id]);\n await sqlite.execute(`DELETE FROM ${KEY}_posts_${SCHEMA} WHERE id = ?`, [id]);\n return new Response(null, { status: 302, headers: { Location: \"/\" } });\n});\n\n// Edit comment form\napp.get(\"/comment/edit/:id\", async (c) => {\n const email = c.req.headers.get(\"X-LastLogin-Email\");\n if (!email) {\n return new Response(null, { status: 302, headers: { Location: \"/auth/login\" } });\n }\n const id = c.req.param(\"id\");\n const comment = (await sqlite.execute(`SELECT * FROM ${KEY}_comments_${SCHEMA} WHERE id = ?`, [id])).rows[0];\n if (!comment || comment.email !== email) {\n return c.html(\n \n

Comment not found or you don't have permission to edit it

\n ,\n 404,\n );\n }\n return c.html(\n \n

Edit Comment

\n \n ,\n );\n});\n\n// Handle comment update\napp.post(\"/comment/edit/:id\", async (c) => {\n const email = c.req.headers.get(\"X-LastLogin-Email\");\n if (!email) {\n return new Response(null, { status: 302, headers: { Location: \"/auth/login\" } });\n }\n const id = c.req.param(\"id\");\n const { content } = await c.req.parseBody();\n const comment = (await sqlite.execute(`SELECT * FROM ${KEY}_comments_${SCHEMA} WHERE id = ?`, [id])).rows[0];\n if (!comment || comment.email !== email) {\n return new Response(null, { status: 302, headers: { Location: \"/\" } });\n }\n await sqlite.execute(`UPDATE ${KEY}_comments_${SCHEMA} SET content = ? WHERE id = ?`, [content, id]);\n return new Response(null, { status: 302, headers: { Location: `/post/${comment.post_id}#comment-${id}` } });\n});\n\n// Base layout component\nfunction BaseLayout({ children, email }) {\n return (\n \n \n \n \n Steve's Blog\n \n \n {\n document.querySelectorAll('.js-submit-once').forEach(form => {\n form.addEventListener('submit', (e) => {\n const submitButton = e.target.querySelector('button[type=\"submit\"]');\n if (submitButton) submitButton.disabled = true;\n });\n });\n });\n `,\n }}\n />\n \n \n \n

{children}

\n \n \n \n );\n}\n\nconst css = `\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n line-height: 1.6;\n color: #1d1d1f;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background-color: #ffffff;\n font-size: 16px;\n }\n nav {\n margin-bottom: 30px;\n padding: 15px 0;\n border-bottom: 1px solid #d2d2d7;\n }\n .nav-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .nav-left, .nav-right {\n display: flex;\n align-items: center;\n }\n nav a, nav span {\n color: #1d1d1f;\n text-decoration: none;\n margin-right: 20px;\n font-weight: bold;\n }\n nav a:hover {\n color: #2997ff;\n }\n nav span {\n color: #86868b;\n }\n h1, h2, h3, h4 {\n color: #1d1d1f;\n }\n a {\n color: #06c;\n text-decoration: none;\n }\n a:hover {\n text-decoration: underline;\n }\n .post-list {\n display: grid;\n gap: 20px;\n }\n .post-preview, .post, .comment {\n background-color: #fff;\n border-radius: 12px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: box-shadow 0.3s ease;\n }\n .post-preview h2 {\n margin-top: 0;\n }\n form {\n display: flex;\n flex-direction: column;\n background-color: #f5f5f7;\n padding: 20px;\n border-radius: 12px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n }\n input, textarea {\n margin-bottom: 10px;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 16px;\n }\n textarea {\n height: 150px;\n }\n .button, button[type=\"submit\"] {\n display: inline-block;\n background-color: #0071e3;\n color: white;\n padding: 12px 20px;\n border: none;\n border-radius: 22px;\n cursor: pointer;\n text-decoration: none;\n font-size: 16px;\n transition: background-color 0.3s ease;\n }\n .button:hover, button[type=\"submit\"]:hover {\n background-color: #0077ed;\n }\n .button.delete {\n background-color: #ff3b30;\n }\n .button.delete:hover {\n background-color: #ff453a;\n }\n .post-actions {\n margin-top: 20px;\n }\n .post-actions .button, .post-actions form {\n display: inline-block;\n margin-right: 10px;\n }\n .comments {\n margin-top: 30px;\n }\n .comment {\n margin-bottom: 15px;\n transition: transform 0.2s ease;\n }\n .comment small {\n display: block;\n margin-top: 5px;\n color: #86868b;\n }\n footer {\n margin-top: 50px;\n text-align: center;\n font-size: 0.8em;\n color: #86868b;\n }\n`;\n\nexport default lastlogin(app.fetch);","deleted","label",[98],"permalink","https://www.val.town/x/stevekrouse/blog/code/main.tsx","extension","actionData","errors"]