Val Town Code SearchReturn to Val Town

20### 2. HTTP Vals
21
22- Create web APIs and endpoints
23- Handle HTTP requests and responses
24- Example structure:
66- Generate code in TypeScript
67- Add appropriate TypeScript types and interfaces for all data structures
68- Prefer official SDKs or libraries than writing API calls directly
69- Ask the user to supply API or library documentation if you are at all unsure about it
70- **Never bake in secrets into the code** - always use environment variables
71- Include comments explaining complex logic (avoid commenting obvious operations)
190- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`
191- **Storage:** DO NOT use the Deno KV module for storage
192- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
193- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified
194- **View Source:** Add a view source link with `import.meta.url.replace("esm.town", "val.town")` and include `target="_top"` attribute
195- **Error Debugging:** Add `<script src="https://esm.town/v/std/catch"></script>` to HTML to capture client-side errors
196- **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
197- **Environment Variables:** Use `Deno.env.get('keyname')` and minimize their use - prefer APIs without keys
198- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
199- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
230
231### Backend (Hono) Best Practices
232- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)
233- Main entry point should be `backend/index.ts`
234- **Static asset serving:** Use the utility functions to read and serve project files:
251  });
252  ```
253- Create RESTful API routes for CRUD operations
254- Be careful with error handling as Hono tends to swallow errors
255- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:
268- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma
269- Follow the React component pattern from the example project
270- Handle API calls properly with proper error catching
271
272### Database Patterns
299   - For files in the project, use `readFile` helpers
300
3015. **API Design:**
302   - `fetch` handler is the entry point for HTTP vals
303   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`

10import { NotebookView } from "./NotebookView.tsx";
11
12const API_BASE = "/api/memories";
13const MEMORIES_PER_PAGE = 20; // Increased from 7 to 20 memories per page
14
90
91    // Fetch avatar image
92    fetch("/api/images/stevens.jpg")
93      .then((response) => {
94        if (response.ok) return response.blob();
104
105    // Fetch wood background
106    fetch("/api/images/wood.jpg")
107      .then((response) => {
108        if (response.ok) return response.blob();
133    setError(null);
134    try {
135      const response = await fetch(API_BASE);
136      if (!response.ok) {
137        throw new Error(`HTTP error! status: ${response.status}`);
176
177    try {
178      const response = await fetch(API_BASE, {
179        method: "POST",
180        headers: { "Content-Type": "application/json" },
199
200    try {
201      const response = await fetch(`${API_BASE}/${id}`, {
202        method: "DELETE",
203      });
231
232    try {
233      const response = await fetch(`${API_BASE}/${editingMemory.id}`, {
234        method: "PUT",
235        headers: { "Content-Type": "application/json" },
606    <div className="font-pixel text-[#f8f1e0]">
607      <style jsx>{`
608        @import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap");
609
610        @tailwind base;

