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;

6 * loading animation, EN/ES localization.
7 * Uses 'npm:pdf.js-extract' for PDF extraction.
8 * Serves HTML UI & API endpoint from the same Val.
9 * Assumes 'openai' secret is set in Val Town environment variables.
10 *
215    <title data-translate="pageTitle">${currentLocaleStrings.pageTitle}</title> 
216    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
217    <link rel="preconnect" href="https://fonts.googleapis.com">
218    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
219    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600&family=Segoe+UI:wght@400;600&display=swap" rel="stylesheet">
220    <style>
221        /* --- Full CSS from original, or templatized CSS variables --- */
651  async function extractPdfTextNative(data: ArrayBuffer, fileName: string, log: LogEntry[]): Promise<string | null> { /* ... original ... */ }
652
653  // --- Helper Function: Call OpenAI API (Uses APP_CONFIG for model) ---
654  async function callOpenAI(
655    openai: OpenAI,
857 * and `{{app_config.document_format_accepted_label}}` (e.g. "PDF") for UI text.
858 *
859 * 5. OpenAI API Key:
860 * Ensure your environment (e.g., Val Town secrets) has the `OPENAI_API_KEY` (or the appropriate
861 * environment variable name for the `OpenAI` library) set.
862 *
863 * 6. Deployment:
864 * This script is designed to be deployed as a single serverless function (e.g., on Val Town).
865 * It serves both the HTML interface and the backend API endpoint.
866 *
867 * --- Customization Notes ---

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;

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>

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

13- Generate code in TypeScript or TSX
14- Add appropriate TypeScript types and interfaces for all data structures
15- Prefer official SDKs or libraries than writing API calls directly
16- Ask the user to supply API or library documentation if you are at all unsure about it
17- **Never bake in secrets into the code** - always use environment variables
18- Include comments explaining complex logic (avoid commenting obvious operations)
23### 1. HTTP Trigger
24
25- Create web APIs and endpoints
26- Handle HTTP requests and responses
27- Example structure:
173However, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.
174If you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page
175or by making an API request for it.
176
177## Val Town Platform Specifics
181- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
182- **Storage:** DO NOT use the Deno KV module for storage
183- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
184- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified
185- **View Source:** Add a view source link by importing & using `import.meta.url.replace("ems.sh", "val.town)"` (or passing this data to the client) and include `target="_top"` attribute
186- **Error Debugging:** Add `<script src="https://esm.town/v/std/catch"></script>` to HTML to capture client-side errors
187- **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
188- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys
189- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
190- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
224### Backend (Hono) Best Practices
225
226- Hono is the recommended API framework
227- Main entry point should be `backend/index.ts`
228- **Static asset serving:** Use the utility functions to read and serve project files:
248  });
249  ```
250- Create RESTful API routes for CRUD operations
251- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:
252  ```ts
285   - For files in the project, use `readFile` helpers
286
2875. **API Design:**
288   - `fetch` handler is the entry point for HTTP vals
289   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`