`, 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",{"_271":272,"_273":274},"routes/_app.x.$handle.$name",{"_99":98,"_32":44,"_108":89,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":58,"_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",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",10,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","01a09cf0-34c2-729a-80d0-523a4f41590f","name","fileType","content","# 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","# In Good Company — Marc’s Singapore\n\nLive guide: https://marcs-singapore.val.run/\n\nA personal collection of Singapore recommendations, with an interactive map, friends’ original advice, a private notebook and shared comments.\n\n## What is live\n\n- 73 entries and 82 attributed recommendations from six personal emails.\n- 30 dining entries, 9 bars, 5 outings, 11 escapes, 13 shops and 5 practical tips.\n- 44 mapped entries: 34 in Singapore and 10 regional destinations. Entries at the same building share a marker with a place chooser.\n- Search, category/person/neighbourhood filters, map/list views, and responsive place details.\n- Val Town sign-in. Private saved/visited lists and notes are scoped to each account. Comments are visible to everyone with the guide link; their author or Marc can remove them. Marc can add places.\n- Recommendation data and user content live in the project’s SQLite database. There is no email account connection or inbox access in the deployed app.\n- Only Marc’s signed-in session receives original Gmail message links. Email addresses, signatures, contact details and unrelated conversations are not published.\n\nThe guide is publicly readable and requests no search-engine indexing, matching the existing launcher’s approach. Noindex is not an access restriction.\n\n## Hosting\n\nVal Town project: marc1/in-good-company\n\nHTTP entry: index.ts. Frontend assets use Val Town’s immutable versioned URLs. The /source route opens the project source. The Sites launcher’s Singapore card now opens the live guide; its other links remain as before.\n\nThe UI uses React 18.2, Twind, and Leaflet 1.9.4. SVG illustrations are decorative original drawings rather than venue photography. The map uses OpenStreetMap tiles with visible attribution. Account sessions use Val Town’s OAuth middleware; tokens never reach the client response.\n\n## Map and content notes\n\nThe map now has a definite responsive height, waits for layout before initializing and refreshes after resizing. This fixes the original zero-height container bug. Pins follow active filters and open the corresponding recommendation.\n\nLocations are approximate building, venue, park or destination points. Chains without a selected branch, online services, and ambiguous locations are left without guessed pins. The location note on each entry explains this; directions and venue websites remain available. Prices and planning tips are attributed to the original email, not presented as live menus or opening hours.\n\nA one-time, cached OpenStreetMap location lookup was performed using an identified client at no more than one request every 1.2 seconds. Geocoding is not called by website visitors. Any future use of the public Nominatim service must follow its [usage policy](https://operations.osmfoundation.org/policies/nominatim/): identify the app, cache responses, stay within the shared request limit, and do not use it for autocomplete.\n\n## Validation\n\n- The production page and data endpoint return HTTP 200; the launcher returns 200 and contains the new guide link.\n- Browser verification: map tiles and pins render; pin selection opens the correct place; search/category filtering updates pins; mobile map height is 358px at a 390px viewport without horizontal overflow; desktop map height is 673px.\n- Production rejects unauthenticated writes (401) and cross-origin writes (403). Client console has no errors. Server logs show only a dependency deprecation warning.\n- Local integration checks exercise the actual production handlers against a temporary SQLite database: private-note and notebook isolation, note removal, comment visibility and moderation, owner-only place creation, and input limits all pass. Platform OAuth is stubbed only in this local test.\n- The live sign-in link reaches the Val Town login page. Completing a signed-in browser session requires the account holder’s login and was not performed during deployment.\n\n## Local maintenance\n\nRun the local preview with node preview-server.cjs and open http://127.0.0.1:4317/. It is read-only and uses the local content/seed.json snapshot. Production user data is never written by this preview.\n\nRun node check-source.cjs for syntax checks and node check-backend.cjs for the integration checks described above. Both run locally; the latter uses a disposable in-memory database.\n\nThe content directory is a local import snapshot with private source references; do not upload it as a public asset or commit it to a public repository. The one-time build/refinement scripts document the import work and are not the production data store. Make future content changes through the app or explicitly scoped SQLite updates; do not rerun the initial seed over newer content.\n","createdAt",["D",1789341639223],"branchVersion","branchId","486e705c-045f-4c65-82da-a04d3d617ab8","id","6ce853b8-4cca-404e-8de5-b08044ea87f6","in-good-company",["D",1789339382932],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Marc’s Singapore guide, from people he trusts","imageUrl","09d0017f-b431-4bfe-98be-204d22547721","pinnedFileId","01a09cf0-34c2-729a-80d0-57a4a755a616","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019eb420-ab29-777b-a6b0-b715c4bf52ff","tursoName","6ce853b84cca404e8de5b08044ea87f6","tursoHostname","6ce853b84cca404e8de5b08044ea87f6-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789519256886],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_107":103},"org",{"_99":98,"_100":101,"_102":103,"_18":54,"_104":105,"_106":25},"branch",{"_13":88,"_32":89,"_42":41,"_90":43,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":44,"_97":98},"isOwned",37,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","marc1","handle","displayName","Marc","avatar","https://lh3.googleusercontent.com/a/ACg8ocLUz6whQ8rM9wDF8thCZsGM5Haat5v2fLvGtdw-mkhsa2Q22u96KA=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":266,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":267,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":268,"_83":269,"_85":270,"_87":25},"tree",[171,181,182,183],"files",[171,172,173,174,175,176,177,178,179,180,181,182,183],"counts",{"_161":62,"_162":140,"_163":62,"_164":165,"_166":167},"contents",[130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":155,"_32":156,"_30":157,"_136":-5,"_40":41,"_39":140,"_138":58,"_37":158,"_13":62,"_33":159,"_34":-5,"_24":25,"_143":-5,"_27":160},{"_42":149,"_32":150,"_30":151,"_136":-5,"_40":41,"_39":140,"_138":58,"_37":152,"_13":62,"_33":20,"_34":153,"_24":25,"_143":-5,"_27":154},{"_42":146,"_32":28,"_30":31,"_136":-5,"_40":41,"_39":14,"_138":58,"_37":147,"_13":140,"_33":20,"_34":36,"_24":25,"_143":-5,"_27":148},{"_42":134,"_32":135,"_30":56,"_136":-5,"_40":41,"_39":137,"_138":58,"_37":139,"_13":140,"_33":141,"_34":142,"_24":25,"_143":144,"_27":145},"6e97bad7-8c89-4e07-b9d3-c73ce190618f","index.ts","parentId",8,"latest",["D",1789341158715],1,"http","import { Hono } from 'npm:hono@4';\nimport { parseVal, serveImmutableFile } from 'https://esm.town/v/std/utils/index.ts';\nimport { sqlite } from 'https://esm.town/v/std/sqlite/main.ts';\nimport { getOAuthUserData, oauthMiddleware } from 'https://esm.town/v/std/oauth/middleware.ts';\nimport { Root } from './frontend/root.tsx';\n\nconst OWNER = '09d0017f-b431-4bfe-98be-204d22547721';\nconst app = new Hono();\napp.use('*',async(c,next)=>{c.header('X-Robots-Tag','noindex, nofollow, noarchive, nosnippet');c.header('X-Content-Type-Options','nosniff');c.header('Referrer-Policy','strict-origin-when-cross-origin');await next();});\napp.get('/',c=>{c.header('Cache-Control','no-store');return c.html(Root());});\napp.get('/robots.txt',c=>c.text('User-agent: *\\nDisallow: /\\n'));\napp.get('/__immutable/*',c=>serveImmutableFile(c.req.path));\napp.get('/source',c=>c.redirect(parseVal().links.self.val));\napp.use('/api/*',async(c,next)=>{\n c.header('Cache-Control','private, no-store');\n if(!['GET','HEAD'].includes(c.req.method)){\n if(c.req.header('origin')!==new URL(c.req.url).origin || c.req.header('sec-fetch-site')==='cross-site')return c.json({error:'Please make this change from the guide itself.'},403);\n if(!c.req.header('content-type')?.startsWith('application/json'))return c.json({error:'Expected JSON.'},415);\n }\n const session=await getOAuthUserData(c.req.raw);\n c.set('viewer',session?.user ? {id:session.user.id,name:session.user.username||'Visitor',isOwner:session.user.id===OWNER}:null);\n if(c.req.method!=='GET'&&!c.get('viewer'))return c.json({error:'Sign in to save or comment.'},401);\n await next();\n});\napp.get('/api/bootstrap',async c=>{\n const viewer=c.get('viewer');\n const [ppl,loc,comments]=await Promise.all([\n sqlite.execute('SELECT body FROM people ORDER BY rowid'),\n sqlite.execute('SELECT body FROM places ORDER BY rowid'),\n sqlite.execute('SELECT id,place_id,user_id,author,text,created_at FROM comments WHERE deleted=0 ORDER BY created_at DESC LIMIT 1000')\n ]);\n const people=ppl.rows.map(r=>{const p=JSON.parse(String(r.body));if(!viewer?.isOwner)delete p.email;return p;});\n const places=loc.rows.map(r=>JSON.parse(String(r.body)));\n const statuses={},notes={},shared={};\n for(const r of comments.rows){(shared[String(r.place_id)]||=[]).push({id:r.id,author:r.author,text:r.text,date:r.created_at,canRemove:viewer?.isOwner||viewer?.id===r.user_id});}\n if(viewer){\n const [saved,privateNotes]=await Promise.all([\n sqlite.execute({sql:'SELECT place_id,status FROM notebook WHERE user_id=?',args:[viewer.id]}),\n sqlite.execute({sql:'SELECT id,place_id,text,created_at FROM private_notes WHERE user_id=? AND deleted=0 ORDER BY created_at',args:[viewer.id]})\n ]);\n for(const r of saved.rows)statuses[String(r.place_id)]=r.status;\n for(const r of privateNotes.rows)(notes[String(r.place_id)]||=[]).push({id:r.id,text:r.text,date:r.created_at});\n }\n return c.json({people,places,statuses,notes,comments:shared,user:viewer});\n});\nasync function body(c){\n const raw=await c.req.text();if(raw.length>6000)throw new Error('That entry is too long.');\n try{return JSON.parse(raw);}catch{throw new Error('Could not read this entry.');}\n}\nconst clean=(v,max)=>{if(typeof v!=='string'||!v.trim()||v.trim().length>max)throw new Error('Please enter text within the allowed length.');return v.trim();};\nasync function placeId(v){const id=clean(v,100);const p=await sqlite.execute({sql:'SELECT id FROM places WHERE id=?',args:[id]});if(!p.rows.length)throw new Error('This place is no longer in the guide.');return id;}\napp.post('/api/status',async c=>{\n const b=await body(c),id=await placeId(b.placeId),user=c.get('viewer');\n if(b.status!==null&&!['saved','visited'].includes(b.status))return c.json({error:'Unknown notebook status.'},400);\n if(b.status===null)await sqlite.execute({sql:'DELETE FROM notebook WHERE user_id=? AND place_id=?',args:[user.id,id]});\n else await sqlite.execute({sql:'INSERT INTO notebook(user_id,place_id,status) VALUES(?,?,?) ON CONFLICT(user_id,place_id) DO UPDATE SET status=excluded.status',args:[user.id,id,b.status]});\n return c.json({ok:true});\n});\napp.post('/api/notes',async c=>{\n const b=await body(c),id=await placeId(b.placeId),text=clean(b.text,2000);\n await sqlite.execute({sql:'INSERT INTO private_notes(id,user_id,place_id,text,created_at) VALUES(?,?,?,?,?)',args:[crypto.randomUUID(),c.get('viewer').id,id,text,new Date().toISOString()]});return c.json({ok:true});\n});\napp.post('/api/notes/remove',async c=>{\n const b=await body(c);await sqlite.execute({sql:'UPDATE private_notes SET deleted=1 WHERE id=? AND user_id=?',args:[clean(b.id,100),c.get('viewer').id]});return c.json({ok:true});\n});\napp.post('/api/comments',async c=>{\n const b=await body(c),id=await placeId(b.placeId),text=clean(b.text,2000),u=c.get('viewer');\n const recent=await sqlite.execute({sql:'SELECT count(*) AS n FROM comments WHERE user_id=? AND created_at>?',args:[u.id,new Date(Date.now()-60000).toISOString()]});\n if(Number(recent.rows[0].n)>=5)return c.json({error:'Give it a moment before adding another comment.'},429);\n await sqlite.execute({sql:'INSERT INTO comments(id,place_id,user_id,author,text,created_at) VALUES(?,?,?,?,?,?)',args:[crypto.randomUUID(),id,u.id,u.name,text,new Date().toISOString()]});return c.json({ok:true});\n});\napp.post('/api/comments/remove',async c=>{\n const b=await body(c),u=c.get('viewer');await sqlite.execute({sql:u.isOwner?'UPDATE comments SET deleted=1 WHERE id=?':'UPDATE comments SET deleted=1 WHERE id=? AND user_id=?',args:u.isOwner?[clean(b.id,100)]:[clean(b.id,100),u.id]});return c.json({ok:true});\n});\napp.post('/api/places',async c=>{\n const u=c.get('viewer');if(!u.isOwner)return c.json({error:'Only Marc can add places to this guide.'},403);\n const b=await body(c),name=clean(b.name,100),text=clean(b.note,2000),category=b.category;\n if(!['Eat','Drink','Explore','Escape','Shop','Essentials'].includes(category))return c.json({error:'Choose a category.'},400);\n const item={id:crypto.randomUUID(),name,category,area:typeof b.area==='string'&&b.area.trim()?clean(b.area,80):'To explore',setting:'Singapore',cuisine:'Marc’s discovery',price:null,lat:null,lng:null,art:category==='Drink'?'cocktail':category==='Escape'?'coast':category==='Explore'?'garden':'shophouse',tags:['Marc’s discovery'],summary:text,notes:[{person:'marc',quote:text}],locationNote:'Location to confirm · use Find on Maps'};\n await sqlite.execute({sql:'INSERT INTO places(id,body) VALUES(?,?)',args:[item.id,JSON.stringify(item)]});return c.json({ok:true,id:item.id});\n});\napp.onError((err,c)=>{const known=/allowed length|entry|no longer in the guide/.test(err.message);if(!known)console.error('Guide API error',err.message);return c.json({error:known?err.message:'The change could not be saved. Please try again.'},known?400:500);});\nexport default oauthMiddleware(app.fetch);\n\r\n","label","marcs-singapore",[135],"6de8755a-34ec-43c6-bcd5-4ffa5bb7a443",["D",1789341639223],[28],"70b7f9ca-25ae-4893-8dc3-0d3b6e8d5732","CHANGELOG.md","01a09cf0-34c2-729a-80d0-4da036befce7",["D",1789339382932],"# 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 · v10