Public
HTTP (deprecated)
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @jsx jsx **/
import { renderToString } from "npm:react-dom/server";
import { jsx } from "https://deno.land/x/hono@v3.11.7/middleware.ts";
import { Hono } from "https://deno.land/x/hono@v3.11.7/mod.ts";
import { ModelProvider, modelProvider } from "https://esm.town/v/yawnxyz/ai";
const app = new Hono();
const assets = {
emailForm: `
<form id="emailForm" class="space-y-4">
<label for="email" class="block text-sm font-medium text-gray-700">Email:</label>
<input type="email" id="email" name="email" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<button type="submit" class="mt-3 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo
</form>
`,
// Add more HTML assets here if needed
};
const Page = () => (
<html lang="en">
<head>
<title>Simple HTMX Example</title>
<script src="https://unpkg.com/htmx.org@1.9.9"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4">
<div class="space-y-6 max-w-lg w-full bg-white p-6 rounded-lg shadow-md">
<button hx-post="/click" hx-target="#clickResponse" class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus
<button hx-get="/get-email-form" hx-target="#formResponse" class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-n
<form hx-post="/generate-html" hx-target="#generatedResponse" class="space-y-4">
<label for="prompt" class="block text-sm font-medium text-gray-700">Enter prompt:</label>
<textarea id="prompt" name="prompt" rows="4" cols="50" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">a simple name form</textarea>
<button type="submit" class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offse
</form>
<div id="clickResponse" class="mt-4 p-4 bg-gray-50 rounded-md"></div>
<div id="formResponse" class="mt-4 p-4 bg-gray-50 rounded-md"></div>
<div id="generatedResponse" class="mt-4 p-4 bg-gray-50 rounded-md"></div>
</div>
</body>
</html>
);
app.get("/", (c) => {
return c.html(<Page />);
});
app.get("/get", (c) => {
return c.text(showClicked());
});
app.get("/get-email-form", (c) => {
return c.html(assets.emailForm);
});
app.post("/post", async (c) => {
try {
const body = await c.req.json();
// Handle the received JSON data
console.log('Received JSON data:', body);
// Perform actions based on the received data
// For demonstration, let's just return the received data back as a response
return c.json({ received: body });
} catch (error) {
console.error('some error:', error)
return c.json({ error: 'Invalid JSON data' }, 400);
}
});
app.post("/form", async (c) => {
try {
const body = await c.req.parseBody();
// Handle the received form data
console.log('Received form data:', body);
// Perform actions based on the received data
// For demonstration, let's just return the received data back as a response
return c.json(body);
} catch (error) {
return c.json({ error: 'Invalid form data' }, 400);
}
});
app.post("/generate-html", async (c) => {
const body = await c.req.parseBody();
// const prompt = "; use tailwind to make pretty: " + JSON.stringify(body) || 'Generate a simple HTML paragraph with some text.';
const prompt = [
"generate simple tailwind-friendly html from prompt",
"only generate the html, don't describe yourself, don't describe directions, don't wrap in markdown ````",
"only return html do not wrap in markdown or wrap in backticks:",
"ONLY IF THE USER WANTS A FORM: create a tailwinds-based form that sends data to /form endpoint; you will receive JSON back, please display it back to the user as a string; use hx-post and hx-target to not redirect, and show the message as a thanks)"
// "a list of dad jokes in html",
"use tailwind to make pretty",
JSON.stringify(body),
].join(',\n ')