// This app creates a community bulletin board where users can post messages with titles and view all posts. // Posts are automatically deleted after 24 hours. A basic spam filter is implemented to prevent abuse. // The app uses SQLite for data storage and includes both server-side and client-side components. /** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [posts, setPosts] = useState([]); const [newTitle, setNewTitle] = useState(""); const [newPost, setNewPost] = useState(""); const [error, setError] = useState(""); useEffect(() => { fetchPosts(); const interval = setInterval(fetchPosts, 30000); // Refresh every 30 seconds return () => clearInterval(interval); }, []); const fetchPosts = async () => { const response = await fetch("/posts"); const data = await response.json(); setPosts(data); }; const handleSubmit = async (e) => { e.preventDefault(); setError(""); const response = await fetch("/post", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ title: newTitle, content: newPost }), }); if (response.ok) { setNewTitle(""); setNewPost(""); fetchPosts(); } else { const error = await response.text(); setError(error); } }; return (

📰 Bulletin Board

setNewTitle(e.target.value)} placeholder="Title" required />

setNewPost(e.target.value)}
          placeholder="Write here..."
          required
        />
        <button type="submit">Post</button>
      </form>
      {error && <p className="error">{error}</p>}
      <div className="posts">
        {posts.map((post) => (
          <div key={post.id} className="post">
            <h2>{post.title}</h2>
            <p className="content">{post.content}</p>
            <small>{new Date(post.timestamp).toLocaleString()}</small>
          </div>
        ))}
      </div>
      <footer>
        <a href={import.meta.url.replace("esm.town", "val.town")}>View Source</a>
      </footer>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

async function server(request: Request): Promise<Response> {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const SCHEMA_VERSION = 1;
  const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
  const TABLE_NAME = `${KEY}_posts_${SCHEMA_VERSION}`;

await sqlite.execute(`
    CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      title TEXT NOT NULL,
      content TEXT NOT NULL,
      timestamp DATETIME DEFAULT CURRENT_TIMESTAMP
    )
  `);

// Function to delete old posts
  const deleteOldPosts = async () => {
    await sqlite.execute(`
      DELETE FROM ${TABLE_NAME}
      WHERE timestamp < datetime('now', '-1 day')
    `);
  };

// Delete old posts before processing the request
  await deleteOldPosts();

// Basic spam filter
    if (title.length > 100) {
      return new Response("Title is too long (max 100 characters)", { status: 400 });
    }
    if (content.length > 500) {
      return new Response("Post is too long (max 500 characters)", { status: 400 });
    }

await sqlite.execute(
      `
      INSERT INTO ${TABLE_NAME} (title, content) VALUES (?, ?)
    `,
      [title, content],
    );
    return new Response("Post created successfully");
  } else {
    // Serve HTML
    return new Response(
      `
      <html>
        <head>
          <title>Community Bulletin Board</title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <style>${css}</style>
        </head>
        <body>
          <div id="root"></div>
          <script type="module" src="${import.meta.url}"></script>
        </body>
      </html>
    `,
      {
        headers: { "Content-Type": "text/html" },
      },
    );
  }
}

export default server;</article></body></html>

bulletinBoard

Version 1