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;

1import { z } from "https://deno.land/x/zod@v3.22.4/mod.ts";
2import type { FC } from "npm:hono/jsx";
3
4export interface Options {
5  homepage?: FC;

23
24        <div class="space-y-2">
25          <p>You've set up an API for your Val Town lowdb instance</p>
26          <p>
27            ✧*｡٩(ˊᗜˋ*)و✧*｡

20  };
21
22  return fetchJSON(`https://api.val.town/v1/vals/${valId}`, {
23    headers: {
24      Authorization: `Bearer ${token}`,

2import { socialDataSearch, Tweet } from "https://esm.town/v/stevekrouse/socialDataSearch";
3var axios = require("axios");
4const FMP_API_KEY = Deno.env.get("FMP_API_KEY");
5
6// Customize your keywords
16export async function financialNewsAlert({ lastRunAt }: Interval) {
17  const FMP_ARTICLES_ENDPOINT =
18    `https://financialmodelingprep.com/stable/fmp-articles?page=0&limit=20&apikey=${FMP_API_KEY}`;
19  const response = await axios.get(FMP_ARTICLES_ENDPOINT);
20  const newsData = response.data;

31Refer to [Twitter's search operators](https://socialdata.gitbook.io/docs/twitter-tweets/retrieve-search-results-by-keyword#endpoint-parameters) to fine-tune your query.
32
33### 4. Test API call
34Set `isProd = false` in the code if you are testing, to ensure there are enough tweets to display. <br>
35Toggle it back to `true` when you're ready to run this cron job in production and actuall send notifications.
60
61### NOTE: Usage Limits
62This val uses the SocialData API for Twitter data:
63
64- **Proxies via Val Town's [SocialDataProxy](https://www.val.town/v/stevekrouse/socialDataProxy)**: Limited to 10 cents per day for [**Val Town Pro users**](https://www.val.town/pricing). This API is *only* for Pro users.
65- **Need more calls?** Sign up for your own [SocialData API token](https://socialdata.tools) and configure the [`socialDataSearch`](https://www.val.town/v/stevekrouse/socialDataSearch) function.

8const app = new Hono();
9
10// API routes
11app.get("/api/attachments", async (c) => {
12  const attachments = await getAllAttachments();
13  return c.json(attachments);
14});
15
16app.get("/api/attachments/:id", async (c) => {
17  const id = c.req.param("id");
18  const downloadParam = c.req.query("download");

41    const fetchAttachments = async () => {
42      try {
43        const response = await fetch("/api/attachments");
44        if (!response.ok) {
45          throw new Error("Failed to fetch attachments");
166                  <div className="flex space-x-2">
167                    <a 
168                      href={`/api/attachments/${selectedAttachment}?download=true`}
169                      download
170                      className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 flex items-center"
198                </div>
199                <iframe 
200                  src={`/api/attachments/${selectedAttachment}`}
201                  className={`w-full ${isFullscreen ? 'h-[calc(100vh-60px)]' : 'h-[75vh]'} border-0`}
202                  title="Document Viewer"

1import { createRoute } from "https://esm.sh/@hono/zod-openapi@0.18.4";
2import { ErrorSchema, UpdateUserSchema, UserIdPathParamSchema, UserSchema } from "../schema.ts";
3