repro.fyi — The Art of the Minimal Reproduction

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_199":200,"_201":202},"routes/_app.x.$handle.$name",{"_100":99,"_32":44,"_108":90,"_27":54,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":59,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":54,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",67,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","5dce4b64-f924-11f0-8e22-42dde27851f2","name","fileType","content","# repro.fyi\n\n**A minimal reproduction guide hosted on Val Town.**\n\n🔗 **Live site:** [repro.fyi](https://repro.fyi)\n\n## How It Works\n\nThis val is a simple HTTP server that:\n\n1. **Reads `index.md`** — The content file with all the guide text\n2. **Renders to HTML** — Uses `marked` to convert markdown to HTML\n3. **Wraps in a template** — `template.tsx` provides the HTML shell, styling, and theme toggle\n4. **Serves to the browser** — `main.ts` ties it all together\n\n## Architecture\n\n```\nmain.ts - HTTP handler, reads markdown, renders template\ntemplate.tsx - Preact component that outputs HTML (JSX rendered to string)\nindex.md - Markdown content\nREADME.md - This file\n```\n\n## Key Technologies\n\n- **Val Town** — Serverless hosting\n- **Deno** — Runtime\n- **Preact** — Lightweight component rendering (JSX → HTML string)\n- **Marked** — Markdown to HTML\n- **Water.css** — Classless CSS framework\n- **std/utils** — Val Town standard library for file I/O\n\n## Development\n\nTo edit the content, modify `index.md`.\n\nTo edit the styling or HTML structure, modify `template.tsx`.\n\nTo change how the server works, modify `main.ts`.\n\nThe site automatically deploys when you save changes.\n\n## Theme Switching\n\nThe template includes a light/dark mode toggle button (🌙/☀️) that:\n- Uses Water.css's light and dark variants\n- Saves preference to localStorage\n- Respects system preference on first load\n- Responds to system preference changes\n\n## License\n\nThis project is released under [CC0 1.0 Universal (Public Domain Dedication)](https://creativecommons.org/publicdomain/zero/1.0/).\nCopy it, remix it, make it better.\n\n---\n\n*Built with ❤️ on [Val Town](https://val.town)*\n","# repro.fyi\n\nminimal reproduction guide.\n\n[live](https://repro.fyi)\n\n---\n\nread `index.md` to understand it. \nread `main.ts` to see how it works. \nread `template.tsx` to see how it looks.\n\nthat's it.\n\n[CC0](https://creativecommons.org/publicdomain/zero/1.0/) — use it however you want.\n","createdAt",["D",1769615472283],"branchVersion","branchId","1d735096-bd83-11f0-9811-42dde27851f2","id","1d72fe7a-bd83-11f0-9811-42dde27851f2","repro-fyi",["D",1762703128089],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Infosite on how to make a minimal repro","imageUrl","","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","1d753a28-bd83-11f0-9811-42dde27851f2","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",2,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","1d72fe7abd8311f0981142dde27851f2","tursoHostname","1d72fe7abd8311f0981142dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789615253173],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":55,"_104":105,"_106":25},"branch",{"_13":89,"_32":90,"_42":41,"_91":43,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":44,"_98":99},"isOwned",74,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_42":43,"_32":44,"_37":194,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":54,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":195,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":196,"_84":197,"_86":198,"_88":25},"tree",[177,178,179,180],"files",[177,178,179,180],"counts",{"_165":166,"_167":168,"_169":166,"_170":171,"_172":173},"contents",[130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_57":129},"repro.fyi",{"_42":161,"_32":28,"_30":31,"_137":-5,"_40":41,"_39":14,"_139":25,"_37":162,"_13":163,"_33":20,"_34":36,"_24":25,"_143":-5,"_27":164},{"_42":153,"_32":154,"_30":155,"_137":-5,"_40":41,"_39":156,"_139":25,"_37":157,"_13":158,"_33":20,"_34":159,"_24":25,"_143":-5,"_27":160},{"_42":145,"_32":146,"_30":57,"_137":-5,"_40":41,"_39":147,"_139":59,"_37":148,"_13":149,"_33":150,"_34":151,"_24":25,"_143":-5,"_27":152},{"_42":134,"_32":135,"_30":136,"_137":-5,"_40":41,"_39":138,"_139":25,"_37":140,"_13":141,"_33":20,"_34":142,"_24":25,"_143":-5,"_27":144},"53e21826-f931-11f0-a8ad-42dde27851f2","template.tsx","bf625aac-f927-11f0-88b5-42dde27851f2","parentId",53,"latest",["D",1769265070412],6,"/** @jsx h */\n/** @jsxFrag Fragment */\nimport { h, Fragment } from \"npm:preact@10.25.4\";\nimport { renderToString } from \"npm:preact-render-to-string@6.5.11\";\n\nexport interface TemplateProps {\n content: string;\n}\n\nconst themeScript = `\n(function() {\n const toggle = document.getElementById('theme-toggle');\n const lightCSS = document.getElementById('theme-light');\n const darkCSS = document.getElementById('theme-dark');\n\n function getPreferredTheme() {\n const saved = localStorage.getItem('theme');\n if (saved) return saved;\n return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n }\n\n function setTheme(theme) {\n if (theme === 'dark') {\n lightCSS.disabled = true;\n darkCSS.disabled = false;\n toggle.textContent = '☀️';\n toggle.title = 'Switch to light mode';\n } else {\n lightCSS.disabled = false;\n darkCSS.disabled = true;\n toggle.textContent = '🌙';\n toggle.title = 'Switch to dark mode';\n }\n localStorage.setItem('theme', theme);\n }\n\n setTheme(getPreferredTheme());\n\n toggle.addEventListener('click', function() {\n const current = darkCSS.disabled ? 'light' : 'dark';\n setTheme(current === 'dark' ? 'light' : 'dark');\n });\n\n window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {\n if (!localStorage.getItem('theme')) {\n setTheme(e.matches ? 'dark' : 'light');\n }\n });\n})();\n`;\n\nconst tocScript = `\n(function() {\n const headings = document.querySelectorAll('main h2, main h3');\n if (headings.length === 0) return;\n \n const toc = document.createElement('nav');\n toc.className = 'toc';\n \n const title = document.createElement('div');\n title.className = 'toc-title';\n title.textContent = 'Contents';\n toc.appendChild(title);\n \n const ul = document.createElement('ul');\n \n headings.forEach(function(h) {\n if (!h.id || h.closest('details')) return;\n \n const li = document.createElement('li');\n li.className = 'toc-' + h.tagName.toLowerCase();\n \n const a = document.createElement('a');\n a.href = '#' + h.id;\n a.textContent = h.textContent;\n \n li.appendChild(a);\n ul.appendChild(li);\n });\n \n toc.appendChild(ul);\n \n const h1 = document.querySelector('main h1');\n if (h1 && h1.nextSibling) {\n h1.parentNode.insertBefore(toc, h1.nextSibling);\n }\n})();\n`;\n\nfunction TemplateComponent({ content }: TemplateProps) {\n return (\n \n \n \n \n repro.fyi — The Art of the Minimal Reproduction\n \n \n 🔬\" />\n\n {/* Open Graph / Facebook */}\n \n \n \n \n\n {/* Twitter */}\n \n \n \n \n\n {/* Water.css with theme switching */}\n \n \n\n \n \n \n \n 🌙\n \n\n

\n\n

Diff · v67