[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_278":279,"_280":281},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_71":194,"_40":-7,"_195":-5,"_17":196,"_197":198,"_199":200,"_201":202,"_203":204,"_110":-5,"_205":206,"_207":208,"_209":48,"_210":211,"_212":26,"_213":-5,"_214":-5,"_215":216},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":-5},"handle","hacksore","name","og-card-demo","branchName","main","project",{"_32":59,"_13":14,"_34":154,"_46":-5,"_155":48,"_49":50,"_156":50,"_157":158,"_159":160,"_161":162,"_163":79,"_164":26,"_165":-5,"_166":-5,"_167":22,"_53":168,"_169":-5,"_170":-5,"_171":-5,"_172":-5,"_173":174,"_175":174,"_176":177,"_178":177,"_179":177,"_180":174,"_181":174,"_182":183,"_184":185,"_186":28,"_47":48},"ahead",7,"behind",0,"diff",{"_63":64,"_65":66,"_67":68},"hasChanges",true,"sourceBranch",{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":41,"_60":50,"_61":39,"_62":54,"_55":14,"_51":12},"targetBranch",{"_32":33,"_34":35,"_36":37,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"pull","id","69713bf6-594c-11f1-a5c4-ee650bb23af1","createdAt",["D",1779832014660],"updatedAt",["D",1779896135471],"projectId","69708896-594c-11f1-a5c4-ee650bb23af1","version",20,"forkedBranchId","forkedBranchVersion","lockfileKey","1779896174494-esm.town_v_templates_hono-jsx-starter@20-main","deletedAt","isOwned",false,"privacy","public","userHandle","templates","orgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","hono-jsx-starter",8,"40c98fa3-0bb8-41ca-9387-d8a4628fb57e","70cb3497-f125-4417-b568-23271f812949","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[134,135],"deleted",[121],"modified",[69,70],{"_71":104,"_73":105,"_75":106},{"_71":72,"_73":74,"_75":76},"path","index.tsx","targetFile",{"_32":96,"_13":72,"_78":97,"_80":-5,"_81":33,"_82":98,"_84":26,"_34":99,"_40":100,"_87":88,"_89":101,"_65":48,"_91":-5,"_92":-7,"_71":102,"_94":103},"sourceFile",{"_32":77,"_13":72,"_78":79,"_80":-5,"_81":58,"_82":83,"_84":26,"_34":85,"_40":86,"_87":88,"_89":90,"_65":48,"_91":-5,"_92":-7,"_71":93,"_94":95},"0a34a338-0ec9-406c-a4b5-6fde486b73aa","fileId","019f1e5f-437d-7454-b1bc-b5c6a5292c11","parentId","branchId","branchVersion",3,"latest",["D",1782921050663],1,"fileType","http","content","/** @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","label","children",[72],"contentHash","f166192d30009fb2c542ebed83ac1d8625ba7a60a07a23c243b4d9a862115049","fbbcf208-59dc-11f1-be2c-ee650bb23af1","69785ed6-594c-11f1-a5c4-ee650bb23af1",18,["D",1779894107586],6,"/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\n// In-memory state. Resets whenever the server restarts.\n// For persistence across restarts, use std/sqlite or std/blob.\nlet count = 0;\n\nconst Layout = ({ title, children }: { title: string; children: any }) => (\n \n \n {title}\n \n \n \n \n \n \n \n {children}\n \n \n);\n\nconst app = new Hono();\n\napp.get(\"/\", (c) =>\n c.html(\n \n

Hello from Hono JSX

\n A minimal Val Town starter.{\" \"}\n \n Remix this val.\n \n

\n Server count:{\" \"}\n {count}\n

\n \n Increment\n \n

\n Lives in memory on the server. Resets when the val restarts.\n

\n \n ,\n ));\n\napp.get(\"/about\", (c) =>\n c.html(\n \n

About

Server-rendered with Hono JSX on Val Town.

\n ,\n ));\n\n// API routes\napp.post(\"/api/increment\", (c) => c.json({ count: ++count }));\n\n// Serve 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;",[72],"83f37903b7df885959707ebe91f418a222ba8e8927b6315c79b42b6d09b6bc38","README.md",{"_32":114,"_13":104,"_78":115,"_80":-5,"_81":33,"_82":41,"_84":26,"_34":116,"_40":117,"_87":110,"_89":118,"_65":48,"_91":-5,"_92":-7,"_71":119,"_94":120},{"_32":107,"_13":104,"_78":108,"_80":-5,"_81":58,"_82":100,"_84":26,"_34":109,"_40":86,"_87":110,"_89":111,"_65":48,"_91":-5,"_92":-7,"_71":112,"_94":113},"c9cb5945-adf1-4e55-8e78-20767f4d4a32","019f1e5f-437d-7454-b1bc-b05f88f3c4d4",["D",1782921091434],"file","# og-card-demo\n\nA tiny demo showing the difference between the two Twitter/OG link-preview card\ntypes: **`summary`** (small square thumbnail) vs **`summary_large_image`**\n(full-width banner).\n\nThe only tag that flips between them is:\n\n```html\n\n\n\n```\n\n## Routes\n\n| Route | What it is |\n| --- | --- |\n| `/` | Explainer with a **side-by-side mockup** of both cards + a cheat sheet |\n| `/summary` | Live page with `twitter:card=summary` and a 1:1 image |\n| `/summary-large-image` | Live page with `twitter:card=summary_large_image` and a 1.91:1 image |\n| `/og/summary.svg` | Generated 600×600 (1:1) OG image |\n| `/og/wide.svg` | Generated 1200×630 (1.91:1) OG image |\n\n## Files\n\n```\nindex.tsx Hono app: home page + two live demo pages + OG image routes\nCardPreview.tsx Visual mockup of how each card unfurls in a feed\nog-image.tsx Dynamically generated SVG OG images (square + wide)\n```\n\n## How to actually see the difference\n\nThe cards on `/` are HTML mockups. To see how real crawlers render the two live\npages, paste their URLs into a card validator:\n\n- Twitter Card Validator — \n- opengraph.xyz — \n- microlink cards — \n\n```mermaid\nflowchart LR\n A[Paste link] --> B{twitter:card?}\n B -->|summary| C[Small square thumb
beside text]\n B -->|summary_large_image| D[Full-width 1.91:1
banner above text]\n```\n\n## Note on SVG images\n\nThe OG images here are **SVG**, which keeps the demo dependency-free. Most\nplatforms (Slack, iMessage, Discord) and validators render them fine, but\n**X/Twitter itself prefers PNG/JPEG** for `og:image`. If you're building a real\nsite, generate a **PNG at 1200×630** (e.g. with `@vercel/og` / Satori) instead\nof an SVG.\n\n## Cheat sheet\n\n| | `summary` | `summary_large_image` |\n| --- | --- | --- |\n| Layout | Small square thumb beside text | Big banner above text |\n| Image ratio | 1:1 | 1.91:1 |\n| Recommended size | ≥ 144×144 | 1200×630 |\n| Best for | Text-first content, logos, avatars | Image-first content, launches, art |\n\nRemix this val to make it your own.\n",[104],"cf575651349a41804b970c6df7f3607cdccb1651d7950a98574492be151c10ac","b46e257a-59e1-11f1-8b26-ee650bb23af1","506a9fac-59d4-11f1-a4ea-ee650bb23af1",["D",1779896135471],9,"# 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

Hello from Hono JSX

About

\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

Compare

Mergehacksore/mainintotemplates/main

README.md+47-57

Hindex.tsx+244-48

CardPreview.tsx+53-0

og-image.tsx+41-0

public/counter.ts+0-8