repro.fyi — The Art of the Minimal Reproduction

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_213":214,"_215":216},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_158":-5,"_20":159,"_22":160,"_161":162,"_163":164,"_25":165,"_24":-5,"_166":-5,"_167":-5,"_168":55,"_169":170,"_171":47,"_172":-5,"_173":-5,"_174":175},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","stevekrouse","name","repro-fyi","branchName","main","version","path","","project",{"_36":100,"_13":14,"_48":101,"_102":-5,"_103":55,"_104":105,"_106":105,"_107":108,"_109":19,"_110":111,"_112":60,"_113":47,"_114":47,"_115":-5,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":-5,"_127":128,"_129":128,"_130":131,"_132":131,"_133":131,"_134":128,"_135":128,"_136":137,"_138":139,"_140":141,"_142":55},"tree",[83,84,85,86],"file","contents",[32,33,34,35],"upstream","pull","ahead","behind","envVars",{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":79,"_17":80,"_51":24,"_52":81,"_54":55,"_56":-5,"_18":82},{"_36":67,"_13":68,"_39":69,"_41":-5,"_42":43,"_44":70,"_46":47,"_48":71,"_17":72,"_51":24,"_52":73,"_54":55,"_56":-5,"_18":74},{"_36":58,"_13":59,"_39":60,"_41":-5,"_42":43,"_44":61,"_46":47,"_48":62,"_17":63,"_51":64,"_52":65,"_54":55,"_56":-5,"_18":66},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":24,"_52":53,"_54":55,"_56":-5,"_18":57},"id","ca7142a0-262c-11f1-a6e1-42dde27851f2","template.tsx","fileId","bf625aac-f927-11f0-88b5-42dde27851f2","parentId","branchId","1d735096-bd83-11f0-9811-42dde27851f2","branchVersion",73,"latest",true,"createdAt",["D",1774210924187],9,"fileType","content","/** @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\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

Code