[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_305":306,"_307":308},"routes/_app.x.$handle.$name",{"_107":106,"_38":51,"_116":97,"_33":61,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_26":-5,"_127":-5,"_128":-5,"_129":31,"_130":131,"_132":66,"_133":-5,"_134":-5,"_135":136},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_49":50,"_38":51,"_44":52,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":61,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":74,"_75":76,"_77":78,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":90,"_91":92,"_93":94,"_95":31},"version",63,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","7fb9682f-735e-44d4-baa0-7c4dd3dcaa79","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":26,"_41":43,"_44":45,"_46":14,"_47":48,"_30":31},"previous",{"_36":37,"_38":39,"_40":26,"_41":42},"deleted",false,"deletedHere","path","posts/log-001-exsoylent-green.md","latestPath","fileId","bf614ffc-3baa-11f1-8d20-42b51c65c3df","name","log-001-exsoylent-green.md","fileType","content","---\ntitle: Project Log 001 - Building exsoylent.green\ndate: 2026-04-19\ndescription: The build log for this very website — exsoylent.green, project #001.\ntags: project-log, val-town, web\n---\n\n# Project Log #001 — Building exsoylent.green\n\n**Project:** [exsoylent.green](https://www.val.town/x/exsoylentgr33n/exsoylent_dot_green)\n**Status:** 🟢 Live\n**Started:** April 2026\n\n## What is it?\n\nA personal website and blog, built entirely on [Val Town](https://val.town). It serves as a project tracker, build log, and essay archive.\n\n## Architecture\n\n- **Runtime:** Val Town (Deno-based serverless TypeScript)\n- **Routing:** Hono\n- **Rendering:** React SSR (server-side rendered)\n- **Styling:** Tailwind CSS (homepage) + Water.css (posts)\n- **Content:** Markdown files with frontmatter, rendered with react-markdown\n- **Features:** RSS feed, syntax highlighting, mermaid diagrams, tag system\n\n## What I learned\n\n- How Val Town projects are structured (HTTP handlers, scripts, file types)\n- Server-side rendering with React + Hono\n- Using markdown with frontmatter for a simple blog CMS\n- How to set up RSS feeds\n\n## What's next\n\n- [ ] Connect custom domain (exsoylent.green)\n- [ ] Add more projects\n- [ ] Upload images via blob storage\n- [ ] Refine the design\n\n---\n\n*This log will be updated as the project evolves.*","---\ntitle: Project Log 001 - Building exsoylent.green\ndate: 2026-04-19\ndescription: The build log for this very website — exsoylent.green, project #001.\ntags: project-log, val-town, web\n---\n\n# Project Log #001 — Building exsoylent.green\n\n**Project:** [exsoylent.green](https://www.val.town/x/exsoylentgr33n/exsoylent_dot_green)\n**Status:** 🟢 Live\n**Started:** April 2026\n\n## What is it?\n\nA personal website and blog, built entirely on [Val Town](https://val.town). It serves as a project tracker, build log, and essay archive. Modeled after [stevekrouse.com](https://stevekrouse.com/).\n\n## Architecture\n\n- **Runtime:** Val Town (Deno-based serverless TypeScript)\n- **Routing:** Hono\n- **Rendering:** React SSR (server-side rendered)\n- **Styling:** Tailwind CSS (homepage) + Water.css (posts)\n- **Font:** Inter (Google Fonts)\n- **Content:** Markdown files with frontmatter, rendered with react-markdown\n- **Features:** RSS feed, syntax highlighting, mermaid diagrams, tag system, dark/light mode\n\n## File Structure\n\n```\nmain.tsx → HTTP entrypoint (Hono router)\nindex.tsx → Homepage rendering\nPostTemplate.tsx → Blog post page template\npost-helpers.tsx → Markdown loading, frontmatter parsing\nhelpers.tsx → Shared UI components (Link)\nFooter.tsx → Post footer\nrss.tsx → RSS feed generator\ndark-mode.ts → Dark/light mode toggle + CSS\nposts/ → Markdown content (essays + project logs)\n```\n\n## Color Palette\n\n| Element | Light Mode | Dark Mode |\n|---|---|---|\n| Background (homepage) | `#ffffff` | `#060f0d` |\n| Background (posts) | `#f4f4f9` | `#060f0d` |\n| Header \"Exsoylent Green\" | `#40a552` | `#68ea34` |\n| Section headings (posts) | `#13302c` | `#68ea34` |\n| Body text (posts) | `#060f0d` | `#ffffff` |\n| Links (unvisited) | `#40a552` | `#68ea34` |\n| Links (visited) | `#724e91` | `#68ea34` |\n| Links (hover) | `#13302c` | `#ffffff` |\n| Favicon | `#060f0d` bg / `#68ea34` text | — |\n\n## Build Log\n\n### Initial build\n- Set up Hono router with homepage, blog post rendering, RSS feed, tags, and view source\n- Created homepage with three sections: Projects, Project Logs, Essays\n- Added 10 project slots (#001 with link, #002–#010 as placeholders)\n- Created first project log (this page) and first essay (Hello World)\n- Modeled structure after Steve Krouse's personal site\n\n### Styling pass\n- Background: homepage white, post pages `#f4f4f9`\n- Links: `#40a552` unvisited, `#724e91` visited, `#13302c` hover\n- Post page headings: `#13302c`, body text: `#060f0d`\n- Overrode Water.css dark mode defaults with `!important` to force light text colors on post pages\n\n### Dark mode\n- Added dark/light toggle button (🌙 / ☀️) on homepage and post pages\n- Persists user preference in `localStorage`\n- Auto-detects system preference on first visit\n- Dark mode: `#060f0d` background, `#68ea34` greens, white body text\n- Fixed React SSR `onClick` issue — used `addEventListener` instead since SSR doesn't hydrate event handlers\n\n### Favicon\n- SVG favicon on all pages: dark `#060f0d` square with bright `#68ea34` \"EG\" text\n\n### Font\n- Switched from system font stack to Inter (Google Fonts) across all pages\n\n### Placeholder alignment\n- Changed project placeholders from `TBD` to `20XX TBD` to match `2026 Apr` date column width\n\n## What I learned\n\n- How Val Town projects are structured (HTTP handlers, scripts, file types)\n- Server-side rendering with React + Hono\n- Using markdown with frontmatter for a simple blog CMS\n- How to set up RSS feeds\n- React SSR renders `onClick` as an HTML attribute but doesn't hydrate it — use `addEventListener` for interactivity\n- Water.css has a dark mode that auto-activates based on `prefers-color-scheme` — must override with `!important` to control colors yourself\n- Dark mode via CSS class toggle (`html.dark`) + `localStorage` is a clean pattern for SSR sites\n- `DOMContentLoaded` event may already have fired by the time a script at the end of `` executes — attach listeners immediately instead\n\n## What's next\n\n- [ ] Connect custom domain (exsoylent.green)\n- [ ] Add more projects\n- [ ] Upload images via blob storage\n- [ ] Continue refining the design\n\n---\n\n*This log will be updated as the project evolves.*\n","createdAt",["D",1776577611189],"branchVersion","branchId","2b23afd8-3ba5-11f1-996d-42b51c65c3df","id","2b22e242-3ba5-11f1-996d-42b51c65c3df","exsoylent_dot_green",["D",1776571600453],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","The personal site of Exsoylent Green, exsoylent.green.","imageUrl","","f82d7dbb-2899-430f-8e34-4c8688c5bdad","pinnedFileId","b33a479c-3baa-11f1-8a2f-42b51c65c3df","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019d9718-256f-7298-9fbe-f431f2222f7e","tursoName","2b22e2423ba511f1996d42b51c65c3df","tursoHostname","2b22e2423ba511f1996d42b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789535451117],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_107":106,"_115":111},"org",{"_107":106,"_108":109,"_110":111,"_19":62,"_112":113,"_114":31},"branch",{"_13":96,"_38":97,"_49":48,"_98":50,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":51,"_105":106},"isOwned",150,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","exsoylentgr33n","handle","displayName","exsoylent.green","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d5ab7370-1e50-4785-676b-e5b0019d2900/square512?exp=1789592399&sig=2f4351e97fad446333a5bdd192a5ca406661dc438764d3fd3479717af9260e05","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_49":50,"_38":51,"_44":300,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":61,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":74,"_75":76,"_77":301,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":302,"_91":303,"_93":304,"_95":31},"tree",[241,244,245,246,247,248,249,250,251,252,253],"files",[241,242,243,244,245,246,247,248,249,250,251,252,253],"counts",{"_231":70,"_232":177,"_233":70,"_234":235,"_236":237},"contents",[137,138,139,140,141,142,143,144,145,146,147],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_49":224,"_38":225,"_36":226,"_151":-5,"_47":48,"_46":227,"_153":66,"_44":228,"_13":70,"_40":229,"_41":-5,"_30":31,"_157":-5,"_33":230},{"_49":218,"_38":219,"_36":220,"_151":-5,"_47":48,"_46":193,"_153":66,"_44":221,"_13":70,"_40":155,"_41":222,"_30":31,"_157":-5,"_33":223},{"_49":210,"_38":211,"_36":212,"_151":-5,"_47":48,"_46":213,"_153":31,"_44":214,"_13":215,"_40":155,"_41":216,"_30":31,"_157":-5,"_33":217},{"_49":204,"_38":205,"_36":206,"_151":-5,"_47":48,"_46":185,"_153":66,"_44":207,"_13":70,"_40":26,"_41":208,"_30":31,"_157":-5,"_33":209},{"_49":196,"_38":197,"_36":198,"_151":-5,"_47":48,"_46":199,"_153":31,"_44":200,"_13":201,"_40":155,"_41":202,"_30":31,"_157":-5,"_33":203},{"_49":188,"_38":189,"_36":190,"_151":-5,"_47":48,"_46":191,"_153":66,"_44":192,"_13":193,"_40":155,"_41":194,"_30":31,"_157":-5,"_33":195},{"_49":180,"_38":181,"_36":182,"_151":-5,"_47":48,"_46":183,"_153":31,"_44":184,"_13":185,"_40":155,"_41":186,"_30":31,"_157":-5,"_33":187},{"_49":174,"_38":175,"_36":176,"_151":-5,"_47":48,"_46":177,"_153":66,"_44":178,"_13":70,"_40":155,"_41":61,"_30":31,"_157":-5,"_33":179},{"_49":166,"_38":167,"_36":64,"_151":-5,"_47":48,"_46":168,"_153":66,"_44":169,"_13":170,"_40":171,"_41":172,"_30":31,"_157":-5,"_33":173},{"_49":159,"_38":160,"_36":161,"_151":-5,"_47":48,"_46":162,"_153":31,"_44":163,"_13":70,"_40":155,"_41":164,"_30":31,"_157":-5,"_33":165},{"_49":148,"_38":149,"_36":150,"_151":-5,"_47":48,"_46":152,"_153":66,"_44":154,"_13":70,"_40":155,"_41":156,"_30":31,"_157":-5,"_33":158},"98962410-3baa-11f1-9ec2-42b51c65c3df","rss.tsx","989624ce-3baa-11f1-9ec2-42b51c65c3df","parentId",6,"latest",["D",1776573931559],"script","import { getPostMetadata, ensurePostsLoaded, type PostMeta } from \"./post-helpers.tsx\";\n\nconst SITE_URL = \"https://exsoylent.green\";\n\nfunction escapeXml(str: string): string {\n return str\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n}\n\nexport async function generateRSSFeed(): Promise {\n await ensurePostsLoaded();\n\n const posts = getPostMetadata()\n .filter((p) => p.date)\n .sort((a, b) => new Date(b.date!).getTime() - new Date(a.date!).getTime());\n\n const items = posts\n .map(\n (p) => ` \n ${escapeXml(p.title)}\n ${SITE_URL}/${p.slug}\n ${SITE_URL}/${p.slug}\n ${new Date(p.date!).toUTCString()}${\n p.description\n ? `\\n ${escapeXml(p.description)}`\n : \"\"\n }\n `,\n )\n .join(\"\\n\");\n\n const xml = `\n\n \n Exsoylent Green\n ${SITE_URL}\n Projects, logs, and essays by Exsoylent Green\n en-us\n \n${items}\n \n`;\n\n return new Response(xml, {\n headers: {\n \"Content-Type\": \"application/rss+xml; charset=utf-8\",\n },\n });\n}\n","label",[149],"94f56690-3baa-11f1-9ec2-42b51c65c3df","post-helpers.tsx","94f56776-3baa-11f1-9ec2-42b51c65c3df",5,["D",1776573925471],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport {\n listFilesByPath,\n readFile,\n} from \"https://esm.town/v/std/utils/index.ts\";\nimport ReactMarkdown from \"https://esm.sh/react-markdown@9?deps=react@18.2.0\";\nimport rehypeSlug from \"https://esm.sh/rehype-slug@6?deps=react@18.2.0\";\nimport rehypeAutolinkHeadings from \"https://esm.sh/rehype-autolink-headings@7?deps=react@18.2.0\";\nimport rehypeRaw from \"https://esm.sh/rehype-raw@7?deps=react@18.2.0\";\nimport ValTown from \"npm:@valtown/sdk@1.9.0\";\nimport { PostTemplate } from \"./PostTemplate.tsx\";\n\nexport interface PostMeta {\n title: string;\n tags: string[];\n slug: string;\n date?: string;\n description?: string;\n}\n\nfunction parseFrontmatter(markdown: string): { meta: Record; content: string } {\n const match = markdown.match(/^---\\n([\\s\\S]*?)\\n---\\n([\\s\\S]*)$/);\n if (!match) return { meta: {}, content: markdown };\n const meta: Record = {};\n for (const line of match[1].split(\"\\n\")) {\n const idx = line.indexOf(\":\");\n if (idx > 0) {\n meta[line.slice(0, idx).trim()] = line.slice(idx + 1).trim();\n }\n }\n return { meta, content: match[2] };\n}\n\nlet postMetadata: PostMeta[] = [];\n\nexport function getPostMetadata(): PostMeta[] {\n return postMetadata;\n}\n\nasync function loadFile(file: ValTown.Vals.Files.FileRetrieveResponse) {\n if (file.name.endsWith(\".tsx\")) {\n return (await import(file.links.module)).default;\n } else if (file.name.endsWith(\".html\")) {\n const html = await readFile(file.path);\n return () =>\n new Response(html, { headers: { \"Content-Type\": \"text/html\" } });\n } else if (file.name.endsWith(\".md\")) {\n const raw = await readFile(file.path);\n const { meta, content } = parseFrontmatter(raw);\n\n const titleMatch = content.match(/^#\\s+(.+)$/m);\n const title = meta.title || (titleMatch ? titleMatch[1] : file.name.replace(\".md\", \"\"));\n\n const tags = meta.tags\n ? meta.tags.split(\",\").map((t: string) => t.trim()).filter(Boolean)\n : [];\n\n const date = meta.date || undefined;\n const description = meta.description || undefined;\n\n const firstImageMatch = content.match(/!\\[.*?\\]\$(.*?)\$/);\n const ogImage = meta.ogImage || (firstImageMatch ? firstImageMatch[1] : undefined);\n\n const slug = file.name.split(\".\")[0].toLowerCase();\n\n postMetadata.push({ title, tags, slug, date, description });\n\n return function () {\n return new Response(\n renderToString(\n \n {content}\n ,\n ),\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n };\n }\n}\n\nasync function getPosts() {\n postMetadata = [];\n const posts = Object.fromEntries(\n await Promise.all(\n (await listFilesByPath(\"posts\"))\n .map(\n async (\n file,\n ) => [\n file.name.split(\".\")[0].toLowerCase(),\n await loadFile(file),\n ],\n ),\n ),\n );\n return posts;\n}\n\nasync function getPostsBounded() {\n const posts = await Promise.race([\n getPosts(),\n new Promise((resolve) => setTimeout(resolve, 5000)),\n ]);\n if (!posts) {\n console.error(\"Timeout fetching posts\");\n return [];\n }\n console.log(`Fetched ${Object.keys(posts).length} posts`);\n return posts;\n}\n\nlet posts;\nexport async function ensurePostsLoaded() {\n if (!posts) posts = await getPostsBounded();\n}\nexport async function renderPage(req: Request) {\n await ensurePostsLoaded();\n\n const url = new URL(req.url);\n const name = url.pathname.slice(1);\n const post = posts[name.toLowerCase()];\n if (post) return post(req);\n\n return new Response(\n `

