`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_520":521,"_522":523},"routes/_app.x.$handle.$name",{"_100":99,"_32":45,"_109":90,"_27":104,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":49,"_123":124,"_125":25,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":25,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":49},"version",44,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",true,"deletedHere","path","frontend/components/Counter.tsx","latestPath","fileId","01a09cbf-66da-7600-85d1-5bcb5ec59e46","name","Counter.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n","createdAt",["D",1789368549098],"branchVersion","branchId","255405a6-055f-4761-b8d5-94d1ffe681e3","id","25f66c95-84fd-4431-a007-b1f4e010323a","co-w-zamosciu",["D",1789336184443],"deletedAt","legacyEnvVars",false,"privacy","public","httpPrivacy","description","Co dziś w Zamościu i na Roztoczu — koncerty, kino, wydarzenia","imageUrl","5dd5cdfa-b36a-42e1-a911-81ba86e3b64c","pinnedFileId","01a09cbf-66da-7600-85d1-7a5d4b41e0de","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a09aab-d118-725d-b44f-c12d328bfdc6","tursoName","25f66c9584fd4431a007b1f4e010323a","tursoHostname","25f66c9584fd4431a007b1f4e010323a-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789519256886],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_108":104},"org",{"_100":99,"_101":102,"_103":104,"_18":56,"_105":106,"_107":49},"branch",{"_13":89,"_32":90,"_43":42,"_91":44,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":45,"_98":99},"isOwned",150,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dominik1","handle","displayName","Dominik","avatar","","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":515,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":25,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":516,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":517,"_84":518,"_86":519,"_88":49},"tree",[202,219,222,235,237,239,240,241],"files",[202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241],"counts",{"_191":63,"_192":144,"_193":63,"_194":195,"_196":197},"contents",[130,131,132,133,134,135,136,137],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":185,"_32":186,"_30":187,"_140":-5,"_41":42,"_40":188,"_142":25,"_38":189,"_13":63,"_34":166,"_36":-5,"_24":49,"_147":-5,"_27":190},{"_43":179,"_32":180,"_30":181,"_140":-5,"_41":42,"_40":182,"_142":25,"_38":183,"_13":63,"_34":166,"_36":-5,"_24":49,"_147":-5,"_27":184},{"_43":174,"_32":175,"_30":176,"_140":-5,"_41":42,"_40":144,"_142":25,"_38":177,"_13":63,"_34":166,"_36":-5,"_24":49,"_147":-5,"_27":178},{"_43":168,"_32":169,"_30":170,"_140":-5,"_41":42,"_40":171,"_142":25,"_38":172,"_13":63,"_34":166,"_36":-5,"_24":49,"_147":-5,"_27":173},{"_43":161,"_32":162,"_30":163,"_140":-5,"_41":42,"_40":164,"_142":25,"_38":165,"_13":63,"_34":166,"_36":-5,"_24":49,"_147":-5,"_27":167},{"_43":155,"_32":156,"_30":157,"_140":-5,"_41":42,"_40":144,"_142":25,"_38":158,"_13":63,"_34":20,"_36":159,"_24":49,"_147":-5,"_27":160},{"_43":149,"_32":150,"_30":151,"_140":-5,"_41":42,"_40":144,"_142":49,"_38":152,"_13":63,"_34":20,"_36":153,"_24":49,"_147":-5,"_27":154},{"_43":138,"_32":139,"_30":58,"_140":-5,"_41":42,"_40":141,"_142":49,"_38":143,"_13":144,"_34":145,"_36":146,"_24":49,"_147":45,"_27":148},"1d30cf87-ed54-472c-ada2-b9947d24607b","index.ts","parentId",28,"latest",["D",1789368375905],1,"http","import { immutableFileUrl, parseVal, readFile, serveFile, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { requirePin } from \"./backend/auth.ts\";\nimport {\n getEvent,\n getMeta,\n hideEvent,\n initDb,\n listEvents,\n listSources,\n saveSubscription,\n upsertEvents,\n} from \"./backend/db.ts\";\nimport { fetchText, pageText } from \"./backend/fetch.ts\";\nimport { toIcs } from \"./backend/ics.ts\";\nimport { ICONS } from \"./backend/icons.ts\";\nimport { extractEvents } from \"./backend/llm.ts\";\nimport { addDays, clean, isDate, isTime, warsawToday } from \"./backend/normalize.ts\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { type EventsResponse, isCategory, type ScrapedEvent } from \"./shared/types.ts\";\n\nawait initDb();\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\napp.get(\"/favicon.svg\", () => serveFile(\"/frontend/favicon.svg\", import.meta.url));\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.get(\"/icons/:name\", (c) => {\n const base64 = ICONS[c.req.param(\"name\")];\n if (!base64) return c.notFound();\n const bytes = Uint8Array.from(atob(base64), (ch) => ch.charCodeAt(0));\n return c.body(bytes, 200, { \"Content-Type\": \"image/png\", \"Cache-Control\": \"public, max-age=604800\" });\n});\n\n// Lets the app be installed on the phone's home screen\napp.get(\"/manifest.webmanifest\", (c) =>\n c.json({\n name: \"Co w Zamościu\",\n short_name: \"Co w Zamościu\",\n description: \"Koncerty, kino i wydarzenia w Zamościu i na Roztoczu\",\n lang: \"pl\",\n start_url: \"/\",\n display: \"standalone\",\n theme_color: \"#17203a\",\n background_color: \"#17203a\",\n icons: [\n { src: \"/icons/icon-192.png\", sizes: \"192x192\", type: \"image/png\" },\n { src: \"/icons/icon-512.png\", sizes: \"512x512\", type: \"image/png\" },\n { src: \"/icons/icon-maskable-512.png\", sizes: \"512x512\", type: \"image/png\", purpose: \"maskable\" },\n ],\n }, 200, { \"Content-Type\": \"application/manifest+json\" }));\n\n// The service worker has to be served from the root to control the whole app.\n// The version stamp changes its bytes on every deploy, so phones pick up updates.\napp.get(\"/sw.js\", async (c) => {\n const source = await readFile(\"/frontend/sw.js\", import.meta.url);\n const version = immutableFileUrl(\"/frontend/sw.js\").split(\"/\")[2];\n return c.body(`const VERSION = ${JSON.stringify(version)};\\n${source}`, 200, {\n \"Content-Type\": \"text/javascript; charset=utf-8\",\n \"Cache-Control\": \"no-cache\",\n });\n});\n\n// ---------- public API ----------\n\napp.get(\"/api/events\", async (c) => {\n const today = warsawToday();\n const from = isDate(c.req.query(\"from\")) ? c.req.query(\"from\")! : today;\n let to = isDate(c.req.query(\"to\")) ? c.req.query(\"to\")! : addDays(from, 14);\n if (to < from) to = from;\n if (to > addDays(from, 62)) to = addDays(from, 62);\n const body: EventsResponse = {\n events: await listEvents(from, to),\n today,\n updatedAt: Number(await getMeta(\"last_scrape\")) || null,\n vapidPublicKey: Deno.env.get(\"VAPID_PUBLIC_KEY\") ?? null,\n };\n return c.json(body, 200, { \"Cache-Control\": \"no-store\" });\n});\n\napp.get(\"/ics/:id\", async (c) => {\n const event = await getEvent(Number(c.req.param(\"id\")));\n if (!event) return c.notFound();\n return c.body(toIcs(event), 200, {\n \"Content-Type\": \"text/calendar; charset=utf-8\",\n \"Content-Disposition\": `attachment; filename=\"wydarzenie-${event.id}.ics\"`,\n });\n});\n\napp.get(\"/api/status\", async (c) =>\n c.json({ sources: await listSources(), updatedAt: Number(await getMeta(\"last_scrape\")) || null }));\n\n// Only real push services, so the server never posts to arbitrary URLs\nconst PUSH_HOST =\n /^(fcm\\.googleapis\\.com|android\\.googleapis\\.com|updates\\.push\\.services\\.mozilla\\.com|[\\w.-]+\\.push\\.apple\\.com|[\\w.-]+\\.notify\\.windows\\.com)$/;\n\napp.post(\"/api/push\", async (c) => {\n const body = await c.req.json().catch(() => null);\n const endpoint = body?.subscription?.endpoint;\n const p256dh = body?.subscription?.keys?.p256dh;\n const auth = body?.subscription?.keys?.auth;\n let validHost = false;\n try {\n const url = new URL(endpoint);\n validHost = url.protocol === \"https:\" && PUSH_HOST.test(url.hostname);\n } catch {\n // not a URL\n }\n if (!validHost || typeof p256dh !== \"string\" || typeof auth !== \"string\") {\n return c.json({ error: \"Nieprawidłowa subskrypcja powiadomień.\" }, 400);\n }\n const favorites = Array.isArray(body?.favorites)\n ? body.favorites.filter((id: unknown) => Number.isInteger(id)).slice(0, 200)\n : [];\n await saveSubscription(endpoint, p256dh, auth, favorites);\n return c.json({ ok: true });\n});\n\n// ---------- PIN-protected API ----------\n\napp.use(\"/api/admin/*\", requirePin);\n\napp.post(\"/api/admin/pin\", (c) => c.json({ ok: true }));\n\n// Poster text, a Facebook post or a link → pre-filled event form\napp.post(\"/api/admin/extract\", async (c) => {\n const body = await c.req.json().catch(() => null);\n const text = typeof body?.text === \"string\" ? body.text.slice(0, 8000) : \"\";\n const url = typeof body?.url === \"string\" && /^https?:\\/\\//.test(body.url) ? body.url : null;\n let input = text;\n if (url) {\n try {\n input = `${text}\\n\\nStrona ${url}:\\n${pageText(await fetchText(url), url, 10_000)}`;\n } catch (err) {\n if (!text) return c.json({ error: `Nie udało się pobrać strony (${(err as Error).message}).` }, 422);\n }\n }\n if (!input.trim()) return c.json({ error: \"Wklej tekst albo link.\" }, 400);\n const events = await extractEvents(input, {\n context: \"Tekst wkleił użytkownik: plakat, post z Facebooka albo strona wydarzenia.\" +\n (url ? ` Link do wydarzenia: ${url}` : \"\"),\n });\n return c.json({ events: events.map((e) => ({ ...e, url: e.url ?? url })) });\n});\n\nfunction parseEvent(body: Record | null): ScrapedEvent | null {\n if (!body || typeof body.title !== \"string\" || !body.title.trim() || !isDate(body.date)) return null;\n const text = (v: unknown, max: number) => (typeof v === \"string\" ? clean(v, max) : null);\n return {\n title: clean(body.title, 140)!,\n date: body.date,\n endDate: isDate(body.endDate) && body.endDate > body.date ? body.endDate : null,\n time: isTime(body.time) ? body.time : null,\n place: text(body.place, 120),\n town: text(body.town, 60) ?? \"Zamość\",\n category: isCategory(body.category) ? body.category : \"inne\",\n price: text(body.price, 60),\n imageUrl: null,\n url: typeof body.url === \"string\" && /^https?:\\/\\//.test(body.url) ? body.url : null,\n description: text(body.description, 600),\n showtimes: null,\n };\n}\n\napp.post(\"/api/admin/events\", async (c) => {\n const event = parseEvent(await c.req.json().catch(() => null));\n if (!event) return c.json({ error: \"Podaj co najmniej tytuł i datę.\" }, 400);\n await upsertEvents(\"manual\", 5, [event], true);\n return c.json({ ok: true });\n});\n\napp.post(\"/api/admin/events/:id/hide\", async (c) => {\n await hideEvent(Number(c.req.param(\"id\")));\n return c.json({ ok: true });\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","label",[139],"6f9cf8c5-cc6d-47ba-b106-6d7e24b7f39b","README.md","01a09cbf-66da-7600-85d1-77f7ef9c20ff",["D",1789336184443],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"root.tsx\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n root.tsx ← HTML shell (stamps immutable asset URLs)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[150],"42cea312-1aaf-4642-b2da-e3bba05e69b9","CHANGELOG.md","01a09cbf-66da-7600-85d1-72302458f448",["D",1789336184443],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n

Diff · v44