[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_177":178,"_179":180},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_106":85,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":119,"_120":121,"_122":25,"_123":124,"_125":25,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":-5,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",9,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","1dae4b1a-277e-11f0-b46e-569c3dd06744","name","fileType","script","content","import { ribbonElement } from \"https://esm.town/v/andreterron/codeOnVT_ribbonElement?v=7\";\nimport { inferRequestVal } from \"https://esm.town/v/andreterron/inferRequestVal\";\nimport { InjectCodeOnValTownStream } from \"https://esm.town/v/andreterron/InjectCodeOnValTownStream?v=4\";\nimport { rootValRef } from \"https://esm.town/v/andreterron/rootValRef?v=3\";\nimport { ValRef } from \"https://esm.town/v/andreterron/ValRef?v=1\";\nimport { createWrappedHandler, type RequestHandler } from \"https://esm.town/v/vladimyr/pipeResponse\";\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 return createWrappedHandler(\n handler,\n new InjectCodeOnValTownStream({ val, style }),\n );\n}\n\nexport default modifyFetchHandler;","import { ribbonElement } from \"https://esm.town/v/andreterron/codeOnVT_ribbonElement?v=7\";\nimport { InjectCodeOnValTownStream } from \"https://esm.town/v/andreterron/InjectCodeOnValTownStream?v=4\";\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 return createWrappedHandler(\n handler,\n new InjectCodeOnValTownStream({ val, style }),\n );\n}\n\nexport default modifyFetchHandler;","createdAt",["D",1709852893764],"branchVersion","branchId","1da9298c-277e-11f0-b46e-569c3dd06744","id","1da8b5c4-277e-11f0-b46e-569c3dd06744","codeOnValTown",["D",1746208306537],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","88c3d49e-6fe9-46c0-9133-ae5bac6940bd","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","5d2bf6b7-c427-467d-8bf6-994b2b39221c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":55,"_102":103,"_104":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":61,"_90":51,"_91":92,"_93":94,"_95":45,"_96":97},"isOwned",13,"main","projectId","forkedBranchId","6c365838-27b3-11f0-aecd-569c3dd06744","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","6c360a0e-27b3-11f0-aecd-569c3dd06744","forkedProjectOrgId","e3e17235-151f-4b9a-87b3-8c6b339f259e","projectName","userHandle","vladimyr","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2TYEBDWl6QE7Nsk4AHoXsDuwvBE.png","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":173,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":-5,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":174,"_79":175,"_81":176,"_83":25},"tree",[164,165],"files",[164,165],"counts",{"_154":61,"_155":150,"_156":61,"_157":158,"_159":160},"contents",[138,139],"upstreamProject",{"_43":92,"_32":45,"_53":-5,"_54":-5,"_50":51,"_77":136},"upstreamBranch",{"_43":88,"_38":130,"_131":132,"_32":85,"_86":92,"_13":133,"_87":-5,"_89":-5,"_134":-5,"_47":-5,"_83":25,"_50":51,"_96":135,"_62":94,"_95":45},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746231201657],"updatedAt",["D",1721920447421],52,"lockfileKey","andreterron",{"_98":135,"_105":137},"https://avatars.githubusercontent.com/u/1753594?v=4",{"_43":147,"_32":148,"_30":149,"_141":-5,"_41":42,"_40":150,"_142":49,"_38":151,"_13":61,"_33":20,"_35":152,"_24":25,"_145":-5,"_27":153},{"_43":140,"_32":28,"_30":31,"_141":-5,"_41":42,"_40":14,"_142":25,"_38":143,"_13":144,"_33":34,"_35":37,"_24":25,"_145":-5,"_27":146},"1ddcd318-277e-11f0-b46e-569c3dd06744","parentId","latest",["D",1709852893764],8,"label",[28],"1dae5178-277e-11f0-b46e-569c3dd06744","README.md","1dae51f0-277e-11f0-b46e-569c3dd06744",1,["D",1709851009608],"# 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(`

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",[148],"pulls","branches","forks","envVars",{"_161":61,"_163":61},"connections",{"_161":61,"_162":61},"count","unfilledCount","emptyCount",{"_43":147,"_32":148,"_30":149,"_141":-5,"_41":42,"_40":150,"_142":49,"_38":170,"_13":61,"_33":20,"_35":152,"_24":25,"_145":-5,"_167":171,"_27":172},{"_43":140,"_32":28,"_30":31,"_141":-5,"_41":42,"_40":14,"_142":25,"_38":166,"_13":144,"_33":34,"_35":37,"_24":25,"_145":-5,"_167":168,"_27":169},["D",1709852893764],"children",[],[28],["D",1709851009608],[],[148],["D",1746208306537],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":55,"_102":103,"_104":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":61,"_90":51,"_91":92,"_93":94,"_95":45,"_96":97},"ctx",{"_77":-5,"_127":210,"_211":212,"_213":214,"_215":25,"_216":25,"_217":25,"_218":49,"_219":-5,"_220":-7,"_221":-7,"_222":61,"_223":25,"_224":25,"_225":-5,"_226":25,"_227":25,"_228":25,"_229":-5},"ENV",{"_181":182,"_183":184,"_185":85,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209},"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"]

Diff · v9