{appName} · Val Town

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_427":428,"_429":430},"routes/_app.x.$handle.$name",{"_103":102,"_33":47,"_112":93,"_27":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_20":-5,"_124":-5,"_125":-5,"_126":25,"_127":128,"_129":62,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_45":46,"_33":47,"_40":48,"_49":-5,"_50":25,"_51":52,"_53":52,"_54":55,"_56":57,"_18":58,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":25},"version",196,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":30},"file",{"_31":32,"_33":34,"_35":36,"_37":39,"_40":41,"_42":14,"_43":44,"_24":25},"previous",{"_31":32,"_33":34,"_35":36,"_37":38},"deleted",false,"deletedHere","path","frontend/pages/page-email.tsx","latestPath","frontend/pages/features/page-mail.tsx","fileId","09235c92-4c96-11f1-987c-ee650bb23af1","name","page-email.tsx","fileType","email","content","/** @jsxImportSource https://esm.sh/preact@10.29.1 */\n// page-email.tsx — Email Trigger: inbound handler + outbound helpers.\n\nimport { Badge, CodeBlock, CollapsedSnippets, ExternalLink, PageHeader, SectionTitle } from \"../ui/components.tsx\";\n\n// ── Snippets (collapsed) ──────────────────────────────────────────────────────\n\nconst INBOUND_SNIPPET = {\n filename: \"email.ts — inbound handler\",\n code: `import { type Email } from \"./backend/shared.ts\";\n\nexport default async function emailHandler(inbound: Email): Promise {\n console.log(\\`📧 From: \\${inbound.from} Subject: \\${inbound.subject}\\`);\n\n for (const file of inbound.attachments) {\n console.log(\\`📎 \\${file.name} (\\${file.size}b)\\`);\n // await blob.set(\\`emails/\\${file.name}\\`, await file.arrayBuffer());\n }\n}`,\n};\n\nconst OUTBOUND_SNIPPET = {\n filename: \"email.ts — sendNotification()\",\n code: `import { email as sendEmail } from \"https://esm.town/v/std/email\";\n\nexport async function sendNotification(\n subject: string,\n body: string,\n options?: { to?: string; html?: string },\n): Promise {\n await sendEmail({\n subject,\n text: body,\n ...(options?.to && { to: options.to }),\n ...(options?.html && { html: options.html }),\n });\n}`,\n};\n\nconst TYPE_SNIPPET = {\n filename: \"backend/shared.ts — Email interface\",\n code: `export interface Email {\n from: string;\n to: string[];\n cc?: string | string[];\n subject?: string;\n text?: string;\n html?: string;\n attachments: File[];\n headers: Record;\n}`,\n};\n\n// ── Page ──────────────────────────────────────────────────────────────────────\n\nexport function EmailPage() {\n return (\n

\n .@valtown.email. The same file can also send outbound mail using @std/email.\"\n />\n\n Key rules\n

\n \n \n \n \n \n \n \n \n

Rule	Detail
	`<user>.<val>@valtown.email`
	Free plan: send to yourself only. Pro: send to anyone + cc/bcc
	Arrive as `File` objects — save to Blob if persistence needed
	Never expose email-sending via HTTP routes without auth

\n\n

\n No live demo here.{\" \"}\n Email triggers fire when mail arrives at your val's address — there is no HTTP endpoint to call. Send a test email to <you>.sample-val@valtown.email and check the Val Town logs.\n

\n\n \n \n \n \n \n\n

\n Email docs\n {\" · \"}\n std/email reference\n

\n );\n}\n","/** @jsxImportSource https://esm.sh/preact@10.29.1 */\n// page-email.tsx — Email Trigger: inbound handler + outbound helpers.\n\nimport { Badge, CodeBlock, PageHeader, SectionTitle } from \"../ui/components.tsx\";\n\nconst LINKS = [\n { href: \"https://docs.val.town/vals/email/\", label: \"Email docs\" },\n { href: \"https://docs.val.town/reference/std/email/\", label: \"std/email reference\" },\n];\n\n// ── Snippets ──────────────────────────────────────────────────────────────────\n\nconst TYPE_SNIPPET = {\n filename: \"backend/shared.ts — Email interface\",\n code: `export interface Email {\n from: string;\n to: string[];\n cc?: string | string[];\n subject?: string;\n text?: string;\n html?: string;\n attachments: File[];\n headers: Record;\n}`,\n};\n\nconst INBOUND_SNIPPET = {\n filename: \"email.ts — inbound handler\",\n code: `import { type Email } from \"./backend/shared.ts\";\n\nexport default async function emailHandler(inbound: Email): Promise {\n console.log(\\`📧 From: \\${inbound.from} Subject: \\${inbound.subject}\\`);\n\n for (const file of inbound.attachments) {\n console.log(\\`📎 \\${file.name} (\\${file.size}b)\\`);\n // await blob.set(\\`emails/\\${file.name}\\`, await file.arrayBuffer());\n }\n}`,\n};\n\nconst OUTBOUND_SNIPPET = {\n filename: \"email.ts — sendNotification()\",\n code: `import { email as sendEmail } from \"https://esm.town/v/std/email\";\n\nexport async function sendNotification(\n subject: string,\n body: string,\n options?: { to?: string; html?: string },\n): Promise {\n await sendEmail({\n subject,\n text: body,\n ...(options?.to && { to: options.to }),\n ...(options?.html && { html: options.html }),\n });\n}`,\n};\n\n// ── Page ──────────────────────────────────────────────────────────────────────\n\nexport function EmailPage() {\n return (\n

\n .@valtown.email. The same file can also send outbound mail using @std/email.\"\n links={LINKS}\n />\n\n Key rules\n

