Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[206],"d694938c-1bd0-11f0-84b8-569c3dd06744","utils","2ce29260-6a91-45ba-b8be-9324f0951aba",["D",1744924421521],"directory",[213],"d694755a-1bd0-11f0-84b8-569c3dd06744","styles","1ff81efe-1e0f-4ea6-958f-e6f92f9413d7",["D",1744924421521],[219],"d6946cfe-1bd0-11f0-84b8-569c3dd06744","routes","89f5add6-f1bd-4b07-a997-91beb6a66a4c",["D",1744924421521],[224],"d69441a2-1bd0-11f0-84b8-569c3dd06744","posts","2a943e24-3a26-4f52-948e-8ee896a2dd5e",["D",1744924421521],[229],"d69433ce-1bd0-11f0-84b8-569c3dd06744","components","041a258a-9c3b-4aab-9fab-876cae4326a3",["D",1744924421521],[234],"5086edba-2794-11f0-99e0-569c3dd06744",".vscode","5086ee6e-2794-11f0-99e0-569c3dd06744",28,["D",1746217840806],[239],"pulls","branches","forks","envVars",{"_251":64,"_253":64},"connections",{"_251":64,"_252":64},"count","unfilledCount","emptyCount",{"_44":238,"_32":239,"_30":240,"_164":-5,"_42":43,"_41":241,"_166":59,"_39":570,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_300":571,"_27":572},{"_44":562,"_32":563,"_30":564,"_164":240,"_42":43,"_41":565,"_166":25,"_39":566,"_13":64,"_34":20,"_36":567,"_24":25,"_171":-5,"_300":568,"_27":569},{"_44":233,"_32":234,"_30":235,"_164":-5,"_42":43,"_41":168,"_166":59,"_39":559,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_300":560,"_27":561},{"_44":552,"_32":553,"_30":554,"_164":235,"_42":43,"_41":168,"_166":25,"_39":555,"_13":64,"_34":35,"_36":556,"_24":25,"_171":-5,"_300":557,"_27":558},{"_44":545,"_32":546,"_30":547,"_164":235,"_42":43,"_41":168,"_166":25,"_39":548,"_13":64,"_34":35,"_36":549,"_24":25,"_171":-5,"_300":550,"_27":551},{"_44":538,"_32":539,"_30":540,"_164":235,"_42":43,"_41":168,"_166":25,"_39":541,"_13":64,"_34":35,"_36":542,"_24":25,"_171":-5,"_300":543,"_27":544},{"_44":531,"_32":532,"_30":533,"_164":235,"_42":43,"_41":168,"_166":25,"_39":534,"_13":64,"_34":35,"_36":535,"_24":25,"_171":-5,"_300":536,"_27":537},{"_44":524,"_32":525,"_30":526,"_164":235,"_42":43,"_41":168,"_166":25,"_39":527,"_13":64,"_34":35,"_36":528,"_24":25,"_171":-5,"_300":529,"_27":530},{"_44":517,"_32":518,"_30":519,"_164":235,"_42":43,"_41":168,"_166":25,"_39":520,"_13":64,"_34":35,"_36":521,"_24":25,"_171":-5,"_300":522,"_27":523},{"_44":510,"_32":511,"_30":512,"_164":235,"_42":43,"_41":168,"_166":25,"_39":513,"_13":64,"_34":35,"_36":514,"_24":25,"_171":-5,"_300":515,"_27":516},{"_44":503,"_32":504,"_30":505,"_164":235,"_42":43,"_41":168,"_166":25,"_39":506,"_13":64,"_34":35,"_36":507,"_24":25,"_171":-5,"_300":508,"_27":509},{"_44":496,"_32":497,"_30":498,"_164":235,"_42":43,"_41":168,"_166":25,"_39":499,"_13":64,"_34":35,"_36":500,"_24":25,"_171":-5,"_300":501,"_27":502},{"_44":489,"_32":490,"_30":491,"_164":235,"_42":43,"_41":168,"_166":25,"_39":492,"_13":64,"_34":35,"_36":493,"_24":25,"_171":-5,"_300":494,"_27":495},{"_44":482,"_32":483,"_30":484,"_164":235,"_42":43,"_41":168,"_166":25,"_39":485,"_13":64,"_34":35,"_36":486,"_24":25,"_171":-5,"_300":487,"_27":488},{"_44":475,"_32":476,"_30":477,"_164":235,"_42":43,"_41":168,"_166":25,"_39":478,"_13":64,"_34":35,"_36":479,"_24":25,"_171":-5,"_300":480,"_27":481},{"_44":228,"_32":229,"_30":230,"_164":-5,"_42":43,"_41":168,"_166":59,"_39":472,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_300":473,"_27":474},{"_44":465,"_32":466,"_30":467,"_164":230,"_42":43,"_41":168,"_166":25,"_39":468,"_13":64,"_34":20,"_36":469,"_24":25,"_171":-5,"_300":470,"_27":471},{"_44":458,"_32":459,"_30":460,"_164":230,"_42":43,"_41":168,"_166":25,"_39":461,"_13":64,"_34":20,"_36":462,"_24":25,"_171":-5,"_300":463,"_27":464},{"_44":449,"_32":450,"_30":451,"_164":230,"_42":43,"_41":452,"_166":25,"_39":453,"_13":454,"_34":20,"_36":455,"_24":25,"_171":-5,"_300":456,"_27":457},{"_44":441,"_32":442,"_30":443,"_164":230,"_42":43,"_41":444,"_166":59,"_39":445,"_13":168,"_34":20,"_36":446,"_24":25,"_171":-5,"_300":447,"_27":448},{"_44":223,"_32":224,"_30":225,"_164":-5,"_42":43,"_41":168,"_166":59,"_39":438,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_300":439,"_27":440},{"_44":431,"_32":432,"_30":433,"_164":225,"_42":43,"_41":168,"_166":25,"_39":434,"_13":64,"_34":35,"_36":435,"_24":25,"_171":-5,"_300":436,"_27":437},{"_44":424,"_32":425,"_30":426,"_164":225,"_42":43,"_41":168,"_166":25,"_39":427,"_13":64,"_34":35,"_36":428,"_24":25,"_171":-5,"_300":429,"_27":430},{"_44":416,"_32":417,"_30":418,"_164":225,"_42":43,"_41":419,"_166":59,"_39":420,"_13":168,"_34":35,"_36":421,"_24":25,"_171":-5,"_300":422,"_27":423},{"_44":409,"_32":410,"_30":411,"_164":225,"_42":43,"_41":168,"_166":25,"_39":412,"_13":64,"_34":35,"_36":413,"_24":25,"_171":-5,"_300":414,"_27":415},{"_44":401,"_32":402,"_30":403,"_164":225,"_42":43,"_41":404,"_166":59,"_39":405,"_13":168,"_34":35,"_36":406,"_24":25,"_171":-5,"_300":407,"_27":408},{"_44":393,"_32":394,"_30":395,"_164":225,"_42":43,"_41":396,"_166":59,"_39":397,"_13":168,"_34":35,"_36":398,"_24":25,"_171":-5,"_300":399,"_27":400},{"_44":218,"_32":219,"_30":220,"_164":-5,"_42":43,"_41":168,"_166":59,"_39":390,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_300":391,"_27":392},{"_44":383,"_32":384,"_30":385,"_164":220,"_42":43,"_41":168,"_166":25,"_39":386,"_13":64,"_34":20,"_36":387,"_24":25,"_171":-5,"_300":388,"_27":389},{"_44":212,"_32":213,"_30":214,"_164":-5,"_42":43,"_41":168,"_166":59,"_39":380,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_300":381,"_27":382},{"_44":372,"_32":373,"_30":374,"_164":214,"_42":43,"_41":375,"_166":59,"_39":376,"_13":168,"_34":35,"_36":377,"_24":25,"_171":-5,"_300":378,"_27":379},{"_44":364,"_32":365,"_30":366,"_164":214,"_42":43,"_41":367,"_166":59,"_39":368,"_13":168,"_34":35,"_36":369,"_24":25,"_171":-5,"_300":370,"_27":371},{"_44":357,"_32":358,"_30":359,"_164":214,"_42":43,"_41":168,"_166":25,"_39":360,"_13":64,"_34":35,"_36":361,"_24":25,"_171":-5,"_300":362,"_27":363},{"_44":349,"_32":350,"_30":351,"_164":214,"_42":43,"_41":352,"_166":59,"_39":353,"_13":168,"_34":35,"_36":354,"_24":25,"_171":-5,"_300":355,"_27":356},{"_44":341,"_32":342,"_30":343,"_164":214,"_42":43,"_41":344,"_166":59,"_39":345,"_13":168,"_34":35,"_36":346,"_24":25,"_171":-5,"_300":347,"_27":348},{"_44":333,"_32":334,"_30":335,"_164":214,"_42":43,"_41":336,"_166":59,"_39":337,"_13":168,"_34":35,"_36":338,"_24":25,"_171":-5,"_300":339,"_27":340},{"_44":325,"_32":326,"_30":327,"_164":214,"_42":43,"_41":328,"_166":59,"_39":329,"_13":168,"_34":35,"_36":330,"_24":25,"_171":-5,"_300":331,"_27":332},{"_44":321,"_32":33,"_30":31,"_164":214,"_42":43,"_41":14,"_166":59,"_39":322,"_13":168,"_34":35,"_36":38,"_24":25,"_171":-5,"_300":323,"_27":324},{"_44":205,"_32":206,"_30":207,"_164":-5,"_42":43,"_41":208,"_166":59,"_39":318,"_13":64,"_34":20,"_36":210,"_24":25,"_171":-5,"_300":319,"_27":320},{"_44":198,"_32":199,"_30":200,"_164":-5,"_42":43,"_41":201,"_166":59,"_39":315,"_13":64,"_34":20,"_36":203,"_24":25,"_171":-5,"_300":316,"_27":317},{"_44":192,"_32":193,"_30":194,"_164":-5,"_42":43,"_41":168,"_166":25,"_39":312,"_13":64,"_34":20,"_36":196,"_24":25,"_171":-5,"_300":313,"_27":314},{"_44":186,"_32":187,"_30":188,"_164":-5,"_42":43,"_41":168,"_166":25,"_39":309,"_13":64,"_34":20,"_36":190,"_24":25,"_171":-5,"_300":310,"_27":311},{"_44":180,"_32":181,"_30":182,"_164":-5,"_42":43,"_41":168,"_166":25,"_39":306,"_13":64,"_34":20,"_36":184,"_24":25,"_171":-5,"_300":307,"_27":308},{"_44":173,"_32":174,"_30":175,"_164":-5,"_42":43,"_41":176,"_166":25,"_39":303,"_13":64,"_34":20,"_36":178,"_24":25,"_171":-5,"_300":304,"_27":305},{"_44":162,"_32":163,"_30":57,"_164":-5,"_42":43,"_41":165,"_166":25,"_39":299,"_13":168,"_34":169,"_36":170,"_24":25,"_171":-5,"_300":301,"_27":302},["D",1745510531925],"children",[],[163],["D",1744924492725],[],[174],["D",1744924421521],[],[181],["D",1744924421521],[],[187],["D",1744924421521],[],[193],["D",1744924492717],[],[199],["D",1746217840918],[],[206],"998d2572-2796-11f0-a682-569c3dd06744",["D",1746218821790],[],[213,33],"9949add8-2796-11f0-a273-569c3dd06744","render-markdown.ts","e3c56324-1f97-4141-9e45-09c8c47955fe",33,["D",1746218821788],"import rehypeHighlight from \"npm:rehype-highlight\";\nimport rehypeRaw from \"npm:rehype-raw\"; // Add this import\nimport rehypeSlug from \"npm:rehype-slug\";\nimport rehypeStringify from \"npm:rehype-stringify\";\nimport remarkFrontmatter from \"npm:remark-frontmatter\";\nimport remarkGfm from \"npm:remark-gfm\";\nimport remarkParse from \"npm:remark-parse\";\nimport remarkRehype from \"npm:remark-rehype\";\nimport { unified } from \"npm:unified\";\n\n// Process markdown content\nexport async function processMarkdown(content: string): Promise {\n const result = await unified()\n .use(remarkParse)\n .use(remarkGfm)\n .use(remarkFrontmatter)\n .use(remarkRehype, { allowDangerousHtml: true }) // Enable passing raw HTML\n .use(rehypeRaw) // Parse the raw HTML tags\n .use(rehypeSlug)\n .use(rehypeHighlight)\n .use(rehypeStringify)\n .process(content);\n\n return result.toString();\n}\n",[],[213,326],"995cb072-2796-11f0-919c-569c3dd06744","posts.ts","69365251-abfb-459f-aea6-17170c94532c",35,["D",1746218821789],"import { getAllBlogPosts } from \"./get-posts.ts\";\n\nexport const posts = await getAllBlogPosts();\n",[],[213,334],"99682254-2796-11f0-b0d6-569c3dd06744","live-reload.ts","a4a87b27-f6e3-45ba-b863-3ac8dff7e540",36,["D",1746218821789],"// inspo: https://www.val.town/v/stevekrouse/reloadOnSave\nimport ValTown from \"https://esm.sh/@valtown/sdk\"; // TODO: why don't we get types here?\n\nconst client = new ValTown({ bearerToken: \"\" });\n\nasync function getProjectAndBranchIds(importMetaUrl: string) {\n // imported dynamically because this is server-only but this file is also imported on the client\n const { parseProject } = await import(\n \"https://esm.town/v/std/utils@85-main/index.ts\"\n );\n\n const {\n name: projectName,\n branch: branchName,\n username,\n } = parseProject(importMetaUrl);\n const { id: project_id } = await client.alias.username.projectName.retrieve(\n username,\n projectName,\n );\n const branches = await client.projects.branches.list(project_id, {\n limit: 100,\n });\n const branch = branches.data.find((branch) => branch.name === branchName);\n if (!branch) {\n throw new Error(`Branch ${branchName} not found`);\n }\n const branch_id = branch.id;\n return { project_id, branch_id };\n}\n\nasync function projectLastUpdatedAt(\n { project_id, branch_id }: { project_id: string; branch_id: string },\n) {\n const { updatedAt } = await client.projects.branches.retrieve(\n project_id,\n branch_id,\n );\n return new Date(updatedAt).getTime();\n}\n\n/**\n * Creates a wrapper around a fetch handler that injects a script tag into HTML responses\n *\n * @param handler The original fetch handler function\n * @param scriptContent The HTML content to inject\n * @returns A new fetch handler with HTML rewriting capability\n */\nexport function injectHTML(\n handler: (request: Request) => Promise,\n html: string,\n): (request: Request) => Promise {\n let HTMLRewriter:\n | typeof import(\"https://ghuc.cc/worker-tools/html-rewriter/index.ts\").HTMLRewriter\n | undefined;\n // Return the new handler function\n return async (request: Request) => {\n if (!HTMLRewriter) {\n HTMLRewriter =\n (await import(\"https://ghuc.cc/worker-tools/html-rewriter/index.ts\"))\n .HTMLRewriter;\n }\n // Call the original handler to get the response\n const response = await handler(request);\n\n // Check if the response is HTML\n const contentType = response.headers.get(\"Content-Type\");\n if (contentType && contentType.includes(\"text/html\")) {\n // Use HTMLRewriter to inject the script at the end of the body\n return new HTMLRewriter()\n .on(\"body\", {\n element(element) {\n element.append(html, { html: true });\n },\n })\n .transform(response);\n }\n\n // Return the original response if it's not HTML\n return response;\n };\n}\n\nexport function liveReload(\n handler: (request: Request) => Promise,\n importMetaUrl: string,\n): (request: Request) => Promise {\n let ids: { project_id: string; branch_id: string } | undefined;\n\n return async (req: Request) => {\n if (!ids) {\n ids = await getProjectAndBranchIds(importMetaUrl);\n }\n\n // if we wanted to create a /lastUpdatedAt route,\n // which would let us pass a val town bearer token, we could do that here\n // gives us 10k API requests per minute instead of 1k\n // and would work with private projects\n\n return injectHTML(\n handler,\n ``,\n )(req);\n };\n}\n\n/* ------------------------------\n * Client\n * ------------------------------ */\n\nasync function registerNextCheck(\n { pageLoad, project_id, branch_id }: {\n pageLoad: number;\n project_id: string;\n branch_id: string;\n },\n) {\n const lastUpdatedAt = await projectLastUpdatedAt({ project_id, branch_id });\n\n // if lastUpdatedAt was after this page was first loaded, reload\n if (lastUpdatedAt > pageLoad) {\n console.info(\"Reloading...\");\n window.location.reload();\n } // if lastUpdatedAt was within the last 15 minutes, check in 500ms\n else if (lastUpdatedAt > pageLoad - 15 * 60 * 1000) {\n console.info(\"Checking in 500ms...\");\n setTimeout(\n () => registerNextCheck({ pageLoad, project_id, branch_id }),\n 500,\n );\n } // if lastUpdatedAt was within the last hour, check in a second\n else if (lastUpdatedAt > pageLoad - 60 * 60 * 1000) {\n console.info(\"Checking in 1s...\");\n setTimeout(\n () => registerNextCheck({ pageLoad, project_id, branch_id }),\n 1_000,\n );\n } // if it was greater than the last hour, check in 5 seconds\n else {\n console.info(\"Checking in 5s...\");\n setTimeout(\n () => registerNextCheck({ pageLoad, project_id, branch_id }),\n 5_000,\n );\n }\n}\n\nexport async function main(ids: { project_id: string; branch_id: string }) {\n // don't run this on custom domains, ie not on blog.val.run\n if (!window.location.hostname.endsWith(\".val.run\")) {\n console.log(\"Skipping live reload because not on *.val.run...\");\n return;\n }\n\n const pageLoad = Date.now();\n registerNextCheck({ pageLoad, ...ids });\n}\n",[],[213,342],"99448ff6-2796-11f0-8899-569c3dd06744","get-posts.ts","c21fe6ef-b589-48db-8bca-0e6e88cefc04",32,["D",1746218821788],"import { getBlogPostBySlug, getNewPosts } from \"./get-new-posts.ts\";\nimport { oldPosts } from \"./get-old-posts.ts\";\nimport { type BlogPost } from \"./types.ts\";\n\n// Get all blog posts (local + RSS)\nexport async function getAllBlogPosts(): Promise {\n return (await Promise.all([\n getNewPosts(),\n oldPosts,\n ]))\n .flat()\n .sort((a, b) => {\n return new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime();\n });\n}\n",[],[213,350],"d6947aa0-1bd0-11f0-84b8-569c3dd06744","get-old-posts.ts","9b2bab84-f0c0-4e3e-9522-bc252aa63f79",["D",1744924421521],"import RssParser from \"npm:rss-parser\";\nimport { BlogPost } from \"./types.ts\";\n\nconst OLD_BLOG_RSS = \"https://val-town-blog.pages.dev/rss.xml\";\n// Get blog posts from RSS feed\nasync function getOldPosts(): Promise {\n const parser = new RssParser();\n const feed = await parser.parseURL(OLD_BLOG_RSS);\n return feed.items.map(item => ({\n title: item.title || \"Untitled\",\n slug: item?.link?.split(\"/\")?.at(-2),\n link: \"/blog/\" + item?.link?.split(\"/\")?.at(-2),\n description: item.contentSnippet || \"\",\n pubDate: item.pubDate || new Date().toISOString(),\n author: item.creator || \"Val Town Team\",\n }));\n}\n\nexport const oldPosts: BlogPost[] = [\n {\n \"title\": \"Solving the internal / external API riddle\",\n \"slug\": \"api-conundrum\",\n \"link\": \"/blog/api-conundrum\",\n \"description\": \"Figuring out how to provide an API that's usable by everyone and fast for us to iterate on\",\n \"pubDate\": \"Thu, 27 Mar 2025 00:00:00 GMT\",\n \"author\": \"Tom MacWright\",\n },\n {\n \"title\": \"API Tokens Scopes\",\n \"slug\": \"api-token-scopes\",\n \"link\": \"/blog/api-token-scopes\",\n \"description\": \"Improving security with granular control over permissions\",\n \"pubDate\": \"Fri, 01 Nov 2024 00:00:00 GMT\",\n \"author\": \"Max McDonnell\",\n },\n {\n \"title\": \"Building a code-writing robot and keeping it happy\",\n \"slug\": \"building-a-code-writing-robot\",\n \"link\": \"/blog/building-a-code-writing-robot\",\n \"description\": \"Our experiences running LLMs in production\",\n \"pubDate\": \"Fri, 08 Nov 2024 00:00:00 GMT\",\n \"author\": \"Tom MacWright\",\n },\n {\n \"title\": \"How we built Townie – an app that generates fullstack apps\",\n \"slug\": \"codegen\",\n \"link\": \"/blog/codegen\",\n \"description\": \"Like Claude Artifacts, but with a backend and database\",\n \"pubDate\": \"Thu, 22 Aug 2024 00:00:00 GMT\",\n \"author\": \"JP Posma\",\n },\n {\n \"title\": \"End-programmer Programming\",\n \"slug\": \"end-programmer-programming\",\n \"link\": \"/blog/end-programmer-programming\",\n \"description\": \"A reflection on the goal of making programming for everyone.\",\n \"pubDate\": \"Tue, 08 Nov 2022 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Expanding the Vals API - RFC\",\n \"slug\": \"expanding-the-vals-api-rfc\",\n \"link\": \"/blog/expanding-the-vals-api-rfc\",\n \"description\": \"Our REST API lets you do a lot - and soon it will enable more\",\n \"pubDate\": \"Fri, 30 Jun 2023 00:00:00 GMT\",\n \"author\": \"André Terron\",\n },\n {\n \"title\": \"What we learned copying all the best code assistants\",\n \"slug\": \"fast-follow\",\n \"link\": \"/blog/fast-follow\",\n \"description\":\n \"From GitHub Copilot to ChatGPT to Claude Artifacts, how Val Town borrowed the best of all the code generation tools\",\n \"pubDate\": \"Fri, 03 Jan 2025 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town + Fal Partnership\",\n \"slug\": \"fal\",\n \"link\": \"/blog/fal\",\n \"description\": \"Bringing lightning fast AI image generation to Val Town\",\n \"pubDate\": \"Thu, 31 Oct 2024 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Moving from express to fastify, pt 1\",\n \"slug\": \"fastify\",\n \"link\": \"/blog/fastify\",\n \"description\": \"How switching to Fastify let us embrace runtime and compile-time types\",\n \"pubDate\": \"Tue, 02 Jul 2024 00:00:00 GMT\",\n \"author\": \"Tom MacWright\",\n },\n {\n \"title\": \"The first four Val Town runtimes\",\n \"slug\": \"first-four-val-town-runtimes\",\n \"link\": \"/blog/first-four-val-town-runtimes\",\n \"description\": \"From vm to vm2 to workers to processes, the long journey to how we run vals today\",\n \"pubDate\": \"Thu, 08 Feb 2024 00:00:00 GMT\",\n \"author\": \"Tom MacWright\",\n },\n {\n \"title\": \"New HTTP Val Runtime in Preview\",\n \"slug\": \"http-preview\",\n \"link\": \"/blog/http-preview\",\n \"description\": \"We built a new runtime for HTTP vals that is up to 5x faster at scale\",\n \"pubDate\": \"Wed, 17 Jul 2024 00:00:00 GMT\",\n \"author\": \"Max McDonnell\",\n },\n {\n \"title\": \"HTTP Streaming in Val Town\",\n \"slug\": \"http-streaming\",\n \"link\": \"/blog/http-streaming\",\n \"description\":\n \"Val Town supports HTTP streaming for streaming LLMs, large requests and responses, and server-sent events\",\n \"pubDate\": \"Thu, 13 Jun 2024 00:00:00 GMT\",\n \"author\": \"Max McDonnell\",\n },\n {\n \"title\": \"Introducing val.run\",\n \"slug\": \"introducing-val-run\",\n \"link\": \"/blog/introducing-val-run\",\n \"description\": \"Increasing the security of Val Town by isolating domains.\",\n \"pubDate\": \"Fri, 23 Jun 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Migrating from Supabase\",\n \"slug\": \"migrating-from-supabase\",\n \"link\": \"/blog/migrating-from-supabase\",\n \"description\": \"Our journey from Supabase to Postgres and Render\",\n \"pubDate\": \"Fri, 19 May 2023 00:00:00 GMT\",\n \"author\": \"Tom MacWright\",\n },\n {\n \"title\": \"The perks of a good OpenAPI spec\",\n \"slug\": \"openapi\",\n \"link\": \"/blog/openapi\",\n \"description\": \"Taking advantage of our typed REST API to build a platform around\\nVal Town.\",\n \"pubDate\": \"Thu, 25 Jul 2024 00:00:00 GMT\",\n \"author\": \"Tom MacWright\",\n },\n {\n \"title\": \"Joining the Open Source Pledge\",\n \"slug\": \"oss\",\n \"link\": \"/blog/oss\",\n \"description\": \"We donated $9,600 to open-source!\",\n \"pubDate\": \"Fri, 30 Aug 2024 00:00:00 GMT\",\n \"author\": \"Tom MacWright\",\n },\n {\n \"title\": \"Post-mortem: esm.sh Breaking Changes\",\n \"slug\": \"post-mortem-esm-sh\",\n \"link\": \"/blog/post-mortem-esm-sh\",\n \"description\": \"Some vals experienced lockfile and React errors due to breaking changes in esm.sh\",\n \"pubDate\": \"Thu, 16 Jan 2025 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Post-mortem: Exhausted Host Connection Pool\",\n \"slug\": \"post-mortem-exhausted-host-connection-pool\",\n \"link\": \"/blog/post-mortem-exhausted-host-connection-pool\",\n \"description\": \"A single degraded host impacted certain Vals for some time.\",\n \"pubDate\": \"Tue, 31 Dec 2024 00:00:00 GMT\",\n \"author\": \"Max McDonnell\",\n },\n {\n \"title\": \"Post-mortem: SQLite data sharing\",\n \"slug\": \"post-mortem-sqlite-data-sharing\",\n \"link\": \"/blog/post-mortem-sqlite-data-sharing\",\n \"description\": \"Disclosing and fixing a recent security issue\",\n \"pubDate\": \"Fri, 24 Nov 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Introducing Val Town Projects\",\n \"slug\": \"projects\",\n \"link\": \"/blog/projects\",\n \"description\":\n \"Dramatically increasing the scope of what you can build in Val Town, Projects are groups of vals, files, and folders, versioned collectively\",\n \"pubDate\": \"Fri, 31 Jan 2025 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Public Key Auth: Val Town users can be your users\",\n \"slug\": \"public-key-auth-val-town-users-can-be-your-users\",\n \"link\": \"/blog/public-key-auth-val-town-users-can-be-your-users\",\n \"description\": \"A novel authorization scheme for Val Town\",\n \"pubDate\": \"Tue, 27 Jun 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Redesigning Val Pages\",\n \"slug\": \"redesigning-val-pages\",\n \"link\": \"/blog/redesigning-val-pages\",\n \"description\": \"A more understandable entry-point to Val Town\",\n \"pubDate\": \"Wed, 01 May 2024 00:00:00 GMT\",\n \"author\": \"Tom MacWright\",\n },\n {\n \"title\": \"An Introduction to OpenAI fine-tuning\",\n \"slug\": \"an-introduction-to-openai-fine-tuning\",\n \"link\": \"/blog/an-introduction-to-openai-fine-tuning\",\n \"description\": \"How to customize OpenAI to your liking\",\n \"pubDate\": \"Fri, 25 Aug 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Improving the Val Editor\",\n \"slug\": \"editor-redesign\",\n \"link\": \"/blog/editor-redesign\",\n \"description\": \"Designing the core UI of editing\",\n \"pubDate\": \"Mon, 11 Dec 2023 00:00:00 GMT\",\n \"author\": \"Tom MacWright\",\n },\n {\n \"title\": \"How we lock your dependencies\",\n \"slug\": \"lockfiles\",\n \"link\": \"/blog/lockfiles\",\n \"description\": \"Adding lockfiles to Val Town for stability, security, and performance.\",\n \"pubDate\": \"Fri, 23 Aug 2024 00:00:00 GMT\",\n \"author\": \"Max McDonnell\",\n },\n {\n \"title\": \"Post-mortem: Blob Storage Outage\",\n \"slug\": \"post-mortem-blob-storage-outage\",\n \"link\": \"/blog/post-mortem-blob-storage-outage\",\n \"description\": \"Disclosure, mitigation, and next steps\",\n \"pubDate\": \"Thu, 02 May 2024 00:00:00 GMT\",\n \"author\": \"Max McDonnell\",\n },\n {\n \"title\": \"Code Search is Hard\",\n \"slug\": \"search-notes\",\n \"link\": \"/blog/search-notes\",\n \"description\": \"Searching code at scale without employing a search team is hard\",\n \"pubDate\": \"Wed, 10 Apr 2024 00:00:00 GMT\",\n \"author\": \"Tom MacWright\",\n },\n {\n \"title\": \"Security Disclosure 1\",\n \"slug\": \"security-disclosure-1\",\n \"link\": \"/blog/security-disclosure-1\",\n \"description\": \"Replacing our sandbox in response to a security disclosure\",\n \"pubDate\": \"Fri, 13 Jan 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Security Disclosure 2\",\n \"slug\": \"security-disclosure-2\",\n \"link\": \"/blog/security-disclosure-2\",\n \"description\": \"Missing permissions-checking in our internal save endpoint\",\n \"pubDate\": \"Thu, 01 Aug 2024 00:00:00 GMT\",\n \"author\": \"Tom MacWright\",\n },\n {\n \"title\": \"Val Town's Seed Round\",\n \"slug\": \"seed\",\n \"link\": \"/blog/seed\",\n \"description\": \"We raised $5.5m to make programming fun, accessible, and collaborative.\",\n \"pubDate\": \"Tue, 09 Apr 2024 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"The API we forgot to name\",\n \"slug\": \"the-api-we-forgot-to-name\",\n \"link\": \"/blog/the-api-we-forgot-to-name\",\n \"description\": \"An API that takes a Request and returns a Response - what was that, again?\",\n \"pubDate\": \"Thu, 19 Oct 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Introducing Townie AI\",\n \"slug\": \"townie\",\n \"link\": \"/blog/townie\",\n \"description\": \"Meet Townie, our AI assistant that helps you ship apps fast\",\n \"pubDate\": \"Thu, 26 Sep 2024 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Restricted Library Mode\",\n \"slug\": \"restricted-library-mode\",\n \"link\": \"/blog/restricted-library-mode\",\n \"description\": \"Evolving Val Town’s security model\",\n \"pubDate\": \"Thu, 04 May 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Deprecating the Run API\",\n \"slug\": \"deprecating-the-run-api\",\n \"link\": \"/blog/deprecating-the-run-api\",\n \"description\": \"Not every function should be an API\",\n \"pubDate\": \"Wed, 07 Feb 2024 00:00:00 GMT\",\n \"author\": \"André Terron\",\n },\n {\n \"title\": \"Using Val Town to chart dependency bloat\",\n \"slug\": \"devstats\",\n \"link\": \"/blog/devstats\",\n \"description\": \"Building a simple aggregate view of our codebase\",\n \"pubDate\": \"Fri, 13 Dec 2024 00:00:00 GMT\",\n \"author\": \"Tom MacWright\",\n },\n {\n \"title\": \"Val Town Newsletter 0\",\n \"slug\": \"val-town-newsletter-0\",\n \"link\": \"/blog/val-town-newsletter-0\",\n \"description\": \"Smarter typeahead, tutorials, much more.\",\n \"pubDate\": \"Tue, 20 Sep 2022 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Zod is amazing. Here’s why we're also using TypeBox\",\n \"slug\": \"typebox\",\n \"link\": \"/blog/typebox\",\n \"description\": \"Why we’re using TypeBox instead of Zod for our server validation layer\",\n \"pubDate\": \"Mon, 15 Jul 2024 00:00:00 GMT\",\n \"author\": \"Tom MacWright\",\n },\n {\n \"title\": \"Val Town Newsletter 1\",\n \"slug\": \"val-town-newsletter-1\",\n \"link\": \"/blog/val-town-newsletter-1\",\n \"description\": \"Programmatic notifications, Hacker News API, and more.\",\n \"pubDate\": \"Wed, 04 Jan 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 10\",\n \"slug\": \"val-town-newsletter-10\",\n \"link\": \"/blog/val-town-newsletter-10\",\n \"description\": \"A year of Val Town!\",\n \"pubDate\": \"Wed, 05 Jul 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 13\",\n \"slug\": \"val-town-newsletter-13\",\n \"link\": \"/blog/val-town-newsletter-13\",\n \"description\": \"SQLite, Blob Storage, updates to how Vals are named, and more\",\n \"pubDate\": \"Tue, 28 Nov 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 11\",\n \"slug\": \"val-town-newsletter-11\",\n \"link\": \"/blog/val-town-newsletter-11\",\n \"description\": \"Hiring, podcasts, and more!\",\n \"pubDate\": \"Mon, 31 Jul 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 12\",\n \"slug\": \"val-town-newsletter-12\",\n \"link\": \"/blog/val-town-newsletter-12\",\n \"description\": \"Product Hunt, v3 in development, and more\",\n \"pubDate\": \"Tue, 05 Sep 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Introducing Val Town v3\",\n \"slug\": \"introducing-val-town-v3\",\n \"link\": \"/blog/introducing-val-town-v3\",\n \"description\": \"Our move to embrace web standards\",\n \"pubDate\": \"Tue, 03 Oct 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Why is spawning a new process in Node so slow?\",\n \"slug\": \"node-spawn-performance\",\n \"link\": \"/blog/node-spawn-performance\",\n \"description\": \"At Val Town we spawn a lot of processes. We're working on making it faster\",\n \"pubDate\": \"Fri, 19 Jul 2024 00:00:00 GMT\",\n \"author\": \"Max McDonnell\",\n },\n {\n \"title\": \"Val Town Newsletter 14\",\n \"slug\": \"val-town-newsletter-14\",\n \"link\": \"/blog/val-town-newsletter-14\",\n \"description\": \"Pull Requests, Val Editor Redesign, AI Suggestions, OSS Docs, New Astro Blog, Templates\",\n \"pubDate\": \"Fri, 15 Dec 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 15\",\n \"slug\": \"val-town-newsletter-15\",\n \"link\": \"/blog/val-town-newsletter-15\",\n \"description\": \"Custom domains, Logs 3.0, Faster HTTP responses, Status page & much more!\",\n \"pubDate\": \"Tue, 13 Feb 2024 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 17\",\n \"slug\": \"val-town-newsletter-17\",\n \"link\": \"/blog/val-town-newsletter-17\",\n \"description\": \"Improved performance, redesigned val page, live coding, and much more!\",\n \"pubDate\": \"Wed, 29 May 2024 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 2\",\n \"slug\": \"val-town-newsletter-2\",\n \"link\": \"/blog/val-town-newsletter-2\",\n \"description\": \"Your monthly update of cool vals!\",\n \"pubDate\": \"Mon, 23 Jan 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 18\",\n \"slug\": \"val-town-newsletter-18\",\n \"link\": \"/blog/val-town-newsletter-18\",\n \"description\": \"HTTP Streaming, Semantic Search, Townie AI Chat, and a TypeScript SDK\",\n \"pubDate\": \"Tue, 25 Jun 2024 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 16\",\n \"slug\": \"val-town-newsletter-16\",\n \"link\": \"/blog/val-town-newsletter-16\",\n \"description\": \"Our seed round, growing team, Codeium completions, @std/openai, and more\",\n \"pubDate\": \"Mon, 22 Apr 2024 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 19\",\n \"slug\": \"val-town-newsletter-19\",\n \"link\": \"/blog/val-town-newsletter-19\",\n \"description\":\n \"Full-screen Editor, 5x faster HTTP vals, new Dashboard, improved Search, Townie redesign, Trending redesign, Profile filters, and more!\",\n \"pubDate\": \"Tue, 23 Jul 2024 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 20\",\n \"slug\": \"val-town-newsletter-20\",\n \"link\": \"/blog/val-town-newsletter-20\",\n \"description\": \"Townie AI, Faster vals, and Lockfiles\",\n \"pubDate\": \"Sat, 07 Sep 2024 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 21\",\n \"slug\": \"val-town-newsletter-21\",\n \"link\": \"/blog/val-town-newsletter-21\",\n \"description\": \"Townie upgrades & faster HTTP vals\",\n \"pubDate\": \"Fri, 11 Oct 2024 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 22\",\n \"slug\": \"val-town-newsletter-22\",\n \"link\": \"/blog/val-town-newsletter-22\",\n \"description\": \"Townie upgrades, Scoped API permissions, Fal partnership\",\n \"pubDate\": \"Mon, 02 Dec 2024 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 23\",\n \"slug\": \"val-town-newsletter-23\",\n \"link\": \"/blog/val-town-newsletter-23\",\n \"description\": \"Projects beta, Deno 2, Use cases, and more\",\n \"pubDate\": \"Wed, 22 Jan 2025 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 24\",\n \"slug\": \"val-town-newsletter-24\",\n \"link\": \"/blog/val-town-newsletter-24\",\n \"description\":\n \"Val Town Projects, Highlight to edit, Logs redesign, Public endpoints with private code, and much more\",\n \"pubDate\": \"Mon, 03 Mar 2025 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 3\",\n \"slug\": \"val-town-newsletter-3\",\n \"link\": \"/blog/val-town-newsletter-3\",\n \"description\": \"Expanding our founding team\",\n \"pubDate\": \"Tue, 07 Feb 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 5\",\n \"slug\": \"val-town-newsletter-5\",\n \"link\": \"/blog/val-town-newsletter-5\",\n \"description\": \"Shipping our Deno runtime\",\n \"pubDate\": \"Thu, 23 Mar 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 4\",\n \"slug\": \"val-town-newsletter-4\",\n \"link\": \"/blog/val-town-newsletter-4\",\n \"description\": \"Rebuilding on Deno, HTML emails, and more\",\n \"pubDate\": \"Thu, 02 Mar 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 6\",\n \"slug\": \"val-town-newsletter-6\",\n \"link\": \"/blog/val-town-newsletter-6\",\n \"description\": \"Lots of little updates!\",\n \"pubDate\": \"Fri, 07 Apr 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 7\",\n \"slug\": \"val-town-newsletter-7\",\n \"link\": \"/blog/val-town-newsletter-7\",\n \"description\": \"Moving off of Supabase and enhancing our security with restricted library mode\",\n \"pubDate\": \"Mon, 15 May 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Newsletter 8\",\n \"slug\": \"val-town-newsletter-8\",\n \"link\": \"/blog/val-town-newsletter-8\",\n \"description\": \"Announcing Val Town Pro\",\n \"pubDate\": \"Wed, 31 May 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Town Town\",\n \"slug\": \"val-town-town\",\n \"link\": \"/blog/val-town-town\",\n \"description\": \"Can we implement Val Town on Val Town?\",\n \"pubDate\": \"Fri, 01 Nov 2024 00:00:00 GMT\",\n \"author\": \"Max McDonnell\",\n },\n {\n \"title\": \"Val Town Newsletter 9\",\n \"slug\": \"val-town-newsletter-9\",\n \"link\": \"/blog/val-town-newsletter-9\",\n \"description\": \"Refactoring the core component of Val Town for better performance.\",\n \"pubDate\": \"Tue, 20 Jun 2023 00:00:00 GMT\",\n \"author\": \"Steve Krouse\",\n },\n {\n \"title\": \"Val Vibes: Semantic search in Val Town\",\n \"slug\": \"val-vibes\",\n \"link\": \"/blog/val-vibes\",\n \"description\": \"How to build semantic search with embeddings for Val Town within Val Town itself\",\n \"pubDate\": \"Tue, 18 Jun 2024 00:00:00 GMT\",\n \"author\": \"JP Posma\",\n },\n].map(post => ({ ...post, oldBlog: true }));",[],[213,358],"997d825c-2796-11f0-99e0-569c3dd06744","get-new-posts.ts","60ff4e61-ac77-48ad-8022-0e80e844e819",39,["D",1746218821790],"import {\n listFiles,\n readFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport matter from \"npm:gray-matter\";\nimport { posts } from \"./posts.ts\";\nimport { BlogPost } from \"./types.ts\";\n\n// Get all blog posts from the file system\nexport async function getNewPosts(): Promise {\n const files = await listFiles(import.meta.url);\n const blogPostFiles = files.filter(\n (file) =>\n file.path.startsWith(\"posts/\") &&\n file.path !== \"posts/EXAMPLE.md\",\n );\n\n const posts: BlogPost[] = [];\n\n for (const file of blogPostFiles) {\n const content = await readFile(file.path, import.meta.url);\n const { data, content: markdownContent } = matter(content);\n\n // Skip if required frontmatter is missing\n if (!data.title || !data.pubDate) continue;\n\n const slug = file.path\n .replace(\"posts/\", \"\")\n .replace(\".md\", \"\")\n .replace(/^\\d{4}-\\d{2}-\\d{2}-/, \"\");\n\n posts.push({\n title: data.title,\n link: \"/\" + slug,\n description: data.description || \"\",\n pubDate: data.pubDate,\n author: data.author || \"Val Town Team\",\n slug,\n content: markdownContent,\n });\n }\n\n return posts;\n}\n\n// Get a single blog post by slug\nexport async function getBlogPostBySlug(\n slug: string,\n): Promise {\n const post = posts.find((post) => post.slug.includes(slug));\n return post;\n}\n",[],[213,365],"993e2c2e-2796-11f0-b0c0-569c3dd06744","constants.ts","26d9261f-2bbc-4222-a6b4-c9cca8989e7a",31,["D",1746218821788],"export const BLOG_URL = \"https://blog.val.town\";\nexport const SITE_TITLE = \"Val Town Blog\";\nexport const SITE_DESCRIPTION = \"Updates and articles from the Val Town team\";\n",[],[213,373],["D",1744924421521],[284,285,286,287,288,289,290,291],[213],"d6946e84-1bd0-11f0-84b8-569c3dd06744","index.css","3dde401b-1396-4df6-9d47-f51fbff9e62e",["D",1744924421521],"* {\n box-sizing: border-box;\n}\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 --text: #000;\n --background: #fff;\n\n /** colors based on hljs solar-flare-light theme */\n --link: #a363d5;\n --highlight: #33b5e1;\n --muted: #57636d; /* --muted: #85939e; */\n --light-highlight: color-mix(in srgb, var(--highlight) 50%, transparent);\n\n --font: \"iA Writer Quattro\", system-ui, sans-serif;\n --mono: \"iA Writer Mono\", Menlo, monospace;\n\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 16px;\n --space-4: 32px;\n --space-5: 64px;\n --space-6: 128px;\n\n --font-size-xl: 36px;\n --font-size-1: 32px;\n --font-size-2: 24px;\n --font-size-3: 20px;\n --font-size-4: 18px;\n --font-size-5: 14px;\n --font-size-6: 12px;\n\n --line-height-h1: 1.25;\n --line-height-h2: calc(32 / 24);\n --line-height-h3: calc(24 / 20);\n --line-height-h4: calc(32 / 18);\n --line-height-h5: calc(24 / 14);\n --line-height-h6: calc(16 / 12);\n\n --rounded: 12px;\n}\n\nbody {\n margin: 0;\n font-family: var(--font);\n line-height: 1.5;\n color: var(--text);\n background-color: var(--background);\n\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\nh1, h2, h3, h4, h5, h6, p, ol, ul {\n margin: 0;\n}\n\nh1, .h1 {\n font-size: var(--font-size-1);\n line-height: var(--line-height-h1);\n margin-top: var(--space-4);\n letter-spacing: -0.03em;\n}\n\n.post-title {\n font-weight: 400;\n letter-spacing: -0.03em;\n}\n\nh2, .h2 {\n font-size: var(--font-size-2);\n line-height: var(--line-height-h2);\n margin-top: var(--space-4);\n margin-bottom: var(--space-2);\n}\n\nh3, .h3 {\n font-size: var(--font-size-3);\n line-height: var(--line-height-h3);\n margin-top: var(--space-4);\n margin-bottom: var(--space-2);\n}\n\nh4, .h4 {\n font-size: var(--font-size-4);\n line-height: var(--line-height-h4);\n margin-top: var(--space-4);\n margin-bottom: var(--space-2);\n}\n\nh5, .h5 {\n font-size: var(--font-size-5);\n line-height: var(--line-height-h5);\n margin-top: var(--space-4);\n margin-bottom: var(--space-2);\n}\n\nh6, .h6 {\n font-size: var(--font-size-6);\n line-height: var(--line-height-h6);\n margin-top: var(--space-3);\n margin-bottom: var(--space-2);\n}\n.f6 {\n font-size: var(--font-size-6);\n}\n\n.h0 {\n font-size: var(--font-size-xl);\n line-height: 48px;\n}\n.lead {\n font-size: var(--font-size-3);\n}\n\na {\n color: inherit;\n text-decoration: underline;\n text-decoration-color: var(--highlight);\n}\na:hover {\n text-decoration-color: var(--link);\n}\n.prose a:hover {\n color: var(--link);\n}\n\nh1 a, h2 a, h3 a, h4 a, h5 a, h6 a {\n color: inherit;\n text-decoration: underline;\n text-decoration-color: var(--highlight);\n text-decoration-thickness: 2px;\n}\nh1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {\n text-decoration-color: var(--link);\n}\n\np, ol, ul {\n margin-bottom: var(--space-3);\n font-size: var(--font-size-4);\n line-height: calc(32 / 18);\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\npre {\n margin-bottom: var(--space-3);\n}\n\npre, code {\n font-family: var(--mono);\n}\n\npre > code.hljs {\n font-size: var(--font-size-5);\n line-height: var(--line-height-h5);\n padding: 24px;\n border-radius: var(--rounded);\n}\n\n/** TODO: test this */\nblockquote {\n padding-left: var(--space-3);\n padding-right: 0;\n margin-left: 0;\n margin-right: 0;\n margin-top: var(--space-4);\n margin-bottom: var(--space-4);\n border-left: 2px solid var(--highlight);\n}\nblockquote p {\n font-size: var(--font-size-3);\n}\n\ntable {\n width: 100%;\n font-size: 80%;\n border-collapse: collapse;\n margin: 20 0 20 0px;\n}\ntable th, td {\n text-align: left;\n}\ntable th {\n font-weight: 700;\n}\ntable td {\n border-top: 1px solid var(--light-highlight);\n}\ntable th, table td {\n padding: 8px 0;\n}\n\n.page {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n}\n\n.container {\n max-width: 1280px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.post-list {\n list-style: none;\n padding: 0;\n}\n.post-item {\n max-width: 48em;\n margin-top: var(--space-3);\n margin-bottom: var(--space-3);\n}\n\n.header {\n min-height: 128px;\n display: flex;\n align-items: center;\n}\n.spacer {\n margin: auto;\n}\n.logo {\n display: flex;\n align-items: center;\n}\n.nav {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n.social-links {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n\n.nav-link {\n font-size: var(--font-size-4);\n font-weight: 700;\n}\n\n.nav-link, .social-link {\n color: inherit;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 6px;\n border-radius: 9999px;\n transition-property: color, background-color;\n transition-timing-function: ease-in-out;\n transition-duration: 200ms;\n}\n.social-link:hover {\n color: var(--background);\n background-color: var(--highlight);\n}\n\n.title {\n font-size: var(--font-size-xl);\n font-weight: 700;\n color: inherit;\n text-decoration: none;\n}\n.title:hover {\n text-decoration: underline;\n text-decoration-color: var(--highlight);\n}\n\n.hero-grid {\n display: grid;\n gap: var(--space-6);\n margin-top: var(--space-4);\n margin-bottom: var(--space-4);\n}\n\n.footer {\n display: flex;\n align-items: center;\n min-height: 256px;\n}\n\n.copyright {\n text-align: right;\n margin-bottom: var(--space-4);\n}\n\n.prose, .container-small {\n max-width: 48em;\n margin-left: auto;\n margin-right: auto;\n margin-top: var(--space-5);\n margin-bottom: var(--space-5);\n}\n\n.eyebrow {\n font-size: var(--font-size-6);\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n height: var(--space-4);\n color: var(--highlight);\n border-bottom: 2px solid var(--light-highlight);\n}\n\n.byline {\n font-size: var(--font-size-5);\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin-top: var(--space-2);\n margin-bottom: var(--space-2);\n}\n.weekday, .tag {\n display: inline-flex;\n align-items: center;\n height: 24px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n font-size: var(--font-size-6);\n font-weight: 700;\n color: var(--background);\n background-color: var(--highlight);\n border-radius: 3px;\n padding-left: 6px;\n padding-right: 6px;\n}\n.timestamp, .author {\n color: var(--muted);\n}\n\n@media screen and (min-width: 48em) {\n .hero-grid {\n grid-template-columns: 3fr 2fr;\n }\n}\n\n/** DEBUG */\n.debug, .debug * {\n outline: 1px solid rgba(0, 255, 255, 0.2);\n}\n.baseline {\n background: linear-gradient(\n to bottom,\n transparent calc(100% - 1px),\n var(--light-highlight) calc(100% - 1px)\n );\n background-size: 100% var(--space-3);\n}",[],[219,384],["D",1744924421521],[282],[219],"99785e9e-2796-11f0-9acb-569c3dd06744","rss.ts","350cf7ca-068c-4d78-95f5-684adc5fe801",38,["D",1746218821961],"import { Feed } from \"https://esm.sh/feed@4.2.2\";\nimport { Hono } from \"https://esm.sh/hono@3.12.0\";\nimport { posts } from \"../utils/posts.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n // Create a new feed instance\n const feed = new Feed({\n title: \"Val Town Blog\",\n description: \"The official blog for Val Town\",\n id: \"https://blog.val.town/\",\n link: \"https://blog.val.town/\",\n language: \"en\",\n favicon: \"https://blog.val.town/favicon.svg\",\n updated: new Date(posts[0].pubDate),\n feedLinks: {\n rss: \"https://blog.val.town/rss.xml\",\n },\n });\n\n // Add each post to the feed\n for (const post of posts) {\n feed.addItem({\n title: post.title,\n id: `https://blog.val.town${post.link}`,\n link: `https://blog.val.town${post.link}`,\n description: post.description,\n author: [\n {\n name: post.author,\n },\n ],\n date: new Date(post.pubDate),\n });\n }\n\n // Return the RSS feed\n return new Response(feed.rss2(), {\n headers: {\n \"Content-Type\": \"application/xml; charset=utf-8\",\n },\n });\n});\n\nexport default app;\n",[],[224,394],"9951be10-2796-11f0-b7bf-569c3dd06744","proxy.ts","2e637362-09af-43c2-ad4a-b2c1a17b8130",34,["D",1746218821864],"import { Hono } from \"https://esm.sh/hono@3.12.0\";\n\nconst app = new Hono();\n\nconst OLD_BLOG_URL = \"https://val-town-blog.pages.dev/\";\n\nexport async function proxyHonoRequest(c: any) {\n const url = new URL(c.req.url);\n\n // Proxy the request to the old blog\n const response = await fetch(\n new Request(OLD_BLOG_URL + url.pathname + url.search, {\n method: c.req.method,\n headers: c.req.raw.headers,\n }),\n );\n\n // Create a new response with the same status, headers, and body\n const newResponse = new Response(response.body, {\n status: response.status,\n statusText: response.statusText,\n headers: response.headers,\n });\n return newResponse;\n}\n\n// Fallback proxy route - handles all other requests\napp.all(\"*\", proxyHonoRequest);\n\nexport default app;\n",[],[224,402],"d6944832-1bd0-11f0-84b8-569c3dd06744","og-image.ts","a5c86cf7-9b2a-41cc-954c-1f90cd8df3b2",["D",1744924421521],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { render as renderPNG } from \"https://deno.land/x/resvg_wasm@0.2.0/mod.ts\";\nimport { Hono } from \"https://esm.sh/hono@3.12.0\";\nimport { renderToStaticMarkup } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport OGImage from \"../components/OGImage.tsx\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const title = c.req.query(\"title\");\n const format = c.req.query(\"format\");\n const svg = renderToStaticMarkup();\n\n if (format === \"svg\") {\n return new Response(svg, {\n headers: {\n \"Content-Type\": \"image/svg+xml\",\n },\n });\n }\n\n const png = await renderPNG(svg);\n\n return new Response(png, {\n headers: {\n \"Content-Type\": \"image/png\",\n \"Content-Length\": png.length.toString(),\n },\n });\n});\n\nexport default app;",[],[224,410],"99714082-2796-11f0-ac05-569c3dd06744","home.ts","4af5a1c8-e9b4-40f0-9b9c-70bc09a2728b",37,["D",1746218822018],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Hono } from \"https://esm.sh/hono@3.12.0\";\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport { HomePage } from \"../components/HomePage.tsx\";\nimport { posts } from \"../utils/posts.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const html = renderToString();\n return c.html(html);\n});\n\nexport default app;\n",[],[224,417],"d69444e0-1bd0-11f0-84b8-569c3dd06744","favicon.ts","08a86db5-3af2-475e-a221-e9d3b52f1480",["D",1744924421521],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Hono } from \"https://esm.sh/hono@3.12.0\";\nimport { renderToStaticMarkup } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport { Favicon } from \"../components/LogoMark.tsx\";\n\nconst app = new Hono();\n\nconst svg = renderToStaticMarkup();\n\napp.get(\"/\", async (c) => {\n return c.body(\n svg,\n {\n headers: {\n \"Content-Type\": \"image/svg+xml\",\n },\n },\n );\n});\n\nexport default app;",[],[224,425],"d6944314-1bd0-11f0-84b8-569c3dd06744","blog.ts","bf3cf9b7-379f-4ee6-9bf7-3f9e3a1c26f5",["D",1744924421521],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Hono } from \"https://esm.sh/hono@3.12.0\";\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport { BlogPostComponent } from \"../components/BlogPost.tsx\";\nimport { getBlogPostBySlug } from \"../utils/get-new-posts.ts\";\nimport { processMarkdown } from \"../utils/render-markdown.ts\";\nimport { proxyHonoRequest } from \"./proxy.ts\";\n\nconst app = new Hono();\n\n// Handle blog post routes\napp.get(\"/:slug\", async (c) => {\n const slug = c.req.param(\"slug\");\n\n let post = await getBlogPostBySlug(slug);\n if (!post || post?.oldBlog) {\n // Post doesn't exist, proxy to the old blog\n return proxyHonoRequest(c);\n }\n\n // Process the markdown content\n const processedContent = await processMarkdown(post.content);\n\n // Render the blog post\n const html = renderToString(\n ,\n );\n\n return c.html(html);\n});\n\nexport default app;",[],[224,432],["D",1744924421521],[275,276,277,278,279,280],[224],"9984e52e-2796-11f0-919c-569c3dd06744","EXAMPLE.md","773e85a4-5402-42f2-9448-0d8326bedd52",40,["D",1746218822198],"---\ntitle: Sample Val Town Blog Post\ndescription: This is a sample blog post that demonstrates how to create content for the Val Town Blog.\npubDate: 2025-03-29T00:00:00.000Z\nauthor: Val Town Team\n---\n\nThis is a sample blog post that demonstrates how to create content for the Val\nTown Blog.\n\nTo add a new post to the Val Town Blog:\n\n1. Create a markdown file in the `/posts` directory\n2. Add YAML frontmatter with title, description, pubDate, and author\n3. The post will automatically appear on the homepage\n\n## Markdown Support\n\nThe blog supports GitHub Flavored Markdown features:\n\n### Code Blocks with Syntax Highlighting\n\n```typescript\nfunction hello() {\n console.log(\"Hello, Val Town!\");\n}\n```\n\n### Tables\n\n| Feature | Supported |\n| ------- | --------- |\n| Tables | ✅ |\n| Lists | ✅ |\n| Code | ✅ |\n\n### Lists\n\n- Item 1\n- Item 2\n- Item 3\n\n### Images\n\nImages can be included using markdown syntax.\n\n## Conclusion\n\nThis is just a sample post. The blog system automatically processes markdown\nfiles and displays them on the homepage.\n",[],[229,442],"e34cac7c-2125-11f0-bd59-569c3dd06744","2025-04-17-vt-cli.md","00fd6d60-1bd1-11f0-a6e2-569c3dd06744",27,["D",1745510705934],22,"---\ntitle: Introducing VT, The Val Town CLI\ndescription: Introducing VT, the official command line tool to edit, manage, and begin Val Town projects from the comfort of your terminal!\npubDate: 2025-04-17T00:00:00.000Z\nauthor: Wolf Mermelstein\n---\n\nIntroducing VT: the official command line tool to edit, manage, and begin Val Town projects from the comfort of your terminal!\n\n

