\n {title === \"Val Town Blog\" ? title : `${title}

\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",[393,406],"2ee525484541ae915d3a6b23340d7572adac42c940e366d34af7ae5ba40dd9f6","15494946-14b1-11f0-8cfa-569c3dd06744","a7fa1b74-5082-4373-b28e-40d99c703083",398,["D",1744141124725],226,"---\ntitle: The Val Town Blog is now hosted on Val Town\ndescription: We migrated this blog to Val Town Projects\npubDate: 2025-04-08T00:00:00.000Z\nauthor: Steve Krouse\n---\n\n![street-blog-web.jpg](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/4abb41d0-f710-46b4-523e-4440a252f400/public)\n\nWe migrated our blog to Val Town 🥳\n\nWith some cleverness, we were able to built it and migrate 65 old blog posts in one day. Now our deployments happen instantly (~100ms), and we've greatly simplified our blogging stack.\n\n| | Before | Now |\n|---------------------|---------------------------|------------|\n| **Rendering** | Astro | React |\n| **Version control** | GitHub | Val Town |\n| **Text editing** | Local editor | Val Town |\n| **Deployment** | Cloudflare Pages + GitHub | Val Town |\n| **Hosting** | Cloudflare Pages | Val Town |\n| **CDN** | Cloudflare | Cloudflare |\n\n## Should you blog on Val Town? \n\nMaybe! It depends on your constraints and what matters to you. We care deeply about:\n\n1. Tight feedback loops\n2. Simple, browser-based workflows\n3. A fast migration\n\nWe also care deeply about dogfooding, but unless you're us – and unfortunately most of you aren't – that one doesn't apply to you.\n\nThere are also good reasons *not* to migrate to Val Town, but we'll get to them later.\n\n## Tight feedback loops\n\nWe at Val Town are obsessed with tight feedback loops. \n\n> \"Creators need an immediate connection to what they're creating.\"\n> \n> – Bret Victor, \"Inventing on Principle\"\n\nIn some ways, this singular commitment to tight feedback loops is what separates Val Town from all other code hosting & deployment platforms. We believe that you should be able to *iterate directly in your production environment*, not iterate locally, then deploy, then wait minutes to see how things look live.\n\n

\n \n

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

\n \n

\n\nVal Town is uniquely positioned to allow anyone see their changes deployed live in their remix, because we host both your source code *and* your deployments. \n\n## A fast migration\n\nHow did we migrate 65 blog posts – with images, videos, and intricate formatting and styles – to an entirely new blog in a single day?\n\nWe didn't. We left them where they are, and proxy to them.\n\nWriting a proxy in Val Town (or any functions platform with the ['fetch handler' interface](https://blog.val.town/blog/the-api-we-forgot-to-name/)) is a delight:\n\n```ts\nconst OLD_BLOG_HOST = \"https://val-town-blog.pages.dev/\";\nexport async function proxy(req: Request): Promise {\n const url = new URL(req.url);\n return fetch(OLD_BLOG_HOST + url.pathname + url.search, {\n method: req.method,\n headers: req.headers,\n });\n}\n```\n\nSo if you go to view [blog.val.town/blog/val-town-newsletter-24](https://blog.val.town/blog/val-town-newsletter-24)\nyou'll see exactly what you would at [val-town-blog.pages.dev/blog/val-town-newsletter-24](https://val-town-blog.pages.dev/blog/val-town-newsletter-24). I find it eerie that proxies work so well.\n\nWe've had reasonable success with this technique of migrating to Val Town quickly by proxying most old content, and only rebuilding the homepage and new posts. I first used this technique on my personal website, [stevekrouse.com](https://stevekrouse.com), and was pleased to see it continue to work here.\n\n## Good reasons *not* to blog on Val Town\n\n1. Val Town Projects are beta software, so you'd be on the cutting-edge alongside us. We're coming up with patterns that you'd get for free from mature blogging tools like Astro and Cloudflare Pages.\n2. Val Town doesn't have good workflows for bundlers or build steps, so it's hard to use anything that requires vite, etc.\n3. Val Town doesn't (yet) have pull request comments.\n\nPersonally, I value simplicity, so I don't mind building a basic blog from scratch without a bundler with some help from AI. I do miss pull requests comments though. We plan on building them soon.\n\n## Bad reasons *not* to blog on Val Town\n\n1. **Lock-in**. Val Town is built on Deno and web standards, so you can easily leave for another deployment platform like Cloudflare, Vercel, or Deno Deploy. We'll even help you migrate. We believe in the open web.\n\n2. **Price**. We have a generous free tier, so your blog can go viral on HN, get 100k hits in a day, and you pay $0. It's $10 / month for 1m code runs per day. Need additional scale beyond that? It's still $10 / month while our Scale Plan is in beta. When ready, our scale pricing will be in line with other FaaS providers.\n\n## Get yourself a Val Town blog\n\nIf you are starting a new blog from scratch, remix [this markdown blog starter](https://www.val.town/x/stevekrouse/markdownBlogStarter).\n\nIf you are migrating an existing blog, feel free to remix [the Val Town blog](https://www.val.town/x/valdottown/blog). It comes with good patterns for proxying to old content.",[393,406],"59f224bfcf71b32eec1f523edeb936bd2ffc4363aa6e54fa5df80be20d45d337","posts/2025-04-02-post-mortem-db-migration.md",{"_32":432,"_13":425,"_111":433,"_113":396,"_115":33,"_116":434,"_118":48,"_34":435,"_40":436,"_121":277,"_123":437,"_66":48,"_125":-5,"_126":-7,"_103":438,"_128":439},{"_32":424,"_13":425,"_111":426,"_113":387,"_115":58,"_116":427,"_118":26,"_34":428,"_40":120,"_121":277,"_123":429,"_66":48,"_125":-5,"_126":-7,"_103":430,"_128":431},"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",[393,425],"8423f81b29ff09afce07e0213291497e4b49b6e0771519cfc100c61106b7b715","8402466c-11a0-11f0-947a-569c3dd06744","28e04aea-1001-11f0-aea6-569c3dd06744",145,["D",1743804155558],4,"---\ntitle: \"Post-mortem: A Backward Incompatible Database Migration\"\ndescription: Val runs failed due to a database migration that was not backward compatible\npubDate: 2025-04-02T00:00:00.000Z\nauthor: Sophie Houser\n---\n\nToday at 10:11am we experienced a 12-minute outage, which caused HTTP vals to return 503 errors and other types of vals to fail. In the end, the root cause was a deployment timing issue where database migrations were deployed successfully, but our application code deployment hung for several minutes. The new database migrations were incompatible with the old application code and crashed the process. \n\nWe aim to make all database migrations maintain backward compatibility, but in this case, we only discovered through the delayed deployment feedback that the new migrations were not compatible with previous versions.\n\n## Timeline\n\n- **10:11AM ET** - We merged the new migration and application code\n- **10:16AM ET** - We got pinged for downtime\n- **10:17AM ET** - We posted that HTTP vals are down in the new #service-status channel\n- **10:18AM ET** - The new application code deployment was still lagging\n- **10:19AM ET** - We rolled back to an earlier deployment on Render, which Render rejected because the earlier migration had succeeded, so the ‘old migration’ check prevented it from entering production.\n- **10:22AM ET** - We pushed something we thought could be a fix\n- **10:28AM ET** - We notified everyone that we’re back up.\n\n## Impact\n\n- HTTP vals returned 503 errors for ~12 minutes, and all other val types did not run.\n- The [val.town](http://val.town) site remained up.\n\n## Next Steps\n\nReliability is important to us and we’ve taken steps to make sure this doesn’t happen again. We’ve added a test to ensure database migrations are backward compatible, which we’ll run before we deploy any new code that includes database migrations.",[393,425],"ef87962dfb34c0597ea8f3d4837c35b9873063ecff03b3f2a480ea86c662c2d7","index.ts",{"_32":452,"_13":440,"_111":453,"_113":-5,"_115":33,"_116":454,"_118":48,"_34":455,"_40":456,"_121":448,"_123":457,"_66":48,"_125":458,"_126":-7,"_103":459,"_128":460},{"_32":443,"_13":440,"_111":444,"_113":-5,"_115":58,"_116":445,"_118":26,"_34":446,"_40":447,"_121":448,"_123":449,"_66":48,"_125":-5,"_126":-7,"_103":450,"_128":451},"ac955ace-4562-11f0-9bba-76b3cceeab13","a31361a6-105b-4f90-9562-14803ce76db5",1570,["D",1749495055293],6,"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.tsx\";\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;\n",[440],"9a6705132c5200917f9297ffbdf901c36faa63c9f744f260bf35505bad1f9c21","82504070-16f1-11f0-877e-569c3dd06744","0d488f48-2ef1-4ae4-a8f9-79cd0a1f2833",410,["D",1744388697758],15,"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 liveReload(app.fetch, import.meta.url);","vt-blog",[440],"01a9b0e55f5d54913ccc30b4adfe35c54ca3cbea813242ed9927fc534267db96","components/util.tsx",{"_32":474,"_13":465,"_111":475,"_113":476,"_115":33,"_116":146,"_118":48,"_34":477,"_40":173,"_121":122,"_123":478,"_66":48,"_125":-5,"_126":-7,"_103":479,"_128":480},{"_32":464,"_13":465,"_111":466,"_113":467,"_115":58,"_116":468,"_118":26,"_34":469,"_40":120,"_121":122,"_123":470,"_66":48,"_125":-5,"_126":-7,"_103":471,"_128":472},"99e28a8a-2796-11f0-9b8d-569c3dd06744","util.tsx","a0cd945d-b553-41ea-a172-83742d67c5f7","041a258a-9c3b-4aab-9fab-876cae4326a3",53,["D",1746218822357],"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",[473,465],"f74a2c827bedcc20e067ea5b89b6418478c6d2c686986a0c15a86e698bf22aef","components","dc908e5a-1165-11f0-bc42-569c3dd06744","dc908f18-1165-11f0-bc42-569c3dd06744","2eeef0fb-d416-4b75-b057-2b2c5b0bd49c",["D",1743778963811],"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",[473,465],"4455357c709ec2328061a19e9f59b9efb8659a7b8355f1177797e410e4396e89","components/icons.tsx",{"_32":492,"_13":485,"_111":493,"_113":476,"_115":33,"_116":146,"_118":48,"_34":494,"_40":173,"_121":122,"_123":495,"_66":48,"_125":-5,"_126":-7,"_103":496,"_128":497},{"_32":484,"_13":485,"_111":486,"_113":467,"_115":58,"_116":487,"_118":26,"_34":488,"_40":120,"_121":122,"_123":489,"_66":48,"_125":-5,"_126":-7,"_103":490,"_128":491},"9a1f9880-2796-11f0-8fdb-569c3dd06744","icons.tsx","1e9af073-7d62-4331-8817-44fccb4d7fd5",59,["D",1746218822512],"/** @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",[473,485],"5588cb3e66f531c0ff41f0deb84250013185d072d81951fa27ed7f432d8b3e2a","dc905ac0-1165-11f0-bc42-569c3dd06744","dc905b24-1165-11f0-bc42-569c3dd06744",["D",1743778963811],"/** @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",[473,485],"96526e1e4bec0e10cbc29f7061f7e457a6041381245db5fac2fe38883d680a0e","components/SocialLinks.tsx",{"_32":509,"_13":502,"_111":510,"_113":476,"_115":33,"_116":511,"_118":48,"_34":512,"_40":120,"_121":122,"_123":513,"_66":48,"_125":-5,"_126":-7,"_103":514,"_128":515},{"_32":501,"_13":502,"_111":503,"_113":467,"_115":58,"_116":504,"_118":26,"_34":505,"_40":120,"_121":122,"_123":506,"_66":48,"_125":-5,"_126":-7,"_103":507,"_128":508},"9a09cf28-2796-11f0-a894-569c3dd06744","SocialLinks.tsx","ba25fc49-7263-4dc5-b869-25b6db9700ee",57,["D",1746218822433],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n BlueskyIcon,\n DiscordIcon,\n GitHubIcon,\n RSSIcon,\n TwitterIcon,\n} 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}\n",[473,502],"8edf0f2f027fa92067de8f0f255cdf4393b886bca33742d17bbaf4b7854f995b","3c19d46a-1226-11f0-850d-569c3dd06744","dc908bee-1165-11f0-bc42-569c3dd06744",184,["D",1743861587471],"/** @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}",[473,502],"987aa27d2b04323dd7c619b244e086b2018e9a86a4f48158266539884dfdace0","components/OGImage.tsx",{"_32":527,"_13":520,"_111":528,"_113":476,"_115":33,"_116":263,"_118":26,"_34":529,"_40":173,"_121":122,"_123":530,"_66":48,"_125":-5,"_126":-7,"_103":531,"_128":532},{"_32":519,"_13":520,"_111":521,"_113":467,"_115":58,"_116":522,"_118":26,"_34":523,"_40":120,"_121":122,"_123":524,"_66":48,"_125":-5,"_126":-7,"_103":525,"_128":526},"99d9e682-2796-11f0-ba89-569c3dd06744","OGImage.tsx","b7a4cf2a-5ee3-4319-a6af-1aacdac02cc4",52,["D",1746218822591],"/** @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",[473,520],"989026a9dbac47bdc1173f8f503d69dd67ee26327d75b0b387ab4db5bc4eaeee","d875a7c0-119b-11f0-b6de-569c3dd06744","d875a842-119b-11f0-b6de-569c3dd06744",["D",1743802149750],"/** @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}",[473,520],"5daf7e92001f54701a9e8a9830c61d764a4ee6024660dee05f5bfaee42f4b08b","components/LogoMark.tsx",{"_32":544,"_13":537,"_111":545,"_113":476,"_115":33,"_116":263,"_118":26,"_34":546,"_40":120,"_121":122,"_123":547,"_66":48,"_125":-5,"_126":-7,"_103":548,"_128":549},{"_32":536,"_13":537,"_111":538,"_113":467,"_115":58,"_116":539,"_118":26,"_34":540,"_40":120,"_121":122,"_123":541,"_66":48,"_125":-5,"_126":-7,"_103":542,"_128":543},"9a2c2708-2796-11f0-a30a-569c3dd06744","LogoMark.tsx","2c57dc71-fbba-49e2-b55d-fd24d51fea89",60,["D",1746218822661],"/** @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}\n",[473,537],"ffd27d769be38d4f69fb5bfb0bf78c8dae70cdb687029d7dce2207dac12ae071","d875b85a-119b-11f0-b6de-569c3dd06744","dc9070b4-1165-11f0-bc42-569c3dd06744",["D",1743802149750],"/** @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}",[473,537],"a1217ecd3d9867d0b070b7e48b4e953e127ec93b1a157cff1f9d443474e7c579","components/Logo.tsx",{"_32":561,"_13":554,"_111":562,"_113":476,"_115":33,"_116":146,"_118":48,"_34":563,"_40":173,"_121":122,"_123":564,"_66":48,"_125":-5,"_126":-7,"_103":565,"_128":566},{"_32":553,"_13":554,"_111":555,"_113":467,"_115":58,"_116":556,"_118":26,"_34":557,"_40":120,"_121":122,"_123":558,"_66":48,"_125":-5,"_126":-7,"_103":559,"_128":560},"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",[473,554],"28d4bab05f84340b7ce1ed34907c4668511ed840c851ae2fa54b820038099cee","dc9068f8-1165-11f0-bc42-569c3dd06744","dc906a92-1165-11f0-bc42-569c3dd06744",["D",1743778963811],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport default function (props: React.SVGProps) {\n return (\n \n \n \n \n );\n}\n",[473,554],"e517221d15a4d7d8553629bf4e2601fc8af93482fa53decf645d80221c50e13e","components/Layout.tsx",{"_32":578,"_13":571,"_111":579,"_113":476,"_115":33,"_116":580,"_118":48,"_34":581,"_40":582,"_121":122,"_123":583,"_66":48,"_125":-5,"_126":-7,"_103":584,"_128":585},{"_32":570,"_13":571,"_111":572,"_113":467,"_115":58,"_116":573,"_118":26,"_34":574,"_40":120,"_121":122,"_123":575,"_66":48,"_125":-5,"_126":-7,"_103":576,"_128":577},"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",[473,571],"6aed8f35454618967bc8fd1b09f4ff663d01d62c4bdd59b8f7c00efc84f8d6c8","35bae986-13db-11f0-944d-569c3dd06744","002f0bbb-9b95-4633-bd86-59df1c4254c3",207,["D",1744049266861],27,"/** @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}",[473,571],"f8f0cbb9a5f61754cc22afc4ef85e1b7d0e7c1f717705cba010f48e39a43e5d4","components/HomePage.tsx",{"_32":597,"_13":590,"_111":598,"_113":476,"_115":33,"_116":146,"_118":48,"_34":599,"_40":120,"_121":122,"_123":600,"_66":48,"_125":-5,"_126":-7,"_103":601,"_128":602},{"_32":589,"_13":590,"_111":591,"_113":467,"_115":58,"_116":592,"_118":26,"_34":593,"_40":120,"_121":122,"_123":594,"_66":48,"_125":-5,"_126":-7,"_103":595,"_128":596},"9a341756-2796-11f0-b04d-569c3dd06744","HomePage.tsx","1b9c3c37-f6a0-4b6c-b07b-ae2ad25dc69c",62,["D",1746218822702],"/** @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",[473,590],"119036d74e0c8f6b72e8d6e8ce4f9c6dd711cc22947e00ef97460b00fb4d1af8","dc90a322-1165-11f0-bc42-569c3dd06744","037e829c-245d-4b44-87bf-fe8be72acfcc",["D",1743778963811],"/** @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",[473,590],"98757117c98dacfbcd28155510be32fb15f7860375ad3de77a4f41adc7cd1a81","components/Head.tsx",{"_32":614,"_13":607,"_111":615,"_113":476,"_115":33,"_116":616,"_118":48,"_34":617,"_40":618,"_121":122,"_123":619,"_66":48,"_125":-5,"_126":-7,"_103":620,"_128":621},{"_32":606,"_13":607,"_111":608,"_113":467,"_115":58,"_116":609,"_118":26,"_34":610,"_40":120,"_121":122,"_123":611,"_66":48,"_125":-5,"_126":-7,"_103":612,"_128":613},"9a2fa806-2796-11f0-8b30-569c3dd06744","Head.tsx","71fd2714-a588-44c3-9879-1ca607ee6d1c",61,["D",1746218822677],"/** @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 =\n \"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 \n {title === \"Val Town Blog\" ? title : `${title} | Val Town Blog`}\n \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

Compare

Mergewolf/mainintovaldottown/main

IMAGES.md+4-3

README.md+16-7

TODOs.md+3-2

components/BlogPost.tsx+1-1

components/Byline.tsx+2-2

components/Footer.tsx+3-2

components/Head.tsx+6-3

components/HomePage.tsx+1-2

components/Layout.tsx+7-2

components/Logo.tsx+2-1

components/LogoMark.tsx+2-2

components/OGImage.tsx+1-1

components/SocialLinks.tsx+8-2

components/icons.tsx+17-27

components/util.tsx+4-4

Hindex.ts+2-2

posts/2025-04-02-post-mortem-db-migration.md+20-6

posts/2025-04-08-migration.md+74-30

posts/EXAMPLE.md+5-3

routes/favicon.ts+1-1

routes/home.ts+1-1

routes/og-image.ts+1-1

routes/proxy.ts+1-1

routes/rss.ts+1-1

styles/index.css+1-1

utils/constants.ts+1-1

utils/get-new-posts.ts+12-7

utils/get-old-posts.ts+52-27

utils/get-posts.ts+1-1

utils/live-reload.ts+41-18

utils/posts.ts+1-1

utils/render-markdown.ts+1-1

utils/types.ts+1-1

.cursorrules+290-0

.vscode

.vscode/extensions.json+5-0

.vtignore+4-0

deno.json+37-0

posts/2025-04-17-vt-cli.md+211-0

routes/blog.tsx+35-0

routes/blog.ts+0-35