Exsoylent Green

[{"_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",{"_109":108,"_33":53,"_118":99,"_28":63,"_13":14,"_119":-5,"_11":120,"_121":122,"_123":124,"_125":126,"_127":128,"_21":-5,"_129":-5,"_130":-5,"_131":26,"_132":133,"_134":68,"_135":-5,"_136":-5,"_137":138},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_51":52,"_33":53,"_39":54,"_55":-5,"_56":26,"_57":58,"_59":58,"_60":61,"_62":63,"_18":64,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":72,"_73":74,"_75":76,"_77":78,"_79":80,"_81":-5,"_82":83,"_84":83,"_85":86,"_87":86,"_88":86,"_89":83,"_90":83,"_91":92,"_93":94,"_95":96,"_97":26},"version",146,"changes",[19,20],"aiChatInfo","userId",{"_21":44,"_23":45,"_25":26,"_27":26,"_28":46,"_30":46},{"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":29},"file",{"_31":32,"_33":29,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_25":26},"previous",{"_31":32,"_33":29,"_34":35,"_36":37},"deleted",false,"deletedHere","path","dark-mode.ts","latestPath","fileId","af11db20-3bb0-11f1-b041-42b51c65c3df","name","fileType","script","content","// Shared dark mode toggle script (injected inline into pages)\n// Adds a `dark` class to and persists preference in localStorage.\n\nexport const darkModeScript = `\n(function() {\n var stored = localStorage.getItem('theme');\n if (stored === 'dark' || (!stored && window.matchMedia('(prefers-color-scheme: dark)').matches)) {\n document.documentElement.classList.add('dark');\n }\n})();\n`;\n\nexport const darkModeToggleScript = `\nfunction toggleDarkMode() {\n var html = document.documentElement;\n html.classList.toggle('dark');\n var isDark = html.classList.contains('dark');\n localStorage.setItem('theme', isDark ? 'dark' : 'light');\n}\ndocument.addEventListener('DOMContentLoaded', function() {\n var btns = document.querySelectorAll('.theme-toggle');\n btns.forEach(function(btn) { btn.addEventListener('click', toggleDarkMode); });\n});\n`;\n\n// CSS for homepage dark mode (Tailwind-based page)\nexport const homepageDarkCSS = `\n /* Base font */\n body { font-family: 'Inter', sans-serif; }\n\n /* Light mode (default) */\n a.site-link { color: #40a552; }\n a.site-link:visited { color: #724e91; }\n a.site-link:hover { color: #13302c; }\n\n /* Status pill */\n .status-pill {\n font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n font-size: 0.65rem;\n padding: 2px 8px;\n border-radius: 9999px;\n background-color: #fff3cd;\n color: #856404;\n border: 1px solid #ffc107;\n display: inline-flex;\n align-items: center;\n line-height: 1;\n white-space: nowrap;\n }\n\n /* Dark mode */\n html.dark body {\n background-color: #060f0d;\n color: #ffffff;\n }\n html.dark h1, html.dark h2, html.dark h3,\n html.dark h4, html.dark h5, html.dark h6 {\n color: #68ea34 !important;\n }\n html.dark a.site-link,\n html.dark a.site-link:visited {\n color: #68ea34;\n }\n html.dark a.site-link:hover {\n color: #ffffff;\n }\n html.dark hr {\n border-color: #1a3a2a;\n }\n html.dark .date-dim {\n color: #9ca3af;\n }\n html.dark .status-pill {\n background-color: rgba(255, 193, 7, 0.15);\n color: #ffc107;\n border-color: #ffc107;\n }\n html.dark .status-in-progress {\n background-color: rgba(255, 193, 7, 0.15) !important;\n color: #ffc107 !important;\n border-color: #ffc107 !important;\n }\n html.dark .status-live {\n background-color: rgba(104, 234, 52, 0.15) !important;\n color: #68ea34 !important;\n border-color: #68ea34 !important;\n }\n\n /* Toggle button */\n .theme-toggle {\n background: none;\n border: 1px solid #9ca3af;\n border-radius: 9999px;\n padding: 0.5rem 0.65rem;\n cursor: pointer;\n font-size: 0.85rem;\n color: #6b7280;\n transition: all 0.2s;\n outline: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n }\n .theme-toggle:focus {\n outline: none;\n box-shadow: none;\n }\n .theme-toggle:hover {\n border-color: #40a552;\n color: #40a552;\n }\n html.dark .theme-toggle {\n color: #68ea34;\n border-color: #68ea34;\n }\n html.dark .theme-toggle:hover {\n color: #ffffff;\n border-color: #ffffff;\n }\n`;\n\n// CSS for post pages (Water.css-based pages)\nexport const postDarkCSS = `\n /* Dark mode overrides for post pages */\n html.dark body {\n background-color: #060f0d !important;\n color: #ffffff !important;\n }\n html.dark h1, html.dark h2, html.dark h3,\n html.dark h4, html.dark h5, html.dark h6 {\n color: #68ea34 !important;\n }\n html.dark p, html.dark li, html.dark ul, html.dark ol,\n html.dark blockquote, html.dark td, html.dark th,\n html.dark dd, html.dark dt, html.dark figcaption, html.dark footer {\n color: #ffffff !important;\n }\n html.dark strong {\n color: #68ea34 !important;\n }\n html.dark em {\n color: #ffffff !important;\n }\n html.dark a {\n color: #68ea34 !important;\n }\n html.dark a:visited {\n color: #68ea34 !important;\n }\n html.dark a:hover {\n color: #ffffff !important;\n }\n html.dark .home-link,\n html.dark .home-link:visited {\n color: #68ea34 !important;\n }\n html.dark .home-link:hover {\n color: #ffffff !important;\n }\n html.dark .source-link {\n color: #9ca3af !important;\n }\n html.dark .source-link:hover {\n color: #ffffff !important;\n }\n html.dark hr {\n border-color: #1a3a2a !important;\n }\n html.dark .header {\n border-bottom-color: #1a3a2a !important;\n }\n html.dark table {\n background-color: transparent !important;\n }\n html.dark table, html.dark thead, html.dark tbody,\n html.dark tr, html.dark td, html.dark th {\n background-color: transparent !important;\n border-color: #1a3a2a !important;\n }\n html.dark tr:nth-child(even) {\n background-color: rgba(255, 255, 255, 0.03) !important;\n }\n html.dark pre {\n background-color: rgba(255, 255, 255, 0.05) !important;\n }\n html.dark :not(pre) > code,\n html.dark p code, html.dark li code, html.dark td code,\n html.dark th code, html.dark strong code, html.dark em code, html.dark a code {\n background-color: #060f0d !important;\n color: #ff2e00 !important;\n border: 1px solid #1a3a2a !important;\n }\n\n /* Toggle button for post pages */\n .theme-toggle {\n background: none;\n border: 1px solid #9ca3af;\n border-radius: 9999px;\n padding: 0.5rem 0.65rem;\n cursor: pointer;\n font-size: 0.85rem;\n color: #6b7280;\n transition: all 0.2s;\n outline: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n }\n .theme-toggle:focus {\n outline: none;\n box-shadow: none;\n }\n .theme-toggle:hover {\n border-color: #40a552;\n color: #40a552;\n }\n html.dark .theme-toggle {\n color: #68ea34 !important;\n border-color: #68ea34 !important;\n }\n html.dark .theme-toggle:hover {\n color: #ffffff !important;\n border-color: #ffffff !important;\n }\n`;\n","// Shared dark mode toggle script (injected inline into pages)\n// Adds a `dark` class to and persists preference in localStorage.\n\nexport const darkModeScript = `\n(function() {\n var stored = localStorage.getItem('theme');\n if (stored === 'dark' || (!stored && window.matchMedia('(prefers-color-scheme: dark)').matches)) {\n document.documentElement.classList.add('dark');\n }\n})();\n`;\n\nexport const darkModeToggleScript = `\nfunction toggleDarkMode() {\n var html = document.documentElement;\n html.classList.toggle('dark');\n var isDark = html.classList.contains('dark');\n localStorage.setItem('theme', isDark ? 'dark' : 'light');\n}\ndocument.addEventListener('DOMContentLoaded', function() {\n var btns = document.querySelectorAll('.theme-toggle');\n btns.forEach(function(btn) { btn.addEventListener('click', toggleDarkMode); });\n});\n`;\n\n// CSS for homepage dark mode (Tailwind-based page)\nexport const homepageDarkCSS = `\n /* Base font */\n body { font-family: 'Inter', sans-serif; }\n\n /* Light mode (default) */\n a.site-link { color: #40a552; }\n a.site-link:visited { color: #724e91; }\n a.site-link:hover { color: #13302c; }\n\n /* Status pill */\n .status-pill {\n font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n font-size: 0.65rem;\n padding: 2px 8px;\n border-radius: 9999px;\n background-color: #fff3cd;\n color: #856404;\n border: 1px solid #ffc107;\n display: inline-flex;\n align-items: center;\n line-height: 1;\n white-space: nowrap;\n }\n\n /* Dark mode */\n html.dark body {\n background-color: #060f0d;\n color: #ffffff;\n }\n html.dark h1, html.dark h2, html.dark h3,\n html.dark h4, html.dark h5, html.dark h6 {\n color: #68ea34 !important;\n }\n html.dark a.site-link,\n html.dark a.site-link:visited {\n color: #68ea34;\n }\n html.dark a.site-link:hover {\n color: #ffffff;\n }\n html.dark hr {\n border-color: #1a3a2a;\n }\n html.dark .date-dim {\n color: #9ca3af;\n }\n html.dark .status-pill {\n background-color: rgba(255, 193, 7, 0.15);\n color: #ffc107;\n border-color: #ffc107;\n }\n html.dark .status-in-progress {\n background-color: rgba(255, 193, 7, 0.15) !important;\n color: #ffc107 !important;\n border-color: #ffc107 !important;\n }\n html.dark .status-live {\n background-color: rgba(104, 234, 52, 0.15) !important;\n color: #68ea34 !important;\n border-color: #68ea34 !important;\n }\n\n /* Toggle button */\n .theme-toggle {\n background: none;\n border: 1px solid #9ca3af;\n border-radius: 9999px;\n padding: 0.25rem 0.75rem;\n cursor: pointer;\n font-size: 0.85rem;\n color: #6b7280;\n transition: all 0.2s;\n outline: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n }\n .theme-toggle:focus {\n outline: none;\n box-shadow: none;\n }\n .theme-toggle:hover {\n border-color: #40a552;\n color: #40a552;\n }\n html.dark .theme-toggle {\n color: #68ea34;\n border-color: #68ea34;\n }\n html.dark .theme-toggle:hover {\n color: #ffffff;\n border-color: #ffffff;\n }\n`;\n\n// CSS for post pages (Water.css-based pages)\nexport const postDarkCSS = `\n /* Dark mode overrides for post pages */\n html.dark body {\n background-color: #060f0d !important;\n color: #ffffff !important;\n }\n html.dark h1, html.dark h2, html.dark h3,\n html.dark h4, html.dark h5, html.dark h6 {\n color: #68ea34 !important;\n }\n html.dark p, html.dark li, html.dark ul, html.dark ol,\n html.dark blockquote, html.dark td, html.dark th,\n html.dark dd, html.dark dt, html.dark figcaption, html.dark footer {\n color: #ffffff !important;\n }\n html.dark strong {\n color: #68ea34 !important;\n }\n html.dark em {\n color: #ffffff !important;\n }\n html.dark a {\n color: #68ea34 !important;\n }\n html.dark a:visited {\n color: #68ea34 !important;\n }\n html.dark a:hover {\n color: #ffffff !important;\n }\n html.dark .home-link,\n html.dark .home-link:visited {\n color: #68ea34 !important;\n }\n html.dark .home-link:hover {\n color: #ffffff !important;\n }\n html.dark .source-link {\n color: #9ca3af !important;\n }\n html.dark .source-link:hover {\n color: #ffffff !important;\n }\n html.dark hr {\n border-color: #1a3a2a !important;\n }\n html.dark .header {\n border-bottom-color: #1a3a2a !important;\n }\n html.dark table {\n background-color: transparent !important;\n }\n html.dark table, html.dark thead, html.dark tbody,\n html.dark tr, html.dark td, html.dark th {\n background-color: transparent !important;\n border-color: #1a3a2a !important;\n }\n html.dark tr:nth-child(even) {\n background-color: rgba(255, 255, 255, 0.03) !important;\n }\n html.dark pre {\n background-color: rgba(255, 255, 255, 0.05) !important;\n }\n html.dark :not(pre) > code,\n html.dark p code, html.dark li code, html.dark td code,\n html.dark th code, html.dark strong code, html.dark em code, html.dark a code {\n background-color: #060f0d !important;\n color: #ff2e00 !important;\n border: 1px solid #1a3a2a !important;\n }\n\n /* Toggle button for post pages */\n .theme-toggle {\n background: none;\n border: 1px solid #9ca3af;\n border-radius: 9999px;\n padding: 0.25rem 0.75rem;\n cursor: pointer;\n font-size: 0.85rem;\n color: #6b7280;\n transition: all 0.2s;\n outline: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n }\n .theme-toggle:focus {\n outline: none;\n box-shadow: none;\n }\n .theme-toggle:hover {\n border-color: #40a552;\n color: #40a552;\n }\n html.dark .theme-toggle {\n color: #68ea34 !important;\n border-color: #68ea34 !important;\n }\n html.dark .theme-toggle:hover {\n color: #ffffff !important;\n border-color: #ffffff !important;\n }\n`;\n","createdAt",["D",1777871944593],"branchVersion","branchId","2b23afd8-3ba5-11f1-996d-42b51c65c3df",{"_31":47,"_33":46,"_34":35,"_36":49,"_39":50,"_41":14,"_42":43,"_25":26},{"_31":47,"_33":46,"_34":35,"_36":48},"index.tsx","a491690a-3baa-11f1-8d20-42b51c65c3df","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { renderToString } from \"npm:react-dom@18.2.0/server\";\nimport { Link } from \"./helpers.tsx\";\nimport { darkModeScript, darkModeToggleScript, homepageDarkCSS } from \"./dark-mode.ts\";\n\nconst dateClass = \"text-xs text-gray-400 font-mono mr-2 hidden sm:inline-flex items-center leading-none\";\n\nconst faviconSvg = `data:image/svg+xml,${\n encodeURIComponent(`\n \n`)\n}`;\n\nexport async function Homepage() {\n return new Response(\n renderToString(\n \n \n Exsoylent Green\n \n \n \n \n \n \n \n \n \n

\n \n ← exsoylent.green\n \n

\n \n {\" \"}\n \n view source\n \n

\n {children}\n

Diff · v146