🧃 https://${host} 🍊

\n An esm.town proxy that applies the correct content-type header to your val.town static files.

\n\n

\n eg: ${import.meta.resolve(\"./style.css\")} becomes ${import.meta.resolve(\"./style.css\").replace(\"esm.town\", host)}\"

\n \n

\n View my source to see a working example.

\n\n

\n1\\`<title>My Styled Site</title>\n2<link rel=\"stylesheet\" href=\"\\${\nimport.meta.resolve(\"./style.css\").replace(\"esm.town\", \"${host}\")}\">\n3<script type=\"text/javascript\" src=\"\\${import.meta.resolve(\"./main.js\").replace(\"esm.town\", \"${host}\")}\">\n4\\`

\n\n\n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n }\n const resp = await fetch(new URL(url.pathname, \"https://esm.town\").toString(), {\n method: req.method,\n headers: req.headers,\n });\n let contentType = \"text/plain\";\n const detected = mime.lookup(url.pathname);\n if (detected != \"text/html\" && detected !== false) {\n contentType = detected;\n }\n return new Response(resp.body, {\n status: resp.status,\n headers: {\n ...resp.headers,\n \"cache-control\": \"public, max-age=86400\",\n \"content-type\": contentType,\n },\n });\n}","deleted","label","children",[],[155],{"_107":173,"_100":174,"_156":175,"_157":-5,"_158":143,"_159":176,"_160":123,"_109":177,"_104":178,"_163":179,"_165":180,"_167":27,"_168":-5,"_169":181,"_103":182},"9f5c6a7a-16ee-11f0-85e9-569c3dd06744","style.css","cd3b1da2-16e8-11f0-93d5-569c3dd06744",45,["D",1744387458005],10,"file","@import url(\"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;600&display=swap\");\n\n:root {\n --bg-primary: #131726;\n --bg-secondary: #0f1219;\n --accent-primary: #7c4dff;\n --accent-secondary: #06b6d4;\n --text-primary: #f0f4fc;\n --text-secondary: #a9b1d6;\n --code-string: #9ece6a;\n --code-backtick: #d097ff;\n --code-interp-braces: #ff5d8f;\n --code-interp-expr: #7aa2f7;\n --code-interp-method: #0dcfec;\n --code-interp-string: #ffb86c;\n --code-line-number: #565f89;\n --gradient-start: #7c4dff;\n --gradient-mid: #0ea5e9;\n --gradient-end: #06b6d4;\n}\n\nbody {\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background: linear-gradient(\n 135deg,\n var(--bg-primary) 0%,\n var(--bg-secondary) 100%\n );\n font-family: \"JetBrains Mono\", \"Fira Code\", monospace;\n color: var(--text-primary);\n position: relative;\n overflow-x: hidden;\n}\n\nbody::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(\n 90deg,\n var(--gradient-start),\n var(--gradient-mid),\n var(--gradient-end)\n );\n z-index: 100;\n}\n\na {\n color: var(--accent-secondary);\n text-decoration: none;\n position: relative;\n transition: all 0.3s ease;\n}\n\na::after {\n content: \"\";\n position: absolute;\n width: 0;\n height: 2px;\n bottom: -2px;\n left: 0;\n background: linear-gradient(\n 90deg,\n var(--gradient-start),\n var(--gradient-end)\n );\n transition: width 0.3s ease;\n}\n\na:hover {\n color: var(--text-primary);\n}\n\na:hover::after {\n width: 100%;\n}\n\nh1 {\n color: transparent;\n background: linear-gradient(\n 90deg,\n var(--gradient-start),\n var(--gradient-mid),\n var(--gradient-end)\n );\n -webkit-background-clip: text;\n background-clip: text;\n font-weight: 600;\n font-size: 2.5rem;\n margin-bottom: 1.5rem;\n text-shadow: 0 0 20px rgba(124, 77, 255, 0.2);\n letter-spacing: -0.5px;\n animation: gradient-shift 8s ease infinite;\n}\n\n@keyframes gradient-shift {\n 0% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n}\n\np {\n color: var(--text-secondary);\n margin-bottom: 1.5rem;\n max-width: 650px;\n text-align: center;\n line-height: 1.6;\n}\n\n.code-container {\n background-color: var(--bg-secondary);\n border-radius: 10px;\n padding: 2rem;\n width: 85%;\n max-width: 750px;\n box-shadow:\n 0 10px 30px rgba(0, 0, 0, 0.4),\n 0 0 0 1px rgba(255, 255, 255, 0.05),\n 0 0 30px rgba(124, 77, 255, 0.1);\n position: relative;\n overflow: hidden;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.code-container::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(\n 90deg,\n var(--gradient-start),\n var(--gradient-mid),\n var(--gradient-end)\n );\n z-index: 1;\n}\n\n.code-container:hover {\n transform: translateY(-5px);\n box-shadow:\n 0 14px 40px rgba(0, 0, 0, 0.5),\n 0 0 0 1px rgba(255, 255, 255, 0.08),\n 0 0 40px rgba(124, 77, 255, 0.15);\n}\n\npre {\n margin: 0;\n white-space: pre-wrap;\n line-height: 1.7;\n font-size: 15px;\n}\n\n/* Syntax highlighting colors */\n.backtick {\n color: var(--code-backtick);\n font-weight: 600;\n}\n\n.string {\n color: var(--code-string);\n}\n\n.interpolation-braces {\n color: var(--code-interp-braces);\n font-weight: 600;\n}\n\n.interpolation-expr {\n color: var(--code-interp-expr);\n font-weight: 600;\n}\n\n.interpolation-method {\n color: var(--code-interp-method);\n}\n\n.interpolation-string {\n color: var(--code-interp-string);\n}\n\n.line-number {\n color: var(--code-line-number);\n margin-right: 16px;\n user-select: none;\n opacity: 0.8;\n display: inline-block;\n min-width: 1.5em;\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n body {\n padding: 2rem 1rem;\n justify-content: flex-start;\n }\n\n h1 {\n font-size: 2rem;\n }\n\n .code-container {\n width: 95%;\n padding: 1.5rem;\n }\n\n pre {\n font-size: 14px;\n }\n}\n\n/* Add subtle animation to the code container */\n@keyframes pulse {\n 0% {\n box-shadow:\n 0 10px 30px rgba(0, 0, 0, 0.4),\n 0 0 0 1px rgba(255, 255, 255, 0.05),\n 0 0 30px rgba(124, 77, 255, 0.1);\n }\n 50% {\n box-shadow:\n 0 10px 30px rgba(0, 0, 0, 0.4),\n 0 0 0 1px rgba(255, 255, 255, 0.05),\n 0 0 40px rgba(124, 77, 255, 0.2);\n }\n 100% {\n box-shadow:\n 0 10px 30px rgba(0, 0, 0, 0.4),\n 0 0 0 1px rgba(255, 255, 255, 0.05),\n 0 0 30px rgba(124, 77, 255, 0.1);\n }\n}\n\n.code-container {\n animation: pulse 4s ease infinite;\n}",[],[174],"files",[153,172],"counts",{"_187":31,"_188":189,"_190":189,"_191":31},"pulls","branches",1,"forks","envVars","contents",[194,197],{"_107":154,"_100":155,"_156":121,"_157":-5,"_158":143,"_159":125,"_160":123,"_109":195,"_104":162,"_163":164,"_165":166,"_167":27,"_168":101,"_103":196},["D",1744394498769],[155],{"_107":173,"_100":174,"_156":175,"_157":-5,"_158":143,"_159":176,"_160":123,"_109":198,"_104":178,"_163":179,"_165":180,"_167":27,"_168":-5,"_103":199},["D",1744387458005],[174],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name._index",{"_98":99,"_100":101,"_102":-7,"_104":-7,"_105":206,"_192":210,"_215":-7,"_216":-5,"_217":-5,"_183":218,"_225":226},{"_107":108,"_100":101,"_109":207,"_111":-5,"_112":27,"_113":114,"_115":116,"_117":118,"_12":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":129,"_131":132,"_133":132,"_134":132,"_135":129,"_136":129,"_137":27,"_21":208,"_141":209},["D",1744384167458],{"_98":99,"_139":140},{"_104":125,"_100":42,"_107":143,"_144":108,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":101,"_150":99},[211,213],{"_107":154,"_100":155,"_156":121,"_157":-5,"_158":143,"_159":125,"_160":123,"_109":195,"_104":162,"_163":164,"_165":166,"_167":27,"_168":101,"_103":212},[155],{"_107":173,"_100":174,"_156":175,"_157":-5,"_158":143,"_159":176,"_160":123,"_109":198,"_104":178,"_163":179,"_165":180,"_167":27,"_168":-5,"_103":214},[174],"readme","upstream","pull",[219,222],{"_107":154,"_100":155,"_156":121,"_157":-5,"_158":143,"_159":125,"_160":123,"_109":161,"_104":162,"_163":164,"_165":166,"_167":27,"_168":101,"_169":220,"_103":221},[],[155],{"_107":173,"_100":174,"_156":175,"_157":-5,"_158":143,"_159":176,"_160":123,"_109":177,"_104":178,"_163":179,"_165":180,"_167":27,"_168":-5,"_169":223,"_103":224},[],[174],"previews",[219],"routes/_app","actionData","errors"]