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.",[90],"85d4d093b0a0b48b2e3398bd1a67500aedea0bbfbff83ea8bcd790a5d492ac91",["D",1746216491804],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","a480c02f-ad72-4a97-a39f-4406ccad9e03","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","c3d9e6ae-b54b-4b31-bdc9-b46e55d7f11e","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_136":132},"org",{"_11":12,"_130":-5,"_131":132,"_104":105,"_133":134,"_135":46},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybDc5RG1yQmZUZHJTd3FvNFpJZkt4UkhacEIifQ","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":55,"_13":14,"_34":186,"_44":-5,"_100":46,"_47":48,"_101":48,"_102":-5,"_103":-5,"_104":105,"_106":-5,"_107":26,"_108":-5,"_109":-5,"_110":56,"_51":111,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":117,"_118":117,"_119":120,"_121":120,"_122":120,"_123":117,"_124":117,"_125":187,"_127":188,"_129":189,"_45":46},"tree",[180,181],"files",[180,181],"counts",{"_170":56,"_171":20,"_172":56,"_173":174,"_175":176},"contents",[164,165],"upstreamProject",{"_32":39,"_13":14,"_102":-5,"_103":-5,"_47":48,"_125":162},"upstreamBranch",{"_32":33,"_34":160,"_36":161,"_13":16,"_38":39,"_40":22,"_41":-5,"_42":-5,"_43":-5,"_44":-5,"_45":46,"_47":48,"_49":50,"_51":52,"_53":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746231201657],["D",1721920447421],{"_11":50,"_136":163},"https://avatars.githubusercontent.com/u/1753594?v=4",{"_32":92,"_13":90,"_74":93,"_76":-5,"_77":54,"_78":20,"_79":26,"_34":168,"_40":56,"_81":95,"_83":96,"_62":46,"_85":-5,"_68":169},{"_32":73,"_13":69,"_74":75,"_76":-5,"_77":54,"_78":20,"_79":26,"_34":166,"_40":56,"_81":82,"_83":84,"_62":46,"_85":-5,"_68":167},["D",1727486596816],[69],["D",1727486596816],[90],"pulls","branches","forks","envVars",{"_177":56,"_179":56},"connections",{"_177":56,"_178":56},"count","unfilledCount","emptyCount",{"_32":92,"_13":90,"_74":93,"_76":-5,"_77":54,"_78":20,"_79":26,"_34":94,"_40":56,"_81":95,"_83":96,"_62":46,"_85":-5,"_86":184,"_68":185},{"_32":73,"_13":69,"_74":75,"_76":-5,"_77":54,"_78":20,"_79":26,"_34":80,"_40":56,"_81":82,"_83":84,"_62":46,"_85":-5,"_86":182,"_68":183},[],[69],[],[90],["D",1746216491804],{"_11":12,"_136":132},{"_11":12,"_130":-5,"_131":132,"_104":105,"_133":134,"_135":46},{"_40":20,"_13":16,"_32":54,"_38":55,"_41":33,"_42":56,"_57":48,"_58":39,"_59":52,"_53":14,"_49":12},"ctx",{"_125":-5,"_157":223,"_224":225,"_226":227,"_228":46,"_229":46,"_230":46,"_231":26,"_232":-5,"_233":-7,"_234":-7,"_235":56,"_236":46,"_237":46,"_238":-5,"_239":46,"_240":46,"_241":46,"_242":-5},"ENV",{"_194":195,"_196":197,"_198":16,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222},"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"]

Compare

Mergenicosql/mainintoandreterron/main

README.md+75-0

main.tsx+54-0