Val Town Code SearchReturn to Val Town

4async function fetchRandomJoke() {
5  const response = await fetch(
6    "https://official-joke-api.appspot.com/random_joke",
7  );
8  return response.json();

4async function fetchRandomJoke() {
5  const response = await fetch(
6    "https://official-joke-api.appspot.com/random_joke",
7  );
8  return response.json();

230      uploadButton.disabled = true;
231      uploadButton.textContent = "Uploading...";
232      const response = await fetch("/api/upload", {
233        method: "POST",
234        body,
251
252  async function fetchUploads() {
253    const response = await fetch("/api/list");
254    const data = await response.json();
255    return data.rows;
395        deleteButton.textContent = "Deleting...";
396        const response = await fetch(
397          `/api/delete`,
398          {
399            method: "POST",

73  const menuRef = useRef(null);
74  const isPublic = blob.key.startsWith("__public/");
75  const publicUrl = isPublic ? `${window.location.origin}/api/public/${encodeURIComponent(blob.key.slice(9))}` : null;
76
77  useEffect(() => {
237    setLoading(true);
238    try {
239      const response = await fetch(`/api/blobs?prefix=${encodeKey(searchPrefix)}&limit=${limit}`);
240      const data = await response.json();
241      setBlobs(data);
264      setBlobContentLoading(true);
265      try {
266        const response = await fetch(`/api/blob?key=${encodeKey(clickedBlob.key)}`);
267        const content = await response.text();
268        setSelectedBlob({ ...clickedBlob, key: decodeKey(clickedBlob.key) });
278  const handleSave = async () => {
279    try {
280      await fetch(`/api/blob?key=${encodeKey(selectedBlob.key)}`, {
281        method: "PUT",
282        body: editContent,
290  const handleDelete = async (key) => {
291    try {
292      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
293      setBlobs(blobs.filter(b => b.key !== key));
294      if (selectedBlob && selectedBlob.key === key) {
307        const key = `${searchPrefix}${file.name}`;
308        formData.append("key", encodeKey(key));
309        await fetch("/api/blob", { method: "POST", body: formData });
310        const newBlob = { key, size: file.size, lastModified: new Date().toISOString() };
311        setBlobs([newBlob, ...blobs]);
329      try {
330        const fullKey = `${searchPrefix}${key}`;
331        await fetch(`/api/blob?key=${encodeKey(fullKey)}`, {
332          method: "PUT",
333          body: "",
344  const handleDownload = async (key) => {
345    try {
346      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
347      const blob = await response.blob();
348      const url = window.URL.createObjectURL(blob);
363    if (newKey && newKey !== oldKey) {
364      try {
365        const response = await fetch(`/api/blob?key=${encodeKey(oldKey)}`);
366        const content = await response.blob();
367        await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
368          method: "PUT",
369          body: content,
370        });
371        await fetch(`/api/blob?key=${encodeKey(oldKey)}`, { method: "DELETE" });
372        setBlobs(blobs.map(b => b.key === oldKey ? { ...b, key: newKey } : b));
373        if (selectedBlob && selectedBlob.key === oldKey) {
383    const newKey = `__public/${key}`;
384    try {
385      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
386      const content = await response.blob();
387      await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
388        method: "PUT",
389        body: content,
390      });
391      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
392      setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
393      if (selectedBlob && selectedBlob.key === key) {
402    const newKey = key.slice(9); // Remove "__public/" prefix
403    try {
404      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
405      const content = await response.blob();
406      await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
407        method: "PUT",
408        body: content,
409      });
410      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
411      setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
412      if (selectedBlob && selectedBlob.key === key) {
557                        onClick={() =>
558                          copyToClipboard(
559                            `${window.location.origin}/api/public/${encodeURIComponent(selectedBlob.key.slice(9))}`,
560                          )}
561                        className="text-blue-400 hover:text-blue-300 text-sm"
580                        >
581                          <img
582                            src={`/api/blob?key=${encodeKey(selectedBlob.key)}`}
583                            alt="Blob content"
584                            className="max-w-full h-auto"
660
661// Public route without authentication
662app.get("/api/public/:id", async (c) => {
663  const key = `__public/${c.req.param("id")}`;
664  const { blob } = await import("https://esm.town/v/std/blob");
778};
779
780app.get("/api/blobs", checkAuth, async (c) => {
781  const prefix = c.req.query("prefix") || "";
782  const limit = parseInt(c.req.query("limit") || "20", 10);
787});
788
789app.get("/api/blob", checkAuth, async (c) => {
790  const key = c.req.query("key");
791  if (!key) return c.text("Missing key parameter", 400);
795});
796
797app.put("/api/blob", checkAuth, async (c) => {
798  const key = c.req.query("key");
799  if (!key) return c.text("Missing key parameter", 400);
804});
805
806app.delete("/api/blob", checkAuth, async (c) => {
807  const key = c.req.query("key");
808  if (!key) return c.text("Missing key parameter", 400);
812});
813
814app.post("/api/blob", checkAuth, async (c) => {
815  const { file, key } = await c.req.parseBody();
816  if (!file || !key) return c.text("Missing file or key", 400);

12}
13
14// this is a theoretical new api. Under the hood it uses secret unicode characters to help us easily know where to split the text
15// it implicitly ends the previous block
16function start_new_block(options: { type?: "thinking" | "tool_use" | "tool_result" | "text"; meta?: any } = {}) {

1# Framer Fetch: Basic
2
3A basic example of an API endpoint to use with Framer Fetch. 

1import { useState, useEffect } from "https://esm.sh/react@18.2.0?dev";
2import { fetchProjectFiles } from "../utils/api.ts";
3
4interface UseProjectFilesProps {

6  project: any;
7  branchId: string | undefined;
8  anthropicApiKey: string;
9  bearerToken: string;
10  selectedFiles: string[];
16  project,
17  branchId,
18  anthropicApiKey,
19  bearerToken,
20  selectedFiles,
35    status,
36  } = useChat({
37    api: "/api/send-message",
38    body: {
39      project,
40      branchId,
41      anthropicApiKey,
42      selectedFiles,
43      images: images

98- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`
99- **Storage:** DO NOT use the Deno KV module for storage
100- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
101- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified
102- **View Source:** Add a view source link with `import.meta.url.replace("esm.town", "val.town")` and include `target="_top"` attribute
103- **Error Debugging:** Add `<script src="https://esm.town/v/std/catch"></script>` to HTML to capture client-side errors
104- **Error Handling:** Only use try...catch when there's a clear local resolution; avoid catches that merely log or return 500s - let errors bubble up with full context
105- **Environment Variables:** Use `Deno.env.get('keyname')` and minimize their use - prefer APIs without keys
106- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
107- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
188
189### Backend (Hono) Best Practices
190- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)
191- Main entry point should be `backend/index.ts`
192- **Static asset serving:** Use the utility functions to read and serve project files:
209  });
210  ```
211- Create RESTful API routes for CRUD operations
212- Be careful with error handling as Hono tends to swallow errors
213- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:
226- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma
227- Follow the React component pattern from the example project
228- Handle API calls properly with proper error catching
229
230### Database Patterns
257   - For files in the project, use `readFile` helpers
258
2595. **API Design:**
260   - `fetch` handler is the entry point for HTTP vals
261   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`

4
5/**
6 * Plays a bell sound notification using the Web Audio API
7 * @returns A Promise that resolves when the sound has started playing
8 */
13      const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
14      if (!AudioContext) {
15        console.warn("Web Audio API not supported in this browser");
16        resolve();
17        return;
65
66/**
67 * Plays a simple notification sound using the Web Audio API
68 * This is a simpler, shorter bell sound
69 * @returns A Promise that resolves when the sound has started playing
75      const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
76      if (!AudioContext) {
77        console.warn("Web Audio API not supported in this browser");
78        resolve();
79        return;