[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_502":503,"_504":505},"routes/_app.x.$handle.$name",{"_102":101,"_32":46,"_111":92,"_27":112,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_20":-5,"_123":-5,"_124":-5,"_125":25,"_126":127,"_128":61,"_129":-5,"_130":-5,"_131":132},"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":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",332,"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","frontend/pages/home.tsx","latestPath","fileId","09604c7e-4c96-11f1-b531-ee650bb23af1","name","home.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@19.2.0 */\n// home.tsx — Landing page: what this is, who it's for, and where to go next.\n// Part 1 of the onboarding tutorial (see README \"Anatomy of This App\").\n\nimport {\n Badge,\n Banner,\n Button,\n Card,\n ClickableCard,\n Grid,\n Heading,\n HStack,\n Section,\n Text,\n VStack,\n} from \"../astryx/components.ts\";\nimport { SourceLinkList } from \"./kit.tsx\";\nimport type { AppProps } from \"../types.ts\";\n\nconst SOURCE_FILES = [\n { path: \"index.http.ts\", desc: \"HTTP entry point: page routing + the API route table\" },\n { path: \"backend/auth.ts\", desc: \"Val Town OAuth, roles, and the UserCxt type\" },\n { path: \"frontend/app.tsx\", desc: \"React SSR root — one Astryx AppShell, no client router\" },\n] as const;\n\n// Same category → same Badge color everywhere (also used in page-anatomy.tsx's INFRA grid).\nconst FEATURES: {\n href: string;\n title: string;\n desc: string;\n tag: string;\n tagVariant: \"blue\" | \"teal\" | \"purple\" | \"orange\" | \"cyan\" | \"pink\";\n}[] = [\n {\n href: \"/http\",\n title: \"HTTP Trigger\",\n desc: \"Route requests, render HTML, serve JSON APIs.\",\n tag: \"public · edge\",\n tagVariant: \"blue\",\n },\n {\n href: \"/sqlite\",\n title: \"SQLite\",\n desc: \"Per-val database. Lazy migration, typed queries.\",\n tag: \"state\",\n tagVariant: \"teal\",\n },\n {\n href: \"/cron\",\n title: \"Cron Trigger\",\n desc: \"Interval-gated tasks. Pulse + daily patterns.\",\n tag: \"scheduled\",\n tagVariant: \"purple\",\n },\n {\n href: \"/email\",\n title: \"Email Trigger\",\n desc: \"Inbound handler + outbound helpers. Attachments.\",\n tag: \"inbound/outbound\",\n tagVariant: \"orange\",\n },\n {\n href: \"/blob\",\n title: \"Blob Storage\",\n desc: \"Account-scoped key-value store. JSON, text, files.\",\n tag: \"account-scoped\",\n tagVariant: \"cyan\",\n },\n {\n href: \"/ui\",\n title: \"Design System\",\n desc: \"Astryx: Meta's open-source React design system.\",\n tag: \"astryx\",\n tagVariant: \"pink\",\n },\n];\n\nexport function HomePage({ appName, renderedAt, valTownUsername }: AppProps) {\n return (\n \n \n \n \n {appName}\n \n The fastest way to learn Val Town: read and run real code instead of a blank-page\n tutorial. One App = one SQLite database + a few small services (HTTP, Cron, Email) —\n sized for a solo project or a family's shared tools, not an enterprise platform team.\n \n \n New to full-stack? Read this page top to bottom. Already know the ropes? Skim Anatomy,\n then start deleting what you don't need.\n \n \n \n

Diff · v332