\n \n

\n\nVal Town gives you a super fast, intuitive, and powerful way to instantly create (and deploy) websites. But until now, this entire experience has been on the web. There's a lot of reasons to want to work on your Val Town projects locally. Maybe you want to work from the comfort of your favorite editor, whether that's vscode, with your favorite extensions, theme, and keybinds, or Neovim and tmux. Or you want to access powerful local devtools, like ripgrep or sed, or increasingly AI powered modern ones like Claude Code or AI powered IDEs like Cursor. Maybe you want to use `git`, or some other version control system outside of Val Town. Or maybe you want an easy way to port a non-Val-Town project to Val Town. Now you can!\n\n`vt` is designed to be a simple, robust, interactive CLI to interface with val town projects.\n\n![](404Wolf/Posts/Projects/makingVtCli/Resources/recording%201.gif)\n\nWith VT, you can:\n\n* `vt clone` a val town project to a folder, and then `vt watch` that folder, so that as you make changes locally they are automatically pushed to val town. This includes editing, creating, deleting, and renaming vals.\n* `vt checkout`, and manage multiple branches locally, working on multiple features at once.\n* `vt create` or `vt remix` to start new projects locally, and `vt list` and `vt delete` to manage your Val Town projects.\n* And more!\n\n![63 files cloned in 0.17 seconds](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/vtIsFast.gif)\n\n`vt` is also fast! Operations all happen concurrently whenever possible. Watch 62 files get cloned in 0.17 seconds!\n\n`vt` is still in beta, and we'd love your feedback! Join [the Val Town Discord](https://discord.gg/hd9U4GGB) to leave feedback. Vt is built entirely within Val Town \"userspace\" (with the public API), and the codebase can be found at .\n\n## Try it out!\n\nTo get started using `vt`, make sure [you have Deno installed](https://docs.deno.com/runtime/getting_started/installation/), and then run\n\n```bash\ndeno install -grAf jsr:@valtown/vt\n```\n\nTo authenticate with `val.town`, just run `vt`, and you should get the dialog\n\n![](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/b2f61bc1-8402-4192-9a28-6e6458755b80.webp)\n\nRespond yes to the prompt, and ensure you select to create an API key with user read & project read+write permissions.\n\nThen try cloning one of your projects with `vt clone`!\n\n![](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/992c7283-3b28-4790-ab3a-50c4d496d181.webp)\n\nWhich will open up a menu with all of your projects that you can clone. You can actually clone anyone's project, but you won't be able to push if it isn't yours (you can always `vt remix` though!).\n\n![](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/c323e98d-3e83-4d73-b344-121a308267df.webp)\n\nOnce cloned, you can run `vt watch` to enable automatic syncing with Val Town. When you edit the project locally, it will automatically upload the changes to Val Town. You may find it useful to use a terminal window in your editor of choice so you can easily see the changes being pushed and see errors.\n\nFinally, fire up your favorite editor and start creating!\n\nFor more information, head over to the [`vt` JSR page](https://jsr.io/@valtown/vt)!\n\nFor the curious, here's a technical overview of the making (and origin) of `vt`.\n\n# Finding the path\n\nThere's a lot of different ways we could engineer a local Val Town experience.\n\n![Pomdtr's Val Town VScode extension](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/pomdtrextension.webp)\n\nOne of the very first sight of Val Town \"localdev\" came with Pomdtr's [Val Town vscode extension](https://marketplace.visualstudio.com/items?itemName=pomdtr.valtown). The extension was pretty straightforward, it hooked into the Val Town API to let you edit your vals locally and then push them to Val Town. It was made pre-project era, so it only supports traditional Vals. VSCode runs on electron, and gives extension developers a lot of power; the extension also offered web previews, and the ability to use Val Town SQL and blobstore.\n\nA bit later, I came along and implemented a fuse file system for Val Town vals, also pre-project era. Fuse is a Linux protocol that lets you implement arbitrary file systems in userspace. By implementing a fuse Val Town file system, all edits locally are instantly reflected on the Val Town website, and vice versa (if you update remotely, then if you try to save locally your editor will say something along the lines of \"more recent edits found, are you sure you want to write\"). Fuse is very powerful -- writes, reads, and all other file system syscalls can be handled with whatever response you want.\n\n![Diagram from https://www.cs.cmu.edu/~./fp/courses/15213-s07/lectures/15-filesys/index.html](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/bcbdf72d-0875-4288-ab8c-3b06b1cace32.webp)\n\nThis project was `vtfs`. Originally it was a side project of mine, because \"can I write the code in neovim\" was the first question I asked myself when I first started using Val Town. I love the elegance of a file being a website, and thought it would be fun to be able to do a \"touch website.ts\" to create them, via the magic of fuse, and Val Town! There's a lot to love about the perfect 1:1 mapping of Val to File.\n\n[And so I built it](https://github.com/404wolf/valfs)! `valfs` was really cool: you'd run `vt mount [dir]` and you'd get a folder with all of your vals in it.\n\n`vtfs` was built written in go with [`go-fuse`](https://github.com/hanwen/go-fuse), because, well, I didn't want to deal with C++ package management, and I wanted to try go. `go` is super cool, it's like a \"cleaner\" `c` with actually pleasant devx, and the best type of imports (URL imports!).\n\nFuse is a two-part system that involves userspace/kernel-space communication via a special [\"wire protocol\"](https://john-millikin.com/the-fuse-protocol). The official userspace [\"reference library\"](https://github.com/libfuse/libfuse) for implementing fuse filesystems is written in `C`, but what's cool about `go-fuse` is that it's entirely rewritten in pure go (not just a wrapper with `cgo`).\n\n![](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/37c9a2a8-3f0a-4b52-a9c7-cf7c0cc0799b.webp)\n\nWe decided to rewrite it mostly for compatibility reasons. Linux offers native fuse support, but MacOS and Windows definitely do not. For Mac, there's a project called [MacFuse](https://macfuse.github.io/) that acts as a kernel extension to provide fuse support to Mac. However, it's not totally stable, and [Apple is deprecating kernel extensions](https://developer.apple.com/support/kernel-extensions/) and it may not be the best long term solution. There's a really cool project called [fuse-t](https://www.fuse-t.org/) that takes a different approach, where it implements the fuse protocol by forwarding fuse to NFS (network file system), a protocol that Macs do naively support.\n\nOne idea we had to avoid dealing with fuse was to build a generic FTP server, largely inspired by Pomdtr's [Webdav](https://www.val.town/x/pomdtr/webdav/code/webdav.ts) server. His server works totally in userspace and maps the Val Town API to Webdav really nicely. [Webdav](https://en.wikipedia.org/wiki/WebDAV) is a generic \"file system\" ish (it's quite limited) protocol over HTTP, and making a FTP server would just be implementing on a fancier file transfer protocol that's more capable. What's nice about using protocols like these is that you can then just use `rclone` for mounting or syncing.\n\nIn addition to compatibility issues, implementing a fuse backend is just plain complicated. The way `valfs` worked, on [every write syscall](https://github.com/404Wolf/valfs/blob/418eff73b080fe8cdb7fe7f7afd3fe30dbae2720/valfs/vals/valfile.go#L116C1-L153C2), `valfs` would have to parse the file, extract metadata, and do multiple API calls. Even though `vt` is a total rewrite, many design choices for `vt` came from `vtfs`, like considerations on how we handle metadata, the notion that \"a val is a file,\" and more.\n\nAt its core, `vt` was built to be a decentralized synchronization tool. Unlike `vtfs`, where the sync is guaranteed and live, syncing happens asynchronously with `vt` (even when \"live syncing\" with `vt watch`, which is only \"psudo-live\" since you could create conflicts by updating state on the website while watching). We rebuilt `vt` in typescript with `Deno`, because, well, we (and our community) love typescript and Deno, there's an official [typescript sdk](https://docs.val.town/api/sdk/) for Val Town, and because we have hopes of turning `vt` into a esm library in the future (so you can use `vt` in your own, non-val-town workflows).\n\nWe originally wanted to host `vt` itself on Val Town, where we would begin development with git and github, and then eventually transition to using `vt` itself to continue development of `vt` (bootstrapping!).\n\nEarly on, however, we ran into a lot of trouble with path aliases. When you use `http` imports for libraries (as you would if we hosted `vt` on Val Town, since you'd do `deno install -grAf https://esm.town/std/vt` or similar), all the imports need to be relative since you lose all the configuration of your `deno.json`. This is an issue with `Deno` that is [\"expected behavior\"](https://github.com/denoland/deno/issues/25994). We did consider at one point just [caving and making all the imports relative](https://github.com/val-town/vt/pull/28), but it really sucks to have imports like `import foo from \"../../../../../foo.ts\";` all over the place. Unfortunately, this is a platform limitation that we still need to solve. One idea we had to get around this was to install the source code locally in a temp directory with the `deno.json` via a (http importable) install script. I even wrote a [Val that generates the install script to make this work for any project!](https://www.val.town/x/wolf/runWithDenoJson). You can see this in action (and it might still work!) by visiting [`https://run-with-deno-json.val.run/gh/val-town/vt/main/vt.ts`](https://run-with-deno-json.val.run/gh/val-town/vt/main/vt.ts) (notice how you put the entrypoint to the http library in the url path). We used this approach for a bit, but [eventually ran into weird issues where Deno would keep the old version cached](https://github.com/val-town/vt/issues/40) even if you did a new install with `-r`, which we never totally solved but I imagine is related to the fact that the entrypoint of `vt`, `vt.ts`, itself never changed.\n\n`vt` also has a [lot of automated tests](https://github.com/val-town/vt/actions), and currently Val Town doesn't offer automated CI.\n\n# Going Git\n\n`vt` is heavily inspired by both `git` and [gh](https://cli.github.com/), the github CLI. There's elements like `vt push` and pull that are very `git`ty, and things like `vt create` that act like `gh repo create`. Or, commands like `vt browse`, similar to `gh browse`, which opens up the current project in a web browser.\n\nLike `git`, `vt` \"Projects\" are denoted by the existence of a dot folder -- in `vt`'s case, `.vt`. This is also where state and configuration data lives for the project. Right now, the only thing that lives in `.vt` is `state.json`, which contains information about the current version of the project checked out, and the project and branch id.\n\nUnlike `git`, where you have a `stage` and `commits`, `vt` only has a notion of `pushing` and `pulling`. This means that the local state could conflict in ways with the remote state that could result in changes that we can't reconsile: like, if you pull and you have newer changes locally, or If you push and there are newer changes in the remote.\n\n[We spent a while considering what pushing and pulling meant](https://github.com/val-town/vt/issues/45). The conclusion we came to:\n\n* `pushing` is a forceful procedure. When you push we ensure that the remote state matches the local state, and by the end of the push the remote state should match the local state with no changes to the local state. This might sound scary, but we do versioning for projects, so in the worst case you could revert to an earlier version on the website and pull.\n* `pulling` is a \"graceful\" procedure. When you pull, you may receive modifications, deletions, creations, or renames to local files. For all of these changes except creations, pulling warns the user that local changes will be lost, and you need to confirm to complete the pull. This is implemented internally by doing a \"dry\" pull and checking what changes would be made locally.\n\nThis means that the contract for push is \"push the local state to make sure the remote matches it\" and pull is \"get the remote state and make sure the local state matches it.\"\n\nOne totally different idea that I had to solve this problem of \"the meaning of push and pull\" was to totally scrap both, and change the contract to \"sync to a consistent state.\" As it turns out, syncing really just redirects all the complexity, and is still quite complicated to implement.\n\n![](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/23f9ca70-b232-4f70-a746-1a64c9590704.webp)\n\nI spent a while designing an algorithm for syncing, where the primary \"building block\" of the algorithm was to \"walk\" through revisions and make changes to the local state incrementally. Because of how Val Town does versioning, the changes could be applied one version at a time.\n\nOn the subject of versioning: the way Val Town does it made developing `vt` easier since versions are just increasing integers, but as a user numbers are sort of meaningless. In one project I'm working on, I've hit versions in the thousands! My solution to make versions more useful is to maintain a `versions.txt` file that adds messages to specific versions. Right now, reverting to an older version is the same as doing a force push to the current branch with that version, and this can be done via the web ui (and is not currently a `vt` feature).\n\nSyncing would start by pulling to incorporate all remote changes locally, and then push the remainder. It also would look at modification times to try to guess which update should be kept in the case of local/remote conflicts. [Here's the actual proposed algorithm for the curious](https://gist.github.com/404Wolf/3e79ce4b50c39cbc332fc07d7d2a0522).\n\nWith the way `vt` does git, we get a lot of internal logic \"for free.\" Many of the internal vt operations are able to easily piggyback off of one another in (sometimes) mind bending ways. Like `vt push --dry-run` being the same as `vt status`, `vt pull` just does a `vt clone`, and then removes stuff that does not exist on the remote that still exists locally, or `vt checkout` is somewhat like `vt pull`-ing the branch you are trying to check out. These abstractions make testing and maintenance much easier.\n\nThere's been some discussion of how far we should lean into the `git` analogy. For example, `vt` has command flags like `checkout -D/-b`, where, without the existence of `git` would probably be `branch create` `branch switch`. We don't think there's a \"correct\" answer here, and are open to thoughts on what would be most intuitive/ergonomic for folks. [Even git can't always seem to figure it out](https://stackoverflow.com/questions/57265785/whats-the-difference-between-git-switch-and-git-checkout-branch).\n\nWe also considered [and even implemented at one point](https://github.com/val-town/vt/pull/7) adding support for `vt stash`, so you could save local changes that you didn't want to push, but decided that we wanted to keep Val Town as the source of truth and try to avoid adding additional states. We may return to this later, since it would be nice to be able to \"scrap\" local changes without totally losing them, though. One thought is putting these changes into a \"scratchpad\" branch instead of storing them locally.\n\nFinally, something we knew early on is that people would need a way to opt out of syncing stuff. Originally, I thought this would be really straightforward, just add a `.vtignore`, and implement it like a `.gitignore`: a newline separated list of globs. But it turns out that `.gitignore`s are kinda complicated, and it isn't quite like that. I started down the path of trying to implement this myself, but eventually decided to use a [gitignore-parser](https://jsr.io/@cfa/gitignore-parser) library that I found. There's really interesting fancy `gitingore` behavior you've probably never thought about, like if you have conflicting patterns like `!foo.tsx` and `foo.tsx`, later ones take president, and `/` prefixed stuff is relative to the root of the git directory. [Git has a whole man page on it!](https://git-scm.com/docs/gitignore). We still don't have perfect parity, like `.vtignores` apply for the entire project and not just \"lower\" files like they do in `git`.\n\nOne other question with ignore files that is ongoing is whether we should name ours `.vtignore` (in the style of `.npmignore`, `.dockerignore`, etc), or, like some tools like `nix`, just re-use `.gitignore`. [We are still considering what to name ours](https://github.com/val-town/vt/issues/10), but right now use `.vtignore`.\n\n## The Live Dev Experience\n\nOne of the most important use cases of `vt` is \"watch\" functionality. There's a lot of reasons for this. One of the big ones is that, as you (and maybe your favorite LLM) edit your code locally, it is really handy to remove the friction of syncing with Val Town.\n\nFrom the beginning, my plan for this was to implement \"git\" behavior first (pushing and pulling), and then just doing file system watching to add live syncing using [Deno.watchFs](https://docs.deno.com/api/deno/~/Deno.watchFs) to handle file system events.\n\n![](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/7f2ed32c-8fc4-4f5c-86ed-733402383d14.webp)\n\nOne particularly annoying challenge with `vt watch` was handling debouncing. Deno's standard library has an [async module](https://jsr.io/@std/async) that was super useful for implementing `vt watch`. `vt watch` works by doing a `push` initially, and then whenever local changes are made running another `vt push`. It sounds super simple, and it mostly is!\n\nThe issue is that there's a lot of different things that could trigger a \"files were changed\" notification, and doing the push itself is one of them (which took a painful amount of time to figure out: the `.vt` folder has files internally that get updated on a push, like book-keeping ticking the version). Instead of working out the corner cases, I added a grace for post-pushing before we are able to detect file changes again.\n\nI also debounce the push. Initially, I did this so that if you are doing large amounts of file modifications we wait until you're done before starting the push, but it turns out this is more important because of how editors will create ephemeral temporary files during writes. Now, when you edit a file, the editor might create transient files, but as long as it gets rid of them within the debounce the final state that gets pushed is the one that does not include those temporary files.\n\nAnother aspect of this live dev experience is the friction of having to reload the website as you make updates to the website. Unfortunately, even though we *can* and do open browser tabs, browsers' CLIs do not expose a way to redirect or reload open tabs unless you launch the browser with remote debugging (think puppeteer).\n\nOne idea I have for solving this problem, which I think will be the best long term solution, is a minimal browser extension that [uses a websocket](https://developer.chrome.com/docs/extensions/how-to/web-platform/websockets) to talk to `vt`, and have `vt watch` use `Deno.serve` to host a minimal websocket server on localhost that pushes when the project gets updated. Extensions *can* reload tabs, so this would give `vt` the power to tell your browser to reload tabs. This is still just an idea, and will be tested soon.\n\nSteve has been working on a [more general solution](https://www.val.town/x/stevekrouse/live-reload) to this problem by injecting code into the website that detects updates and reloads using a Val with long polling. There's a [demo of that here](https://www.val.town/x/stevekrouse/live-reload-demo), the general idea is that it polls the latest version of the project and reloads the page on updates. This works outside of `vt` too.\n\n## Some Nitty Gritty\n\nInternally, `vt` is broken up into two main parts: the `vt lib`, where the actual logic for `push`, `pull`, and other \"git\" operations is defined, and the `vt cmd` lib, where the CLI logic is laid out. Eventually, we want to make `vt` a esm library, where we expose the functionality of the `vt lib` component.\n\nFor both cases, we're using [Deno's native testing framework](https://docs.deno.com/runtime/fundamentals/testing/). For `vt lib`, it's pretty straightforward, where we run tests in temp directories doing things like pulls or pushes, and then use the `sdk` to verify changes.\n\nFor the command library, the CLI framework we're using for `vt` (cliffy) has a handy [Snapshot test module](https://cliffy.io/docs@v1.0.0-rc.7/testing/snapshot) that `vt` doesn't use. We decided against using snapshot tests mostly because we lose a lot of fine grain control. Instead, we took inspiration from cliffy in running the CLI tests as subprocesses, and make a lot of use of Deno's `assertStringIncludes` on `stdout`. One ongoing issue we've had with testing is that we've encountered a lot of \"resource leaks.\" It's really cool that `Deno` tests can detect unawaited promises or unawaited/cancelled request bodies, but it doesn't do a good job of helping us locate where the issues are.\n\n`vt` stores configuration in `/vt/config.yaml`, and loads it using `zod`. There's some interesting mechanics where we have multiple layers of configuration, like local and global, and prioritize configuration options in order. Once again, [Deno's standard library](https://jsr.io/@std/collections/doc/deep-merge) has been really handy in building out these components, like the `deepMerge` function.\n\nTo figure out where your system configuration directory is, usually I'd use [npm's xdg-portable](https://www.npmjs.com/package/xdg-portable), which gets us your os-aware configuration directory, but it turns out that using this via `npm:xdg-portable` [doesn't work with Deno](https://github.com/rivy/js.xdg-portable/issues/3), and we can't use the officially recommended http import version since `jsr`, the registry we publish `vt` to, doesn't support http imports. I looked into this, and it seemed like an issue with their build process not including their Deno code. The solution I decided on? Fork [xdg-portable](https://github.com/404Wolf/xdg-portable-deno) to be Deno native! In the process, I removed a ton of bloat.\n\nThere's also a lot of fun interactive niceities that the CLI provides. Right now, `vt` is primarily designed for the human user, but we plan on adding better scripting support down the line.\n\n![Fancy TTY stuff](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/430777215-b0211414-1fa5-4b7c-8612-b9459a2cb8f8.gif)\n\n`vt` takes some inspiration from Pomdtr's [previous vt CLI](https://github.com/pomdtr/vt), which served more as a management tool. Like his tool, `vt` uses the [Cliffy](https://cliffy.io/) CLI framework, which, although very new and not super well established, has served every use case we've come upon for `vt`. It's interactive capabilities and `tty` module have been super helpful to crafting some of the fancy interactive elements of `vt`.\n\n```typescript\ntty.cursorSave // Monad-ic tty manipulation is so cool!\n .cursorHide\n .cursorTo(0, 0)\n .eraseScreen();\n```\n\n![](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/ad696f11-a00e-40fc-aa01-1e1e4d08dd6b.webp)\n\nI'm also using `highlight.js`, right now just for configuration commands, but in the future may also use it if we add `vt diff`.\n\n## Naming and (Re)naming\n\nOne of the initial concerns was how one could edit val metadata locally, if we are limited to the context of files.\n\n![](Screenshot%202025-04-16%20at%206.32.46%20PM.webp)\n\n`vtfs`'s approach to this was to pack all of the metadata for a val into the file corresponding to it. For Val Town projects, it's a bit more complex, because there's metadata specific to vals in the project, and metadata for the entire project itself too. We decided that, in general, changing val metadata and other uniquely val town attributes is something that we would leave to the website.\n\n`vtfs` would indicate the type of a given val locally as `foobar.H.tsx` (or, if verbose, `foobar.http.tsx`), which was a really nice pattern. If you wanted to change the type of a val, you could just rename it to `foobar.script.tsx`. This pattern, however, turns out not to work as well for projects because vals in projects generally are suffixed with `.tsx`, so you would end up with `foobar.http.tsx.tsx`, and it would get messy quickly -- and there were some issues with Vscode not liking `.script.tsx`. In general, it's a bit scary to introduce magic like this.\n\nInstead of doing strict enforcement -- maintaining a 1:1 mapping of file extension to val type -- `vt` intuits the val type only on creation. If you create a `foobar.tsx`, `vt` sees `.tsx` and assumes it's a script. If you create `foobar_http.tsx` or `foobar.http.tsx`, `vt` sees `.tsx`, knows it's a val and not a file, and then guesses it's an `http` val. But it never will change it after the fact, so you can change `foobar.http.tsx` to be a script val on the website, and that's what it will continue to be going forward.\n\n### Renames\n\nIt might seem simple at first, but if you think about it, detecting whether a file was renamed is actually really tricky. If we move `foo.ts` to `bar.ts` how do we know that it wasn't a `CREATE bar.ts` and `DELETE foo.ts`? Originally we didn't plan on adding rename detection support to `vt` because of all the complexity that comes with rename detection.\n\n![](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/blob_file_1744341763182_recording.gif)\n\nBut then we realized that, without rename detection, if you move a val with configuration -- like cron config, or custom endpoint HTTP vals, then doing the deletion/creation would cause you to lose all your config! And so, we added rename detection to `vt`.\n\nThe rename detection algorithm is a bit complicated -- it works by looking at all files that got deleted and that got created, and then considering a file as renamed if a created file is sufficiently similar to a file that got deleted. When iterating over created files to see if a deleted file is similar enough to one of them, we use some heuristics to filter out files that could not possibly be similar enough, like the file length. Then we compute the Levenshtein distance between a given deleted file and created file, and consider a given created file \"renamed\" if it is above some theshold similar to a deleted file, and if it is similar enough to multiple, then the one it is most similar to [as it turns out, Deno's standard library has a super efficient edit distance function](https://jsr.io/@std/text). Git does fancy [directory rename detection](https://git-scm.com/docs/directory-rename-detection/2.22.0), which is something that, at least for now, `vt` does not do.\n\nBecause rename detection is relatively expensive, it is internally implemented as an optional operation that doesn't always get used for every `vt` operation. For example, there isn't a lot of reason to do rename detection for `vt pull` -- it would really just be for reporting.\n\n## More on VtFs\n\nThere's some fun features of `vtfs` that didn't end up making their way to `vt`, like blob support.\n\nFor `vtfs`, a core feature was going to be the ability to \"mount\" your val town blob store so that you could view, edit, and organize your blobs locally. With fuse, there's a ton of flexibility on how to \"implement\" inodes. `go-fuse` provides a lot of nice abstractions. For totally static files like `deno.json` I was using the [MemRegularFile](https://github.com/hanwen/go-fuse/blob/v2.7.2/fs/mem.go#L17) helper, which makes it trivial to create an Inode with static text contents. For Vals, I was doing it more manually, implementing the read and write methods for a custom `ValFile` Inode myself. But for blobs, I wanted to handle reads and writes by streaming the relevant portions of the file.\n\nWhen implementing my own write callback for fuse, I would be handling requests to write data to a region of a file (like, write 0001010101 starting at index 22 bytes). Our `/v1/blob` endpoint is somewhat restrictive here. You can only write an entire file, or get an entire file. `vtfs` would show you all your blobs by using the `blob list` endpoint when serving \"list directory\" syscalls, and when you tried to access a specific blob would download the blob to a temp file and internally manage the bookkeeping to map read calls to that temp file (read 1-11 from fooBlob == read 1-11 from `/tmp/f90jjf2j-fooblob`).\n\nHandling writes was particularly tricky -- I could start a new upload to upload the entire state of the file, with the new change made in the current write call, but if you're writing a lot of data to a file (like if you `cp bigFile.png` to the folder that I was using to represent your val town blobs), then there would typically be a burst of write requests to write to consecutive regions of the file.\n\nI spent a long time working on setting up a pipe where I would handle consecutive writes, writes that start at index i, end at index i+k, and then a new write that starts at index i+k+1, etc, as a special case. Eventually, I got something working!\n\nFor `vtfs` I was using [Openapi Generator](https://github.com/OpenAPITools/openapi-generator), and it turned out that Val Town's OpenAPI specification didn't accept file sizes on the order of my tests -- where the response would include the file size, it was an integer, not a `format: int64` (long).\n\n![Working piped blob uploads](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/hashesMatch.webp)\n\nMaintaining this, and getting writes to work non consecutively continued to prove a huge challenge. `valfs` blob read/write support was a fun challenge to work on, but was never totally reliable.\n\n`vtfs` also had tighter Deno integration, which is something that we're still deciding if we want for `vt`. For example, with `vtfs`, when you mounted a folder, `vtfs` would automatically run `deno cache /path/to/thatDir` for you, to make sure that your language server would always have the types for all of the libraries that you were using. Additionally, we have a default `deno.json` file that is taken from `vtfs`, which includes [the Val Town type declarations](https://www.val.town/types/valtown.d.ts) like the `Email` interface, that only show up after you run a `deno cache` from that directory.",[],[229,450],"d6943806-1bd0-11f0-84b8-569c3dd06744","2025-04-08-migration.md","e840fcb3-d9c5-415e-922a-e2a7c3fe0d57",["D",1744924421521],"---\ntitle: The Val Town Blog is now hosted on Val Town\ndescription: We migrated this blog to Val Town Projects\npubDate: 2025-04-08T00:00:00.000Z\nauthor: Steve Krouse\n---\n\n![street-blog-web.jpg](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/4abb41d0-f710-46b4-523e-4440a252f400/public)\n\nWe migrated our blog to Val Town 🥳\n\nWith some cleverness, we were able to built it and migrate 65 old blog posts in one day. Now our deployments happen instantly (~100ms), and we've greatly simplified our blogging stack.\n\n| | Before | Now |\n|---------------------|---------------------------|------------|\n| **Rendering** | Astro | React |\n| **Version control** | GitHub | Val Town |\n| **Text editing** | Local editor | Val Town |\n| **Deployment** | Cloudflare Pages + GitHub | Val Town |\n| **Hosting** | Cloudflare Pages | Val Town |\n| **CDN** | Cloudflare | Cloudflare |\n\n## Should you blog on Val Town? \n\nMaybe! It depends on your constraints and what matters to you. We care deeply about:\n\n1. Tight feedback loops\n2. Simple, browser-based workflows\n3. A fast migration\n\nWe also care deeply about dogfooding, but unless you're us – and unfortunately most of you aren't – that one doesn't apply to you.\n\nThere are also good reasons *not* to migrate to Val Town, but we'll get to them later.\n\n## Tight feedback loops\n\nWe at Val Town are obsessed with tight feedback loops. \n\n> \"Creators need an immediate connection to what they're creating.\"\n> \n> – Bret Victor, \"Inventing on Principle\"\n\nIn some ways, this singular commitment to tight feedback loops is what separates Val Town from all other code hosting & deployment platforms. We believe that you should be able to *iterate directly in your production environment*, not iterate locally, then deploy, then wait minutes to see how things look live.\n\n

\n \n

\n\nIn Val Town, a save *is* a deploy, and it happens in about 100ms. We go to great technical lengths to make this possible. This means no waiting minutes to see what your post looks like live. You get the fast local dev experience, but with production. And this goes for branches too. Every edit of every branch is instantly deployed in a shareable URL.\n\n## Simple, browser-based workflow\n\nVal Town lets you use fewer tools. It replaces:\n\n* your local text editor,\n* git + GitHub for version control\n* whatever you use for deployment and hosting, Cloudflare, Vercel, Render, Railway, Heroku, Digital Ocean, Hertzner, etc\n\nSimpler, browser-based workflows are particularly important for casual contributors, such as less technical folks on your team or strangers on the internet. Val Town is a single website for code to be edited, versioned, collaborated on, and deployed. No need for anyone to install or use git, clone the repo locally, install programming languages and dependencies, or use a local text editor. \n\nFor example, here's how to make a change to this blog that you're reading right now:\n\n

\n \n

\n\nVal Town is uniquely positioned to allow anyone see their changes deployed live in their remix, because we host both your source code *and* your deployments. \n\n## A fast migration\n\nHow did we migrate 65 blog posts – with images, videos, and intricate formatting and styles – to an entirely new blog in a single day?\n\nWe didn't. We left them where they are, and proxy to them.\n\nWriting a proxy in Val Town (or any functions platform with the ['fetch handler' interface](https://blog.val.town/blog/the-api-we-forgot-to-name/)) is a delight:\n\n```ts\nconst OLD_BLOG_HOST = \"https://val-town-blog.pages.dev/\";\nexport async function proxy(req: Request): Promise {\n const url = new URL(req.url);\n return fetch(OLD_BLOG_HOST + url.pathname + url.search, {\n method: req.method,\n headers: req.headers,\n });\n}\n```\n\nSo if you go to view [blog.val.town/blog/val-town-newsletter-24](https://blog.val.town/blog/val-town-newsletter-24)\nyou'll see exactly what you would at [val-town-blog.pages.dev/blog/val-town-newsletter-24](https://val-town-blog.pages.dev/blog/val-town-newsletter-24). I find it eerie that proxies work so well.\n\nWe've had reasonable success with this technique of migrating to Val Town quickly by proxying most old content, and only rebuilding the homepage and new posts. I first used this technique on my personal website, [stevekrouse.com](https://stevekrouse.com), and was pleased to see it continue to work here.\n\n## Good reasons *not* to blog on Val Town\n\n1. Val Town Projects are beta software, so you'd be on the cutting-edge alongside us. We're coming up with patterns that you'd get for free from mature blogging tools like Astro and Cloudflare Pages.\n2. Val Town doesn't have good workflows for bundlers or build steps, so it's hard to use anything that requires vite, etc.\n3. Val Town doesn't (yet) have pull request comments.\n\nPersonally, I value simplicity, so I don't mind building a basic blog from scratch without a bundler with some help from AI. I do miss pull requests comments though. We plan on building them soon.\n\n## Bad reasons *not* to blog on Val Town\n\n1. **Lock-in**. Val Town is built on Deno and web standards, so you can easily leave for another deployment platform like Cloudflare, Vercel, or Deno Deploy. We'll even help you migrate. We believe in the open web.\n\n2. **Price**. We have a generous free tier, so your blog can go viral on HN, get 100k hits in a day, and you pay $0. It's $10 / month for 1m code runs per day. Need additional scale beyond that? It's still $10 / month while our Scale Plan is in beta. When ready, our scale pricing will be in line with other FaaS providers.\n\n## Get yourself a Val Town blog\n\nIf you are starting a new blog from scratch, remix [this markdown blog starter](https://www.val.town/x/stevekrouse/markdownBlogStarter).\n\nIf you are migrating an existing blog, feel free to remix [the Val Town blog](https://www.val.town/x/valdottown/blog). It comes with good patterns for proxying to old content.",[],[229,459],"d694354a-1bd0-11f0-84b8-569c3dd06744","2025-04-02-post-mortem-db-migration.md","296ae44b-f150-439e-bf00-078c7447fa52",["D",1744924421521],"---\ntitle: \"Post-mortem: A Backward Incompatible Database Migration\"\ndescription: Val runs failed due to a database migration that was not backward compatible\npubDate: 2025-04-02T00:00:00.000Z\nauthor: Sophie Houser\n---\n\nToday at 10:11am we experienced a 12-minute outage, which caused HTTP vals to return 503 errors and other types of vals to fail. In the end, the root cause was a deployment timing issue where database migrations were deployed successfully, but our application code deployment hung for several minutes. The new database migrations were incompatible with the old application code and crashed the process. \n\nWe aim to make all database migrations maintain backward compatibility, but in this case, we only discovered through the delayed deployment feedback that the new migrations were not compatible with previous versions.\n\n## Timeline\n\n- **10:11AM ET** - We merged the new migration and application code\n- **10:16AM ET** - We got pinged for downtime\n- **10:17AM ET** - We posted that HTTP vals are down in the new #service-status channel\n- **10:18AM ET** - The new application code deployment was still lagging\n- **10:19AM ET** - We rolled back to an earlier deployment on Render, which Render rejected because the earlier migration had succeeded, so the ‘old migration’ check prevented it from entering production.\n- **10:22AM ET** - We pushed something we thought could be a fix\n- **10:28AM ET** - We notified everyone that we’re back up.\n\n## Impact\n\n- HTTP vals returned 503 errors for ~12 minutes, and all other val types did not run.\n- The [val.town](http://val.town) site remained up.\n\n## Next Steps\n\nReliability is important to us and we’ve taken steps to make sure this doesn’t happen again. We’ve added a test to ensure database migrations are backward compatible, which we’ll run before we deploy any new code that includes database migrations.",[],[229,466],["D",1744924421521],[270,271,272,273],[229],"d6943252-1bd0-11f0-84b8-569c3dd06744","util.tsx","a0cd945d-b553-41ea-a172-83742d67c5f7",["D",1744924421521],"export function formatDate(dateString: string): string {\n try {\n const date = new Date(dateString);\n return date.toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n });\n } catch (e) {\n return dateString;\n }\n}\n\nexport function dayOfWeek(dateString: string): string {\n try {\n return new Date(dateString).toLocaleDateString(\"en-US\", {\n weekday: \"short\",\n });\n } catch (e) {\n return \"\";\n }\n}\n",[],[234,476],"d6942d48-1bd0-11f0-84b8-569c3dd06744","icons.tsx","1e9af073-7d62-4331-8817-44fccb4d7fd5",["D",1744924421521],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function RSSIcon (props: React.SVGProps) {\n return (\n \n \n \n \n \n );\n}\n\nexport function TwitterIcon (props: React.SVGProps) {\n return (\n \n \n \n );\n}\n\nexport function GitHubIcon (props: React.SVGProps) {\n return (\n \n \n \n );\n}\n\nexport function BlueskyIcon (props: React.SVGProps) {\n return (\n \n \n \n );\n}\n\nexport function DiscordIcon (props: React.SVGProps) {\n return (\n \n \n \n );\n}\n\n",[],[234,483],"d6942762-1bd0-11f0-84b8-569c3dd06744","SocialLinks.tsx","ba25fc49-7263-4dc5-b869-25b6db9700ee",["D",1744924421521],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { BlueskyIcon, DiscordIcon, GitHubIcon, RSSIcon, TwitterIcon } from \"./icons.tsx\";\n\nexport default function SocialLinks() {\n return (\n

\n \n View source\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n );\n}",[],[234,490],"d694215e-1bd0-11f0-84b8-569c3dd06744","OGImage.tsx","b7a4cf2a-5ee3-4319-a6af-1aacdac02cc4",["D",1744924421521],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport wrap from \"https://esm.sh/word-wrap@1.2.5\";\n\nconst LINE_HEIGHT = 72;\n\nexport default function OGImage({\n title = \"Val Town Blog\",\n ...props\n}: React.SVGProps & {\n title?: string;\n}) {\n const wrapped = wrap(title, { width: 44 });\n const lines = wrapped.split(/\\n/g);\n\n return (\n \n \n {lines.map((line, i) => (\n \n {line}\n \n ))}\n\n \n\n \n Blog\n \n\n \n \n \n \n \n );\n}",[],[234,497],"d6941efc-1bd0-11f0-84b8-569c3dd06744","LogoMark.tsx","2c57dc71-fbba-49e2-b55d-fd24d51fea89",["D",1744924421521],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport default function(props: React.SVGProps) {\n return (\n \n \n \n \n \n );\n}\n\nexport function Favicon(props: React.SVGProps) {\n return (\n \n \n \n \n \n \n );\n}",[],[234,504],"d6941812-1bd0-11f0-84b8-569c3dd06744","Logo.tsx","aa36f387-f9c4-4400-b523-63f808ed57d6",["D",1744924421521],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport default function (props: React.SVGProps) {\n return (\n \n \n \n \n );\n}\n",[],[234,511],"d6941592-1bd0-11f0-84b8-569c3dd06744","Layout.tsx","915bac9c-e6e2-4619-8151-f7ccec3348e5",["D",1744924421521],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { BlogPost } from \"../utils/types.ts\";\nimport Footer from \"./Footer.tsx\";\nimport Head from \"./Head.tsx\";\nimport Logo from \"./Logo.tsx\";\nimport LogoMark from \"./LogoMark.tsx\";\nimport SocialLinks from \"./SocialLinks.tsx\";\n\ninterface LayoutProps {\n title: string;\n children: React.ReactNode;\n post?: BlogPost;\n}\n\nexport function Layout({ title, post, children }: LayoutProps) {\n return (\n \n \n \n

