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.\n\nMigrated from folder: A_Features/_24_02_15_Open_In_ValTown/codeOnValTown",[125],"pulls","branches","forks",12,"envVars",{"_140":129,"_142":129},"connections",{"_140":129,"_141":129},"count","unfilledCount","emptyCount",{"_18":124,"_20":125,"_109":126,"_111":-5,"_112":66,"_113":127,"_114":26,"_22":149,"_63":129,"_117":94,"_119":130,"_121":62,"_122":-5,"_146":150,"_83":151},{"_18":107,"_20":108,"_109":110,"_111":-5,"_112":66,"_113":64,"_114":26,"_22":145,"_63":116,"_117":118,"_119":120,"_121":62,"_122":-5,"_146":147,"_83":148},["D",1721920447421],"children",[],[108],["D",1708008409741],[],[125],["D",1746231201657],{"_16":17,"_81":77},{"_16":17,"_75":-5,"_76":77,"_32":33,"_78":79,"_80":62},{"_63":64,"_20":65,"_18":66,"_67":19,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":21,"_74":17},"ctx",{"_55":-5,"_102":189,"_190":191,"_192":193,"_194":62,"_195":62,"_196":62,"_197":26,"_198":-5,"_199":-7,"_200":-7,"_201":129,"_202":62,"_203":62,"_204":-5,"_205":62,"_206":62,"_207":62,"_208":-5},"ENV",{"_160":161,"_162":163,"_164":65,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search