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",[],[349],["D",1749513474046],[],[18,92],["D",1749513474046],[],[18,80],["D",1749513474046],[],[18,98],["D",1749513474046],[],[18,127],["D",1749513474046],[],[18,110],["D",1749513474046],[],[18,104],["D",1749513474046],[],[18,122],["D",1749513474046],[],[18,116],["D",1749513474046],[298,299,300,301,302,303,304,305],[18],"8f0a2f9a-458d-11f0-82de-76b3cceeab13","index.css","4649af02-ea21-468c-a8df-1d2b026cae05","857a24e1-ade8-4ae0-a0d2-a85810563776",["D",1749513474046],"* {\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",[],[390,383],"styles","8f0a3684-458d-11f0-82de-76b3cceeab13",["D",1749513474046],[296],[390],"8f0a2c2a-458d-11f0-82de-76b3cceeab13","rss.ts","d38a4e9e-ab11-49a7-8a62-74f23fc86b31","57163d8f-322c-4bc7-8020-bf9ca58bd4be",["D",1749513474046],"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",[],[403,396],"routes","8f0a266c-458d-11f0-82de-76b3cceeab13","proxy.ts","cff9335c-2c4a-4cbe-9cf0-17f38c3ed251",["D",1749513474046],"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",[],[403,405],"8f0a24d2-458d-11f0-82de-76b3cceeab13","og-image.ts","76f7a3d9-6e92-49ee-b02c-a466aa604dab",["D",1749513474046],"/** @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",[],[403,412],"8f0a2360-458d-11f0-82de-76b3cceeab13","home.ts","f63a7232-fb4b-4fe4-bcf2-e7c7c7861de1",["D",1749513474046],"/** @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",[],[403,419],"8f0a21ee-458d-11f0-82de-76b3cceeab13","favicon.ts","238cd73d-fa5b-4346-8f8d-2078dace4570",["D",1749513474046],"/** @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",[],[403,426],"8f0a205e-458d-11f0-82de-76b3cceeab13","blog.tsx","ee27d3ef-6f17-4e8c-b908-0e11150b3241",["D",1749513474046],"/** @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",[],[403,433],"8f0a2dec-458d-11f0-82de-76b3cceeab13",["D",1749513474046],[289,290,291,292,293,294],[403],"8f0a1d20-458d-11f0-82de-76b3cceeab13","EXAMPLE.md","fb477846-5811-4595-9974-67911cceae5b","2415c005-b8a4-4eb5-8bdc-d6856883e741",["D",1749513474046],"---\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",[],[451,444],"posts","8f0a1294-458d-11f0-82de-76b3cceeab13","2025-04-17-vt-cli.md","1756d162-0ffb-4a73-8353-bf939f36afaf",["D",1749513474046],"---\ntitle: |\n Instant websites with the Val Town CLI\ndescription: Write your scripts on the internet\npubDate: 2025-04-17T00:00:00.000Z\nauthor: Wolf Mermelstein\n---\n\nI love tools. I also love simplicity and versatility. What I don't love is\nfriction. So I made a tool to ship a TypeScript file on your computer to the\ninternet instantly, with no bundling, configuring, or certs, using Val Town's\nAPI. Instant websites!\n\n\n\n# The journey\n\nSince the day I started learning to code, I've ended up\n[writing](https://github.com/404Wolf/Flipbook)\n[a](https://github.com/404Wolf/HyprDash)\n[ton](https://github.com/404Wolf/Remarkable-Backup)\n[of](https://github.com/404Wolf/git-tern-ship)\n[random](https://github.com/404Wolf/GooglePhotoSync),\n[often](https://github.com/404Wolf/BitwardenBackup)\n[one-off](https://github.com/404Wolf/BHSEC-schedule-reformater),\n[tools](https://github.com/404Wolf/AutoSkin),\n[scripts](https://github.com/404Wolf/Screen-Capture), and\n[programs](https://github.com/404Wolf/Remarkable-Tools) for\n[myself](https://404wolf.com/posts/project/404wolf) pretty regularly, to solve\nhyper-specific problems that make my life smoother. Most of these aren't\nfull-fledged programs ready to blog about, because they're simple, local\nprograms, packaged for my own use. I'm sure everyone has their own garden of\nthese.\n\nFrom time to time, though, I ask myself - as a web developer, why are all my\nscripts, well, scripts? The answer is always that making web-based tools is just\ntoo much work, and it's never simple. You (or, now, your favorite LLM) can write\na tiny program in 45 seconds. But to ship it to the internet is a 15 minute\naffair, at best. Earlier this year, I found [Val Town](https://val.town), a\nwebsite that lets you put your TypeScript in a text box, and instantly get a\nwebsite. So cool!\n\nAnd so, since starting using Val Town, I've created a new\n[net](https://www.val.town/x/wolf/BingImageOfDay)\n[of](https://www.val.town/x/wolf/FileDumpThing/),\n[random](https://www.val.town/x/wolf/PassphraseAPI)\n[scripts](https://www.val.town/x/wolf/iClickWolf),\n[but](https://www.val.town/x/wolf/FrontierScanner)\n[this](https://www.val.town/x/wolf/deadPixelTest)\n[time](https://www.val.town/x/wolf/instagramScraping)\n[they're](https://www.val.town/x/wolf/XKCDComicOfTheDay)\n[websites](https://www.val.town/x/wolf/SharedTextBox)! Anyone can use or fork\nthem, with no build or installation necessary. It makes scripting all the more\nfun!\n\nWhen I started, Val Town was a website for building websites. It still is. But\nI'm just too drawn to my Linuxy, Neovim+tmux, ways. For me, it was a place to\npaste my code to ship it, and less of a development platform. I immediately\ncraved a local dev experience more robust than this initial copy+paste flow.\n\nSo, of course, I solved this debacle with a new custom tool.\n\nThis would be a be-all end-all program for creating _instant_ websites. This was\n[ValFS](https://github.com/404wolf/valfs):\n[a FUSE file system for Val Town](https://github.com/404wolf/valfs), built using\n[Val Town's API](https://docs.val.town/openapi). The initial concept was very\nsimple—you'd directly edit off Val Town, but locally, similar to how one might\nedit Google Docs files with [RClone](https://rclone.org/). I built\n[ValFS](https://github.com/404wolf/valfs) in go with\n[go-fuse](https://github.com/hanwen/go-fuse), and an\n[openapi-generator](https://github.com/OpenAPITools/openapi-generator) go SDK.\nIt would expose a folder with all your Vals in it. If you wrote to a Val, it\nwould automatically upload the new modifications to Val Town.\n\nAnd it worked! You could write websites as files on your computer, in your\neditor, with your local tools. So much simplicity and versatility! No friction.\n\n![ValFS](https://github.com/404Wolf/valfs/raw/main/images/neovim.png)\n\nBut this tool was mostly built for my specific workflow and setup. There were a\nlot of compatibility issues on non-Linux. Fuse on Mac is finicky,\n[requires a kernel module](https://macfuse.github.io/) or very early-stage\n[NFS adapter](https://www.fuse-t.org/), and, while possible, had too much\nfriction. Also, implementing a fuse backend was just plain complicated. The way\n`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.\n\nAfter making ValFS, and still obsessed with the platform, I joined Val Town as\nan intern, and created what I share here, the next generation of the Val Town\nlocal dev experience, `vt`! The new `vt` functions as a synchronization tool,\nand is an interactive CLI built entirely in Typescript w/ native Deno, a modern\nJavaScript runtime, so it's inherently cross-platform.\n\nIt handles a lot of\n[complicated synchronization situations](https://github.com/val-town/vt/tree/main/src/vt/lib)\nlike\n[detecting renames](https://github.com/val-town/vt/blob/7f04e828e48c275b81bbdf83fa39e239da68fc4e/src/vt/lib/utils/ItemStatusManager.ts#L455C2-L558C1)\nand keeping operations\n[atomic](https://github.com/val-town/vt/blob/7f04e828e48c275b81bbdf83fa39e239da68fc4e/src/vt/lib/pull.ts#L58C3-L59C24).\n\nIf you already have Deno you can run `vt` now with `vt run -A jsr:@valtown/vt`\nto quickly try it out! And, if you don't, Deno is easy to install, and you can\nget it [here](https://docs.deno.com/runtime/getting_started/installation/).\n\n`vt` leverages Val Town to let you instantly ship Typescript files on your\ncomputer to a deployed, scalable, HTTPS website (or API). Just code → prod!\n\nWatch me create and ship a website in seconds, from scratch...\n\n

\n\nWith `vt`, you can:\n\n- Watch a folder for changes, deploying changes to prod in less than a second of\n saving\n- Manage branches, to easily switch between separate deployments, like a prod\n and test branch, or just to keep yourself organized\n- Remix or create brand-new Val Town projects directly from your command line\n\nWe designed `vt` to work much like `git`;\n[Val Town projects](https://blog.val.town/blog/projects) act somewhat like\nrepos, so most commands should come naturally. `vt` can resolve complex deltas\nbetween Val Town and a local folder of Typescript and text files, automatically\ndetecting file changes like renames and modifications. You can work locally,\nand, when you're ready, ship with `vt push`.\n\nIt's also fast! Operations happen concurrently where possible. Watch 62 files\nget cloned in 0.17 seconds!\n\n![VT is fast](https://filedumpthing.val.run/blob?key=blob_file_1746754312602_vtIsFast.gif)\n\n## Live in Production\n\n`vt` lets you create new projects right from your command line. You can remix a\nvery minimal HTTP, Hono, React, template, with\n\"`vt remix @std/reactHonoTemplate myNewVal`\", and then \"`cd myNewVal`\". Or, you\ncan create a blank project from scratch with \"`vt create`\".\n\nThen, just run \"`vt watch`\" so that `vt` automatically does a \"`vt push`\"\nwhenever changes are detected in the folder.\n\n![VT watching in action](https://filedumpthing.val.run/blob?key=blob_file_1746754219195_8ae2a608-59ec-4021-a50d-75262542f9ae.gif)\n\n## Building with vt\n\n`vt` unlocks many new workflows previously not possible on Val Town.\n\nBelieve it or not,\n[this blog itself was written on Val Town](https://blog.val.town/migration),\nwith `vt watch` running while using the companion browser extension!\n\n

\n\nSomething I didn't anticipate back when writing ValFS, but we've seen a ton of,\nis using `vt` with local AI tools.\n\nWe've seen a lot of interesting VT projects, like\n[Geoffrey Litt's Stevens](https://news.ycombinator.com/item?id=43681287)\nproject, a really cool AI personal assistant telegram bot, built locally with\ncursor and `vt`. I've been working on\n[an IOT maintenance request \"magic wand\" project](https://docs.google.com/presentation/d/18BX7DCPWzHVeSSAAF-qcPItDV7UDQgAE5RPo2mTs0r0/edit#slide=id.g351e07d9258_0_1)\nusing Neon Postgres, and doing migrations locally with DrizzleKit, using `vt` to\nsync schemas, and with the help of\n[Claude Code](https://docs.anthropic.com/en/docs/claude-code/overview). And,\nmost recently, we built Val Town's new Val search on Val Town itself, built\nlargely with Claude Code and VT.\n\n![Val Town's CodeSearch](https://filedumpthing.val.run/blob?key=blob_file_1748008868409_a50ba86c-f033-4e0f-92b9-613b738d2e11.png)\n\nBeing able to use your local dev tools, whether AI ones like Cursor and Claude\nCode, or a highly customized Neovim and CLI tools like Ripgrep or Drizzle Kit,\nand the full Deno language server is very powerful!\n\n### Bring your own editor\n\nWith `vt`, you can edit your Vals locally with your favorite editors.\n\n![Making a TODO app in Cursor with VT](https://filedumpthing.val.run/blob?key=blob_file_1748619721178_6861d9dd-8c4e-4753-9676-6907479644ce.mp4)\n![Using Claude code and Neovim with VT](https://filedumpthing.val.run/blob?key=blob_file_1748620370159_81cc46f5-786a-45ac-b84d-451c10526e00.png)\n\n## And more to come...\n\nAt this point, `vt` is stable and ready for use.\n\nBut we're excited to keep improving `vt`! We have a lot planned: automatic\nreloading during \"`vt watch`\" with a\n[zero-config companion browser extension](https://github.com/val-town/vt/pull/121),\na Typescript library exposing `vt`'s internal functionality (like pushing &\npulling delta resolution), commands to manage PRs, and more! We love getting\nfeedback and seeing what the community builds! Please join our\n[discord server](https://discord.gg/hTUPa74P3c) to share any and all feedback,\nand how VT has shaped your workflows.\n\n`vt` is open source, and the Github can be found at\n[https://github.com/val-town/vt](https://github.com/val-town/vt), and the JSR\npage [here](https://jsr.io/@valtown/vt)!\n\n![JSR listing](https://filedumpthing.val.run/blob?key=blob_file_1746995723284_fc7ee6eb-bdc1-479d-958c-c83f398fd8d9.png)\n\n## On building ValFS and VT\n\n\n\nFor the curious, I've written more about building VT and ValFS\n[here](https://placeholder.example.com).\n",[],[451,453],"8f0a0a1a-458d-11f0-82de-76b3cceeab13","2025-04-08-migration.md","ce983fce-65e8-44ab-92cb-7475af94fa61",["D",1749513474046],"---\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",[],[451,460],"8f0a07cc-458d-11f0-82de-76b3cceeab13","2025-04-02-post-mortem-db-migration.md","577b3c7d-bb89-49e0-85e6-5f9f9de4a05c",["D",1749513474046],"---\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",[],[451,467],"8f0a1f0a-458d-11f0-82de-76b3cceeab13",["D",1749513474046],[284,285,286,287],[451],"8f0a04a2-458d-11f0-82de-76b3cceeab13","util.tsx","dd23de40-4b28-4839-8256-1cae09bea9a8","df355a64-3e7d-4935-be2d-854eab297209",["D",1749513474046],"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",[],[485,478],"components","8f09ffb6-458d-11f0-82de-76b3cceeab13","icons.tsx","c31a74f5-be1f-4c69-8aa4-a95a902ba436",["D",1749513474046],"/** @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",[],[485,487],"8f09fe4e-458d-11f0-82de-76b3cceeab13","SocialLinks.tsx","5549f4e0-90fe-440d-a56d-1d18952feed8",["D",1749513474046],"/** @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",[],[485,494],"8f09f962-458d-11f0-82de-76b3cceeab13","OGImage.tsx","0268de65-56d9-4348-ba3d-200351c080a4",["D",1749513474046],"/** @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",[],[485,501],"8f09f71e-458d-11f0-82de-76b3cceeab13","LogoMark.tsx","21c3b53e-2610-4b8a-b191-6b0f9250342f",["D",1749513474046],"/** @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",[],[485,508],"8f09ec42-458d-11f0-82de-76b3cceeab13","Logo.tsx","5a5da955-0886-44df-b0ab-76bd5d063efc",["D",1749513474046],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport default function (props: React.SVGProps) {\n return (\n \n \n \n \n );\n}\n",[],[485,515],"8f09ea30-458d-11f0-82de-76b3cceeab13","Layout.tsx","ed0ff527-8b3e-4146-8573-948c1b0c8211",["D",1749513474046],"/** @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",[],[485,522],"8f09e760-458d-11f0-82de-76b3cceeab13","HomePage.tsx","a93f2685-19d3-4733-8bf0-8881039cb632",["D",1749513474046],"/** @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",[],[485,529],"8f09e1c0-458d-11f0-82de-76b3cceeab13","Head.tsx","94924e35-94e2-48d2-9c01-006d25096313",["D",1749513474046],"/** @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

History · utils