404: exsoylent.green${url.pathname}${url.search}

`,\n { status: 404, headers: { \"Content-Type\": \"text/html\" } },\n );\n}\n",[160],"aabcda68-3bae-11f1-b37f-42b51c65c3df","main.tsx",42,["D",1776575679970],8,"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport { Homepage } from \"./index.tsx\";\nimport { Hono } from \"npm:hono@4.0.0\";\nimport { renderPage, getPostMetadata, ensurePostsLoaded } from \"./post-helpers.tsx\";\nimport { generateRSSFeed } from \"./rss.tsx\";\nimport { listFilesByPath, parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { PostTemplate } from \"./PostTemplate.tsx\";\n\nconst SOURCE = \"https://www.val.town/x/exsoylentgr33n/exsoylent_dot_green\";\n\nlet blogPostsCache: Map | null = null;\n\nasync function getBlogPostsMap() {\n if (blogPostsCache) return blogPostsCache;\n \n const files = await listFilesByPath(\"posts\");\n blogPostsCache = new Map(\n files.map(file => {\n const slug = file.name.split(\".\")[0].toLowerCase();\n const sourceUrl = `${SOURCE}/code/${file.path}`;\n return [slug, sourceUrl];\n })\n );\n \n return blogPostsCache;\n}\n\nfunction getBlogPostBySlug(slug: string, postsMap: Map) {\n const sourceUrl = postsMap.get(slug);\n if (!sourceUrl) return null;\n return { valSourceURL: sourceUrl };\n}\n\nasync function renderTagsPage(tag?: string) {\n await ensurePostsLoaded();\n const allPosts = getPostMetadata();\n\n const tagMap = new Map();\n for (const post of allPosts) {\n for (const t of post.tags) {\n if (!tagMap.has(t)) tagMap.set(t, []);\n tagMap.get(t)!.push({ title: post.title, slug: post.slug });\n }\n }\n\n const sortedTags = [...tagMap.keys()].sort((a, b) => a.localeCompare(b));\n\n if (tag) {\n const decodedTag = decodeURIComponent(tag);\n const postsForTag = tagMap.get(decodedTag) || [];\n return new Response(\n renderToString(\n \n

Posts tagged \"{decodedTag}\"

\n ← All tags\n

\n {postsForTag.length === 0\n ?

No posts found with this tag.

\n : (\n

\n {p.title}\n

\n )}\n ,\n ),\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n }\n\n return new Response(\n renderToString(\n \n

Posts tagged \"{decodedTag}\"

Tags

\n \n {t}\n {\" \"}\n \n ({tagMap.get(t)!.length})\n \n

Diff · v63