1# Logo Workshop OpenMoji API Documentation
2
3The Logo Workshop API allows you to generate custom logo SVGs with OpenMoji emoji integration.
4
5## Endpoint
6
7```
8GET /api
9```
10
57## Auto Mode
58
59By default, the API uses an automatic mode that determines whether to use one-line or two-line layout based on the total character count:
60
61- **Total characters ≤ 10**: Uses one-line mode with original case preserved
66## Text Processing
67
68The API processes text differently based on the selected mode:
69
70- **Two-Line Mode**: Text is split between `firstPart` (top line) and `lastPart` (bottom line), and converted to uppercase
71- **One-Line Mode**: If using `firstPart` and `lastPart`, they are combined with a space; if text already has a space, it will be used to split for dual-color effect
72
73If using the `words` parameter, the API will automatically:
741. Use the first word as `firstPart` 
752. Use remaining words as `lastPart`
130
131```
132/api?words=Developer%20Hub&emoji=👨‍💻
133```
134This will automatically use two-line mode with uppercase text because the total character count (11) is greater than the threshold (10).
135
136```
137/api?words=DevHub&emoji=👨‍💻
138```
139This will automatically use one-line mode with original case because the total character count (6) is less than the threshold (10).
142
143```
144/api?firstPart=Developer&lastPart=Hub&emoji=👨‍💻&singleLine=true
145```
146Forces one-line mode regardless of character count.
149
150```
151/api?firstPart=CLOUD&lastPart=COMPUTING&emoji=☁️
152```
153Uses two-line mode with uppercase text.
156
157```
158/api?words=Developer%20Hub&emoji=👨‍💻&format=json
159```
160Returns a JSON response with both the SVG and metadata.
164Key aspects of the logo generation:
165
1661. **Automatic Mode Selection**: The API intelligently chooses between one-line and two-line modes based on text length, with different styling for each.
167
1682. **Text Processing**:
181
182```html
183<img src="https://dcm31--b07cdf9722504af99241dfb0c07fb6a1.web.val.run/api?words=Developer%20Hub&emoji=👨‍💻" alt="Logo" />
184```
185
188```javascript
189async function getLogo(words, emoji) {
190  const url = `https://dcm31--b07cdf9722504af99241dfb0c07fb6a1.web.val.run/api?words=${encodeURIComponent(words)}&emoji=${encodeURIComponent(emoji)}&format=json`;
191  
192  const response = await fetch(url);
200## Limitations
201
202- The API does not support custom sizing of the overall logo (fixed at 301x113.266)
203- Only OpenMoji emoji set is supported
204- Text X position is fixed at 112px and cannot be changed

46
47// Run this file directly if needed
48// @ts-ignore: Deno-specific API
49if (import.meta.url && import.meta.url === Deno.mainModule) {
50  await setupDatabase();

32    } catch (error) {
33      console.warn("⚠️ Could not import calendar events:", error.message);
34      console.warn("To enable calendar integration, set the required Google Calendar API credentials as environment variables.");
35    }
36    
46
47// Run this file directly to initialize the app
48// @ts-ignore: Deno-specific API
49if (import.meta.url === Deno.mainModule) {
50  // Check for command line args
51  // @ts-ignore: Deno-specific API
52  const args = Deno.args;
53  const cleanFirst = args.includes("--clean") || args.includes("-c");

23
24// Run this file directly if needed
25// @ts-ignore: Deno-specific API
26if (import.meta.url === Deno.mainModule) {
27  await cleanDatabase();

28async function generateConciseWeatherSummary(weatherDay) {
29  try {
30    // Get API key from environment
31    const apiKey = Deno.env.get("ANTHROPIC_API_KEY");
32    if (!apiKey) {
33      console.error("Anthropic API key is not configured.");
34      return null;
35    }
36
37    // Initialize Anthropic client
38    const anthropic = new Anthropic({ apiKey });
39
40    const response = await anthropic.messages.create({

30  // This is a no-op if nothing's changed
31  if (!isEndpointSet) {
32    await bot.api.setWebhook(req.url, {
33      secret_token: SECRET_TOKEN,
34    });

5console.info("Launching browser...");
6
7// Use Deno.env to get the API key
8const apiKey = Deno.env.get("BROWSERBASE_API_KEY");
9if (!apiKey) {
10  console.error("BROWSERBASE_API_KEY environment variable is not set");
11  Deno.exit(1);
12}
14try {
15  const browser = await chromium.connectOverCDP(
16    `wss://connect.browserbase.com?apiKey=${apiKey}`,
17  );
18  console.info("Connected!");

244    const { code, name } = await request.json();
245
246    // Create a new val using the Val Town API
247    const response = await fetch("https://api.val.town/v1/vals", {
248      method: "POST",
249      headers: {
250        "Content-Type": "application/json",
251        "Authorization": `Bearer ${Deno.env.get("VAL_TOWN_API_KEY")}`,
252      },
253      body: JSON.stringify({
290
291const css = `
292@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
293
294body {