{title}

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_413":414,"_415":416},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_107":88,"_27":55,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":25,"_121":122,"_123":60,"_124":-5,"_125":-5,"_126":127},"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":55,"_18":56,"_57":58,"_59":60,"_61":60,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",488,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","styles/index.css","latestPath","fileId","3ecc202c-aaa7-11f0-9129-0224a6c84d84","name","index.css","fileType","content","/* CSS RESET (adapted from https://www.joshwcomeau.com/css/custom-css-reset) */\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n max-width: 100vw;\n height: 100vh;\n line-height: 1.6;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\nimg,\npicture,\nvideo,\ncanvas,\nsvg {\n display: block;\n max-width: 100%;\n}\n\ninput,\nbutton,\ntextarea,\nselect {\n font: inherit;\n}\n\np,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n overflow-wrap: break-word;\n word-break: break-word;\n}\n\np {\n text-wrap: pretty;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n text-wrap: balance;\n}\n\n/* CUSTOM STYLES */\n\n/* ia-writer-quattro-latin-400-normal */\n@font-face {\n font-family: \"iA Writer Quattro\";\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src:\n url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-normal.woff2)\n format(\"woff2\"),\n url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-normal.woff)\n format(\"woff\");\n}\n\n/* ia-writer-quattro-latin-700-normal */\n@font-face {\n font-family: \"iA Writer Quattro\";\n font-style: normal;\n font-display: swap;\n font-weight: 700;\n src:\n url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-700-normal.woff2)\n format(\"woff2\"),\n url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-700-normal.woff)\n format(\"woff\");\n}\n\n/* ia-writer-mono-latin-400-normal */\n@font-face {\n font-family: \"iA Writer Mono\";\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src:\n url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff2)\n format(\"woff2\"),\n url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff)\n format(\"woff\");\n}\n\n:root {\n --font: \"iA Writer Quattro\", system-ui, sans-serif;\n --mono: \"iA Writer Mono\", Menlo, monospace;\n --black: hsl(0, 0%, 0%);\n --gray-98: hsl(0, 0%, 98%);\n --gray-90: hsl(0, 0%, 90%);\n --gray-50: hsl(0, 0%, 50%);\n}\n\nbody {\n display: grid;\n grid-template-areas:\n \"header header\"\n \"aside main\";\n grid-template-columns: 240px 1fr; /* sidebar + main */\n grid-template-rows: auto 1fr; /* header + main */\n transition: grid-template-columns 150ms ease-out;\n\n font-family: var(--font);\n\n &::selection {\n background: black;\n color: white;\n }\n\n &:has(button#toggle[data-open=\"false\"]) {\n grid-template-columns: 52px 1fr; /* collapse sidebar */\n }\n}\n\nheader {\n grid-area: header;\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--gray-90);\n\n & > a[href=\"/\"] {\n margin-right: auto;\n }\n\n & > a[rel=\"me\"] {\n color: var(--gray-50);\n margin-right: 1rem;\n\n &:hover {\n color: var(--black);\n }\n }\n}\n\naside {\n grid-area: aside;\n position: relative;\n overflow-x: hidden;\n border-right: 1px solid var(--gray-90);\n\n section {\n position: absolute;\n top: 0;\n right: 0;\n width: 240px;\n }\n\n div:has(input#search) {\n width: 100%;\n display: flex;\n gap: 12px;\n align-items: center;\n padding: 16px;\n padding-right: 12px;\n }\n\n input#search {\n min-width: 0;\n background: var(--gray-98);\n border: 1px solid var(--gray-90);\n padding-inline: 8px;\n }\n\n button#toggle {\n flex-shrink: 0;\n padding: 4px;\n background: unset;\n border: unset;\n color: var(--gray-50);\n cursor: pointer;\n\n &:hover {\n color: var(--black);\n }\n }\n\n nav {\n padding: 1rem;\n border-top: 1px solid var(--gray-90);\n\n a {\n display: block;\n padding-inline: 24px;\n color: var(--gray-50);\n text-decoration: unset;\n\n &:hover {\n color: var(--black);\n }\n\n &[aria-current=\"page\"] {\n color: var(--black);\n }\n }\n\n details {\n summary {\n padding-inline: 24px;\n color: var(--gray-50);\n }\n\n div {\n padding-left: 1rem;\n }\n }\n }\n}\n\nmain {\n grid-area: main;\n padding: 1rem;\n overflow-x: hidden;\n\n & > * {\n min-width: 240px;\n }\n\n div#content {\n padding-right: 0.5rem;\n }\n}\n\nbutton.copy {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n background: unset;\n border: unset;\n padding: unset;\n color: var(--gray-50);\n cursor: pointer;\n\n &:hover {\n color: var(--black);\n }\n}\n\npre, code {\n font-family: var(--mono);\n}\n\na {\n color: var(--black);\n text-underline-offset: 2px;\n\n &:hover {\n color: var(--gray-50);\n text-decoration: none;\n }\n}\n\n/* To visually hide things like social link labels that use decorative icons */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}","/* CSS RESET (adapted from https://www.joshwcomeau.com/css/custom-css-reset) */\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n max-width: 100vw;\n height: 100vh;\n line-height: 1.6;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\nimg,\npicture,\nvideo,\ncanvas,\nsvg {\n display: block;\n max-width: 100%;\n}\n\ninput,\nbutton,\ntextarea,\nselect {\n font: inherit;\n}\n\np,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n overflow-wrap: break-word;\n word-break: break-word;\n}\n\np {\n text-wrap: pretty;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n text-wrap: balance;\n}\n\n/* CUSTOM STYLES */\n\n/* ia-writer-quattro-latin-400-normal */\n@font-face {\n font-family: \"iA Writer Quattro\";\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src:\n url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-normal.woff2)\n format(\"woff2\"),\n url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-normal.woff)\n format(\"woff\");\n}\n\n/* ia-writer-quattro-latin-700-normal */\n@font-face {\n font-family: \"iA Writer Quattro\";\n font-style: normal;\n font-display: swap;\n font-weight: 700;\n src:\n url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-700-normal.woff2)\n format(\"woff2\"),\n url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-700-normal.woff)\n format(\"woff\");\n}\n\n/* ia-writer-mono-latin-400-normal */\n@font-face {\n font-family: \"iA Writer Mono\";\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src:\n url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff2)\n format(\"woff2\"),\n url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff)\n format(\"woff\");\n}\n\n:root {\n --font: \"iA Writer Quattro\", system-ui, sans-serif;\n --mono: \"iA Writer Mono\", Menlo, monospace;\n --black: hsl(0, 0%, 0%);\n --gray-98: hsl(0, 0%, 98%);\n --gray-90: hsl(0, 0%, 90%);\n --gray-50: hsl(0, 0%, 50%);\n}\n\nbody {\n display: grid;\n grid-template-areas:\n \"header header\"\n \"aside main\";\n grid-template-columns: 240px 1fr; /* sidebar + main */\n grid-template-rows: auto 1fr; /* header + main */\n transition: grid-template-columns 150ms ease-out;\n\n font-family: var(--font);\n\n &::selection {\n background: black;\n color: white;\n }\n\n &:has(button#toggle[data-open=\"false\"]) {\n grid-template-columns: 52px 1fr; /* collapse sidebar */\n }\n}\n\nheader {\n grid-area: header;\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--gray-90);\n\n & > a[href=\"/\"] {\n margin-right: auto;\n }\n\n & > a[rel=\"me\"] {\n color: var(--gray-50);\n margin-right: 1rem;\n\n &:hover {\n color: var(--black);\n }\n }\n}\n\naside {\n grid-area: aside;\n position: relative;\n overflow-x: hidden;\n border-right: 1px solid var(--gray-90);\n\n section {\n position: absolute;\n top: 0;\n right: 0;\n width: 240px;\n }\n\n div:has(input#search) {\n width: 100%;\n display: flex;\n gap: 12px;\n align-items: center;\n padding: 16px;\n padding-right: 12px;\n }\n\n input#search {\n min-width: 0;\n background: var(--gray-98);\n border: 1px solid var(--gray-90);\n padding-inline: 8px;\n }\n\n button#toggle {\n flex-shrink: 0;\n padding: 4px;\n background: unset;\n border: unset;\n color: var(--gray-50);\n cursor: pointer;\n\n &:hover {\n color: var(--black);\n }\n }\n\n nav {\n padding: 1rem;\n border-top: 1px solid var(--gray-90);\n\n a {\n display: block;\n padding-block: 4px;\n color: var(--gray-50);\n text-decoration: unset;\n\n &:hover {\n color: var(--black);\n }\n\n &[aria-current=\"page\"] {\n color: var(--black);\n }\n }\n\n details {\n summary {\n padding-block: 4px;\n color: var(--gray-50);\n }\n\n div {\n padding-left: 1rem;\n }\n }\n }\n}\n\nmain {\n grid-area: main;\n padding: 1rem;\n overflow-x: hidden;\n\n & > * {\n min-width: 240px;\n }\n\n div#content {\n padding-right: 0.5rem;\n }\n}\n\nbutton.copy {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n background: unset;\n border: unset;\n padding: unset;\n color: var(--gray-50);\n cursor: pointer;\n\n &:hover {\n color: var(--black);\n }\n}\n\npre, code {\n font-family: var(--mono);\n}\n\na {\n color: var(--black);\n text-underline-offset: 2px;\n\n &:hover {\n color: var(--gray-50);\n text-decoration: none;\n }\n}\n\n/* To visually hide things like social link labels that use decorative icons */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}","createdAt",["D",1760647452615],"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",{"_98":97,"_106":102},"org",{"_98":97,"_99":100,"_101":102,"_18":56,"_103":104,"_105":25},"branch",{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"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=1789592399&sig=d6da8d6cf9f6d75e088114b16fa11dc00a54c007d7e75fa0be11aabc051c2359","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":409,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":58,"_59":60,"_61":60,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":410,"_82":411,"_84":412,"_86":25},"tree",[181,191,193,206,208],"files",[181,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],"counts",{"_171":64,"_172":157,"_173":64,"_174":175,"_176":177},"contents",[128,129,130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":165,"_32":166,"_30":167,"_135":-5,"_41":42,"_40":168,"_137":60,"_38":169,"_13":157,"_34":150,"_35":-5,"_24":25,"_142":-5,"_27":170},{"_43":159,"_32":160,"_30":161,"_135":-5,"_41":42,"_40":162,"_137":60,"_38":163,"_13":157,"_34":150,"_35":-5,"_24":25,"_142":-5,"_27":164},{"_43":152,"_32":153,"_30":154,"_135":-5,"_41":42,"_40":155,"_137":60,"_38":156,"_13":157,"_34":150,"_35":-5,"_24":25,"_142":-5,"_27":158},{"_43":144,"_32":145,"_30":146,"_135":-5,"_41":42,"_40":147,"_137":60,"_38":148,"_13":149,"_34":150,"_35":-5,"_24":25,"_142":-5,"_27":151},{"_43":133,"_32":134,"_30":58,"_135":-5,"_41":42,"_40":136,"_137":60,"_38":138,"_13":139,"_34":140,"_35":141,"_24":25,"_142":-5,"_27":143},"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 · v488