repro.fyi — The Art of the Minimal Reproduction

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_205":206,"_207":208},"routes/_app.x.$handle.$name",{"_106":105,"_38":50,"_114":96,"_33":60,"_13":14,"_115":-5,"_11":116,"_117":118,"_119":120,"_121":122,"_123":124,"_26":-5,"_125":-5,"_126":-5,"_127":31,"_128":129,"_130":65,"_131":-5,"_132":-5,"_133":134},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_38":50,"_43":51,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":65,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":31},"version",72,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","7701cae4-4c17-493b-91df-61b1770852d3","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":26,"_40":42,"_43":44,"_45":14,"_46":47,"_30":31},"previous",{"_36":37,"_38":34,"_39":26,"_40":41},"deleted",false,"deletedHere","path","template.tsx","latestPath","fileId","bf625aac-f927-11f0-88b5-42dde27851f2","name","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

Diff · v72