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
/** @jsx jsx **/
// rag with claude ui
// https://simonw-ragwithclaude.web.val.run/?question=what%20is%20shot%20scraper
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";
const app = new Hono();
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>
);
const Page2 = () => (
<html lang="en">
<head>
<title>HTMX GET 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">
<form hx-get="/get-answer" hx-target="#answerResponse" class="space-y-4">
<label for="question" class="block text-sm font-medium text-gray-700">Enter question:</label>
<input type="text" id="question" name="question" 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="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="answerResponse" class="mt-4 p-4 bg-gray-50 rounded-md"></div>
</div>
</body>
</html>
);
app.get("/", (c) => {
return c.html(<Page2 />);
});
app.get("/get-answer", async (c) => {
const question = c.req.query("question");
const response = await fetch(`https://simonw-ragwithclaude.web.val.run/?question=${encodeURIComponent(question)}`);
const answer = await response.text();
return c.html(answer);
});
export default app.fetch;