[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_588":589,"_590":591},"routes/_app.x.$handle.$name",{"_105":104,"_32":46,"_113":91,"_27":114,"_13":14,"_115":-5,"_11":116,"_117":118,"_119":120,"_121":122,"_123":124,"_20":-5,"_125":126,"_127":128,"_129":25,"_130":131,"_132":59,"_133":-5,"_134":-5,"_135":136},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",52,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","components/OGImage.tsx","latestPath","fileId","b7a4cf2a-5ee3-4319-a6af-1aacdac02cc4","name","OGImage.tsx","fileType","script","content","/** @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}","/** @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}\n","createdAt",["D",1746218822591],"branchVersion","branchId","d6916d60-1bd0-11f0-84b8-569c3dd06744","id","d68ed6b8-1bd0-11f0-84b8-569c3dd06744","ValTownBlog",["D",1744924421521],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","4555dd0e-707e-4444-acd3-049d206eb1db","pinnedFileId","a31361a6-105b-4f90-9562-14803ce76db5","pinPreview",true,"pinMigrated","screenshotVersion",1570,"likeCount",0,"orgId","bced381e-9ab2-4b55-929d-e7c5064f7f38","tursoName","d68ed6b81bd011f084b8569c3dd06744","tursoHostname","d68ed6b81bd011f084b8569c3dd06744-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789512647429],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_105":104,"_112":108},"org",{"_105":104,"_106":-5,"_107":108,"_18":55,"_109":110,"_111":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":94,"_95":96,"_97":51,"_98":99,"_100":101,"_102":46,"_103":104},"isOwned",1592,"main","projectId","forkedBranchId","6b9ea75a-0ffc-11f0-aae0-569c3dd06744","forkedBranchVersion",412,"forkedProjectPrivacy","forkedProjectId","6b9c47c6-0ffc-11f0-aae0-569c3dd06744","forkedProjectOrgId","ba7bb5fb-1abb-4ffb-8f3d-7c244782e5f7","projectName","userHandle","wolf","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvVXpPVUZRTjZGTGd2Q2t4c0RRdFpNZWJ5UCJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":583,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":584,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":585,"_85":586,"_87":587,"_89":25},"tree",[254,256,269,274,281,283,292,293,294,295,296,297,298],"files",[254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298],"counts",{"_244":64,"_245":168,"_246":168,"_247":248,"_249":250},"contents",[149,150,151,152,153,154,155,156,157,158,159,160,161],"upstreamProject",{"_44":99,"_32":144,"_53":145,"_54":146,"_50":51,"_83":147},"upstreamBranch",{"_44":94,"_39":137,"_138":139,"_32":91,"_92":99,"_13":140,"_93":-5,"_95":-5,"_141":142,"_48":-5,"_89":25,"_50":51,"_103":143,"_65":101,"_102":144},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1743623725997],"updatedAt",["D",1789054957645],827,"lockfileKey","1789054957972-esm.town_v_valdottown_blog@827-main","valdottown","blog","blog.val.town - The official Val Town blog, built on Val Town","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/17615000-9d9a-4575-e54f-3cce896c8101/square512?exp=1789577999&sig=e65c9d91a2fb18464b024848422241d5d4edc4779533994cde217600ab545c61",{"_105":143,"_112":148},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJyWnQ5cFE0c3pleVRCSEVTWmxzaXJsTUlGciJ9",{"_44":238,"_32":239,"_30":240,"_164":-5,"_42":43,"_41":241,"_166":59,"_39":242,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_27":243},{"_44":233,"_32":234,"_30":235,"_164":-5,"_42":43,"_41":168,"_166":59,"_39":236,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_27":237},{"_44":228,"_32":229,"_30":230,"_164":-5,"_42":43,"_41":168,"_166":59,"_39":231,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_27":232},{"_44":223,"_32":224,"_30":225,"_164":-5,"_42":43,"_41":168,"_166":59,"_39":226,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_27":227},{"_44":218,"_32":219,"_30":220,"_164":-5,"_42":43,"_41":168,"_166":59,"_39":221,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_27":222},{"_44":212,"_32":213,"_30":214,"_164":-5,"_42":43,"_41":168,"_166":59,"_39":215,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_27":217},{"_44":205,"_32":206,"_30":207,"_164":-5,"_42":43,"_41":208,"_166":59,"_39":209,"_13":64,"_34":20,"_36":210,"_24":25,"_171":-5,"_27":211},{"_44":198,"_32":199,"_30":200,"_164":-5,"_42":43,"_41":201,"_166":59,"_39":202,"_13":64,"_34":20,"_36":203,"_24":25,"_171":-5,"_27":204},{"_44":192,"_32":193,"_30":194,"_164":-5,"_42":43,"_41":168,"_166":25,"_39":195,"_13":64,"_34":20,"_36":196,"_24":25,"_171":-5,"_27":197},{"_44":186,"_32":187,"_30":188,"_164":-5,"_42":43,"_41":168,"_166":25,"_39":189,"_13":64,"_34":20,"_36":190,"_24":25,"_171":-5,"_27":191},{"_44":180,"_32":181,"_30":182,"_164":-5,"_42":43,"_41":168,"_166":25,"_39":183,"_13":64,"_34":20,"_36":184,"_24":25,"_171":-5,"_27":185},{"_44":173,"_32":174,"_30":175,"_164":-5,"_42":43,"_41":176,"_166":25,"_39":177,"_13":64,"_34":20,"_36":178,"_24":25,"_171":-5,"_27":179},{"_44":162,"_32":163,"_30":57,"_164":-5,"_42":43,"_41":165,"_166":25,"_39":167,"_13":168,"_34":169,"_36":170,"_24":25,"_171":-5,"_27":172},"7b94cfce-2125-11f0-a982-569c3dd06744","index.ts","parentId",25,"latest",["D",1745510531925],1,"http","import { Hono } from \"https://esm.sh/hono@3.12.0\";\nimport { cache } from \"https://esm.sh/hono@3.12.0/cache\";\nimport blogRoutes from \"./routes/blog.ts\";\nimport faviconRoute from \"./routes/favicon.ts\";\nimport homeRoutes from \"./routes/home.ts\";\nimport ogImageRoute from \"./routes/og-image.ts\";\nimport proxyRoutes from \"./routes/proxy.ts\";\nimport rssRoute from \"./routes/rss.ts\";\nimport { liveReload } from \"./utils/live-reload.ts\";\n\nconst app = new Hono();\n\n// Cache all responses for 5 minutes on blog.val.town\n// Do not cache on *.val.run domains for development\napp.get(\"*\", async (c, next) => {\n const url = new URL(c.req.url);\n if (url.hostname.endsWith(\".val.run\")) {\n return next();\n }\n return cache({\n cacheName: \"vt-blog\",\n cacheControl: \"public, max-age=300\",\n wait: true,\n })(c, next);\n});\n\napp.route(\"/\", homeRoutes);\napp.route(\"/rss.xml\", rssRoute);\napp.route(\"/favicon.svg\", faviconRoute);\napp.route(\"/og-image.png\", ogImageRoute);\napp.route(\"/\", blogRoutes);\n\n// Everything else, proxy to the old blog\napp.route(\"*\", proxyRoutes);\n\n// Unwrap Hono errors to see original error details\napp.onError((err: any, c: any) => {\n throw err;\n});\n\n// Export the fetch handler for Val Town\nexport default app.fetch;","label",[163],"0104f6a2-1bd1-11f0-b3ed-569c3dd06744","deno.json","0104f738-1bd1-11f0-b3ed-569c3dd06744",4,["D",1744924492725],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[174],"d6949a30-1bd0-11f0-84b8-569c3dd06744","TODOs.md","048f07cb-72fe-48b1-86ed-2e17577a43ef",["D",1744924421521],"- [x] Make it look prettier\n- [x] Use something lighter-weight than TailwindCSS - maybe twind.dev? maybe hardcoded css?\n- [x] Make it faster\n- [x] Add cache headers for Cloudflare only, not browsers\n- [x] Add og: content for new posts hosted here (old posts will have it still)\n- [x] Deploy it to blog.val.town!\n- [ ] Tweet about the migration!\n- [ ] Add author profile photos",[181],"d69496a2-1bd0-11f0-84b8-569c3dd06744","README.md","963cad5e-eae4-4d1a-a38b-85d25892837f",["D",1744924421521],"# Val Town Blog\n\n## Overview\n\nThe Val Town Blog is now hosted directly on Val Town! The blog combines new posts written directly in this project with proxied content from our legacy blog.\n\n## How It Works\n\n### Blog Architecture\n\n- **New Posts**: Blog posts are written in markdown with YAML frontmatter and stored in the `/posts` directory\n- **Legacy Posts**: Older blog posts are proxied from the original blog hosted at Cloudflare Pages (`val-town-blog.pages.dev`)\n- **Homepage**: The homepage dynamically displays posts by:\n 1. Reading local markdown files from the `/posts` directory\n 2. Combining them with posts from the old blog\n 3. Sorting all posts by date\n 4. Rendering the content with a clean, custom design\n\n### Project Structure\n\n- **`/index.ts`**: Main entry point that sets up Hono routing and middleware\n- **`/components/`**: React components for rendering the blog\n - **`Layout.tsx`**: Shared layout with header, footer, and styling\n - **`HomePage.tsx`**: Renders the blog homepage with featured and recent posts\n - **`BlogPost.tsx`**: Renders individual blog posts\n - **`Head.tsx`**: Manages metadata, styles, and SEO\n- **`/routes/`**: Hono route handlers for different parts of the blog\n - **`home.ts`**: Homepage route\n - **`blog.ts`**: Individual blog post routes\n - **`proxy.ts`**: Proxy to the old blog for legacy content\n - **`rss.ts`**: RSS feed generation\n - **`favicon.ts`** & **`og-image.ts`**: Asset routes\n- **`/utils/`**: Utility functions for post processing, caching, etc.\n- **`/posts/`**: Markdown files for blog posts\n- **`/styles/`**: CSS styling\n\n### Technical Stack\n\n- **React**: For server-side rendering components\n- **Hono**: Lightweight web framework for routing\n- **Custom CSS**: For styling (no external frameworks)\n- **Unified/Remark/Rehype**: For markdown processing with GitHub Flavored Markdown support\n- **Gray Matter**: For parsing YAML frontmatter\n\n## Adding New Blog Posts\n\nTo add a new blog post to the Val Town Blog:\n\n1. Create a markdown file in the `/posts` directory with YAML frontmatter:\n\n```markdown\n---\ntitle: My New Blog Post\ndescription: A brief description of the post\npubDate: 2025-04-01T00:00:00.000Z\nauthor: Your Name\n---\n\nContent of your blog post in markdown format...\n```\n\n2. The post will automatically appear on the homepage and be accessible at `/blog/[slug]`\n\n## Markdown Features\n\nThe blog supports GitHub Flavored Markdown (GFM) with:\n\n- Code syntax highlighting\n- Tables\n- Lists\n- Images\n- And other standard markdown features\n\n## Development\n\n### Live Reload\n\nThe blog includes a live reload feature that automatically refreshes the page when changes are made to the project. This works when viewing the blog on a `.val.run` domain during development.\n\n### Caching\n\nThe blog implements efficient caching:\n\n- Cache headers are set for Cloudflare CDN but not for browsers\n- Cache TTL is set to 5 minutes by default\n- Domains ending with `.val.run` are excluded from caching\n\n### Performance Optimizations\n\n- Server-side rendering for fast initial page loads\n- Efficient proxy for legacy content\n- Minimal CSS with no external frameworks\n- Optimized image handling\n\n## Deployment\n\nThe blog is deployed directly on Val Town, with the production version available at [blog.val.town](https://blog.val.town).",[187],"d6949530-1bd0-11f0-84b8-569c3dd06744","IMAGES.md","ed554271-63a0-4c3a-adcf-c8838db913cb",["D",1744924421521],"Eventually we should host all our images properly, but for now, drag and drop them here 👇\n\n* https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/4d90a6f7-247c-4df4-3de6-928364e10000/public\n* https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/f175100b-a190-4772-7056-04c09f273a00/public",[193],"01018e22-1bd1-11f0-a860-569c3dd06744",".vtignore","01018efe-1bd1-11f0-a860-569c3dd06744",3,["D",1744924492717],".git\n.DS_Store\nnode_modules\nvendor",[199],"50985e42-2794-11f0-8899-569c3dd06744",".cursorrules","50985f3c-2794-11f0-8899-569c3dd06744",30,["D",1746217840918],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n subject: \"Hi\", \n text: \"Hi\", \n html: \"

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":580,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_300":581,"_27":582},{"_44":572,"_32":573,"_30":574,"_164":240,"_42":43,"_41":575,"_166":25,"_39":576,"_13":64,"_34":20,"_36":577,"_24":25,"_171":-5,"_300":578,"_27":579},{"_44":233,"_32":234,"_30":235,"_164":-5,"_42":43,"_41":168,"_166":59,"_39":569,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_300":570,"_27":571},{"_44":562,"_32":563,"_30":564,"_164":235,"_42":43,"_41":168,"_166":25,"_39":565,"_13":64,"_34":35,"_36":566,"_24":25,"_171":-5,"_300":567,"_27":568},{"_44":555,"_32":556,"_30":557,"_164":235,"_42":43,"_41":168,"_166":25,"_39":558,"_13":64,"_34":35,"_36":559,"_24":25,"_171":-5,"_300":560,"_27":561},{"_44":548,"_32":549,"_30":550,"_164":235,"_42":43,"_41":168,"_166":25,"_39":551,"_13":64,"_34":35,"_36":552,"_24":25,"_171":-5,"_300":553,"_27":554},{"_44":541,"_32":542,"_30":543,"_164":235,"_42":43,"_41":168,"_166":25,"_39":544,"_13":64,"_34":35,"_36":545,"_24":25,"_171":-5,"_300":546,"_27":547},{"_44":534,"_32":535,"_30":536,"_164":235,"_42":43,"_41":168,"_166":25,"_39":537,"_13":64,"_34":35,"_36":538,"_24":25,"_171":-5,"_300":539,"_27":540},{"_44":526,"_32":527,"_30":528,"_164":235,"_42":43,"_41":529,"_166":59,"_39":530,"_13":168,"_34":35,"_36":531,"_24":25,"_171":-5,"_300":532,"_27":533},{"_44":518,"_32":519,"_30":520,"_164":235,"_42":43,"_41":521,"_166":59,"_39":522,"_13":168,"_34":35,"_36":523,"_24":25,"_171":-5,"_300":524,"_27":525},{"_44":511,"_32":512,"_30":513,"_164":235,"_42":43,"_41":168,"_166":25,"_39":514,"_13":64,"_34":35,"_36":515,"_24":25,"_171":-5,"_300":516,"_27":517},{"_44":507,"_32":33,"_30":31,"_164":235,"_42":43,"_41":14,"_166":59,"_39":508,"_13":168,"_34":35,"_36":38,"_24":25,"_171":-5,"_300":509,"_27":510},{"_44":500,"_32":501,"_30":502,"_164":235,"_42":43,"_41":168,"_166":25,"_39":503,"_13":64,"_34":35,"_36":504,"_24":25,"_171":-5,"_300":505,"_27":506},{"_44":493,"_32":494,"_30":495,"_164":235,"_42":43,"_41":168,"_166":25,"_39":496,"_13":64,"_34":35,"_36":497,"_24":25,"_171":-5,"_300":498,"_27":499},{"_44":486,"_32":487,"_30":488,"_164":235,"_42":43,"_41":168,"_166":25,"_39":489,"_13":64,"_34":35,"_36":490,"_24":25,"_171":-5,"_300":491,"_27":492},{"_44":228,"_32":229,"_30":230,"_164":-5,"_42":43,"_41":168,"_166":59,"_39":483,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_300":484,"_27":485},{"_44":475,"_32":476,"_30":477,"_164":230,"_42":43,"_41":478,"_166":59,"_39":479,"_13":168,"_34":20,"_36":480,"_24":25,"_171":-5,"_300":481,"_27":482},{"_44":467,"_32":468,"_30":469,"_164":230,"_42":43,"_41":470,"_166":59,"_39":471,"_13":168,"_34":20,"_36":472,"_24":25,"_171":-5,"_300":473,"_27":474},{"_44":458,"_32":459,"_30":460,"_164":230,"_42":43,"_41":461,"_166":25,"_39":462,"_13":463,"_34":20,"_36":464,"_24":25,"_171":-5,"_300":465,"_27":466},{"_44":450,"_32":451,"_30":452,"_164":230,"_42":43,"_41":453,"_166":59,"_39":454,"_13":168,"_34":20,"_36":455,"_24":25,"_171":-5,"_300":456,"_27":457},{"_44":223,"_32":224,"_30":225,"_164":-5,"_42":43,"_41":168,"_166":59,"_39":447,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_300":448,"_27":449},{"_44":439,"_32":440,"_30":441,"_164":225,"_42":43,"_41":442,"_166":25,"_39":443,"_13":168,"_34":35,"_36":444,"_24":25,"_171":-5,"_300":445,"_27":446},{"_44":431,"_32":432,"_30":433,"_164":225,"_42":43,"_41":434,"_166":59,"_39":435,"_13":168,"_34":35,"_36":436,"_24":25,"_171":-5,"_300":437,"_27":438},{"_44":423,"_32":424,"_30":425,"_164":225,"_42":43,"_41":426,"_166":59,"_39":427,"_13":168,"_34":35,"_36":428,"_24":25,"_171":-5,"_300":429,"_27":430},{"_44":415,"_32":416,"_30":417,"_164":225,"_42":43,"_41":418,"_166":59,"_39":419,"_13":168,"_34":35,"_36":420,"_24":25,"_171":-5,"_300":421,"_27":422},{"_44":407,"_32":408,"_30":409,"_164":225,"_42":43,"_41":410,"_166":59,"_39":411,"_13":168,"_34":35,"_36":412,"_24":25,"_171":-5,"_300":413,"_27":414},{"_44":399,"_32":400,"_30":401,"_164":225,"_42":43,"_41":402,"_166":59,"_39":403,"_13":168,"_34":35,"_36":404,"_24":25,"_171":-5,"_300":405,"_27":406},{"_44":218,"_32":219,"_30":220,"_164":-5,"_42":43,"_41":168,"_166":59,"_39":396,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_300":397,"_27":398},{"_44":388,"_32":389,"_30":390,"_164":220,"_42":43,"_41":391,"_166":59,"_39":392,"_13":168,"_34":20,"_36":393,"_24":25,"_171":-5,"_300":394,"_27":395},{"_44":212,"_32":213,"_30":214,"_164":-5,"_42":43,"_41":168,"_166":59,"_39":385,"_13":64,"_34":216,"_36":-5,"_24":25,"_171":-5,"_300":386,"_27":387},{"_44":377,"_32":378,"_30":379,"_164":214,"_42":43,"_41":380,"_166":59,"_39":381,"_13":168,"_34":35,"_36":382,"_24":25,"_171":-5,"_300":383,"_27":384},{"_44":369,"_32":370,"_30":371,"_164":214,"_42":43,"_41":372,"_166":59,"_39":373,"_13":168,"_34":35,"_36":374,"_24":25,"_171":-5,"_300":375,"_27":376},{"_44":361,"_32":362,"_30":363,"_164":214,"_42":43,"_41":364,"_166":59,"_39":365,"_13":168,"_34":35,"_36":366,"_24":25,"_171":-5,"_300":367,"_27":368},{"_44":353,"_32":354,"_30":355,"_164":214,"_42":43,"_41":356,"_166":59,"_39":357,"_13":168,"_34":35,"_36":358,"_24":25,"_171":-5,"_300":359,"_27":360},{"_44":345,"_32":346,"_30":347,"_164":214,"_42":43,"_41":348,"_166":59,"_39":349,"_13":168,"_34":35,"_36":350,"_24":25,"_171":-5,"_300":351,"_27":352},{"_44":337,"_32":338,"_30":339,"_164":214,"_42":43,"_41":340,"_166":59,"_39":341,"_13":168,"_34":35,"_36":342,"_24":25,"_171":-5,"_300":343,"_27":344},{"_44":329,"_32":330,"_30":331,"_164":214,"_42":43,"_41":332,"_166":59,"_39":333,"_13":168,"_34":35,"_36":334,"_24":25,"_171":-5,"_300":335,"_27":336},{"_44":321,"_32":322,"_30":323,"_164":214,"_42":43,"_41":324,"_166":59,"_39":325,"_13":168,"_34":35,"_36":326,"_24":25,"_171":-5,"_300":327,"_27":328},{"_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","types.ts","ac4005ae-b536-4522-9af0-a9e239c230d6",41,["D",1746218821790],"export type BlogPost = {\n title: string;\n link: string;\n description: string;\n pubDate: string;\n author: string;\n content?: string;\n slug?: string;\n oldBlog?: boolean;\n};\n",[],[213,322],"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,330],"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,338],"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,346],"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,354],"999a0af8-2796-11f0-9d8d-569c3dd06744","get-old-posts.ts","9b2bab84-f0c0-4e3e-9522-bc252aa63f79",43,["D",1746218821800],"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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\":\n \"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 }));\n",[],[213,362],"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,370],"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,378],["D",1744924421521],[284,285,286,287,288,289,290,291],[213],"999e9082-2796-11f0-ba89-569c3dd06744","index.css","3dde401b-1396-4df6-9d47-f51fbff9e62e",44,["D",1746218821803],"* {\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}\n",[],[219,389],["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,400],"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,408],"99a86512-2796-11f0-a57c-569c3dd06744","og-image.ts","a5c86cf7-9b2a-41cc-954c-1f90cd8df3b2",45,["D",1746218821807],"/** @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;\n",[],[224,416],"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,424],"99b9f99e-2796-11f0-8d6c-569c3dd06744","favicon.ts","08a86db5-3af2-475e-a221-e9d3b52f1480",48,["D",1746218822080],"/** @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;\n",[],[224,432],"99b3ec70-2796-11f0-8d38-569c3dd06744","blog.ts","bf3cf9b7-379f-4ee6-9bf7-3f9e3a1c26f5",47,["D",1746218821995],"/** @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;\n",[],[224,440],["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,451],"9994bdaa-2796-11f0-99e0-569c3dd06744","2025-04-17-vt-cli.md","00fd6d60-1bd1-11f0-a6e2-569c3dd06744",42,["D",1746218822296],23,"---\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\nTown 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\n(and deploy) websites. But until now, this entire experience has been on the\nweb. There's a lot of reasons to want to work on your Val Town projects locally.\nMaybe you want to work from the comfort of your favorite editor, whether that's\nvscode, with your favorite extensions, theme, and keybinds, or Neovim and tmux.\nOr you want to access powerful local devtools, like ripgrep or sed, or\nincreasingly AI powered modern ones like Claude Code or AI powered IDEs like\nCursor. Maybe you want to use `git`, or some other version control system\noutside of Val Town. Or maybe you want an easy way to port a non-Val-Town\nproject to Val Town. Now you can!\n\n`vt` is designed to be a simple, robust, interactive CLI to interface with val\ntown 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\n that as you make changes locally they are automatically pushed to val town.\n This includes editing, creating, deleting, and renaming vals.\n- `vt checkout`, and manage multiple branches locally, working on multiple\n features at once.\n- `vt create` or `vt remix` to start new projects locally, and `vt list` and\n `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\n62 files get cloned in 0.17 seconds!\n\n`vt` is still in beta, and we'd love your feedback! Join\n[the Val Town Discord](https://discord.gg/hd9U4GGB) to leave feedback. Vt is\nbuilt entirely within Val Town \"userspace\" (with the public API), and the\ncodebase can be found at .\n\n## Try it out!\n\nTo get started using `vt`, make sure\n[you have Deno installed](https://docs.deno.com/runtime/getting_started/installation/),\nand 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\nread & 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\nactually clone anyone's project, but you won't be able to push if it isn't yours\n(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.\nWhen you edit the project locally, it will automatically upload the changes to\nVal Town. You may find it useful to use a terminal window in your editor of\nchoice 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\n[`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\n[Val Town vscode extension](https://marketplace.visualstudio.com/items?itemName=pomdtr.valtown).\nThe extension was pretty straightforward, it hooked into the Val Town API to let\nyou edit your vals locally and then push them to Val Town. It was made\npre-project era, so it only supports traditional Vals. VSCode runs on electron,\nand gives extension developers a lot of power; the extension also offered web\npreviews, 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,\nalso pre-project era. Fuse is a Linux protocol that lets you implement arbitrary\nfile systems in userspace. By implementing a fuse Val Town file system, all\nedits locally are instantly reflected on the Val Town website, and vice versa\n(if you update remotely, then if you try to save locally your editor will say\nsomething along the lines of \"more recent edits found, are you sure you want to\nwrite\"). Fuse is very powerful -- writes, reads, and all other file system\nsyscalls 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\nI write the code in neovim\" was the first question I asked myself when I first\nstarted using Val Town. I love the elegance of a file being a website, and\nthought it would be fun to be able to do a \"touch website.ts\" to create them,\nvia the magic of fuse, and Val Town! There's a lot to love about the perfect 1:1\nmapping of Val to File.\n\n[And so I built it](https://github.com/404wolf/valfs)! `valfs` was really cool:\nyou'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\n[`go-fuse`](https://github.com/hanwen/go-fuse), because, well, I didn't want to\ndeal with C++ package management, and I wanted to try go. `go` is super cool,\nit's like a \"cleaner\" `c` with actually pleasant devx, and the best type of\nimports (URL imports!).\n\nFuse is a two-part system that involves userspace/kernel-space communication via\na special [\"wire protocol\"](https://john-millikin.com/the-fuse-protocol). The\nofficial userspace [\"reference library\"](https://github.com/libfuse/libfuse) for\nimplementing fuse filesystems is written in `C`, but what's cool about `go-fuse`\nis 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\nfuse support, but MacOS and Windows definitely do not. For Mac, there's a\nproject called [MacFuse](https://macfuse.github.io/) that acts as a kernel\nextension to provide fuse support to Mac. However, it's not totally stable, and\n[Apple is deprecating kernel extensions](https://developer.apple.com/support/kernel-extensions/)\nand it may not be the best long term solution. There's a really cool project\ncalled [fuse-t](https://www.fuse-t.org/) that takes a different approach, where\nit implements the fuse protocol by forwarding fuse to NFS (network file system),\na protocol that Macs do naively support.\n\nOne idea we had to avoid dealing with fuse was to build a generic FTP server,\nlargely inspired by Pomdtr's\n[Webdav](https://www.val.town/x/pomdtr/webdav/code/webdav.ts) server. His server\nworks totally in userspace and maps the Val Town API to Webdav really nicely.\n[Webdav](https://en.wikipedia.org/wiki/WebDAV) is a generic \"file system\" ish\n(it's quite limited) protocol over HTTP, and making a FTP server would just be\nimplementing on a fancier file transfer protocol that's more capable. What's\nnice about using protocols like these is that you can then just use `rclone` for\nmounting or syncing.\n\nIn addition to compatibility issues, implementing a fuse backend is just plain\ncomplicated. The way `valfs` worked, on\n[every write syscall](https://github.com/404Wolf/valfs/blob/418eff73b080fe8cdb7fe7f7afd3fe30dbae2720/valfs/vals/valfile.go#L116C1-L153C2),\n`valfs` would have to parse the file, extract metadata, and do multiple API\ncalls. Even though `vt` is a total rewrite, many design choices for `vt` came\nfrom `vtfs`, like considerations on how we handle metadata, the notion that \"a\nval is a file,\" and more.\n\nAt its core, `vt` was built to be a decentralized synchronization tool. Unlike\n`vtfs`, where the sync is guaranteed and live, syncing happens asynchronously\nwith `vt` (even when \"live syncing\" with `vt watch`, which is only \"psudo-live\"\nsince you could create conflicts by updating state on the website while\nwatching). We rebuilt `vt` in typescript with `Deno`, because, well, we (and our\ncommunity) love typescript and Deno, there's an official\n[typescript sdk](https://docs.val.town/api/sdk/) for Val Town, and because we\nhave hopes of turning `vt` into a esm library in the future (so you can use `vt`\nin your own, non-val-town workflows).\n\nWe originally wanted to host `vt` itself on Val Town, where we would begin\ndevelopment with git and github, and then eventually transition to using `vt`\nitself to continue development of `vt` (bootstrapping!).\n\nEarly on, however, we ran into a lot of trouble with path aliases. When you use\n`http` imports for libraries (as you would if we hosted `vt` on Val Town, since\nyou'd do `deno install -grAf https://esm.town/std/vt` or similar), all the\nimports need to be relative since you lose all the configuration of your\n`deno.json`. This is an issue with `Deno` that is\n[\"expected behavior\"](https://github.com/denoland/deno/issues/25994). We did\nconsider at one point just\n[caving and making all the imports relative](https://github.com/val-town/vt/pull/28),\nbut it really sucks to have imports like\n`import foo from \"../../../../../foo.ts\";` all over the place. Unfortunately,\nthis is a platform limitation that we still need to solve. One idea we had to\nget around this was to install the source code locally in a temp directory with\nthe `deno.json` via a (http importable) install script. I even wrote a\n[Val that generates the install script to make this work for any project!](https://www.val.town/x/wolf/runWithDenoJson).\nYou can see this in action (and it might still work!) by visiting\n[`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)\n(notice how you put the entrypoint to the http library in the url path). We used\nthis approach for a bit, but\n[eventually ran into weird issues where Deno would keep the old version cached](https://github.com/val-town/vt/issues/40)\neven if you did a new install with `-r`, which we never totally solved but I\nimagine is related to the fact that the entrypoint of `vt`, `vt.ts`, itself\nnever changed.\n\n`vt` also has a\n[lot of automated tests](https://github.com/val-town/vt/actions), and currently\nVal 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\ngithub CLI. There's elements like `vt push` and pull that are very `git`ty, and\nthings like `vt create` that act like `gh repo create`. Or, commands like\n`vt browse`, similar to `gh browse`, which opens up the current project in a web\nbrowser.\n\nLike `git`, `vt` \"Projects\" are denoted by the existence of a dot folder -- in\n`vt`'s case, `.vt`. This is also where state and configuration data lives for\nthe project. Right now, the only thing that lives in `.vt` is `state.json`,\nwhich contains information about the current version of the project checked out,\nand the project and branch id.\n\nUnlike `git`, where you have a `stage` and `commits`, `vt` only has a notion of\n`pushing` and `pulling`. This means that the local state could conflict in ways\nwith the remote state that could result in changes that we can't reconsile:\nlike, if you pull and you have newer changes locally, or If you push and there\nare 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).\nThe conclusion we came to:\n\n- `pushing` is a forceful procedure. When you push we ensure that the remote\n state matches the local state, and by the end of the push the remote state\n should match the local state with no changes to the local state. This might\n sound scary, but we do versioning for projects, so in the worst case you could\n revert to an earlier version on the website and pull.\n- `pulling` is a \"graceful\" procedure. When you pull, you may receive\n modifications, deletions, creations, or renames to local files. For all of\n these changes except creations, pulling warns the user that local changes will\n be lost, and you need to confirm to complete the pull. This is implemented\n internally by doing a \"dry\" pull and checking what changes would be made\n locally.\n\nThis means that the contract for push is \"push the local state to make sure the\nremote matches it\" and pull is \"get the remote state and make sure the local\nstate matches it.\"\n\nOne totally different idea that I had to solve this problem of \"the meaning of\npush and pull\" was to totally scrap both, and change the contract to \"sync to a\nconsistent state.\" As it turns out, syncing really just redirects all the\ncomplexity, 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\nblock\" of the algorithm was to \"walk\" through revisions and make changes to the\nlocal state incrementally. Because of how Val Town does versioning, the changes\ncould be applied one version at a time.\n\nOn the subject of versioning: the way Val Town does it made developing `vt`\neasier since versions are just increasing integers, but as a user numbers are\nsort of meaningless. In one project I'm working on, I've hit versions in the\nthousands! My solution to make versions more useful is to maintain a\n`versions.txt` file that adds messages to specific versions. Right now,\nreverting to an older version is the same as doing a force push to the current\nbranch with that version, and this can be done via the web ui (and is not\ncurrently a `vt` feature).\n\nSyncing would start by pulling to incorporate all remote changes locally, and\nthen push the remainder. It also would look at modification times to try to\nguess which update should be kept in the case of local/remote conflicts.\n[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\nthe internal vt operations are able to easily piggyback off of one another in\n(sometimes) mind bending ways. Like `vt push --dry-run` being the same as\n`vt status`, `vt pull` just does a `vt clone`, and then removes stuff that does\nnot exist on the remote that still exists locally, or `vt checkout` is somewhat\nlike `vt pull`-ing the branch you are trying to check out. These abstractions\nmake testing and maintenance much easier.\n\nThere's been some discussion of how far we should lean into the `git` analogy.\nFor example, `vt` has command flags like `checkout -D/-b`, where, without the\nexistence of `git` would probably be `branch create` `branch switch`. We don't\nthink there's a \"correct\" answer here, and are open to thoughts on what would be\nmost intuitive/ergonomic for folks.\n[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\n[and even implemented at one point](https://github.com/val-town/vt/pull/7)\nadding support for `vt stash`, so you could save local changes that you didn't\nwant to push, but decided that we wanted to keep Val Town as the source of truth\nand try to avoid adding additional states. We may return to this later, since it\nwould be nice to be able to \"scrap\" local changes without totally losing them,\nthough. One thought is putting these changes into a \"scratchpad\" branch instead\nof storing them locally.\n\nFinally, something we knew early on is that people would need a way to opt out\nof syncing stuff. Originally, I thought this would be really straightforward,\njust add a `.vtignore`, and implement it like a `.gitignore`: a newline\nseparated list of globs. But it turns out that `.gitignore`s are kinda\ncomplicated, and it isn't quite like that. I started down the path of trying to\nimplement this myself, but eventually decided to use a\n[gitignore-parser](https://jsr.io/@cfa/gitignore-parser) library that I found.\nThere's really interesting fancy `gitingore` behavior you've probably never\nthought about, like if you have conflicting patterns like `!foo.tsx` and\n`foo.tsx`, later ones take president, and `/` prefixed stuff is relative to the\nroot of the git directory.\n[Git has a whole man page on it!](https://git-scm.com/docs/gitignore). We still\ndon't have perfect parity, like `.vtignores` apply for the entire project and\nnot just \"lower\" files like they do in `git`.\n\nOne other question with ignore files that is ongoing is whether we should name\nours `.vtignore` (in the style of `.npmignore`, `.dockerignore`, etc), or, like\nsome tools like `nix`, just re-use `.gitignore`.\n[We are still considering what to name ours](https://github.com/val-town/vt/issues/10),\nbut 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\nlot of reasons for this. One of the big ones is that, as you (and maybe your\nfavorite LLM) edit your code locally, it is really handy to remove the friction\nof syncing with Val Town.\n\nFrom the beginning, my plan for this was to implement \"git\" behavior first\n(pushing and pulling), and then just doing file system watching to add live\nsyncing using [Deno.watchFs](https://docs.deno.com/api/deno/~/Deno.watchFs) to\nhandle 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.\nDeno's standard library has an [async module](https://jsr.io/@std/async) that\nwas super useful for implementing `vt watch`. `vt watch` works by doing a `push`\ninitially, and then whenever local changes are made running another `vt push`.\nIt sounds super simple, and it mostly is!\n\nThe issue is that there's a lot of different things that could trigger a \"files\nwere changed\" notification, and doing the push itself is one of them (which took\na painful amount of time to figure out: the `.vt` folder has files internally\nthat get updated on a push, like book-keeping ticking the version). Instead of\nworking out the corner cases, I added a grace for post-pushing before we are\nable to detect file changes again.\n\nI also debounce the push. Initially, I did this so that if you are doing large\namounts of file modifications we wait until you're done before starting the\npush, but it turns out this is more important because of how editors will create\nephemeral temporary files during writes. Now, when you edit a file, the editor\nmight create transient files, but as long as it gets rid of them within the\ndebounce the final state that gets pushed is the one that does not include those\ntemporary files.\n\nAnother aspect of this live dev experience is the friction of having to reload\nthe website as you make updates to the website. Unfortunately, even though we\n_can_ and do open browser tabs, browsers' CLIs do not expose a way to redirect\nor reload open tabs unless you launch the browser with remote debugging (think\npuppeteer).\n\nOne idea I have for solving this problem, which I think will be the best long\nterm solution, is a minimal browser extension that\n[uses a websocket](https://developer.chrome.com/docs/extensions/how-to/web-platform/websockets)\nto talk to `vt`, and have `vt watch` use `Deno.serve` to host a minimal\nwebsocket server on localhost that pushes when the project gets updated.\nExtensions _can_ reload tabs, so this would give `vt` the power to tell your\nbrowser to reload tabs. This is still just an idea, and will be tested soon.\n\nSteve has been working on a\n[more general solution](https://www.val.town/x/stevekrouse/live-reload) to this\nproblem by injecting code into the website that detects updates and reloads\nusing a Val with long polling. There's a\n[demo of that here](https://www.val.town/x/stevekrouse/live-reload-demo), the\ngeneral idea is that it polls the latest version of the project and reloads the\npage 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\nactual logic for `push`, `pull`, and other \"git\" operations is defined, and the\n`vt cmd` lib, where the CLI logic is laid out. Eventually, we want to make `vt`\na esm library, where we expose the functionality of the `vt lib` component.\n\nFor both cases, we're using\n[Deno's native testing framework](https://docs.deno.com/runtime/fundamentals/testing/).\nFor `vt lib`, it's pretty straightforward, where we run tests in temp\ndirectories doing things like pulls or pushes, and then use the `sdk` to verify\nchanges.\n\nFor the command library, the CLI framework we're using for `vt` (cliffy) has a\nhandy\n[Snapshot test module](https://cliffy.io/docs@v1.0.0-rc.7/testing/snapshot) that\n`vt` doesn't use. We decided against using snapshot tests mostly because we lose\na lot of fine grain control. Instead, we took inspiration from cliffy in running\nthe CLI tests as subprocesses, and make a lot of use of Deno's\n`assertStringIncludes` on `stdout`. One ongoing issue we've had with testing is\nthat we've encountered a lot of \"resource leaks.\" It's really cool that `Deno`\ntests can detect unawaited promises or unawaited/cancelled request bodies, but\nit doesn't do a good job of helping us locate where the issues are.\n\n`vt` stores configuration in\n`/vt/config.yaml`, and loads it using\n`zod`. There's some interesting mechanics where we have multiple layers of\nconfiguration, like local and global, and prioritize configuration options in\norder. Once again,\n[Deno's standard library](https://jsr.io/@std/collections/doc/deep-merge) has\nbeen really handy in building out these components, like the `deepMerge`\nfunction.\n\nTo figure out where your system configuration directory is, usually I'd use\n[npm's xdg-portable](https://www.npmjs.com/package/xdg-portable), which gets us\nyour os-aware configuration directory, but it turns out that using this via\n`npm:xdg-portable`\n[doesn't work with Deno](https://github.com/rivy/js.xdg-portable/issues/3), and\nwe can't use the officially recommended http import version since `jsr`, the\nregistry we publish `vt` to, doesn't support http imports. I looked into this,\nand it seemed like an issue with their build process not including their Deno\ncode. The solution I decided on? Fork\n[xdg-portable](https://github.com/404Wolf/xdg-portable-deno) to be Deno native!\nIn the process, I removed a ton of bloat.\n\nThere's also a lot of fun interactive niceities that the CLI provides. Right\nnow, `vt` is primarily designed for the human user, but we plan on adding better\nscripting 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\n[previous vt CLI](https://github.com/pomdtr/vt), which served more as a\nmanagement tool. Like his tool, `vt` uses the [Cliffy](https://cliffy.io/) CLI\nframework, which, although very new and not super well established, has served\nevery use case we've come upon for `vt`. It's interactive capabilities and `tty`\nmodule have been super helpful to crafting some of the fancy interactive\nelements 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\nthe 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\nare 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\nfile corresponding to it. For Val Town projects, it's a bit more complex,\nbecause there's metadata specific to vals in the project, and metadata for the\nentire project itself too. We decided that, in general, changing val metadata\nand other uniquely val town attributes is something that we would leave to the\nwebsite.\n\n`vtfs` would indicate the type of a given val locally as `foobar.H.tsx` (or, if\nverbose, `foobar.http.tsx`), which was a really nice pattern. If you wanted to\nchange the type of a val, you could just rename it to `foobar.script.tsx`. This\npattern, however, turns out not to work as well for projects because vals in\nprojects generally are suffixed with `.tsx`, so you would end up with\n`foobar.http.tsx.tsx`, and it would get messy quickly -- and there were some\nissues with Vscode not liking `.script.tsx`. In general, it's a bit scary to\nintroduce magic like this.\n\nInstead of doing strict enforcement -- maintaining a 1:1 mapping of file\nextension to val type -- `vt` intuits the val type only on creation. If you\ncreate a `foobar.tsx`, `vt` sees `.tsx` and assumes it's a script. If you create\n`foobar_http.tsx` or `foobar.http.tsx`, `vt` sees `.tsx`, knows it's a val and\nnot a file, and then guesses it's an `http` val. But it never will change it\nafter the fact, so you can change `foobar.http.tsx` to be a script val on the\nwebsite, 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\nfile was renamed is actually really tricky. If we move `foo.ts` to `bar.ts` how\ndo we know that it wasn't a `CREATE bar.ts` and `DELETE foo.ts`? Originally we\ndidn't plan on adding rename detection support to `vt` because of all the\ncomplexity 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\nconfiguration -- like cron config, or custom endpoint HTTP vals, then doing the\ndeletion/creation would cause you to lose all your config! And so, we added\nrename detection to `vt`.\n\nThe rename detection algorithm is a bit complicated -- it works by looking at\nall files that got deleted and that got created, and then considering a file as\nrenamed if a created file is sufficiently similar to a file that got deleted.\nWhen iterating over created files to see if a deleted file is similar enough to\none of them, we use some heuristics to filter out files that could not possibly\nbe similar enough, like the file length. Then we compute the Levenshtein\ndistance between a given deleted file and created file, and consider a given\ncreated file \"renamed\" if it is above some theshold similar to a deleted file,\nand if it is similar enough to multiple, then the one it is most similar to\n[as it turns out, Deno's standard library has a super efficient edit distance function](https://jsr.io/@std/text).\nGit does fancy\n[directory rename detection](https://git-scm.com/docs/directory-rename-detection/2.22.0),\nwhich is something that, at least for now, `vt` does not do.\n\nBecause rename detection is relatively expensive, it is internally implemented\nas an optional operation that doesn't always get used for every `vt` operation.\nFor example, there isn't a lot of reason to do rename detection for `vt pull` --\nit 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`,\nlike blob support.\n\nFor `vtfs`, a core feature was going to be the ability to \"mount\" your val town\nblob store so that you could view, edit, and organize your blobs locally. With\nfuse, there's a ton of flexibility on how to \"implement\" inodes. `go-fuse`\nprovides a lot of nice abstractions. For totally static files like `deno.json` I\nwas using the\n[MemRegularFile](https://github.com/hanwen/go-fuse/blob/v2.7.2/fs/mem.go#L17)\nhelper, which makes it trivial to create an Inode with static text contents. For\nVals, I was doing it more manually, implementing the read and write methods for\na custom `ValFile` Inode myself. But for blobs, I wanted to handle reads and\nwrites by streaming the relevant portions of the file.\n\nWhen implementing my own write callback for fuse, I would be handling requests\nto write data to a region of a file (like, write 0001010101 starting at index 22\nbytes). Our `/v1/blob` endpoint is somewhat restrictive here. You can only write\nan entire file, or get an entire file. `vtfs` would show you all your blobs by\nusing the `blob list` endpoint when serving \"list directory\" syscalls, and when\nyou tried to access a specific blob would download the blob to a temp file and\ninternally manage the bookkeeping to map read calls to that temp file (read 1-11\nfrom fooBlob == read 1-11 from `/tmp/f90jjf2j-fooblob`).\n\nHandling writes was particularly tricky -- I could start a new upload to upload\nthe entire state of the file, with the new change made in the current write\ncall, but if you're writing a lot of data to a file (like if you\n`cp bigFile.png` to the folder that I was using to represent your val town\nblobs), then there would typically be a burst of write requests to write to\nconsecutive regions of the file.\n\nI spent a long time working on setting up a pipe where I would handle\nconsecutive writes, writes that start at index i, end at index i+k, and then a\nnew write that starts at index i+k+1, etc, as a special case. Eventually, I got\nsomething working!\n\nFor `vtfs` I was using\n[Openapi Generator](https://github.com/OpenAPITools/openapi-generator), and it\nturned out that Val Town's OpenAPI specification didn't accept file sizes on the\norder of my tests -- where the response would include the file size, it was an\ninteger, 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\nprove a huge challenge. `valfs` blob read/write support was a fun challenge to\nwork on, but was never totally reliable.\n\n`vtfs` also had tighter Deno integration, which is something that we're still\ndeciding if we want for `vt`. For example, with `vtfs`, when you mounted a\nfolder, `vtfs` would automatically run `deno cache /path/to/thatDir` for you, to\nmake sure that your language server would always have the types for all of the\nlibraries that you were using. Additionally, we have a default `deno.json` file\nthat is taken from `vtfs`, which includes\n[the Val Town type declarations](https://www.val.town/types/valtown.d.ts) like\nthe `Email` interface, that only show up after you run a `deno cache` from that\ndirectory.\n",[],[229,459],"99c91294-2796-11f0-adee-569c3dd06744","2025-04-08-migration.md","e840fcb3-d9c5-415e-922a-e2a7c3fe0d57",50,["D",1746218822270],"---\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\none day. Now our deployments happen instantly (~100ms), and we've greatly\nsimplified 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\nabout:\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\nmost 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\nlater.\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\nVal Town from all other code hosting & deployment platforms. We believe that you\nshould be able to _iterate directly in your production environment_, not iterate\nlocally, 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\ntechnical lengths to make this possible. This means no waiting minutes to see\nwhat your post looks like live. You get the fast local dev experience, but with\nproduction. And this goes for branches too. Every edit of every branch is\ninstantly 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,\n Railway, Heroku, Digital Ocean, Hertzner, etc\n\nSimpler, browser-based workflows are particularly important for casual\ncontributors, such as less technical folks on your team or strangers on the\ninternet. Val Town is a single website for code to be edited, versioned,\ncollaborated on, and deployed. No need for anyone to install or use git, clone\nthe repo locally, install programming languages and dependencies, or use a local\ntext editor.\n\nFor example, here's how to make a change to this blog that you're reading right\nnow:\n\n

\n \n

\n\nVal Town is uniquely positioned to allow anyone see their changes deployed live\nin 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\nand 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\n['fetch handler' interface](https://blog.val.town/blog/the-api-we-forgot-to-name/))\nis 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\n[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\n[val-town-blog.pages.dev/blog/val-town-newsletter-24](https://val-town-blog.pages.dev/blog/val-town-newsletter-24).\nI find it eerie that proxies work so well.\n\nWe've had reasonable success with this technique of migrating to Val Town\nquickly by proxying most old content, and only rebuilding the homepage and new\nposts. I first used this technique on my personal website,\n[stevekrouse.com](https://stevekrouse.com), and was pleased to see it continue\nto 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\n alongside us. We're coming up with patterns that you'd get for free from\n mature blogging tools like Astro and Cloudflare Pages.\n2. Val Town doesn't have good workflows for bundlers or build steps, so it's\n 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\nscratch without a bundler with some help from AI. I do miss pull requests\ncomments 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\n leave for another deployment platform like Cloudflare, Vercel, or Deno\n 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\n 100k hits in a day, and you pay $0. It's $10 / month for 1m code runs per\n day. Need additional scale beyond that? It's still $10 / month while our\n Scale Plan is in beta. When ready, our scale pricing will be in line with\n other FaaS providers.\n\n## Get yourself a Val Town blog\n\nIf you are starting a new blog from scratch, remix\n[this markdown blog starter](https://www.val.town/x/stevekrouse/markdownBlogStarter).\n\nIf you are migrating an existing blog, feel free to remix\n[the Val Town blog](https://www.val.town/x/valdottown/blog). It comes with good\npatterns for proxying to old content.\n",[],[229,468],"99c270d8-2796-11f0-9fc2-569c3dd06744","2025-04-02-post-mortem-db-migration.md","296ae44b-f150-439e-bf00-078c7447fa52",49,["D",1746218822220],"---\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\nreturn 503 errors and other types of vals to fail. In the end, the root cause\nwas a deployment timing issue where database migrations were deployed\nsuccessfully, but our application code deployment hung for several minutes. The\nnew database migrations were incompatible with the old application code and\ncrashed the process.\n\nWe aim to make all database migrations maintain backward compatibility, but in\nthis case, we only discovered through the delayed deployment feedback that the\nnew 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\n 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\n Render rejected because the earlier migration had succeeded, so the ‘old\n 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\n 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\nhappen again. We’ve added a test to ensure database migrations are backward\ncompatible, which we’ll run before we deploy any new code that includes database\nmigrations.\n",[],[229,476],["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,487],"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,494],"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,501],"99d9e682-2796-11f0-ba89-569c3dd06744",["D",1746218822591],[],[234,33],"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,512],"99aef684-2796-11f0-b0c0-569c3dd06744","Logo.tsx","aa36f387-f9c4-4400-b523-63f808ed57d6",46,["D",1746218822465],"/** @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,519],"99d051f8-2796-11f0-919c-569c3dd06744","Layout.tsx","915bac9c-e6e2-4619-8151-f7ccec3348e5",51,["D",1746218822584],"/** @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}\n",[],[234,527],"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,535],"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 · v52