`, 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",{"_247":248,"_249":250},"routes/_app.x.$handle.$name",{"_100":99,"_32":45,"_109":90,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":-5,"_122":-5,"_123":25,"_124":125,"_126":59,"_127":-5,"_128":-5,"_129":130},"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":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_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":25},"version",7,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","email.ts","latestPath","fileId","eb00bad6-a602-11f1-a11e-1607ee4eb77e","name","fileType","email","content","/**\n * Odbiornik poczty. Uruchamia sie, gdy ktos wysle maila na adres tego vala.\n *\n * Co robi po kolei:\n * 1. wyciaga z maila pierwszy zalacznik bedacy obrazkiem\n * 2. pyta Claude, czy to czarny kot, i prosi o komentarz\n * 3. zapisuje zdjecie i ocene w magazynie plikow\n * 4. kasuje najstarsze wpisy, zeby zmiescic sie w limicie darmowego planu\n *\n * Adresu email tego vala NIE wpisujemy tu recznie. Nadaje go platforma\n * i odczytuje sie go z API (pole links.email).\n */\n\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport Anthropic from \"npm:@anthropic-ai/sdk\";\n\n/**\n * Darmowy plan Val Town daje 10 MB magazynu na CALE konto, a zdjecie\n * z telefonu wazy 2-5 MB. Dlatego trzymamy tylko kilka najnowszych.\n * To nie jest optymalizacja na zapas, tylko twardy limit platformy.\n */\nconst MAKS_ZDJEC = 6;\n\n/**\n * Claude przyjmuje tylko te formaty obrazow. Wazne w praktyce: iPhone\n * domyslnie wysyla HEIC, ktorego na tej liscie nie ma. Takie zdjecie\n * i tak zapiszemy, ale bez oceny, z jawna informacja dlaczego.\n */\nconst FORMATY_DLA_AI = [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/webp\"];\n\nexport default async function (e: Email) {\n console.log(`Mail od ${e.from}, temat: ${e.subject ?? \"(brak)\"}`);\n console.log(`Zalacznikow: ${e.attachments?.length ?? 0}`);\n\n const zalaczniki = e.attachments ?? [];\n const obrazek = zalaczniki.find((p) => (p.type ?? \"\").startsWith(\"image/\"));\n\n if (!obrazek) {\n // Glosno, nie po cichu. Bez tego wpisu w logach nie wiedzialbys,\n // czy mail nie doszedl, czy doszedl bez zdjecia.\n console.log(\"Brak zalacznika bedacego obrazkiem. Nic nie zapisuje.\");\n return;\n }\n\n const bajty = new Uint8Array(await obrazek.arrayBuffer());\n console.log(`Obrazek: ${obrazek.name}, typ ${obrazek.type}, ${bajty.length} bajtow`);\n\n const ocena = FORMATY_DLA_AI.includes(obrazek.type)\n ? await ocenZdjecie(bajty, obrazek.type)\n : {\n czarny_kot: false,\n co_widac: `Format ${obrazek.type} nie jest obslugiwany przez model`,\n komentarz:\n \"Nie umiem ocenic tego formatu. Wyslij jako JPEG albo PNG (iPhone: ustawienia aparatu, format Najbardziej zgodny).\",\n };\n\n const id = Date.now().toString();\n\n // Zdjecie jako surowe bajty, opis osobno jako JSON. Dwa klucze,\n // wspolny przyrostek, dzieki czemu latwo je potem sparowac.\n await blob.set(`foto:${id}`, bajty);\n await blob.setJSON(`meta:${id}`, {\n id,\n od: e.from,\n temat: e.subject ?? \"\",\n nazwaPliku: obrazek.name,\n typ: obrazek.type,\n rozmiar: bajty.length,\n kiedy: new Date().toISOString(),\n ...ocena,\n });\n\n console.log(`Zapisano ${id}. Werdykt: czarny kot = ${ocena.czarny_kot}`);\n console.log(`Komentarz: ${ocena.komentarz}`);\n\n await zwolnijMiejsce();\n}\n\n/**\n * Pyta Claude o zdjecie i zwraca ustrukturyzowana ocene.\n *\n * Uzywamy wymuszonego formatu odpowiedzi zamiast prosic o JSON w tresci\n * polecenia. Roznica jest istotna: przy zwyklej prosbie model czasem doda\n * zdanie wstepu i parsowanie sie wywroci. Wymuszony format gwarantuje\n * ksztalt, wiec kod nizej nie musi zgadywac.\n */\nasync function ocenZdjecie(bajty: Uint8Array, typ: string) {\n const klucz = Deno.env.get(\"ANTHROPIC_API_KEY\");\n if (!klucz) {\n return {\n czarny_kot: false,\n co_widac: \"Brak klucza API\",\n komentarz: \"Nie ustawiono ANTHROPIC_API_KEY w zmiennych srodowiskowych vala.\",\n };\n }\n\n const client = new Anthropic({ apiKey: klucz });\n\n try {\n const odpowiedz = await client.messages.create({\n model: \"claude-opus-5\",\n max_tokens: 1024,\n // effort low, bo to prosta klasyfikacja. Domyslne ustawienie jest\n // wyzsze i kosztowaloby wiecej bez zysku na tym zadaniu.\n output_config: { effort: \"low\" },\n system:\n \"Ogladasz zdjecia przyslane do galerii kota o imieniu Marlenka. \" +\n \"Marlenka jest CZARNYM kotem. \" +\n \"Odpowiadasz wylacznie obiektem JSON z polami: \" +\n \"czarny_kot (true/false), co_widac (krotki opis po polsku), \" +\n \"komentarz (jedno zdanie po polsku). \" +\n \"Jesli na zdjeciu jest czarny kot, komentarz ma brzmiec dokladnie: \" +\n \"\\\"Jaka piekna Marlenka!\\\". \" +\n \"Jesli to kot innego koloru, napisz cos milego, ale zaznacz, ze to nie Marlenka. \" +\n \"Jesli to nie kot, powiedz zartobliwie, co widzisz. \" +\n \"Zadnego tekstu poza obiektem JSON.\",\n messages: [\n {\n role: \"user\",\n content: [\n {\n type: \"image\",\n source: { type: \"base64\", media_type: typ as any, data: doBase64(bajty) },\n },\n { type: \"text\", text: \"Czy to czarny kot? Odpowiedz obiektem JSON.\" },\n ],\n },\n ],\n });\n\n const tekst = odpowiedz.content\n .filter((b: any) => b.type === \"text\")\n .map((b: any) => b.text)\n .join(\"\")\n .trim();\n\n // Model poproszony o czysty JSON zwykle go daje, ale zabezpieczamy sie\n // na wypadek otoczenia go markdownem.\n const wyciety = tekst.replace(/^```(?:json)?/i, \"\").replace(/```$/, \"\").trim();\n const wynik = JSON.parse(wyciety);\n\n return {\n czarny_kot: Boolean(wynik.czarny_kot),\n co_widac: String(wynik.co_widac ?? \"\"),\n komentarz: String(wynik.komentarz ?? \"\"),\n };\n } catch (blad) {\n // Blad zapisujemy jako tresc oceny, zeby byl widoczny na stronie.\n // Cicha porazka wygladalaby jak zdjecie bez komentarza i szukalbys\n // przyczyny w zlym miejscu.\n console.error(\"Blad przy ocenie:\", blad);\n return {\n czarny_kot: false,\n co_widac: \"Nie udalo sie ocenic\",\n komentarz: `Blad po stronie AI: ${String(blad).slice(0, 200)}`,\n };\n }\n}\n\n/**\n * Zamienia bajty na base64.\n *\n * Naiwna wersja (btoa(String.fromCharCode(...bajty))) przewraca sie na\n * wiekszych plikach, bo przekazanie miliona argumentow do funkcji przepelnia\n * stos. Dlatego przerabiamy porcjami.\n */\nfunction doBase64(bajty: Uint8Array): string {\n let tekst = \"\";\n const PORCJA = 0x8000;\n for (let i = 0; i < bajty.length; i += PORCJA) {\n tekst += String.fromCharCode(...bajty.subarray(i, i + PORCJA));\n }\n return btoa(tekst);\n}\n\n/**\n * Kasuje najstarsze zdjecia, zostawiajac MAKS_ZDJEC najnowszych.\n * Klucze zawieraja znacznik czasu, wiec sortowanie po nazwie jest\n * sortowaniem po dacie.\n */\nasync function zwolnijMiejsce() {\n const wpisy = await blob.list(\"meta:\");\n if (wpisy.length <= MAKS_ZDJEC) return;\n\n const posortowane = wpisy.sort((a, b) => a.key.localeCompare(b.key));\n const doUsuniecia = posortowane.slice(0, posortowane.length - MAKS_ZDJEC);\n\n for (const wpis of doUsuniecia) {\n const id = wpis.key.replace(\"meta:\", \"\");\n await blob.delete(wpis.key);\n try {\n await blob.delete(`foto:${id}`);\n } catch {\n // Brak pliku przy istniejacym opisie to nie powod do przerywania.\n }\n console.log(`Usunieto stary wpis ${id}, zeby zwolnic miejsce.`);\n }\n}\n","/**\n * Odbiornik poczty. Uruchamia sie, gdy ktos wysle maila na adres tego vala.\n *\n * Co robi po kolei:\n * 1. wyciaga z maila pierwszy zalacznik bedacy obrazkiem\n * 2. pyta Claude, czy to czarny kot, i prosi o komentarz\n * 3. zapisuje zdjecie i ocene w magazynie plikow\n * 4. kasuje najstarsze wpisy, zeby zmiescic sie w limicie darmowego planu\n *\n * Adresu email tego vala NIE wpisujemy tu recznie. Nadaje go platforma\n * i odczytuje sie go z API (pole links.email).\n */\n\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport Anthropic from \"npm:@anthropic-ai/sdk\";\n\n/**\n * Darmowy plan Val Town daje 10 MB magazynu na CALE konto, a zdjecie\n * z telefonu wazy 2-5 MB. Dlatego trzymamy tylko kilka najnowszych.\n * To nie jest optymalizacja na zapas, tylko twardy limit platformy.\n */\nconst MAKS_ZDJEC = 6;\n\n/**\n * Claude przyjmuje tylko te formaty obrazow. Wazne w praktyce: iPhone\n * domyslnie wysyla HEIC, ktorego na tej liscie nie ma. Takie zdjecie\n * i tak zapiszemy, ale bez oceny, z jawna informacja dlaczego.\n */\nconst FORMATY_DLA_AI = [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/webp\"];\n\nexport default async function (e: Email) {\n console.log(`Mail od ${e.from}, temat: ${e.subject ?? \"(brak)\"}`);\n console.log(`Zalacznikow: ${e.attachments?.length ?? 0}`);\n\n const zalaczniki = e.attachments ?? [];\n const obrazek = zalaczniki.find((p) => (p.type ?? \"\").startsWith(\"image/\"));\n\n if (!obrazek) {\n // Glosno, nie po cichu. Bez tego wpisu w logach nie wiedzialbys,\n // czy mail nie doszedl, czy doszedl bez zdjecia.\n console.log(\"Brak zalacznika bedacego obrazkiem. Nic nie zapisuje.\");\n return;\n }\n\n const bajty = new Uint8Array(await obrazek.arrayBuffer());\n console.log(`Obrazek: ${obrazek.name}, typ ${obrazek.type}, ${bajty.length} bajtow`);\n\n const ocena = FORMATY_DLA_AI.includes(obrazek.type)\n ? await ocenZdjecie(bajty, obrazek.type)\n : {\n czarny_kot: false,\n co_widac: `Format ${obrazek.type} nie jest obslugiwany przez model`,\n komentarz:\n \"Nie umiem ocenic tego formatu. Wyslij jako JPEG albo PNG (iPhone: ustawienia aparatu, format Najbardziej zgodny).\",\n };\n\n const id = Date.now().toString();\n\n // Zdjecie jako surowe bajty, opis osobno jako JSON. Dwa klucze,\n // wspolny przyrostek, dzieki czemu latwo je potem sparowac.\n await blob.set(`foto:${id}`, bajty);\n await blob.setJSON(`meta:${id}`, {\n id,\n od: e.from,\n temat: e.subject ?? \"\",\n nazwaPliku: obrazek.name,\n typ: obrazek.type,\n rozmiar: bajty.length,\n kiedy: new Date().toISOString(),\n ...ocena,\n });\n\n console.log(`Zapisano ${id}. Werdykt: czarny kot = ${ocena.czarny_kot}`);\n console.log(`Komentarz: ${ocena.komentarz}`);\n\n await zwolnijMiejsce();\n}\n\n/**\n * Pyta Claude o zdjecie i zwraca ustrukturyzowana ocene.\n *\n * Uzywamy wymuszonego formatu odpowiedzi zamiast prosic o JSON w tresci\n * polecenia. Roznica jest istotna: przy zwyklej prosbie model czasem doda\n * zdanie wstepu i parsowanie sie wywroci. Wymuszony format gwarantuje\n * ksztalt, wiec kod nizej nie musi zgadywac.\n */\nasync function ocenZdjecie(bajty: Uint8Array, typ: string) {\n const klucz = Deno.env.get(\"ANTHROPIC_API_KEY\");\n if (!klucz) {\n return {\n czarny_kot: false,\n co_widac: \"Brak klucza API\",\n komentarz: \"Nie ustawiono ANTHROPIC_API_KEY w zmiennych srodowiskowych vala.\",\n };\n }\n\n const client = new Anthropic({ apiKey: klucz });\n\n try {\n const odpowiedz = await client.messages.create({\n model: \"claude-opus-5\",\n max_tokens: 1024,\n // effort low, bo to prosta klasyfikacja. Domyslne ustawienie jest\n // wyzsze i kosztowaloby wiecej bez zysku na tym zadaniu.\n output_config: { effort: \"low\" },\n system:\n \"Ogladasz zdjecia przyslane do galerii kota o imieniu Marlenka. \" +\n \"Marlenka jest CZARNYM kotem. \" +\n \"Odpowiadasz wylacznie obiektem JSON z polami: \" +\n \"czarny_kot (true/false), co_widac (krotki opis po polsku), \" +\n \"komentarz (jedno zdanie po polsku). \" +\n \"Jesli na zdjeciu jest CZARNY kot, komentarz ma brzmiec doslownie: \" +\n \"\\\"O jaka piekna Marlenka!\\\". \" +\n \"Jesli to kot, ale INNEGO koloru niz czarny, komentarz ma brzmiec doslownie: \" +\n \"\\\"Co to za podrabianiec!!\\\". \" +\n \"Jesli to w ogole nie kot, powiedz zartobliwie, co widzisz. \" +\n \"Zadnego tekstu poza obiektem JSON.\",\n messages: [\n {\n role: \"user\",\n content: [\n {\n type: \"image\",\n source: { type: \"base64\", media_type: typ as any, data: doBase64(bajty) },\n },\n { type: \"text\", text: \"Czy to czarny kot? Odpowiedz obiektem JSON.\" },\n ],\n },\n ],\n });\n\n const tekst = odpowiedz.content\n .filter((b: any) => b.type === \"text\")\n .map((b: any) => b.text)\n .join(\"\")\n .trim();\n\n // Model poproszony o czysty JSON zwykle go daje, ale zabezpieczamy sie\n // na wypadek otoczenia go markdownem.\n const wyciety = tekst.replace(/^```(?:json)?/i, \"\").replace(/```$/, \"\").trim();\n const wynik = JSON.parse(wyciety);\n\n return {\n czarny_kot: Boolean(wynik.czarny_kot),\n co_widac: String(wynik.co_widac ?? \"\"),\n komentarz: String(wynik.komentarz ?? \"\"),\n };\n } catch (blad) {\n // Blad zapisujemy jako tresc oceny, zeby byl widoczny na stronie.\n // Cicha porazka wygladalaby jak zdjecie bez komentarza i szukalbys\n // przyczyny w zlym miejscu.\n console.error(\"Blad przy ocenie:\", blad);\n return {\n czarny_kot: false,\n co_widac: \"Nie udalo sie ocenic\",\n komentarz: `Blad po stronie AI: ${String(blad).slice(0, 200)}`,\n };\n }\n}\n\n/**\n * Zamienia bajty na base64.\n *\n * Naiwna wersja (btoa(String.fromCharCode(...bajty))) przewraca sie na\n * wiekszych plikach, bo przekazanie miliona argumentow do funkcji przepelnia\n * stos. Dlatego przerabiamy porcjami.\n */\nfunction doBase64(bajty: Uint8Array): string {\n let tekst = \"\";\n const PORCJA = 0x8000;\n for (let i = 0; i < bajty.length; i += PORCJA) {\n tekst += String.fromCharCode(...bajty.subarray(i, i + PORCJA));\n }\n return btoa(tekst);\n}\n\n/**\n * Kasuje najstarsze zdjecia, zostawiajac MAKS_ZDJEC najnowszych.\n * Klucze zawieraja znacznik czasu, wiec sortowanie po nazwie jest\n * sortowaniem po dacie.\n */\nasync function zwolnijMiejsce() {\n const wpisy = await blob.list(\"meta:\");\n if (wpisy.length <= MAKS_ZDJEC) return;\n\n const posortowane = wpisy.sort((a, b) => a.key.localeCompare(b.key));\n const doUsuniecia = posortowane.slice(0, posortowane.length - MAKS_ZDJEC);\n\n for (const wpis of doUsuniecia) {\n const id = wpis.key.replace(\"meta:\", \"\");\n await blob.delete(wpis.key);\n try {\n await blob.delete(`foto:${id}`);\n } catch {\n // Brak pliku przy istniejacym opisie to nie powod do przerywania.\n }\n console.log(`Usunieto stary wpis ${id}, zeby zwolnic miejsce.`);\n }\n}\n","createdAt",["D",1788266963361],"branchVersion","branchId","809e46e6-0e44-43fc-9e41-5e7fa4810485","id","e4d13f93-d252-4c55-a21a-6bd2d097e784","marlenka",["D",1788266344374],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Galeria zdjec kotow z mejla, oceniana przez Claude","imageUrl","68182d7f-e015-4c52-be93-35158f503cd7","pinnedFileId","01a05cfa-f041-726f-9bb7-b53f02988ce7","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a05cef-3c1e-72a8-bfe8-2fddf7c0fce2","tursoName","e4d13f93d2524c55a21a6bd2d097e784","tursoHostname","e4d13f93d2524c55a21a6bd2d097e784-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789480235853],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_108":104},"org",{"_100":99,"_101":102,"_103":104,"_18":55,"_105":106,"_107":25},"branch",{"_13":89,"_32":90,"_43":42,"_91":44,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":45,"_98":99},"isOwned",18,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dominikmurasicki","handle","displayName","Dominik Murasicki","avatar","https://lh3.googleusercontent.com/a/ACg8ocIXcqRXtSdrlKoCSThAVgKUT87vrUycop4YyjLeW9JuAsvG8E80=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":242,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":243,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":244,"_84":245,"_86":246,"_88":25},"tree",[179,185,186,187,188],"files",[179,180,181,182,183,184,185,186,187,188],"counts",{"_169":63,"_170":142,"_171":63,"_172":173,"_174":175},"contents",[131,132,133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":163,"_32":164,"_30":165,"_138":-5,"_41":42,"_40":142,"_140":59,"_38":166,"_13":63,"_33":167,"_35":-5,"_24":25,"_145":-5,"_27":168},{"_43":157,"_32":158,"_30":159,"_138":-5,"_41":42,"_40":142,"_140":59,"_38":160,"_13":63,"_33":20,"_35":161,"_24":25,"_145":-5,"_27":162},{"_43":151,"_32":152,"_30":153,"_138":-5,"_41":42,"_40":142,"_140":59,"_38":154,"_13":63,"_33":20,"_35":155,"_24":25,"_145":-5,"_27":156},{"_43":148,"_32":28,"_30":31,"_138":-5,"_41":42,"_40":14,"_140":25,"_38":149,"_13":142,"_33":34,"_35":37,"_24":25,"_145":-5,"_27":150},{"_43":136,"_32":137,"_30":57,"_138":-5,"_41":42,"_40":139,"_140":25,"_38":141,"_13":142,"_33":143,"_35":144,"_24":25,"_145":146,"_27":147},"ddf59daa-6e46-4b7a-978d-b0664f27f48e","index.ts","parentId",3,"latest",["D",1788266749220],1,"http","/**\n * Serwer aplikacji. Trzy zadania:\n * GET / strona z galeria\n * GET /api/photos lista zdjec z ocenami, jako JSON\n * GET /photo/:id pojedynczy obrazek, prosto z magazynu\n *\n * Zdjec nie wystawiamy jako plikow statycznych, bo nie leza na dysku.\n * Val Town nie ma dysku; siedza w magazynie blobow i ta sciezka je stamtad\n * wyciaga i oddaje przegladarce z wlasciwym typem zawartosci.\n */\n\nimport { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Powloka HTML, nigdy nie cache'owana.\napp.get(\"/\", (c) => c.html(Root()));\n\n// Pliki frontendu pod adresami z numerem wersji, cache'owane na zawsze.\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// Podglad zrodla.\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n/**\n * Lista zdjec z ocenami, najnowsze pierwsze.\n *\n * Klucze zawieraja znacznik czasu, wiec sortowanie malejaco po nazwie\n * daje kolejnosc od najnowszego. Zadnej bazy danych do tego nie potrzeba.\n */\napp.get(\"/api/photos\", async (c) => {\n const wpisy = await blob.list(\"meta:\");\n const posortowane = wpisy.sort((a, b) => b.key.localeCompare(a.key));\n\n const zdjecia = [];\n for (const wpis of posortowane) {\n const opis = await blob.getJSON(wpis.key);\n if (opis) zdjecia.push(opis);\n }\n\n return c.json(zdjecia);\n});\n\n/**\n * Pojedynczy obrazek.\n *\n * Typ zawartosci bierzemy z zapisanego opisu, a nie zgadujemy z rozszerzenia.\n * Naglowek cache jest agresywny, bo obrazek pod danym identyfikatorem\n * nigdy sie nie zmienia: nowe zdjecie dostaje nowy identyfikator.\n */\napp.get(\"/photo/:id\", async (c) => {\n const id = c.req.param(\"id\");\n try {\n const odpowiedz = await blob.get(`foto:${id}`);\n const bajty = await odpowiedz.arrayBuffer();\n const opis: any = await blob.getJSON(`meta:${id}`);\n\n return new Response(bajty, {\n headers: {\n \"Content-Type\": opis?.typ ?? \"image/jpeg\",\n \"Cache-Control\": \"public, max-age=31536000, immutable\",\n },\n });\n } catch {\n return c.notFound();\n }\n});\n\n// Bez tej linii kazdy blad zamienia sie w gole \"Internal Server Error\"\n// i tracisz caly slad stosu w logach.\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label","marlenka-galeria",[137],"639fdb0b-ccaa-4e6a-8a5c-44eb272db879",["D",1788266963361],[28],"6e6d52f6-52dd-4756-b1c8-1f4161c387d2","README.md","01a05cfa-f041-726f-9bb7-b0a756b5c2bb",["D",1788266344374],"# 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",[152],"60338e85-0b1a-4f06-ac0c-a0aac3e324f9","CHANGELOG.md","01a05cfa-f041-726f-9bb7-ac96b5df0968",["D",1788266344374],"# 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 · v7