Val Town Code SearchReturn to Val Town

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;

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- Consider 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`

17});
18
19// API endpoint for hotel data
20app.get("/api/hotels", (c) => {
21  return c.json([
22    { id: 1, name: "Disneyland Hotel", price: 450 },
27});
28
29// API endpoint for offers
30app.get("/api/offers", (c) => {
31  return c.json([
32    { 

223app.get("/frontend/**/*", c => serveFile(c.req.path, import.meta.url));
224
225// Add your API routes here
226// app.get("/api/data", c => c.json({ hello: "world" }));
227
228// Unwrap and rethrow Hono errors as the original error

4export function App() {
5  const [projectUrl, setProjectUrl] = useState("");
6  const [apiToken, setApiToken] = useState("");
7  const [loading, setLoading] = useState(false);
8  const [message, setMessage] = useState("");
21      }
22
23      if (!apiToken.trim()) {
24        throw new Error("API Token is required");
25      }
26
28        method: "POST",
29        headers: {
30          "Authorization": `Bearer ${apiToken}`,
31          "Content-Type": "application/json",
32        },
63              value={projectUrl}
64              onChange={(e) => setProjectUrl(e.target.value)}
65              placeholder="https://api.val.town/v1/projects/..."
66              className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
67            />
69
70          <div>
71            <label htmlFor="apiToken" className="block text-sm font-medium text-gray-700 mb-1">
72              Val Town API Token (project read + write permissions)
73            </label>
74            <input
75              id="apiToken"
76              type="password"
77              value={apiToken}
78              onChange={(e) => setApiToken(e.target.value)}
79              placeholder="Enter your API token"
80              className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
81            />

11  },
12  {
13    "prompt": "weather dashboard for nyc using open-meteo API for NYC with icons",
14    "title": "Weather App",
15    "code": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>NYC Weather</title>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n    <style>\n        .weather-icon {\n            font-size: 48px;\n            margin-bottom: 16px;\n        }\n    </style>\n</head>\n<body class=\"h-screen bg-blue-100 flex justify-center items-center p-4\">\n    <div class=\"bg-white p-8 rounded-md shadow-md w-full max-w-sm md:p-12 lg:p-16 xl:p-20\">\n        <h1 class=\"text-2xl font-bold mb-4 text-center text-blue-500\">NYC Weather</h1>\n        <div id=\"weather\" class=\"mb-4 p-4 text-center\">\n            <div id=\"temperature\" class=\"text-4xl font-bold mb-4\"></div>\n            <div id=\"condition\" class=\"text-xl font-medium mb-4\"></div>\n            <div id=\"humidity\" class=\"text-lg font-light mb-2\">Humidity: <span id=\"humidity-value\"></span>%</div>\n            <div id=\"wind\" class=\"text-lg font-light mb-2\">Wind: <span id=\"wind-value\"></span> mph</div>\n            <i id=\"weather-icon\" class=\"weather-icon text-blue-500\"></i>\n        </div>\n    </div>\n    <p class=\"fixed bottom-0 left-0 right-0 text-center p-4 text-gray-600 md:p-6 lg:p-8 xl:p-10\">\n        Built on <a class=\"text-blue-600\" href=\"https://cerebrascoder.com\">Cerebras Coder</a>\n    </p>\n\n    <script>\n        // Sample weather data\n        const weatherData = {\n            temperature: 75,\n            condition: 'Sunny',\n            humidity: 60,\n            wind: 10,\n            icon: 'sun'\n        };\n\n        document.getElementById('temperature').innerText = `${weatherData.temperature}°F`;\n        document.getElementById('condition').innerText = weatherData.condition;\n        document.getElementById('humidity-value').innerText = weatherData.humidity;\n        document.getElementById('wind-value').innerText = weatherData.wind;\n\n        // Map weather icon\n        const weatherIcons = {\n            'sun': '&#9728;',\n            'cloud': '&#9728;',\n            'rain': '&#9731;',\n            'snow': '&#9732;'\n        };\n\n        document.getElementById('weather-icon').innerHTML = weatherIcons[weatherData.icon] || '';\n    </script>\n</body>\n</html>",

8
91. Sign up for [Cerebras](https://cloud.cerebras.ai/)
102. Get a Cerebras API Key
113. Save it in your project env variable called `CEREBRAS_API_KEY`

5      <meta name="viewport" content="width=device-width, initial-scale=1.0">
6      <title>CerebrasCoder</title>
7      <link rel="preconnect" href="https://fonts.googleapis.com" />
8      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9      <link
10        href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
11        rel="stylesheet"
12      />
21      <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
22      <meta property="og:type" content="website">
23      <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
24      
25          

211    } catch (error) {
212      Toastify({
213        text: "We may have hit our Cerebras Usage limits. Try again later or fork this and use your own API key.",
214        position: "center",
215        duration: 3000,

16    };
17  } else {
18    const client = new Cerebras({ apiKey: Deno.env.get("CEREBRAS_API_KEY") });
19    const completion = await client.chat.completions.create({
20      messages: [