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;

76// --- Core Lead Generation Logic ---
77
78// WARNING: Scraping search engines like DuckDuckGo is fragile and might break.
79async function searchWebsites(searchQuery: string, jobId: string): Promise<{ name: string; url: string }[]> {
80  const searchUrl = `https://html.duckduckgo.com/html/?q=${encodeURIComponent(searchQuery)}`;
125
126async function extractEmailsFromWebsite(websiteUrl: string, leadId: string): Promise<string | null> {
127  console.log(`Scraping ${websiteUrl} for lead ${leadId}`);
128  try {
129    // Add http:// if no scheme
139    if (!response.ok) {
140      console.warn(`Failed to fetch ${properUrl} for lead ${leadId}: ${response.status}`);
141      await updateLeadStatus(leadId, "error_scraping_fetch", {}, `HTTP ${response.status} for ${properUrl}`);
142      return null;
143    }
183    return null;
184  } catch (error) {
185    console.error(`Error scraping ${websiteUrl} (processed as ${websiteUrl}) for lead ${leadId}:`, error);
186    await updateLeadStatus(leadId, "error_scraping", {}, `Scrape exception: ${error.message}`);
187    return null;
188  }
279  } catch (error) {
280    console.error(`Error drafting email for ${emailAddress} (lead ${leadId}):`, error);
281    await updateLeadStatus(leadId, "error_drafting", {}, `OpenAI API error: ${error.message}`);
282    return null;
283  }
286async function processJob(jobId: string, searchQuery: string) {
287  await updateJobStatus(jobId, "processing_search");
288  const openaiApiKey = Deno.env.get("openai");
289  if (!openaiApiKey) {
290    console.error("OpenAI API key secret 'openai' is not set.");
291    await updateJobStatus(jobId, "failed_config", "OpenAI API key not configured.");
292    return;
293  }
294  const openai = new OpenAI({ apiKey: openaiApiKey });
295
296  const websites = await searchWebsites(searchQuery, jobId);
380        .status-pending, .status-processing_search, .status-processing_leads { background-color: #ffc107; color: #212529;}
381        .status-completed { background-color: #28a745; }
382        .status-failed_config, .status-error_searching, .status-completed_no_sites, .status-error_scraping, .status-error_drafting, .status-error_scraping_fetch, .status-error_drafting_empty_response, .status-failed_uncaught_exception { background-color: #dc3545; }
383        .status-email_extracted, .status-email_drafted { background-color: #17a2b8; }
384        .status-no_email_found, .status-pending_scrape { background-color: #6c757d; }
484        metrics.total = leads.length;
485        metrics.emailFound = leads.filter(l =>
486          l.email_address && l.status !== "error_scraping_fetch" && l.status !== "error_scraping"
487        ).length;
488        metrics.emailDrafted = leads.filter(l => l.drafted_email_body && l.status !== "error_drafting").length;

54
55/* ------------------------------------------------------------------ */
56/* Utility: minimal XML escaping (only for text nodes)                 */
57function escapeXml(str: string = ""): string {
58  return str

1const baseUrl = "https://api.neynar.com/v2/farcaster/";
2
3export async function fetchNeynarGet(path: string) {
7      "Content-Type": "application/json",
8      "x-neynar-experimental": "true",
9      "x-api-key": "NEYNAR_API_DOCS",
10    },
11  });

19  }));
20
21app.get("/api/counter/get", async c => c.json(await db.get("counter")));
22app.get("/api/counter/increment", async c => c.json(await db.set("counter", (await db.get("counter") || 0) + 1)));
23
24app.get("/frontend/**/*", c => serveFile(c.req.path, import.meta.url));

84
85const loadEmoji = (code) => {
86  // const api = `https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${code.toLowerCase()}.svg`
87  const api = `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${code.toLowerCase()}_color.svg`;
88  return fetch(api).then((r) => r.text());
89};
90

53        <div className="">✷ Farcaster mini app manifest + webhook + embed metadata</div>
54        <div className="">✷ Farcaster notifications (storing tokens, sending recurring notifications, ...)</div>
55        <div className="">✷ Neynar API integration for Farcaster data</div>
56        <div className="">✷ Hosted on Val Town (instant deployments on save)</div>
57        <div className="">
67
68function Database() {
69  const queryFn = () => fetch("/api/counter/get").then((r) => r.json());
70  const { data, refetch } = useQuery({ queryKey: ["counter"], queryFn });
71  return (
73      {/* <h2 className="font-semibold">Database Example</h2> */}
74      <div className="">Counter value: {data}</div>
75      <Button variant="outline" onClick={() => fetch("/api/counter/increment").then(refetch)}>
76        Increment
77      </Button>

155
156const css = `
157@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
158
159body {

146    // In Val.Town, email might be accessed differently
147    // Using standard email send function in Val.Town
148    await fetch("https://api.val.town/v1/emails", {
149      method: "POST",
150      headers: {
167  async initScheduler() {
168    // Create the scheduled check for website monitoring
169    // Using Val.Town's cron API
170    return await fetch("https://api.val.town/v1/me/schedules", {
171      method: "POST",
172      headers: {
212      // Note: You'll need to store the schedule ID from initScheduler to update it
213      // For now, we'll create a new schedule and let Val.Town handle duplicates
214      const response = await fetch("https://api.val.town/v1/me/schedules", {
215        method: "POST",
216        headers: {
230  },
231
232  // ===== API ENDPOINTS =====
233
234  // Current status endpoint - implement using Val.Town's HTTP handler