[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_113":114,"_115":116},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","pikachu","name","Quickstart-Full-Stack","path","frontend/pages/docs/page-overview.tsx","project",{"_22":50,"_11":12,"_35":51,"_52":-5,"_53":44,"_54":55,"_56":55,"_57":58,"_59":60,"_61":62,"_63":64,"_65":34,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/pikachu/Quickstart-Full-Stack/code/frontend/pages/docs/page-overview.tsx","extension","id","6255c8de-e322-451a-a608-012e2949030d","page-overview.tsx","fileId","fd8d9566-a4b3-11f1-843e-1607ee4eb77e","parentId","39bb5a9c-a580-11f1-9bc5-1607ee4eb77e","branchId","5a0a7ac8-4895-11f1-80ec-42b51c65c3df","branchVersion",375,"latest",true,"createdAt",["D",1788212991297],"version",6,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@19.2.0 */\n// page-overview.tsx — Docs landing page: infra block diagram, request\n// routing flow, core stack, source map, and the security rule every fork\n// needs on day one. Everything the feature pages leave out lives here.\n\nimport {\n Badge,\n Banner,\n Card,\n ClickableCard,\n CodeBlock,\n Grid,\n Heading,\n HStack,\n Table,\n TableBody,\n TableCell,\n TableHeader,\n TableHeaderCell,\n TableRow,\n Text,\n VStack,\n} from \"../../astryx/components.ts\";\nimport { PageLinks, PageShell, SourceLinkList } from \"../kit.tsx\";\nimport type { AppProps, CodeSnippet } from \"../../types.ts\";\n\nconst LINKS = [\n { href: \"https://docs.val.town/vals/\", label: \"Vals overview\" },\n { href: \"https://docs.val.town/std/\", label: \"Val Town std lib\" },\n { href: \"https://docs.val.town/vals/http/\", label: \"HTTP vals\" },\n];\n\nconst REFERENCE_PAGES = [\n { href: \"/http\", title: \"HTTP Trigger\", desc: \"Route table, live health/visit APIs.\" },\n { href: \"/cron\", title: \"Cron Trigger\", desc: \"Scheduled task log, task architecture.\" },\n { href: \"/sqlite\", title: \"SQLite\", desc: \"Migration pattern, query rules, admin pruning.\" },\n] as const;\n\nconst INFRA = [\n {\n name: \"Auth\",\n desc: \"Val Town OAuth. One import, no config, no secrets to rotate.\",\n tag: \"identity\",\n tagVariant: \"blue\",\n },\n {\n name: \"SQLite\",\n desc: \"One database per val. No connection string, no server to run.\",\n tag: \"state\",\n tagVariant: \"teal\",\n },\n {\n name: \"Blob\",\n desc: \"Account-scoped key-value + binary storage. Flat namespace.\",\n tag: \"files\",\n tagVariant: \"cyan\",\n },\n {\n name: \"Email\",\n desc: \"Inbound handler address + outbound send helper.\",\n tag: \"messaging\",\n tagVariant: \"orange\",\n },\n {\n name: \"Cron\",\n desc: \"Interval-gated scheduled runs, no external scheduler.\",\n tag: \"time\",\n tagVariant: \"purple\",\n },\n] as const;\n\nconst LAYER_FILES = {\n backend: [\n {\n path: \"index.http.ts\",\n desc: \"Entry point — page + API routing, the only file Val Town calls\",\n },\n { path: \"backend/auth.ts\", desc: \"Val Town OAuth wrapper, roles, UserCxt\" },\n { path: \"backend/handlers.ts\", desc: \"One function per API route — pure req → response\" },\n { path: \"backend/db.ts\", desc: \"SQLite migration + queries\" },\n { path: \"backend/storage.ts\", desc: \"Blob read/write helpers\" },\n { path: \"backend/shared.ts\", desc: \"Env vars: APP_NAME, VAL_TOWN_USERNAME\" },\n ],\n frontend: [\n { path: \"frontend/app.tsx\", desc: \"SSR root — one AppShell, page dispatch, theme cookie\" },\n { path: \"frontend/astryx/shell.tsx\", desc: \"Sidebar nav + theme switcher\" },\n { path: \"frontend/pages/\", desc: \"One file per page — features/ and docs/ subdirectories\" },\n { path: \"frontend/client.ts\", desc: \"The only client JS: wires demo buttons to fetch()\" },\n ],\n} as const;\n\nconst ROUTING_ROWS: { step: string; match: string; result: string }[] = [\n {\n step: \"1\",\n match: \"Every request\",\n result: \"withValTownAuth(handler) resolves the caller once, up front\",\n },\n {\n step: \"2\",\n match: \"/api/*\",\n result: \"routeApi() looks up API_ROUTES, runs an auth check, calls one handler, returns JSON\",\n },\n {\n step: \"3\",\n match: \"/theme\",\n result: \"Sets a cookie, 303-redirects back — the only non-JS state mutation\",\n },\n {\n step: \"4\",\n match: \"everything else\",\n result: \"servePage() resolves the user, calls renderApp() — one SSR pass, no hydration\",\n },\n];\n\nconst STACK_ROWS: { layer: string; choice: string; why: string }[] = [\n {\n layer: \"Runtime\",\n choice: \"Deno 2.x\",\n why: \"No node_modules, no bundler — one file is one script\",\n },\n {\n layer: \"Backend\",\n choice: \"Plain Fetch handlers\",\n why: \"Request → Response. No framework to learn\",\n },\n { layer: \"Database\", choice: \"Val Town SQLite (std)\", why: \"Per-val, zero-config, no ops\" },\n {\n layer: \"Files\",\n choice: \"Val Town Blob (std)\",\n why: \"Account-scoped storage, no bucket to provision\",\n },\n {\n layer: \"Rendering\",\n choice: \"React 19, SSR only\",\n why: \"One render pass per request, no hydration cost\",\n },\n { layer: \"UI kit\", choice: \"Astryx\", why: \"Meta's design system — tokens, not hand-rolled CSS\" },\n];\n\nconst ROUTING_SNIPPET: CodeSnippet = {\n filename: \"index.http.ts — handler()\",\n code: `async function handler(req: Request): Promise {\n const url = new URL(req.url);\n if (url.pathname.startsWith(\"/api/\")) return await routeApi(req, url);\n if (url.pathname === \"/theme\") return setThemeAndRedirect(url);\n return await servePage(req, url);\n}\n\nexport default withValTownAuth(handler);`,\n};\n\nexport function DocsOverviewPage({ appName, valTownUsername }: AppProps) {\n return (\n \n \n Docs\n \n Everything you just clicked through on the demo pages is real, running code. Two layers to\n hold in your head: Layer 1 is Val Town itself — infrastructure you import, never\n provision. Layer 2 is this App — a thin routing + rendering layer written on top of it.\n \n \n \n\n \n {REFERENCE_PAGES.map((p) => (\n \n \n {p.title}\n {p.desc}\n \n \n ))}\n \n\n \n Layer 1 — Val Town, the infra\n \n Each block is a module import, not a service you deploy. There's nothing to provision,\n scale, or take down — the import statement is the integration.\n \n \n {INFRA.map((i) => (\n \n \n \n {i.name}\n \n \n {i.desc}\n \n \n ))}\n \n \n\n \n Layer 2 — This App ({appName})\n \n \n \n Backend\n \n \n \n \n \n Frontend\n \n \n \n \n \n\n \n How a request is routed\n \n \n \n Step\n Matches\n What happens\n \n \n \n {ROUTING_ROWS.map((r) => (\n \n \n \n \n \n {r.match}\n \n {r.result}\n \n ))}\n \n

\n \n \n\n \n\n \n Core stack\n \n \n \n Layer\n Choice\n Why\n \n \n \n {STACK_ROWS.map((r) => (\n \n {r.layer}\n {r.choice}\n {r.why}\n \n ))}\n \n

\n \n \n );\n}\n","deleted",false,"label",[47,48,49,24],"frontend","pages","docs","5a09ae54-4895-11f1-80ec-42b51c65c3df",["D",1777994172310],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","An elegant template for an elegant single-person full stack app.","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3ed9401e-3850-4a69-dec2-1bdd924c0900/square512?exp=1789563599&sig=949e18d6e3d53df0e871cc55a26ace59925880a3a49ee0345a74cff23d1eeed5","userId","173e7424-8658-428f-a3bc-ae4faeaabd1c","pinnedFileId","e1c705aa-4b18-11f1-b4ae-ee650bb23af1","pinPreview","pinMigrated","screenshotVersion","likeCount",1,"orgId","019df771-9af8-7238-99a4-541e39355038","tursoName","5a09ae54489511f180ec42b51c65c3df","tursoHostname","5a09ae54489511f180ec42b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789511441255],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_112":108},"org",{"_9":10,"_105":106,"_107":108,"_61":62,"_109":110,"_111":44},"branch",{"_37":95,"_11":96,"_22":30,"_97":50,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":12,"_104":10},"isOwned",384,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Minion","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/22c8ba37-42c8-4af4-8daf-8cdd2f5f1800/square512?exp=1789563599&sig=cb5d66f6293d68d61d827500a55a452bd7d976b3783ca53dd0fb8b9c04afdb42","tier","free","canRestrictVals","profileImageUrl","ctx",{"_88":-5,"_146":147,"_148":149,"_150":151,"_152":44,"_153":44,"_154":44,"_155":34,"_156":-5,"_157":-7,"_158":-7,"_159":160,"_161":44,"_162":44,"_163":-5,"_164":44,"_165":44,"_166":44,"_167":-5},"ENV",{"_117":118,"_119":120,"_121":96,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139,"_140":141,"_142":143,"_144":145},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount",0,"flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]