[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_236":237,"_238":239},"routes/_app.x.$handle.$name",{"_106":105,"_37":49,"_114":92,"_32":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_26":-5,"_126":127,"_128":129,"_130":30,"_131":132,"_133":64,"_134":-5,"_135":-5,"_136":137},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_47":48,"_37":49,"_42":50,"_51":-5,"_52":30,"_53":54,"_55":54,"_56":57,"_58":59,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":30},"version",4,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","1b2b6856-6f5a-4720-a1c6-290b6bf347a7","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":33,"_38":39,"_40":41,"_42":43,"_44":14,"_45":46,"_29":30},"previous","deleted",false,"deletedHere","path","CardPreview.tsx","latestPath","fileId","ab055e10-7564-11f1-a5fb-1607ee4eb77e","name","fileType","script","content","/** @jsxImportSource npm:hono@4/jsx */\n\n/**\n * A visual mockup of how a link unfurls in a social feed, for each\n * twitter:card variant. These are approximations of the X/Twitter layout —\n * the real render is done by each platform's crawler.\n */\nexport function CardPreview({\n variant,\n domain,\n url,\n title,\n description,\n image,\n}: {\n variant: \"summary\" | \"summary_large_image\";\n domain: string;\n url: string;\n title: string;\n description: string;\n image: string;\n}) {\n if (variant === \"summary_large_image\") {\n return (\n \n $\"\"$ \n

{domain}

{title}

{description}

\n \n );\n }\n\n // summary: small square thumbnail beside the text\n return (\n \n $\"\"$ \n

{domain}

{title}

{description}

\n \n );\n}\n","createdAt",["D",1782921065148],"branchVersion","branchId","40c98fa3-0bb8-41ca-9387-d8a4628fb57e","id","70cb3497-f125-4417-b568-23271f812949","og-card-demo",["D",1782920987381],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Demo: summary vs summary_large_image OG/Twitter card previews","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c0239427-e00f-4148-05e5-9ae43f5d9900/square512?exp=1789590280&sig=e37e4456a17c04cebf3aca961f7fe10c032e30a75aa023e7e53aa1b1022e703e","e11b29b4-b61d-4f5b-b211-2caff2e4f525","pinnedFileId","019f1e5f-437d-7454-b1bc-b5c6a5292c11","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","b99e173b-76ed-4c5a-b6da-ed4dafe29bec","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_106":105,"_113":109},"org",{"_106":105,"_107":-5,"_108":109,"_19":60,"_110":111,"_112":30},"branch",{"_13":91,"_37":92,"_47":46,"_93":48,"_94":95,"_96":97,"_98":54,"_99":100,"_101":102,"_103":49,"_104":105},"isOwned",8,"main","projectId","forkedBranchId","69713bf6-594c-11f1-a5c4-ee650bb23af1","forkedBranchVersion",20,"forkedProjectPrivacy","forkedProjectId","69708896-594c-11f1-a5c4-ee650bb23af1","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","hacksore","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yZVBaRzNrZmpHQ1FZTDdleExsS081c1VkNHgifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_47":48,"_37":49,"_42":232,"_51":-5,"_52":30,"_53":54,"_55":54,"_56":57,"_58":59,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":233,"_86":234,"_88":235,"_90":30},"tree",[195,198,199,200,201],"files",[195,196,197,198,199,200,201],"counts",{"_185":68,"_186":167,"_187":68,"_188":189,"_190":191},"contents",[148,149,150,151,152],"upstreamProject",{"_47":100,"_37":144,"_56":145,"_58":59,"_53":54,"_84":146},"upstreamBranch",{"_47":95,"_42":138,"_139":140,"_37":92,"_93":100,"_13":97,"_94":-5,"_96":-5,"_141":142,"_51":-5,"_90":30,"_53":54,"_104":143,"_69":102,"_103":144},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1779832014660],"updatedAt",["D",1779896135471],"lockfileKey","1779896174494-esm.town_v_templates_hono-jsx-starter@20-main","templates","hono-jsx-starter","Minimal Hono JSX starter for Val Town",{"_106":143,"_113":147},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789590280&sig=e67d627d9a01a4798de428e57ebafc2e560f7750e82d74444a2ed94a4f99b0eb",{"_47":180,"_37":54,"_35":181,"_156":-5,"_45":46,"_44":167,"_158":64,"_42":182,"_13":68,"_38":183,"_40":-5,"_29":30,"_161":-5,"_32":184},{"_47":177,"_37":33,"_35":36,"_156":-5,"_45":46,"_44":14,"_158":64,"_42":178,"_13":68,"_38":39,"_40":41,"_29":30,"_161":-5,"_32":179},{"_47":171,"_37":172,"_35":173,"_156":-5,"_45":46,"_44":167,"_158":30,"_42":174,"_13":68,"_38":26,"_40":175,"_29":30,"_161":-5,"_32":176},{"_47":163,"_37":164,"_35":62,"_156":-5,"_45":46,"_44":165,"_158":64,"_42":166,"_13":167,"_38":168,"_40":169,"_29":30,"_161":-5,"_32":170},{"_47":153,"_37":154,"_35":155,"_156":-5,"_45":46,"_44":157,"_158":64,"_42":159,"_13":68,"_38":39,"_40":160,"_29":30,"_161":-5,"_32":162},"927ecf60-a383-4723-a091-ecfd8d99f5dc","og-image.tsx","861c98c0-7564-11f1-a6b7-1607ee4eb77e","parentId",2,"latest",["D",1782921003213],"/**\n * Dynamically generated SVG OG images so the previews actually render\n * without any external asset hosting.\n *\n * - `summary` cards want roughly a square image (min 144x144, shown ~1:1)\n * - `summary_large_image` cards want a wide 1200x630 (1.91:1) image\n */\n\nexport function squareOgImage(): string {\n return ``;\n}\n\nexport function wideOgImage(): string {\n return ``;\n}\n","label",[154],"0a34a338-0ec9-406c-a4b5-6fde486b73aa","index.tsx",3,["D",1782921050663],1,"http","/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { squareOgImage, wideOgImage } from \"./og-image.tsx\";\nimport { CardPreview } from \"./CardPreview.tsx\";\n\nconst app = new Hono();\n\n// Absolute base URL of this deployment — needed because OG/Twitter image\n// tags must be absolute URLs, not relative paths.\nfunction baseUrl(c: any): string {\n const url = new URL(c.req.url);\n return `${url.protocol}//${url.host}`;\n}\n\nconst Layout = ({ title, children }: { title: string; children: any }) => (\n \n \n {title}\n \n \n \n \n \n \n \n \n {children}\n \n \n);\n\n// ---------------------------------------------------------------------------\n// Home page: explains the two card types and shows a side-by-side mockup.\n// ---------------------------------------------------------------------------\napp.get(\"/\", (c) => {\n const base = baseUrl(c);\n return c.html(\n \n

