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;

37
38// Auth routes (no JWT required)
39app.route("/api/auth", authRoutes);
40
41// JWT middleware for protected routes
42app.use("/api/*", async (c, next) => {
43  // Skip JWT check for auth routes and OPTIONS requests
44  if (c.req.path.startsWith("/api/auth") || c.req.method === "OPTIONS") {
45    return next();
46  }
53});
54
55// API routes
56app.route("/api/users", userRoutes);
57app.route("/api/aircraft", aircraftRoutes);
58app.route("/api/maintenance", maintenanceRoutes);
59app.route("/api/flights", flightRoutes);
60app.route("/api/billing", billingRoutes);
61app.route("/api/weather", weatherRoutes);
62
63// Serve frontend files
73    // Get initial data for bootstrapping the app
74    const initialData = {
75      apiUrl: "/api",
76      projectInfo: {
77        name: "Glider Tow Operation Management",

30├── backend/
31│   ├── database/       # SQLite database setup and queries
32│   ├── routes/         # API endpoints
33│   └── index.ts        # Main entry point
34├── frontend/

9- Uses OpenAI to analyze the page and answer questions about it
10- Provides a simple, user-friendly web interface
11- Also supports JSON API for programmatic usage
12
13## Usage
20- Click "Analyze Webpage" to get your answer
21
22### API Usage
23
24You can also use this Val programmatically by sending a POST request with JSON:
34
35```bash
36curl -X POST https://api.val.town/v1/run/yourusername/webpage-analyzer \
37  -H "Content-Type: application/json" \
38  -d '{"url": "https://example.com", "question": "What is the main heading on this page?"}'
42
43```javascript
44const response = await fetch('https://api.val.town/v1/run/yourusername/webpage-analyzer', {
45  method: 'POST',
46  headers: {
57```
58
59## Response Format (API)
60
61The API returns a JSON response with the following structure:
62
63```json
78## Requirements
79
80This Val requires an OpenAI API key to be set as an environment variable in your Val Town account.

164  if (req.method === "POST") {
165    try {
166      // Check content type to determine if it's a form submission or JSON API request
167      const contentType = req.headers.get('content-type') || '';
168      
172      // Parse input based on content type
173      if (contentType.includes('application/json')) {
174        // Handle JSON API request
175        const body = await req.json();
176        url = body.url;
284      // Return response based on content type
285      if (contentType.includes('application/json')) {
286        // Return JSON for API requests
287        return new Response(JSON.stringify(result), {
288          headers: {

71
72/**
73 * Generates fun facts for the next 7 days using OpenAI API
74 * @param previousFacts Previous fun facts to avoid duplication
75 * @returns Array of generated fun facts
77async function generateFunFacts(previousFacts) {
78  try {
79    // Get API key from environment
80    const apiKey = Deno.env.get("OPENAI_API_KEY");
81    if (!apiKey) {
82      console.error("OpenAI API key is not configured.");
83      return null;
84    }
85
86    // Initialize OpenAI client
87    const openai = new OpenAI({ apiKey });
88
89    // Format previous facts for the prompt
139    console.log({ message });
140
141    // Call OpenAI API
142    const response = await openai.chat.completions.create({
143      model: "gpt-4-turbo-preview", // You can adjust the model as needed

1import ok from "https://npllm.val.run/api/npm-package/left-pad-robust";
2
3console.log(ok);

5## Structure
6
7- `index.ts` - Main entry point for the HTTP API
8- `cron.ts` - Scheduled job to check for floods and send alerts
9- `database/` - Database schema and queries
10- `routes/` - API route handlers
11- `services/` - Business logic services
12
13## API Endpoints
14
15### Authentication
16
17- `POST /api/auth/signup` - Create a new user account
18- `POST /api/auth/login` - Log in to an existing account
19- `GET /api/auth/me` - Get current user information
20
21### Locations
22
23- `GET /api/locations` - Get all locations for the current user
24- `POST /api/locations` - Add a new location
25- `GET /api/locations/:id` - Get a specific location
26- `DELETE /api/locations/:id` - Delete a location
27
28### Flood Checking
29
30- `POST /api/check-floods` - Check for potential floods for a user's locations
31
32## Cron Job

11};
12
13// API base URL
14const API_BASE_URL = '';
15
16// DOM Elements
150  
151  try {
152    const response = await fetch(`${API_BASE_URL}/api/auth/login`, {
153      method: 'POST',
154      headers: {
191  
192  try {
193    const response = await fetch(`${API_BASE_URL}/api/auth/signup`, {
194      method: 'POST',
195      headers: {
247async function loadLocations() {
248  try {
249    const response = await fetch(`${API_BASE_URL}/api/locations`, {
250      headers: {
251        'Authorization': `Bearer ${state.token}`
304  
305  try {
306    const response = await fetch(`${API_BASE_URL}/api/locations/${locationId}`, {
307      method: 'DELETE',
308      headers: {
326// Load alerts
327async function loadAlerts() {
328  // This would be an API call to get alerts
329  // For now, we'll just use a placeholder
330  state.alerts = [];
455  
456  try {
457    const response = await fetch(`${API_BASE_URL}/api/locations`, {
458      method: 'POST',
459      headers: {
500    elements.checkFloodsBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Checking...';
501    
502    const response = await fetch(`${API_BASE_URL}/api/check-floods`, {
503      method: 'POST',
504      headers: {