Hello world!

`);\n});\n```\n\nExample: @andreterron/openable_handler\n\n### 2. Wrap your HTML string\n\n```ts\nimport { modifyHtmlString } from \"https://esm.town/v/andreterron/codeOnValTown?v=45\";\nimport { html } from \"https://esm.town/v/stevekrouse/html?v=5\";\n\nexport default async (req: Request): Promise => {\n return html(modifyHtmlString(`

Hello world!

`));\n};\n```\n\nExample: @andreterron/openable_html\n\n### Other ways\n\nWe made sure this was very modular, so you can also add the ribbon using these methods:\n\n- Get the element string directly: @andreterron/codeOnVT_ribbonElement\n- Modify an HTTP Response: @andreterron/codeOnVT_modifyResponse\n- Use `.pipeThrough` to append to a stream: @andreterron/InjectCodeOnValTownStream\n\n## Customization\n\n### Linking to the val\n\nThese functions infer the val using the call stack or the request URL. If the inference isn't working, or if you want to ensure it links to a specific val, pass the `val` argument:\n\n- `modifyFetchHandler(handler, {val: { handle: \"andre\", name: \"foo\" }})`\n- `modifyHtmlString(\"...\", {val: { handle: \"andre\", name: \"foo\" }})`\n\n### Styling\n\nYou can set the style parameter to a css string to customize the ribbon. Check out [github-fork-ribbon-css](https://github.com/simonwhitaker/github-fork-ribbon-css?tab=readme-ov-file#styling) to learn more about how to style the element.\n\n- `modifyFetchHandler(handler, {style: \".github-fork-ribbon:before { background-color: #333; }\"})`\n- `modifyHtmlString(\"...\", {style: \".github-fork-ribbon:before { background-color: #333; }\"})`\n\nHere's how you can hide the ribbon on small screens:\n\n```ts\nmodifyFetchHandler(handler, {style: `@media (max-width: 768px) {\n .github-fork-ribbon {\n display: none !important;\n }\n}`})\n```\n\n## To-dos\n\n- [ ] Let users customize the ribbon. Some ideas are the text, color or placement.\n\nMigrated from folder: a0_forks/codeOnValTown","deleted","label","children",[],[154],{"_102":173,"_95":174,"_155":175,"_157":-5,"_158":137,"_159":136,"_161":108,"_104":176,"_99":177,"_163":178,"_165":179,"_167":22,"_168":-5,"_169":180,"_98":181},"1df3c4a6-277e-11f0-b46e-569c3dd06744","main.tsx","1dae4b1a-277e-11f0-b46e-569c3dd06744",["D",1709854523253],12,"script","import { ribbonElement } from \"https://esm.town/v/andreterron/codeOnVT_ribbonElement?v=7\";\nimport { InjectHTMLElementStream } from \"https://esm.town/v/andreterron/InjectHTMLElementStream?v=9\";\nimport { rootValRef } from \"https://esm.town/v/andreterron/rootValRef?v=3\";\nimport type { ValRef } from \"https://esm.town/v/andreterron/ValRef?v=1\";\nimport { createWrappedHandler, type RequestHandler } from \"https://esm.town/v/vladimyr/pipeResponse?v=20\";\n\n/**\n * @param bodyText HTML string that will be used to inject the element.\n * @param val Define which val should open. Defaults to the root reference.\n */\nexport function modifyHtmlString(\n bodyText: string,\n { val, style }: { val?: ValRef; style?: string } = {},\n) {\n val = val?.handle && val?.name ? val : rootValRef();\n\n if (!val) {\n console.error(\"Failed to infer val. Please set the options.val parameter to the desired `{ handle, name }`\");\n return bodyText;\n }\n\n const element = ribbonElement({ val, style });\n\n const bodyIndex = bodyText.lastIndexOf(\"\");\n const htmlIndex = bodyText.lastIndexOf(\"\");\n\n // Append the element before or . Get the last occurrence of each\n // and use whichever one comes first.\n if (bodyIndex !== -1 && (htmlIndex === -1 || bodyIndex < htmlIndex)) {\n return bodyText.slice(0, bodyIndex) + element + bodyText.slice(bodyIndex);\n } else if (htmlIndex !== -1) {\n return bodyText.slice(0, htmlIndex) + element + bodyText.slice(htmlIndex);\n } else {\n return bodyText + element;\n }\n}\n\n/**\n * @param handler Fetch handler\n * @param val Define which val should open\n */\nexport function modifyFetchHandler(\n handler: RequestHandler,\n { val, style }: { val?: ValRef; style?: string } = {},\n) {\n val = val?.handle && val?.name ? val : rootValRef();\n\n if (!val) {\n console.error(\"Failed to infer val. Please set the options.val parameter to the desired `{ handle, name }`\");\n return handler;\n }\n\n const element = ribbonElement({ val, style });\n\n return createWrappedHandler(\n handler,\n new InjectHTMLElementStream(element),\n );\n}\n\nexport default modifyFetchHandler;",[],[174],"files",[152,172],"counts",{"_186":32,"_187":160,"_188":32,"_189":190},"pulls","branches","forks","envVars",{"_191":32,"_192":32},"count","emptyCount","contents",[195,198],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":137,"_159":160,"_161":108,"_104":196,"_99":32,"_163":164,"_165":166,"_167":22,"_168":-5,"_98":197},["D",1709851009608],[154],{"_102":173,"_95":174,"_155":175,"_157":-5,"_158":137,"_159":136,"_161":108,"_104":199,"_99":177,"_163":178,"_165":179,"_167":22,"_168":-5,"_98":200},["D",1709854523253],[174],"upstreamProject",{"_102":144,"_95":96,"_111":-5,"_112":-5,"_109":110,"_23":203},{"_93":204,"_129":205},"andreterron","https://avatars.githubusercontent.com/u/1753594?v=4","upstreamBranch",{"_102":140,"_104":208,"_209":210,"_95":43,"_138":144,"_99":211,"_139":-5,"_141":-5,"_212":-5,"_106":-5,"_149":22,"_109":110,"_148":204,"_16":146,"_147":96},["D",1746231201657],"updatedAt",["D",1721920447421],52,"lockfileKey","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":219,"_189":224},{"_102":103,"_95":96,"_104":220,"_106":-5,"_107":108,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":108,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":221,"_131":222,"_134":223,"_149":22},["D",1746208306537],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_99":136,"_95":43,"_102":137,"_138":103,"_139":140,"_141":32,"_142":110,"_143":144,"_145":146,"_147":96,"_148":94},[],"actionData","errors"]

vladimyr

codeOnValTown

Environment variables