\n `summary` vs{\" \"}\n `summary_large_image`\n

\n When you paste a link into X/Twitter, Slack, iMessage, Discord, etc., the\n unfurled preview is controlled by Open Graph and{\" \"}\n Twitter card meta tags. The single tag that decides small-thumbnail\n vs big-banner is:\n

\n        {`\n\n`}\n

\n\n

\n `summary` — small square thumbnail\n

\n \n

\n `summary_large_image` — big banner\n

\n \n

\n\n

See it for real

\n These previews above are mockups. To see how real crawlers render them,\n open the two live pages and paste their URLs into a card validator:\n

\n /summary{\" \"}\n — has twitter:card=summary + a square image\n
\n \n /summary-large-image\n {\" \"}\n — has twitter:card=summary_large_image + a wide image\n

\n Validators that show a live render:{\" \"}\n Twitter Card Validator,{\" \"}\n opengraph.xyz,{\" \"}\n microlink cards.\n

\n\n

Cheat sheet

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

	`summary`	`summary_large_image`
Layout	Small square thumb beside text	Big banner above text
Image ratio	1:1 (square)	1.91:1 (wide)
Recommended size	≥ 144×144, up to 4096×4096	1200×630
Best for	Text-first content, logos, avatars	Image-first content, launches, art

\n ,\n );\n});\n\n// ---------------------------------------------------------------------------\n// Shared component for the two live demo pages' meta tags.\n// ---------------------------------------------------------------------------\ntype DemoMeta = {\n card: \"summary\" | \"summary_large_image\";\n base: string;\n path: string;\n title: string;\n description: string;\n imagePath: string;\n};\n\nconst DemoHead = ({ card, base, path, title, description, imagePath }: DemoMeta) => {\n const pageUrl = `${base}${path}`;\n const imageUrl = `${base}${imagePath}`;\n return (\n \n {title}\n \n \n \n {/* Open Graph (used by Slack, iMessage, Discord, LinkedIn, Facebook) */}\n \n \n \n \n \n {/* Twitter card — THIS tag decides small vs large */}\n \n \n \n \n \n \n \n );\n};\n\nconst DemoBody = ({ card, tags }: { card: string; tags: string }) => (\n \n

\n ← Back to the demo\n

\n This page uses `twitter:card = {card}`\n

\n Paste this page's URL into a card validator to see it unfurl. The exact\n meta tags in this page's <head> are:\n

{tags}

\n \n);\n\n// ---------------------------------------------------------------------------\n// Live demo page: summary\n// ---------------------------------------------------------------------------\napp.get(\"/summary\", (c) => {\n const base = baseUrl(c);\n const title = \"summary card demo\";\n const description =\n \"This page declares twitter:card=summary, so crawlers show a small square thumbnail next to the text.\";\n const imageUrl = `${base}/og/summary.svg`;\n const tags = `\n\n\n\n`;\n return c.html(\n \n \n \n ,\n );\n});\n\n// ---------------------------------------------------------------------------\n// Live demo page: summary_large_image\n// ---------------------------------------------------------------------------\napp.get(\"/summary-large-image\", (c) => {\n const base = baseUrl(c);\n const title = \"summary_large_image card demo\";\n const description =\n \"This page declares twitter:card=summary_large_image, so crawlers show a full-width 1.91:1 banner above the text.\";\n const imageUrl = `${base}/og/wide.svg`;\n const tags = `\n\n\n\n`;\n return c.html(\n \n \n \n ,\n );\n});\n\n// ---------------------------------------------------------------------------\n// OG image endpoints (dynamically generated SVGs).\n// ---------------------------------------------------------------------------\nconst svgHeaders = { \"Content-Type\": \"image/svg+xml; charset=utf-8\", \"Cache-Control\": \"public, max-age=3600\" };\napp.get(\"/og/summary.svg\", () => new Response(squareOgImage(), { headers: svgHeaders }));\napp.get(\"/og/wide.svg\", () => new Response(wideOgImage(), { headers: svgHeaders }));\n\n// Static files\napp.get(\"/public/*\", (c) => serveFile(c.req.path));\n\n// View source on Val Town\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n",[164],"77c973b6-4d69-45f5-9785-69756eebdbf4","README.md","019f1e5f-437d-7454-b1bc-b05f88f3c4d4",["D",1782920987381],"# hono-jsx-starter\n\nA minimal [Hono](https://hono.dev) + Hono JSX starter for Val Town.\nServer-rendered HTML, no build step, no React.\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)** *(you're here)* | 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) | Client-side React SPA with a Hono API backend. |\n\n## What's here\n\n```\nindex.tsx Hono app, Layout, routes\npublic/\n favicon.svg Static asset\n counter.ts Tiny client-side script\n```\n\nThe whole app fits in one file. As you grow it, the natural next moves are:\n\n- Pull `Layout` into its own `.tsx` file once you have 3+ pages.\n- Split routes with `app.route(\"/api\", api)` if `/api/*` grows.\n- Add more files under `public/` — they're served by a single\n `app.get(\"/public/*\", ...)` route.\n\n## Patterns worth knowing\n\n**JSX pragma.** Every `.tsx` file that uses JSX needs this at the top:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\n```\n\n**Server state.** The counter on `/` is `let count = 0` at module scope. It\nlives in memory on the Val Town server and survives across requests — but resets\nwhenever the val restarts (deploys, idle timeouts, etc.). For persistent state,\nswap it for [`std/sqlite`](https://www.val.town/x/std/sqlite) or\n[`std/blob`](https://www.val.town/x/std/blob).\n\n**API routes.** The `Increment` button POSTs to `/api/increment`, which returns\nJSON. Mix server-rendered pages and JSON endpoints in the same Hono app:\n\n```ts\napp.post(\"/api/increment\", (c) => c.json({ count: ++count }));\n```\n\n**Static files.** `serveFile` reads the file by path and serves it with the\nright content-type. `.ts` files are transpiled to JS on request by Val Town — so\nyou can write `public/counter.ts` and reference it as\n`

\n summary vs{\" \"}\n summary_large_image\n

\n summary — small square thumbnail\n

\n summary_large_image — big banner\n

See it for real

Cheat sheet

\n This page uses twitter:card = {card}\n

\n `summary` vs{\" \"}\n `summary_large_image`\n

\n `summary` — small square thumbnail\n

\n `summary_large_image` — big banner\n

\n This page uses `twitter:card = {card}`\n

Diff · v4