\n \n \n \n \n \n \n \n \n

Rule	Detail
	`<user>.<val>@valtown.email`
	Free plan: send to yourself only. Pro: send to anyone + cc/bcc
	Arrive as `File` objects — save to Blob if persistence needed
	Never expose email-sending via HTTP routes without auth

\n\n

\n\n \n \n \n

\n );\n}\n","createdAt",["D",1778446488775],"branchVersion","branchId","5a0a7ac8-4895-11f1-80ec-42b51c65c3df","id","5a09ae54-4895-11f1-80ec-42b51c65c3df","Quickstart-Full-Stack",["D",1777994172310],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","An elegant template for an elegant single-person full stack app.","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3ed9401e-3850-4a69-dec2-1bdd924c0900/square512?exp=1789538399&sig=8ded5b974bfebef9817e2fbdffe4de4e1704e0d4cab9518c811db2594c0af107","173e7424-8658-428f-a3bc-ae4faeaabd1c","pinnedFileId","e1c705aa-4b18-11f1-b4ae-ee650bb23af1","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","019df771-9af8-7238-99a4-541e39355038","tursoName","5a09ae54489511f180ec42b51c65c3df","tursoHostname","5a09ae54489511f180ec42b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789511441255],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_103":102,"_111":107},"org",{"_103":102,"_104":105,"_106":107,"_18":58,"_108":109,"_110":25},"branch",{"_13":92,"_33":93,"_45":44,"_94":46,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":47,"_101":102},"isOwned",384,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","pikachu","handle","displayName","Minion","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/22c8ba37-42c8-4af4-8daf-8cdd2f5f1800/square512?exp=1789538399&sig=21cdba23f818845c8391e88088eb5ea9255dbc43e05efe79e25bd70ab9ddb43a","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_45":46,"_33":47,"_40":422,"_49":-5,"_50":25,"_51":52,"_53":52,"_54":55,"_56":57,"_18":58,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":423,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":424,"_87":425,"_89":426,"_91":25},"tree",[218,223,239,240,241,242,243,244],"files",[218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244],"counts",{"_208":199,"_209":66,"_210":66,"_211":212,"_213":214},"contents",[134,135,136,137,138,139,140,141],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_45":202,"_33":203,"_31":204,"_145":-5,"_43":44,"_42":205,"_147":62,"_40":206,"_13":199,"_35":200,"_37":-5,"_24":25,"_151":-5,"_27":207},{"_45":194,"_33":195,"_31":196,"_145":-5,"_43":44,"_42":197,"_147":62,"_40":198,"_13":199,"_35":200,"_37":-5,"_24":25,"_151":-5,"_27":201},{"_45":187,"_33":188,"_31":189,"_145":-5,"_43":44,"_42":190,"_147":25,"_40":191,"_13":149,"_35":20,"_37":192,"_24":25,"_151":-5,"_27":193},{"_45":178,"_33":179,"_31":180,"_145":-5,"_43":44,"_42":181,"_147":25,"_40":182,"_13":183,"_35":184,"_37":185,"_24":25,"_151":-5,"_27":186},{"_45":170,"_33":171,"_31":172,"_145":-5,"_43":44,"_42":173,"_147":25,"_40":174,"_13":175,"_35":20,"_37":176,"_24":25,"_151":-5,"_27":177},{"_45":162,"_33":163,"_31":164,"_145":-5,"_43":44,"_42":165,"_147":25,"_40":166,"_13":167,"_35":36,"_37":168,"_24":25,"_151":-5,"_27":169},{"_45":153,"_33":154,"_31":60,"_145":-5,"_43":44,"_42":155,"_147":25,"_40":156,"_13":157,"_35":158,"_37":159,"_24":25,"_151":160,"_27":161},{"_45":142,"_33":143,"_31":144,"_145":-5,"_43":44,"_42":146,"_147":25,"_40":148,"_13":149,"_35":20,"_37":150,"_24":25,"_151":-5,"_27":152},"a1e7746c-4cb0-11f1-90cc-ee650bb23af1","val.yml","aa729402-48c5-11f1-87ca-42b51c65c3df","parentId",182,"latest",["D",1778445693931],6,"name: \"sample-val\"\npublic: true\n# Each file here is a service. Services share one isolated SQLite DB.\n# index.http.ts → HTTP service (SPA + API routes)\n# cron.ts → Cron service (scheduled tasks)\n# email.ts → Email service (inbound trigger + outbound helpers)\nfiles:\n index.http.ts: http\n cron.ts: interval\n email.ts: email\n# Env vars this App reads. Set them in the Val Town UI sidebar — never in code.\n# required: App will not work without it | optional: has a safe default\nenv:\n DAILY_HOUR_UTC: optional # 0-23 UTC hour for the daily cron task (default: \"2\")\n","label",[143],"a2243898-4cb0-11f1-b23a-ee650bb23af1","index.http.ts",187,["D",1778445694319],10,"http","// index.http.ts — HTTP service: serves the Preact SPA and JSON APIs.\n// Docs: https://docs.val.town/vals/http\n\nimport { getCronRuns, getRecentVisits, getVisitCount, recordVisit } from \"./backend/db.ts\";\nimport { listKeys, loadJSON, saveJSON } from \"./backend/storage.ts\";\nimport { jsonError, jsonOk } from \"./backend/api-utils.ts\";\nimport { APP_NAME } from \"./backend/shared.ts\";\nimport { renderApp } from \"./frontend/app.tsx\";\n\n// Valid SPA page slugs — anything else falls back to \"home\".\nconst PAGES = new Set([\"home\", \"http\", \"sqlite\", \"cron\", \"email\", \"blob\", \"ui\"]);\n\n// -----------------------------------------------------------------------------\n// entry\n// -----------------------------------------------------------------------------\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n if (url.pathname.startsWith(\"/api/\")) return await routeApi(req, url);\n return await serveSpa(req, url);\n}\n\n// Server reads theme from cookie and page from pathname — SSR is fully hydrated,\n// no client-side init script needed to avoid FOUC.\nasync function serveSpa(req: Request, url: URL): Promise {\n try {\n await recordVisit(url.pathname);\n } catch { /* off-platform */ }\n const theme = cookieTheme(req);\n const page = pathToPage(url.pathname);\n const html = renderApp({ appName: APP_NAME, renderedAt: new Date().toISOString(), theme, page });\n return new Response(html, {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n}\n\n/** Extract the `theme` cookie value, or empty string if absent. */\nfunction cookieTheme(req: Request): string {\n const cookie = req.headers.get(\"Cookie\") ?? \"\";\n const m = cookie.match(/(?:^|;\\s*)theme=([^;]+)/);\n return m ? decodeURIComponent(m[1]) : \"\";\n}\n\n/** Map a URL pathname to a page slug. `/http` → `\"http\"`, `/` → `\"home\"`. */\nfunction pathToPage(pathname: string): string {\n const seg = pathname.slice(1); // strip leading /\n return PAGES.has(seg) ? seg : \"home\";\n}\n\n// -----------------------------------------------------------------------------\n// api routes\n// -----------------------------------------------------------------------------\n\nasync function routeApi(req: Request, url: URL): Promise {\n const route = `${req.method} ${url.pathname}`;\n if (route === \"GET /api/health\") return healthCheck();\n if (route === \"GET /api/visits\") return await visits();\n if (route === \"GET /api/cron-runs\") return await cronRuns();\n if (route === \"GET /api/blob-keys\") return await blobKeys();\n if (route === \"POST /api/blob-write\") return await blobWrite(req);\n if (route === \"GET /api/blob-read\") return await blobRead(url);\n return jsonError(`Not found: ${url.pathname}`, 404);\n}\n\nfunction healthCheck(): Response {\n return jsonOk({\n name: APP_NAME,\n timestamp: new Date().toISOString(),\n runtime: `Deno ${Deno.version?.deno ?? \"unknown\"}`,\n });\n}\n\nasync function visits(): Promise {\n try {\n const total = await getVisitCount();\n const recent = await getRecentVisits(20);\n return jsonOk({ total, recent });\n } catch {\n return jsonError(\"SQLite unavailable (off-platform?)\", 503);\n }\n}\n\nasync function cronRuns(): Promise {\n try {\n const runs = await getCronRuns(30);\n return jsonOk({ runs });\n } catch {\n return jsonError(\"SQLite unavailable (off-platform?)\", 503);\n }\n}\n\nasync function blobKeys(): Promise {\n try {\n const keys = await listKeys();\n return jsonOk({ keys });\n } catch {\n return jsonError(\"Blob unavailable (off-platform?)\", 503);\n }\n}\n\nasync function blobWrite(req: Request): Promise {\n try {\n const { key, value } = await req.json() as { key: string; value: unknown };\n if (!key) return jsonError(\"key required\");\n await saveJSON(key, value);\n return jsonOk({ key });\n } catch {\n return jsonError(\"Blob write failed\", 500);\n }\n}\n\nasync function blobRead(url: URL): Promise {\n try {\n const key = url.searchParams.get(\"key\") ?? \"\";\n if (!key) return jsonError(\"key required\");\n const value = await loadJSON(key);\n return jsonOk({ key, value });\n } catch {\n return jsonError(\"Blob read failed\", 500);\n }\n}\n","d-template",[154],"a1efbd3e-4cb0-11f1-b51c-ee650bb23af1","email.ts","aa7742d6-48c5-11f1-831b-42b51c65c3df",183,["D",1778445693986],9,"// email.ts — Email service: inbound handler + outbound helpers.\n// Address shape: .@valtown.email\n\nimport { email as sendEmail } from \"https://esm.town/v/std/email\";\nimport { APP_NAME, type Email } from \"./backend/shared.ts\";\n\n// -----------------------------------------------------------------------------\n// inbound\n// -----------------------------------------------------------------------------\n\nexport default async function emailHandler(inbound: Email): Promise {\n console.log(\n `📧 [${APP_NAME}] From: ${inbound.from} Subject: ${\n inbound.subject ?? \"(none)\"\n }`,\n );\n console.log(` Body: ${inbound.text?.slice(0, 200) ?? \"(empty)\"}...`);\n\n for (const file of inbound.attachments) {\n console.log(` 📎 ${file.name} (${file.type}, ${file.size}b)`);\n // await blob.set(`emails/${file.name}`, await file.arrayBuffer());\n }\n\n // await sendNotification(`Re: ${inbound.subject}`, \"Got your message!\");\n}\n\n// -----------------------------------------------------------------------------\n// outbound\n// -----------------------------------------------------------------------------\n// Free plan: sends to yourself only. Pro: send to anyone + cc/bcc.\n\nexport async function sendNotification(\n subject: string,\n body: string,\n options?: { to?: string; html?: string },\n): Promise {\n await sendEmail({\n subject,\n text: body,\n ...(options?.to && { to: options.to }),\n ...(options?.html && { html: options.html }),\n });\n console.log(`📤 [${APP_NAME}] Sent: \"${subject}\"`);\n}\n\n/** `attachment.content` must be base64-encoded (use `btoa()`). */\nexport async function sendWithAttachment(\n subject: string,\n body: string,\n attachment: { content: string; filename: string; type?: string },\n): Promise {\n await sendEmail({\n subject,\n text: body,\n attachments: [{\n content: attachment.content,\n filename: attachment.filename,\n type: attachment.type ?? \"application/octet-stream\",\n disposition: \"attachment\",\n }],\n });\n console.log(\n `📤 [${APP_NAME}] Sent with attachment: \"${attachment.filename}\"`,\n );\n}\n",[163],"a8e0a8b4-4b17-11f1-9fc9-ee650bb23af1","deno.json","86adc21c-4951-11f1-b797-42b51c65c3df",55,["D",1778270041449],2,"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\",\n \"no-external-import\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"unstable\": [\"temporal\", \"worker-options\", \"sloppy-imports\", \"node-globals\"]\n}\n",[171],"a234c1c2-4cb0-11f1-8ce8-ee650bb23af1","cron.ts","aa651980-48c5-11f1-bfb8-42b51c65c3df",188,["D",1778445694279],8,"interval","// cron.ts — Cron service: pulse (every run) + daily (UTC-hour window).\n// Schedule is set in the Val Town UI via a cron expression. Free tier: ≥ 15 min.\n// Tasks are intentionally idempotent. Val Town fires each tick once; concurrent\n// cold-starts are rare but possible on Pro — design tasks to tolerate it.\n\nimport { APP_NAME, env } from \"./backend/shared.ts\";\nimport { logCronRun, pruneOldVisits } from \"./backend/db.ts\";\n\nexport default async function (\n _interval: { lastRunAt: Date | undefined },\n): Promise {\n const now = new Date();\n await pulse(now);\n await daily(now);\n}\n\n// ── Pulse — runs on every cron tick ───────────────────────────────────────────\n// Good for health-checks, polling an external feed, draining a work queue.\n// Set the Val Town cron to your desired cadence (UI → val → Cron → expression).\n\nasync function pulse(now: Date): Promise {\n console.log(`⚡ [${APP_NAME}] pulse ${now.toISOString()}`);\n await logCronRun(\"pulse\", `hello at ${now.toISOString()}`);\n // TODO: replace with your high-frequency task\n // await fetch(\"https://api.example.com/feed\");\n}\n\n// ── Daily — runs once per day in a UTC-hour window ────────────────────────────\n// Stateless: no SQLite gating needed. The window width equals your cron cadence,\n// so at most one tick per day will land in it (assuming cadence ≤ 1h).\n// Env: DAILY_HOUR_UTC — which UTC hour to run (0-23, default \"2\").\n\nasync function daily(now: Date): Promise {\n const targetHour = Number(env(\"DAILY_HOUR_UTC\", \"2\"));\n if (now.getUTCHours() !== targetHour) return;\n\n console.log(`🔧 [${APP_NAME}] daily ${now.toISOString()}`);\n await pruneOldVisits(30);\n await logCronRun(\"daily\", `pruned visits older than 30 days`);\n console.log(`✅ [${APP_NAME}] daily done`);\n}\n",[179],"0cd8509c-4b8b-11f1-89d0-ee650bb23af1","README.md","aabf7b64-48c5-11f1-9920-42b51c65c3df",109,["D",1778319601219],"# Val Town Template\n\nA compact Val Town starter with one HTTP surface: a Preact SSR documentation\napp.\n\nKeep this README short. The running webapp explains each module in detail via a\nselectable **Docs** section powered by `frontend/ui/data.ts`.\n\n---\n\n## What This Template Includes\n\n- `index.http.ts` — the only HTTP trigger.\n- Preact SSR + Oat CSS — no build step, no hydration bundle.\n- Tiny JSON API — `/api/health` and `/api/visits`.\n- SQLite — visit counter and cron metadata.\n- Cron — scheduled pulse and maintenance examples.\n- Email — inbound handler and outbound helpers.\n- Blob — small account-scoped storage wrapper.\n- `val.yml.files` — repo-side trigger metadata contract.\n\n---\n\n## Quick Start\n\n```bash\ncd /path/to/uApps\nvt create my-app\ncd vals/my-app\nvt push\nvt url\n```\n\nOpen the URL. The homepage is the module documentation.\n\nBefore changing remote state, use:\n\n```bash\nvt status\nvt push --dry-run\nvt types\n```\n\n---\n\n## HTTP Shape\n\nOnly one file should be an HTTP trigger:\n\n```txt\nindex.http.ts\n```\n\nRoutes:\n\n| Method | Path | Purpose |\n| ------ | ------------- | -------------------- |\n| GET | `/` | Preact docs app |\n| GET | `/api/health` | Runtime health check |\n| GET | `/api/visits` | SQLite visit count |\n\nDo not add email, OpenAI, admin, or write routes without auth. Val Town HTTP\nendpoints are public even when the val source is private.\n\n---\n\n## Preact Notes\n\nEvery `.tsx` file containing JSX needs the Val Town JSX pragma at the top:\n\n```tsx\n/** @jsxImportSource https://esm.sh/preact@10.29.1 */\n```\n\nThe pragma selects the JSX runtime. It does not make a file an HTTP trigger.\nTrigger type is Val Town metadata; for new files, `vt` infers it from path words\nsuch as `http`, `cron`, and `email`.\n\nThe UI is intentionally declarative:\n\n```txt\nfrontend/ui/data.ts # docs/routes/stats data\nfrontend/ui/sections.tsx # maps data to sections\nfrontend/client.ts # theme, docs tabs, visit count\n```\n\n---\n\n## Trigger Metadata\n\n`val.yml` records the intended Val Town file types:\n\n```yaml\nfiles:\n index.http.ts: http\n cron.ts: interval\n email.ts: email\n```\n\nCheck remote metadata with:\n\n```bash\nvt types\n```\n\nExisting remote files keep sticky metadata. If Val Town shows\n`(script) index.http.ts`, the code may be valid but the file is not an HTTP\ntrigger.\n\n---\n\n## Customize\n\n- Rename the app: edit `APP_NAME` in `backend/shared.ts`.\n- Edit the homepage docs: update `frontend/ui/data.ts`.\n- Add a read-only API route: add a small branch in `index.http.ts`.\n- Add a SQLite table: extend `migrate()` in `backend/db.ts`.\n- Change visibility/org: edit `val.yml`.\n\nKeep files small. Delete modules you do not need.\n\n---\n\n## Key Files\n\n| File | Purpose |\n| ---------------------- | --------------------------------------------------- |\n| `index.http.ts` | Single HTTP trigger; renders Preact and JSON API |\n| `frontend/app.tsx` | HTML shell and Preact SSR entry |\n| `frontend/ui/data.ts` | Declarative webapp docs, stats, and route copy |\n| `frontend/ui/` | Preact sections, types, and styles |\n| `frontend/client.ts` | Inline theme/docs/visit-count enhancement |\n| `backend/db.ts` | SQLite schema and queries |\n| `backend/api-utils.ts` | JSON response helpers |\n| `backend/storage.ts` | Blob storage helpers |\n| `backend/shared.ts` | App constants, env helper, duration parser, types |\n| `cron.ts` | Cron trigger example |\n| `email.ts` | Email trigger and outbound helper examples |\n| `val.yml` | Val name, visibility, and expected trigger metadata |\n",[188],"85f9d626-4951-11f1-a16a-42b51c65c3df","frontend","85f9d6f8-4951-11f1-a16a-42b51c65c3df",34,["D",1778074991402],0,"directory",[195],"86303568-4951-11f1-a193-42b51c65c3df","backend","8630361c-4951-11f1-a193-42b51c65c3df",35,["D",1778074991756],[203],"pulls","branches","forks","envVars",{"_215":66,"_217":199},"connections",{"_215":199,"_216":199},"count","unfilledCount","emptyCount",{"_45":202,"_33":203,"_31":204,"_145":-5,"_43":44,"_42":205,"_147":62,"_40":419,"_13":199,"_35":200,"_37":-5,"_24":25,"_151":-5,"_246":420,"_27":421},{"_45":411,"_33":412,"_31":413,"_145":204,"_43":44,"_42":414,"_147":25,"_40":415,"_13":66,"_35":270,"_37":416,"_24":25,"_151":-5,"_246":417,"_27":418},{"_45":402,"_33":403,"_31":404,"_145":204,"_43":44,"_42":405,"_147":25,"_40":406,"_13":407,"_35":270,"_37":408,"_24":25,"_151":-5,"_246":409,"_27":410},{"_45":394,"_33":395,"_31":396,"_145":204,"_43":44,"_42":397,"_147":25,"_40":398,"_13":149,"_35":270,"_37":399,"_24":25,"_151":-5,"_246":400,"_27":401},{"_45":386,"_33":387,"_31":388,"_145":204,"_43":44,"_42":389,"_147":25,"_40":390,"_13":183,"_35":270,"_37":391,"_24":25,"_151":-5,"_246":392,"_27":393},{"_45":194,"_33":195,"_31":196,"_145":-5,"_43":44,"_42":197,"_147":62,"_40":383,"_13":199,"_35":200,"_37":-5,"_24":25,"_151":-5,"_246":384,"_27":385},{"_45":378,"_33":331,"_31":325,"_145":196,"_43":44,"_42":379,"_147":62,"_40":380,"_13":199,"_35":200,"_37":-5,"_24":25,"_151":-5,"_246":381,"_27":382},{"_45":370,"_33":371,"_31":372,"_145":325,"_43":44,"_42":373,"_147":25,"_40":374,"_13":288,"_35":270,"_37":375,"_24":25,"_151":-5,"_246":376,"_27":377},{"_45":362,"_33":363,"_31":364,"_145":325,"_43":44,"_42":365,"_147":25,"_40":366,"_13":288,"_35":270,"_37":367,"_24":25,"_151":-5,"_246":368,"_27":369},{"_45":353,"_33":354,"_31":355,"_145":325,"_43":44,"_42":356,"_147":25,"_40":357,"_13":358,"_35":184,"_37":359,"_24":25,"_151":-5,"_246":360,"_27":361},{"_45":349,"_33":34,"_31":32,"_145":325,"_43":44,"_42":14,"_147":25,"_40":350,"_13":288,"_35":36,"_37":39,"_24":25,"_151":-5,"_246":351,"_27":352},{"_45":341,"_33":342,"_31":343,"_145":325,"_43":44,"_42":344,"_147":25,"_40":345,"_13":337,"_35":158,"_37":346,"_24":25,"_151":-5,"_246":347,"_27":348},{"_45":332,"_33":333,"_31":334,"_145":325,"_43":44,"_42":335,"_147":25,"_40":336,"_13":337,"_35":270,"_37":338,"_24":25,"_151":-5,"_246":339,"_27":340},{"_45":322,"_33":323,"_31":324,"_145":325,"_43":44,"_42":326,"_147":25,"_40":327,"_13":175,"_35":270,"_37":328,"_24":25,"_151":-5,"_246":329,"_27":330},{"_45":317,"_33":292,"_31":285,"_145":196,"_43":44,"_42":318,"_147":25,"_40":319,"_13":199,"_35":200,"_37":-5,"_24":25,"_151":-5,"_246":320,"_27":321},{"_45":309,"_33":310,"_31":311,"_145":285,"_43":44,"_42":312,"_147":25,"_40":313,"_13":288,"_35":270,"_37":314,"_24":25,"_151":-5,"_246":315,"_27":316},{"_45":301,"_33":302,"_31":303,"_145":285,"_43":44,"_42":304,"_147":25,"_40":305,"_13":269,"_35":270,"_37":306,"_24":25,"_151":-5,"_246":307,"_27":308},{"_45":293,"_33":294,"_31":295,"_145":285,"_43":44,"_42":296,"_147":25,"_40":297,"_13":199,"_35":270,"_37":298,"_24":25,"_151":-5,"_246":299,"_27":300},{"_45":282,"_33":283,"_31":284,"_145":285,"_43":44,"_42":286,"_147":25,"_40":287,"_13":288,"_35":270,"_37":289,"_24":25,"_151":-5,"_246":290,"_27":291},{"_45":274,"_33":275,"_31":276,"_145":196,"_43":44,"_42":277,"_147":25,"_40":278,"_13":269,"_35":270,"_37":279,"_24":25,"_151":-5,"_246":280,"_27":281},{"_45":264,"_33":265,"_31":266,"_145":196,"_43":44,"_42":267,"_147":25,"_40":268,"_13":269,"_35":270,"_37":271,"_24":25,"_151":-5,"_246":272,"_27":273},{"_45":187,"_33":188,"_31":189,"_145":-5,"_43":44,"_42":190,"_147":25,"_40":261,"_13":149,"_35":20,"_37":192,"_24":25,"_151":-5,"_246":262,"_27":263},{"_45":178,"_33":179,"_31":180,"_145":-5,"_43":44,"_42":181,"_147":25,"_40":258,"_13":183,"_35":184,"_37":185,"_24":25,"_151":-5,"_246":259,"_27":260},{"_45":170,"_33":171,"_31":172,"_145":-5,"_43":44,"_42":173,"_147":25,"_40":255,"_13":175,"_35":20,"_37":176,"_24":25,"_151":-5,"_246":256,"_27":257},{"_45":162,"_33":163,"_31":164,"_145":-5,"_43":44,"_42":165,"_147":25,"_40":252,"_13":167,"_35":36,"_37":168,"_24":25,"_151":-5,"_246":253,"_27":254},{"_45":153,"_33":154,"_31":60,"_145":-5,"_43":44,"_42":155,"_147":25,"_40":249,"_13":157,"_35":158,"_37":159,"_24":25,"_151":160,"_246":250,"_27":251},{"_45":142,"_33":143,"_31":144,"_145":-5,"_43":44,"_42":146,"_147":25,"_40":245,"_13":149,"_35":20,"_37":150,"_24":25,"_151":-5,"_246":247,"_27":248},["D",1778445693931],"children",[],[143],["D",1778445694319],[],[154],["D",1778445693986],[],[163],["D",1778270041449],[],[171],["D",1778445694279],[],[179],["D",1778319601219],[],[188],"1b33d870-4cb0-11f1-a8f1-ee650bb23af1","client.ts","48ed4cf0-4b21-11f1-b54f-ee650bb23af1",171,["D",1778445467918],7,"script","// client.ts — Path router, cookie-based theme switcher, per-page demo hydration.\n// Theme is set via a 1-year cookie (server reads it for zero-FOUC SSR).\n// Navigation uses history.pushState with real paths (/http, /sqlite, …).\n\nexport const clientJs = String.raw`\n(function () {\nconst PAGES = new Set([\"home\",\"http\",\"sqlite\",\"cron\",\"email\",\"blob\",\"ui\"]);\nconst html = document.documentElement;\nconst osDark = window.matchMedia(\"(prefers-color-scheme: dark)\");\n\n// ── theme ─────────────────────────────────────────────────────────────────────\n\nfunction applyTheme(theme) {\n if (!theme || theme === \"auto\") {\n html.removeAttribute(\"data-theme\");\n document.cookie = \"theme=; max-age=0; path=/; SameSite=Lax\";\n osDark.addEventListener(\"change\", syncAuto);\n } else {\n osDark.removeEventListener(\"change\", syncAuto);\n html.setAttribute(\"data-theme\", theme);\n document.cookie = \"theme=\" + theme + \"; max-age=31536000; path=/; SameSite=Lax\";\n }\n updateThemeDropdown(theme || \"auto\");\n}\n\nfunction syncAuto() { html.removeAttribute(\"data-theme\"); }\n\nfunction updateThemeDropdown(active) {\n const sel = document.getElementById(\"theme-select\");\n if (sel) sel.value = active || \"auto\";\n}\n\nfunction initTheme() {\n // html[data-theme] is already set correctly by SSR (server reads the cookie).\n // Just sync the dropdown and wire the OS-change listener if in auto mode.\n const active = html.dataset.theme || \"auto\";\n if (!html.dataset.theme) osDark.addEventListener(\"change\", syncAuto);\n updateThemeDropdown(active);\n}\n\n// ── routing ───────────────────────────────────────────────────────────────────\n\nfunction currentPage() {\n const seg = location.pathname.slice(1);\n return PAGES.has(seg) ? seg : \"home\";\n}\n\nfunction navigate(page, push = true) {\n html.dataset.page = page;\n if (push) history.pushState({ page }, \"\", page === \"home\" ? \"/\" : \"/\" + page);\n updateNav(page);\n runDemo(page);\n}\n\nfunction updateNav(active) {\n document.querySelectorAll(\"[data-nav]\").forEach((el) => {\n el.classList.toggle(\"active\", el.dataset.nav === active);\n });\n}\n\nfunction handleNavClick(e) {\n const navEl = e.target.closest(\"[data-nav]\");\n if (navEl) { e.preventDefault(); navigate(navEl.dataset.nav); return; }\n\n const setTheme = e.target.closest(\"[data-set-theme]\");\n if (setTheme) { e.preventDefault(); applyTheme(setTheme.dataset.setTheme); return; }\n\n const copyBtn = e.target.closest(\"[data-copy]\");\n if (copyBtn) copyCodeSnippet(copyBtn);\n}\n\nfunction copyCodeSnippet(btn) {\n navigator.clipboard?.writeText(btn.dataset.copy)\n .then(() => {\n btn.textContent = \"copied!\";\n setTimeout(() => { btn.textContent = \"copy\"; }, 1500);\n });\n}\n\nfunction initRouter() {\n document.addEventListener(\"click\", handleNavClick);\n window.addEventListener(\"popstate\", () => navigate(currentPage(), false));\n const sel = document.getElementById(\"theme-select\");\n if (sel) sel.addEventListener(\"change\", (e) => applyTheme(e.target.value));\n const page = currentPage();\n updateNav(page);\n runDemo(page);\n}\n\n// ── helpers ────────────────────────────────────────────────────────────────────\n\nfunction qs(id) { return document.getElementById(id); }\n\nfunction setOutput(el, text) {\n if (el) el.textContent = text;\n}\n\nasync function apiFetch(url, opts) {\n const res = await fetch(url, opts);\n return res.json();\n}\n\n// ── per-page demos ─────────────────────────────────────────────────────────────\n\nconst demoRan = new Set();\n\nfunction runDemo(page) {\n if (demoRan.has(page)) return;\n demoRan.add(page);\n const runners = { http: demoHttp, sqlite: demoSqlite, cron: demoCron, blob: demoBlob };\n runners[page]?.();\n}\n\n// http page — three independent call buttons ─────────────────────────────────\n\nfunction wireApiButton(btnId, outId, endpoint) {\n const btn = qs(btnId);\n const out = qs(outId);\n if (!btn || !out) return;\n btn.addEventListener(\"click\", async () => {\n btn.disabled = true;\n setOutput(out, \"loading…\");\n try {\n const data = await apiFetch(endpoint);\n setOutput(out, JSON.stringify(data, null, 2));\n } catch (err) {\n setOutput(out, \"Error: \" + err.message);\n } finally {\n btn.disabled = false;\n }\n });\n}\n\nfunction demoHttp() {\n wireApiButton(\"http-health-btn\", \"http-health-out\", \"/api/health\");\n wireApiButton(\"http-visits-btn\", \"http-visits-out\", \"/api/visits\");\n wireApiButton(\"http-blob-keys-btn\",\"http-blob-keys-out\",\"/api/blob-keys\");\n}\n\n// sqlite page — live visit table with refresh + prune ────────────────────────\n\nfunction renderVisitTable(data) {\n const status = qs(\"sqlite-visits-status\");\n const table = qs(\"sqlite-visits-table\");\n const tbody = qs(\"sqlite-visits-body\");\n const count = qs(\"sqlite-visit-count\");\n\n if (!data.ok || !data.recent) {\n if (status) { status.textContent = data.error || \"Failed to load\"; status.style.display = \"\"; }\n if (table) table.style.display = \"none\";\n return;\n }\n\n if (status) status.style.display = \"none\";\n if (table) table.style.display = \"\";\n if (count) count.textContent = data.total + \" total visits\";\n\n if (tbody) {\n tbody.innerHTML = data.recent.map(r =>\n \"\" + r.id + \"\" + r.path + \"\" + r.ts + \"\"\n ).join(\"\") || \"No visits yet\";\n }\n}\n\nfunction demoSqlite() {\n // Auto-load on page entry\n apiFetch(\"/api/visits\").then(renderVisitTable).catch(e => {\n const s = qs(\"sqlite-visits-status\");\n if (s) s.textContent = \"Error: \" + e.message;\n });\n\n const refreshBtn = qs(\"sqlite-refresh-btn\");\n if (refreshBtn) {\n refreshBtn.addEventListener(\"click\", async () => {\n refreshBtn.disabled = true;\n try { renderVisitTable(await apiFetch(\"/api/visits\")); }\n catch (e) { const s = qs(\"sqlite-visits-status\"); if (s) s.textContent = \"Error: \" + e.message; }\n finally { refreshBtn.disabled = false; }\n });\n }\n\n const pruneBtn = qs(\"sqlite-prune-btn\");\n if (pruneBtn) {\n pruneBtn.addEventListener(\"click\", async () => {\n pruneBtn.disabled = true;\n try {\n // pruning happens via cron — we just refresh to show current state\n renderVisitTable(await apiFetch(\"/api/visits\"));\n } finally {\n pruneBtn.disabled = false;\n }\n });\n }\n}\n\n// cron page — live run log table, auto-loaded ─────────────────────────────────\n\nfunction renderCronLog(data) {\n const status = qs(\"cron-log-status\");\n const table = qs(\"cron-log-table\");\n const tbody = qs(\"cron-log-body\");\n\n if (!data.ok || !data.runs) {\n if (status) { status.textContent = data.error || \"Failed to load\"; status.style.display = \"\"; }\n if (table) table.style.display = \"none\";\n return;\n }\n\n if (!data.runs.length) {\n if (status) { status.textContent = \"No cron runs yet — wait for the next cron tick.\"; status.style.display = \"\"; }\n if (table) table.style.display = \"none\";\n return;\n }\n\n if (status) status.style.display = \"none\";\n if (table) table.style.display = \"\";\n\n if (tbody) {\n tbody.innerHTML = data.runs.map(r =>\n \"\" + (r.task === \"pulse\" ? \"⚡ pulse\" : \"🔧 daily\") +\n \"\" + (r.note || \"\") +\n \"\" + r.ts + \"\"\n ).join(\"\");\n }\n}\n\nfunction demoCron() {\n apiFetch(\"/api/cron-runs\").then(renderCronLog).catch(e => {\n const s = qs(\"cron-log-status\");\n if (s) s.textContent = \"Error: \" + e.message;\n });\n}\n\n// blob page — write/read/list ─────────────────────────────────────────────────\n\nfunction demoBlob() {\n // write\n const writeBtn = qs(\"blob-write-btn\");\n const writeOut = qs(\"blob-write-out\");\n if (writeBtn) {\n writeBtn.addEventListener(\"click\", async () => {\n const keyEl = qs(\"blob-key-input\");\n const valueEl = qs(\"blob-value-input\");\n const key = keyEl?.value.trim() || \"\";\n const rawVal = valueEl?.value.trim() || \"\";\n if (!key) { setOutput(writeOut, \"Error: key is required\"); return; }\n let value;\n try { value = JSON.parse(rawVal); } catch { value = rawVal; }\n writeBtn.disabled = true;\n setOutput(writeOut, \"writing…\");\n try {\n const data = await apiFetch(\"/api/blob-write\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ key, value }),\n });\n setOutput(writeOut, JSON.stringify(data, null, 2));\n // sync key into read input for convenience\n const readKeyEl = qs(\"blob-read-key-input\");\n if (readKeyEl && !readKeyEl.value) readKeyEl.value = key;\n } catch (err) {\n setOutput(writeOut, \"Error: \" + err.message);\n } finally {\n writeBtn.disabled = false;\n }\n });\n }\n\n // read\n const readBtn = qs(\"blob-read-btn\");\n const readOut = qs(\"blob-read-out\");\n if (readBtn) {\n readBtn.addEventListener(\"click\", async () => {\n const key = qs(\"blob-read-key-input\")?.value.trim() || \"\";\n if (!key) { setOutput(readOut, \"Error: key is required\"); return; }\n readBtn.disabled = true;\n setOutput(readOut, \"reading…\");\n try {\n const data = await apiFetch(\"/api/blob-read?key=\" + encodeURIComponent(key));\n setOutput(readOut, JSON.stringify(data, null, 2));\n } catch (err) {\n setOutput(readOut, \"Error: \" + err.message);\n } finally {\n readBtn.disabled = false;\n }\n });\n }\n\n // list\n const listBtn = qs(\"blob-list-btn\");\n const listOut = qs(\"blob-list-out\");\n if (listBtn) {\n listBtn.addEventListener(\"click\", async () => {\n listBtn.disabled = true;\n setOutput(listOut, \"loading…\");\n try {\n const data = await apiFetch(\"/api/blob-keys\");\n setOutput(listOut, JSON.stringify(data, null, 2));\n } catch (err) {\n setOutput(listOut, \"Error: \" + err.message);\n } finally {\n listBtn.disabled = false;\n }\n });\n }\n}\n\n// ── init ──────────────────────────────────────────────────────────────────────\n\ninitTheme();\ninitRouter();\n})();\n`;\n",[],[195,265],"89e6fdf4-4cad-11f1-8c2c-ee650bb23af1","app.tsx","48f1fc50-4b21-11f1-aeb4-ee650bb23af1",154,["D",1778444365176],"/** @jsxImportSource https://esm.sh/preact@10.29.1 */\n// app.tsx — SPA shell: sidebar + all 7 pages pre-rendered server-side.\n// Theme and active page are known at render time (cookie + pathname) — no FOUC.\n\nimport { render } from \"https://esm.sh/preact-render-to-string@6.6.7?deps=preact@10.29.1\";\nimport { clientJs } from \"./client.ts\";\nimport { css } from \"./ui/styles.ts\";\nimport { THEMES } from \"./ui/theme.ts\";\nimport type { HomePageProps } from \"./ui/types.ts\";\nimport { HomePage } from \"./pages/home.tsx\";\nimport { HttpPage } from \"./pages/page-http.tsx\";\nimport { SqlitePage } from \"./pages/page-sqlite.tsx\";\nimport { CronPage } from \"./pages/page-cron.tsx\";\nimport { EmailPage } from \"./pages/page-email.tsx\";\nimport { BlobPage } from \"./pages/page-blob.tsx\";\nimport { UiPage } from \"./pages/page-ui.tsx\";\n\n// nav items ------------------------------------------------------------------\n\nconst NAV = [\n { page: \"home\", icon: \"⌂\", label: \"Home\" },\n { page: \"http\", icon: \"◈\", label: \"HTTP Trigger\" },\n { page: \"sqlite\", icon: \"⊙\", label: \"SQLite\" },\n { page: \"cron\", icon: \"◷\", label: \"Cron Trigger\" },\n { page: \"email\", icon: \"◉\", label: \"Email Trigger\" },\n { page: \"blob\", icon: \"◫\", label: \"Blob Storage\" },\n { page: \"ui\", icon: \"◐\", label: \"UI & Themes\" },\n];\n\n// Gruvbox-colored \"vt\" monogram favicon (SVG encoded for data URI)\nconst FAVICON = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%23282828'/%3E%3Ctext x='16' y='22' font-family='monospace' font-size='14' font-weight='bold' fill='%23fabd2f' text-anchor='middle'%3Evt%3C/text%3E%3C/svg%3E`;\n\n// theme dropdown -------------------------------------------------------------\n\nfunction ThemeDropdown() {\n return (\n \n );\n}\n\n// sidebar nav ----------------------------------------------------------------\n\nfunction Sidebar({ valName }: { valName: string }) {\n return (\n \n );\n}\n\n// shell + export -------------------------------------------------------------\n\nfunction App({ appName, renderedAt, theme, page }: HomePageProps) {\n return (\n \n \n \n \n \n {appName} · Val Town\n \n \n \n

Diff · v196