{title}

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_455":456,"_457":458},"routes/_app.x.$handle.$name",{"_99":98,"_32":46,"_108":89,"_27":56,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":61,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":61,"_63":-5,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":-5,"_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",512,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","components/Nav.tsx","latestPath","fileId","9192735a-aa99-11f0-9632-0224a6c84d84","name","Nav.tsx","fileType","script","content","/** @jsxImportSource npm:hono@4.9.12/jsx */\n\nimport { parseVal, readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport ValTown from \"npm:@valtown/sdk@2.0.0\";\nimport matter from \"npm:gray-matter@4.0.3\";\nimport { html } from \"npm:hono@4.9.12/html\";\nimport Sidebar from \"./icons/Sidebar.tsx\";\n\nconst vt = new ValTown();\nconst val = parseVal(import.meta.url);\nconst { id } = await vt.alias.username.valName.retrieve(\n val.username,\n val.name,\n);\n\nexport default async function Nav({ current }) {\n const routes = await getRoutes(\"pages\");\n\n return (\n \n );\n}\n\nasync function Folder({ path, current }) {\n const routes = await getRoutes(path);\n routes.sort((a, b) => {\n if (a.type === b.type) return a.path.localeCompare(b.path);\n return a.type === \"directory\" ? -1 : 1;\n });\n\n let label;\n const plaintext = await readFile(`${path}/index.md`).catch(() => null);\n if (plaintext === null) {\n // No index.md in this folder\n label = path.replace(/^pages\\//, \"\");\n label = label[0].toUpperCase() + label.slice(1);\n } else {\n const { data } = matter(plaintext);\n const { title, nav } = data;\n label = nav ?? title;\n }\n\n return (\n

{label}

\n {routes.map((r) =>\n r.type === \"directory\"\n ? \n : \n )}\n

{label}

\n {routes.map((r) =>\n r.type === \"directory\"\n ? \n : \n )}\n

\n );\n}\n\nasync function File({ path, current }) {\n const link = path\n .replace(/^pages\\//, \"\") // remove leading \"pages/\"\n .replace(/(?:^|\\/)index\\.md$/, \"\") // remove \"index.md\" at end, root or nested\n .replace(/\\.md$/, \"\"); // remove \".md\" from other files\n\n const plaintext = await readFile(path);\n const { data } = matter(plaintext);\n const { title } = data;\n\n return (\n \n {title}\n \n );\n}\n\nasync function getRoutes(path: string) {\n const paths = await Array.fromAsync(\n vt.vals.files.retrieve(id, { path, recursive: false }),\n );\n\n return paths.sort((a, b) => {\n if (a.type === b.type) return a.path.localeCompare(b.path);\n return a.type === \"directory\" ? 1 : -1;\n });\n}","createdAt",["D",1760648532011],"branchVersion","branchId","de14aa62-aa8b-11f0-8499-0224a6c84d84","id","de140580-aa8b-11f0-8499-0224a6c84d84","docs",["D",1760617815147],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","markdown docs site","imageUrl","","6906d0a1-0165-46b9-8717-60dfd935316a","pinnedFileId","de16c252-aa8b-11f0-8499-0224a6c84d84","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","631c5cff-7089-4994-8427-c7580df789cd","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_107":103},"org",{"_99":98,"_100":101,"_102":103,"_18":57,"_104":105,"_106":25},"branch",{"_13":88,"_32":89,"_44":43,"_90":45,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":46,"_97":98},"isOwned",522,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","pmillspaugh","handle","displayName","Pete Millspaugh","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c3c0aadf-86a9-4c2e-ef01-fb649d6fb000/square512?exp=1789577999&sig=3927c0e321408bea96baab0e45026aeb9713898f5b433aef2217dbb0caa42bf2","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_44":45,"_32":46,"_39":451,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":61,"_63":-5,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":452,"_83":453,"_85":454,"_87":25},"tree",[182,192,194,212,214],"files",[182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214],"counts",{"_172":65,"_173":158,"_174":65,"_175":176,"_177":178},"contents",[129,130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":166,"_32":167,"_30":168,"_136":-5,"_42":43,"_41":169,"_138":61,"_39":170,"_13":158,"_34":151,"_36":-5,"_24":25,"_143":-5,"_27":171},{"_44":160,"_32":161,"_30":162,"_136":-5,"_42":43,"_41":163,"_138":61,"_39":164,"_13":158,"_34":151,"_36":-5,"_24":25,"_143":-5,"_27":165},{"_44":153,"_32":154,"_30":155,"_136":-5,"_42":43,"_41":156,"_138":61,"_39":157,"_13":158,"_34":151,"_36":-5,"_24":25,"_143":-5,"_27":159},{"_44":145,"_32":146,"_30":147,"_136":-5,"_42":43,"_41":148,"_138":61,"_39":149,"_13":150,"_34":151,"_36":-5,"_24":25,"_143":-5,"_27":152},{"_44":134,"_32":135,"_30":59,"_136":-5,"_42":43,"_41":137,"_138":61,"_39":139,"_13":140,"_34":141,"_36":142,"_24":25,"_143":-5,"_27":144},"77f565fe-aacd-11f0-a892-0224a6c84d84","index.tsx","parentId",448,"latest",["D",1760645990585],53,"http","/** @jsxImportSource npm:hono@4.9.12/jsx */\nimport { Hono } from \"https://esm.sh/hono@4.9.12\";\nimport { listFiles, readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport matter from \"npm:gray-matter@4.0.3\";\nimport { marked } from \"npm:marked@16.4.0\";\nimport Header from \"./components/Header.tsx\";\nimport Nav from \"./components/Nav.tsx\";\nimport Copy from \"./components/Copy.tsx\";\n\nconst app = new Hono();\n\napp.get(\"/:route{.*}\", async (c) => {\n const { route } = c.req.param(); // e.g. vals/http or vals/http/jsx\n const files = await listFiles(import.meta.url);\n\n const normalized = route.replace(/\\/+$/, \"\") || \"index\"; // trim trailing slash, default to index when empty\n const mdPath = `pages/${normalized}.md`; // e.g. vals/http/jsx.md\n const indexPath = `pages/${normalized}/index.md`; // e.g. vals/http/index.md\n const file = files.find((f) => f.path === mdPath) ??\n files.find((f) => f.path === indexPath);\n\n if (!file || file.type !== \"file\") return c.text(\"Not found\", 404);\n\n const plaintext = await readFile(file.path);\n const { data, content } = matter(plaintext);\n const { title, description } = data;\n const body = await marked(content);\n\n const css = await readFile(\"styles/index.css\", import.meta.url);\n\n return c.html(\n \n \n {title}\n \n \n

Diff · v512