{title}

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_570":571,"_572":573},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_426":-5,"_20":427,"_22":428,"_429":430,"_431":432,"_26":433,"_24":434,"_435":-5,"_436":-5,"_437":58,"_438":439,"_440":49,"_441":-5,"_442":-5,"_443":444},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","pmillspaugh","name","docs","branchName","main","version","path","components","project",{"_37":369,"_13":14,"_50":370,"_371":-5,"_372":58,"_373":374,"_375":374,"_376":377,"_378":379,"_380":381,"_382":97,"_383":49,"_384":49,"_385":-5,"_386":387,"_388":389,"_390":-5,"_391":-5,"_392":-5,"_393":-5,"_394":395,"_396":395,"_397":398,"_399":398,"_400":398,"_401":395,"_402":395,"_403":404,"_405":406,"_407":408,"_409":58},"tree",[89,90,91,92,93,94],"file",{"_37":85,"_44":45,"_40":43,"_13":19,"_55":-5,"_53":83,"_17":82,"_42":-5,"_50":86,"_46":87,"_59":-5,"_18":88},"contents",[33,34,35,36],"upstream","pull","ahead","behind","envVars",{"_37":77,"_13":78,"_40":79,"_42":43,"_44":45,"_46":80,"_48":49,"_50":81,"_17":82,"_53":83,"_55":-5,"_57":58,"_59":-5,"_18":84},{"_37":69,"_13":70,"_40":71,"_42":43,"_44":45,"_46":72,"_48":49,"_50":73,"_17":74,"_53":54,"_55":75,"_57":58,"_59":-5,"_18":76},{"_37":61,"_13":62,"_40":63,"_42":43,"_44":45,"_46":64,"_48":49,"_50":65,"_17":66,"_53":54,"_55":67,"_57":58,"_59":-5,"_18":68},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_17":52,"_53":54,"_55":56,"_57":58,"_59":-5,"_18":60},"id","627fbb48-aad7-11f0-899a-0224a6c84d84","Nav.tsx","fileId","9192735a-aa99-11f0-9632-0224a6c84d84","parentId","8ccd79a0-aa99-11f0-937e-0224a6c84d84","branchId","de14aa62-aa8b-11f0-8499-0224a6c84d84","branchVersion",520,"latest",true,"createdAt",["D",1760650249534],96,"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 routes.sort((a, b) => {\n if (a.type !== b.type) return a.type === \"file\" ? -1 : 1;\n });\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

\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;\n}","deleted",false,"label",[19,39],"14102490-aaad-11f0-9809-0224a6c84d84","Header.tsx","638ec20e-aaaa-11f0-a86f-0224a6c84d84",230,["D",1760632079104],10,"/** @jsxImportSource npm:hono@4.9.12/jsx */\n\nimport GitHub from \"./icons/GitHub.tsx\";\nimport Twitter from \"./icons/Twitter.tsx\";\nimport YouTube from \"./icons/YouTube.tsx\";\nimport Discord from \"./icons/Discord.tsx\";\n\nexport default function Header() {\n return (\n

\n \n \n \n \n GitHub\n \n \n \n Twitter\n \n \n \n YouTube\n \n \n \n Discord\n \n \n

\n );\n}",[19,62],"d7758782-aacf-11f0-a33f-0224a6c84d84","Copy.tsx","42105358-aab0-11f0-aea5-0224a6c84d84",483,["D",1760647009801],15,"/** @jsxImportSource npm:hono@4.9.12/jsx */\n\nexport default function Copy({ text }) {\n async function copyToClipboard() {\n try {\n await navigator.clipboard.writeText(text);\n } catch (err) {\n console.error(\"Failed to copy text: \", err);\n }\n }\n\n return (\n \n Copy as markdown\n \n \n );\n}\n\nfunction Icon() {\n return (\n \n \n \n \n );\n}",[19,70],"867df734-aaab-11f0-9c4c-0224a6c84d84","icons","859a8896-aaab-11f0-8ad2-0224a6c84d84",203,["D",1760631412091],1,"directory",[19,78],"90492f34-aa99-11f0-8085-0224a6c84d84",["D",1760623697579],104,[19],{"_37":85,"_13":19,"_40":43,"_42":-5,"_44":45,"_46":87,"_48":49,"_50":304,"_17":82,"_53":83,"_55":-5,"_57":58,"_59":-5,"_103":305,"_18":306},{"_37":289,"_13":290,"_40":291,"_42":-5,"_44":45,"_46":292,"_48":49,"_50":293,"_17":82,"_53":83,"_55":-5,"_57":58,"_59":-5,"_103":294,"_18":295},{"_37":133,"_13":134,"_40":135,"_42":-5,"_44":45,"_46":136,"_48":49,"_50":137,"_17":82,"_53":83,"_55":-5,"_57":58,"_59":-5,"_103":138,"_18":139},{"_37":115,"_13":116,"_40":117,"_42":-5,"_44":45,"_46":118,"_48":49,"_50":119,"_17":120,"_53":83,"_55":-5,"_57":58,"_59":-5,"_103":121,"_18":122},{"_37":106,"_13":107,"_40":108,"_42":-5,"_44":45,"_46":109,"_48":49,"_50":110,"_17":111,"_53":24,"_55":112,"_57":58,"_59":-5,"_103":113,"_18":114},{"_37":95,"_13":96,"_40":97,"_42":-5,"_44":45,"_46":98,"_48":49,"_50":99,"_17":100,"_53":101,"_55":102,"_57":58,"_59":-5,"_103":104,"_18":105},"77f565fe-aacd-11f0-a892-0224a6c84d84","index.tsx","de16c252-aa8b-11f0-8499-0224a6c84d84",448,["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