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=50\";\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.","handle","andreterron","profileImageUrl","https://avatars.githubusercontent.com/u/1753594?v=4","name","codeOnValTown","fork",{"_105":117,"_107":118,"_109":119,"_111":120,"_113":114},"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;","# Code on Val Town\n\n![Screenshot 2024-02-27 at 1.25.46 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6b67bb0a-d80f-4f3d-5b17-57b5378b3e00/public)\n\nAdds a \"Code on Val Town\" ribbon to your page. This lets your website visitors navigate to the code behind it.\n\nThis uses [github-fork-ribbon-css](https://github.com/simonwhitaker/github-fork-ribbon-css) under the hood.\n\n## Usage\n\nHere are 2 different ways to add the \"Code on Val Town\" ribbon:\n\n### 1. Wrap your fetch handler (recommended)\n\n```ts\nimport { modifyFetchHandler } from \"https://esm.town/v/andreterron/codeOnValTown?v=45\";\nimport { html } from \"https://esm.town/v/stevekrouse/html?v=5\";\n\nexport default modifyFetchHandler(async (req: Request): Promise => {\n return html(`

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(`

Review pull request

Description

andreterron/codeOnValTown

vladimyr/codeOnValTown