\n \n \n \n

\n \n

\n \n Blog\n \n

\n {children}\n

\n \n \n );\n}",[],[234,518],"d69412f4-1bd0-11f0-84b8-569c3dd06744","HomePage.tsx","1b9c3c37-f6a0-4b6c-b07b-ae2ad25dc69c",["D",1744924421521],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { BlogPost } from \"../utils/types.ts\";\nimport { Layout } from \"./Layout.tsx\";\nimport Byline from \"./Byline.tsx\";\n\nexport function HomePage({ posts }: { posts: BlogPost[] }) {\n const latest = posts.at(0);\n const top = posts.slice(1, 3);\n const rest = posts.slice(3);\n\n return (\n \n

\n Latest\n

\n \n {latest.title}\n \n

\n \n

{latest.description}

\n Recent\n

\n {top.map((post, i) => (\n

\n {post.title}\n

\n \n

\n {post.description}\n

\n ))}\n

\n More posts\n

\n
\n {post.title}\n
\n \n
\n {post.description}\n
\n

\n \n );\n}\n",[],[234,525],"d6940f7a-1bd0-11f0-84b8-569c3dd06744","Head.tsx","71fd2714-a588-44c3-9879-1ca607ee6d1c",["D",1744924421521],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { BLOG_URL, SITE_DESCRIPTION } from \"../utils/constants.ts\";\nimport type { BlogPost } from \"../utils/types.ts\";\n\nconst css = await readFile(\"styles/index.css\", import.meta.url);\nconst HLJS_CSS_URL = \"https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/styles/base16/solar-flare-light.css\";\n\nexport default function Head({ title, post }: {\n title: string;\n post?: BlogPost;\n}) {\n const description = post?.description ?? SITE_DESCRIPTION;\n const ogImage = new URL(\"/og-image.png\", BLOG_URL);\n ogImage.searchParams.append(\"title\", title);\n\n return (\n \n \n \n \n\n {title === \"Val Town Blog\" ? title : `${title} | Val Town Blog`}\n \n\n {/* Open Graph / Facebook */}\n \n \n \n \n\n \n\n {/* Twitter */}\n \n \n \n \n\n \n\n {\n /* Sitemap\n \n */\n }\n\n \n

Diff · v41