1// Import necessary modules and initialize the Hono app and SQLite database.
2// This script creates a comment box using HTML, handles form submissions to
3// store comments in an SQLite database, and displays all previous comments.
4
5import { Hono } from "npm:hono";
7import { html } from "https://esm.town/v/stevekrouse/html?v=5";
8
9// Initialize the SQLite database and create a comments table if it doesn't exist.
10const initDB = async () => {
11 await sqlite.execute(`
57});
58
59// Handle comment submissions by storing the comment in the SQLite database and redirecting back to the main page.
60app.post("/comment", async context => {
61 const formData = await context.req.parseBody();
62 const text = formData.text;
63
64 // Insert the comment into the database.
65 await sqlite.execute("INSERT INTO comments (text) VALUES (?)", [text]);
66
10import { html } from "https://esm.town/v/stevekrouse/html?v=5";
11
12// Initialize SQLite database and comments table if it doesn't exist
13const initDB = async () => {
14 await sqlite.execute(`
64 const text = formData.get("text"); // Correctly capturing the form data
65
66 // Insert the comment into the database
67 await sqlite.execute("INSERT INTO comments (text) VALUES (?)", [text]);
68
771. Use `await c.req.parseBody()` and ensure that the form data is correctly captured using `formData.get("text")`. This ensures that the `text` field is properly retrieved and passed to the `sqlite.execute` method.
78
79This should resolve the ARGS_INVALID error and properly insert comments into your SQLite database.
3import { html } from "https://esm.town/v/stevekrouse/html?v=5";
4
5// Initialize SQLite database and comments table if it doesn't exist
6const initDB = async () => {
7 await sqlite.execute(`
61 }
62
63 // Insert the comment into the database
64 await sqlite.execute("INSERT INTO comments (text) VALUES (?)", [text]);
65
1/**
2 * This val creates a simple comment box using an HTML form. When a comment is submitted,
3 * it stores the comment in a SQLite database and then displays all the comments.
4 * We use the built-in database functions from Val Town.
5 */
6
7import { sqlite } from "https://esm.town/v/std/sqlite";
8
9// Initialize the database and create the table if it doesn't exist
10await sqlite.execute(`
11 CREATE TABLE IF NOT EXISTS comments (
35 }
36
37 // Fetch all comments from the database
38 const comments = await sqlite.all("SELECT content, created_at FROM comments ORDER BY created_at DESC");
39
1// This approach uses the Hono framework to set up routes for handling comments.
2// We will store comments in an SQLite database using the `std/sqlite` module for persistence.
3// The main route serves the HTML form and displays the comments.
4// The POST route handles new comment submissions.
21const app = new Hono();
22
23// Helper function to fetch all comments from the database
24async function fetchComments() {
25 const result = await sqlite.execute(`SELECT * FROM comments ORDER BY timestamp DESC`);
25 }
26
27 // Retrieve all comments from the database.
28 const { values: comments } = await sqlite.execute("SELECT content FROM comments");
29
3import { html } from "https://esm.town/v/stevekrouse/html?v=5";
4
5// Initialize SQLite database and comments table if it doesn't exist
6const initDB = async () => {
7 await sqlite.execute(`
57 const text = formData.text;
58
59 // Insert the comment into the database
60 await sqlite.execute("INSERT INTO comments (text) VALUES (?)", [text]);
61
1# VALL-E
2
3LLM code generation for vals! Make apps with a frontend, backend, and database.
4
5It's a bit of work to get this running, but it's worth it.
30- [ ] add triggers to sidebar
31- [ ] add upload from SQL, CSV and JSON
32- [ ] add ability to connect to a non-val town Turso database
33- [x] fix wonky sidebar separator height problem (thanks to @stevekrouse)
34- [x] make result tables scrollable
7It's currently super limited (no pagination, editing data, data-type specific viewers), and is just a couple dozens lines of code over a couple different vals. Forks encouraged! Just comment on the val if you add any features that you want to share.
8
9To use it on your own Val Town SQLite database, [fork it](https://www.val.town/v/stevekrouse/sqlite_admin/fork) to your account.
10
11It uses [basic authentication](https://www.val.town/v/pomdtr/basicAuth) with your [Val Town API Token](https://www.val.town/settings/api) as the password (leave the username field blank).