[{"_1":2,"_469":-5,"_470":-5},"loaderData",{"_3":4,"_91":92,"_456":457,"_468":-5},"root",{"_5":6,"_32":33,"_58":59,"_89":90},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":31},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","fa80b67e1f763bfb4b247c3f5ca4f0b0730f3f5c","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","WORKER_FINGERPRINT","799d99f2805306c2714a7cfefbeae178","clerkState",{"_60":61},"__internal_clerk_state",{"_62":63,"_64":43,"_65":66,"_67":66,"_68":26,"_69":66,"_70":66,"_71":66,"_72":66,"_73":66,"_74":66,"_75":66,"_76":66,"_77":78,"_87":26,"_88":26},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_79":26,"_80":66,"_81":82,"_83":66,"_84":43,"_85":26,"_86":66},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_93":94,"_95":96,"_94":97,"_355":-5,"_356":-5,"_357":358,"_139":144,"_137":150,"_100":101,"_98":99,"_119":-7,"_50":51,"_455":26},"type","val","author","ec6d37b4-1291-4ea3-93b7-d7972929dc8b",{"_98":99,"_95":96,"_100":101,"_102":103,"_104":-5,"_105":106,"_107":108,"_109":110,"_111":112,"_113":26,"_114":112,"_115":116,"_117":118,"_119":120,"_121":26,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_20":143,"_146":-5,"_147":-7,"_148":149,"_137":150,"_151":152},"name","codeOnValTown","valNameId","0cdcb84a-cc11-11ee-94e1-325518e2651b","parentFolderId","03744f02-cc11-11ee-aff9-325518e2651b","isOwned","privacy","public","readme","# 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=50\";\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=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.","valType","script","currentVersion","8981f9f4-4a98-11ef-a97a-de64eea55b61","legacyPrivate","id","code","import { modifyResponse } from \"https://esm.town/v/andreterron/codeOnVT_modifyResponse?v=9\";\nimport { ribbonElement } from \"https://esm.town/v/andreterron/codeOnVT_ribbonElement?v=7\";\nimport { inferRequestVal } from \"https://esm.town/v/andreterron/inferRequestVal?v=2\";\nimport { rootValRef } from \"https://esm.town/v/andreterron/rootValRef?v=3\";\nimport { ValRef } from \"https://esm.town/v/andreterron/ValRef?v=1\";\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: (req: Request) => Response | Promise,\n { val, style }: { val?: ValRef; style?: string } = {},\n): (req: Request) => Promise {\n return async (req: Request): Promise => {\n const res = await handler(req);\n\n val = val?.handle && val?.name ? val : inferRequestVal(req);\n return modifyResponse(res, { val, style });\n };\n}\n\nexport default modifyFetchHandler;","createdAt",["D",1721920447421],"version",51,"currentUserHasLiked","likeCount",5,"forkCount",12,"referenceCount",343,"dependencyCount",10,"commentCount",18,"prCount",1,"mergedPr",{"_114":136,"_137":138,"_139":140,"_141":142},"42c48072-4935-11ef-a7c9-de64eea55b61","description","Update version to 50 to fix bugs","handle","stevekrouse","profileImageUrl","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_139":144,"_141":145},"andreterron","https://avatars.githubusercontent.com/u/1753594?v=4","forkedVal","interval","slug","andreterron/codeOnValTown","Code on Val Town Adds a \"Code on Val Town\" ribbon to your page. This lets your website visitors navigate to the code behind it. This uses github-fork-ribbon-css under the hood. Usage Here are 2 different ways to add the \"Code on Val Town\" ribbon: 1. Wrap your fetch handler (recommended) import { modifyFetchHandler } from \"https://esm.town/v/andreterron/codeOnValTown?v=50\";\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}); Example: @andreterron/openable_handler 2. Wrap your HTML string import { 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}; Example: @andreterron/openable_html Other ways We made sure this was very modular, so you can also add the ribbon using these methods: Get the element string directly: @andreterron/codeOnVT_ribbonElement Modify an HTTP Response: @andreterron/codeOnVT_modifyResponse Use .pipeThrough to append to a stream: @andreterron/InjectCodeOnValTownStream Customization Linking to the val These 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: modifyFetchHandler(handler, {val: { handle: \"andre\", name: \"foo\" }}) modifyHtmlString(\"...\", {val: { handle: \"andre\", name: \"foo\" }}) Styling You can set the style parameter to a css string to customize the ribbon. Check out github-fork-ribbon-css to learn more about how to style the element. modifyFetchHandler(handler, {style: \".github-fork-ribbon:before { background-color: #333; }\"}) modifyHtmlString(\"...\", {style: \".github-fork-ribbon:before { background-color: #333; }\"}) Here's how you can hide the ribbon on small screens: modifyFetchHandler(handler, {style: `@media (max-width: 768px) {\n .github-fork-ribbon {\n display: none !important;\n }\n}`}) To-dos [ ] Let users customize the ribbon. Some ideas are the text, color or placement.","versions",[153,156,160,164,168,172,176,180,184,188,192,196,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,288,292,296,300,304,309,312,316,319,323,327,331,335,338,342,346,349,352],{"_119":120,"_154":136,"_117":155,"_114":112},"prId",["D",1721920447421],{"_119":157,"_154":-5,"_117":158,"_114":159},50,["D",1709662005317],"20a25c90-db1b-11ee-8fa1-8aad37b30b4b",{"_119":161,"_154":-5,"_117":162,"_114":163},49,["D",1709659780163],"f256c7fe-db15-11ee-9f20-8aad37b30b4b",{"_119":165,"_154":-5,"_117":166,"_114":167},48,["D",1709232823881],"dc90547a-d733-11ee-b5ff-8aad37b30b4b",{"_119":169,"_154":-5,"_117":170,"_114":171},47,["D",1709232272292],"93ca8d42-d732-11ee-acc3-8aad37b30b4b",{"_119":173,"_154":-5,"_117":174,"_114":175},46,["D",1709152060883],"d210f98a-d677-11ee-9efa-8aad37b30b4b",{"_119":177,"_154":-5,"_117":178,"_114":179},45,["D",1709067132317],"14b23996-d5b2-11ee-aa3a-8aad37b30b4b",{"_119":181,"_154":-5,"_117":182,"_114":183},44,["D",1709066811052],"55350436-d5b1-11ee-8c4a-8aad37b30b4b",{"_119":185,"_154":-5,"_117":186,"_114":187},43,["D",1709066159032],"d092a270-d5af-11ee-bed8-8aad37b30b4b",{"_119":189,"_154":-5,"_117":190,"_114":191},42,["D",1709065880741],"2ab2d01e-d5af-11ee-b2c0-8aad37b30b4b",{"_119":193,"_154":-5,"_117":194,"_114":195},41,["D",1709065864121],"20cacca0-d5af-11ee-aa35-8aad37b30b4b",{"_119":197,"_154":198,"_117":199,"_114":200},40,"9ff926dc-d5a7-11ee-8f38-8aad37b30b4b",["D",1709063925443],"9d403fe0-d5aa-11ee-b49c-8aad37b30b4b",{"_119":202,"_154":-5,"_117":203,"_114":204},39,["D",1709059177969],"8f88f42e-d59f-11ee-a16a-8aad37b30b4b",{"_119":206,"_154":-5,"_117":207,"_114":208},38,["D",1709058990044],"1f85e59c-d59f-11ee-ba5c-8aad37b30b4b",{"_119":210,"_154":-5,"_117":211,"_114":212},37,["D",1708980436100],"39b93ae8-d4e8-11ee-b299-8aad37b30b4b",{"_119":214,"_154":-5,"_117":215,"_114":216},36,["D",1708980327297],"f8df4e9a-d4e7-11ee-baeb-8aad37b30b4b",{"_119":218,"_154":-5,"_117":219,"_114":220},35,["D",1708980240998],"c56f08d4-d4e7-11ee-b8d9-8aad37b30b4b",{"_119":222,"_154":-5,"_117":223,"_114":224},34,["D",1708979767522],"ab385aac-d4e6-11ee-a8d9-8aad37b30b4b",{"_119":226,"_154":-5,"_117":227,"_114":228},33,["D",1708979717595],"8d76227e-d4e6-11ee-8c23-8aad37b30b4b",{"_119":230,"_154":-5,"_117":231,"_114":232},32,["D",1708978997412],"e032f660-d4e4-11ee-ad2d-8aad37b30b4b",{"_119":234,"_154":-5,"_117":235,"_114":236},31,["D",1708557476420],"721bd030-d10f-11ee-8d42-8aad37b30b4b",{"_119":238,"_154":-5,"_117":239,"_114":240},30,["D",1708557475252],"7169b314-d10f-11ee-9e23-8aad37b30b4b",{"_119":242,"_154":-5,"_117":243,"_114":244},29,["D",1708556945222],"357d899e-d10e-11ee-b442-8aad37b30b4b",{"_119":246,"_154":-5,"_117":247,"_114":248},28,["D",1708556933916],"2ec0597e-d10e-11ee-a391-8aad37b30b4b",{"_119":250,"_154":-5,"_117":251,"_114":252},27,["D",1708556930759],"2cdeabb0-d10e-11ee-b442-8aad37b30b4b",{"_119":254,"_154":-5,"_117":255,"_114":256},26,["D",1708554733194],"0f04d588-d109-11ee-a956-8aad37b30b4b",{"_119":258,"_154":-5,"_117":259,"_114":260},25,["D",1708553340682],"d1045fae-d105-11ee-9662-8aad37b30b4b",{"_119":262,"_154":-5,"_117":263,"_114":264},24,["D",1708553315199],"c1d40f2a-d105-11ee-92df-8aad37b30b4b",{"_119":266,"_154":-5,"_117":267,"_114":268},23,["D",1708553312707],"c057a648-d105-11ee-a244-8aad37b30b4b",{"_119":270,"_154":-5,"_117":271,"_114":272},22,["D",1708553291053],"b36f822a-d105-11ee-9662-8aad37b30b4b",{"_119":274,"_154":-5,"_117":275,"_114":276},21,["D",1708553196966],"7b5b0b20-d105-11ee-b318-8aad37b30b4b",{"_119":278,"_154":-5,"_117":279,"_114":280},20,["D",1708553139678],"5935871e-d105-11ee-9fe5-8aad37b30b4b",{"_119":282,"_154":-5,"_117":283,"_114":284},19,["D",1708553054219],"26457df0-d105-11ee-8c34-8aad37b30b4b",{"_119":131,"_154":-5,"_117":286,"_114":287},["D",1708552346745],"8095a458-d103-11ee-8fe6-8aad37b30b4b",{"_119":289,"_154":-5,"_117":290,"_114":291},17,["D",1708552176290],"1afc39ae-d103-11ee-af37-8aad37b30b4b",{"_119":293,"_154":-5,"_117":294,"_114":295},16,["D",1708552020183],"bdf04156-d102-11ee-b4e3-8aad37b30b4b",{"_119":297,"_154":-5,"_117":298,"_114":299},15,["D",1708551887603],"6eea1028-d102-11ee-8f94-8aad37b30b4b",{"_119":301,"_154":-5,"_117":302,"_114":303},14,["D",1708551683884],"f57d00a6-d101-11ee-bc2d-8aad37b30b4b",{"_119":305,"_154":306,"_117":307,"_114":308},13,"d182459e-cff3-11ee-a68a-8aad37b30b4b",["D",1708551282659],"065715c0-d101-11ee-92ad-8aad37b30b4b",{"_119":125,"_154":-5,"_117":310,"_114":311},["D",1708471153175],"7571f9cc-d046-11ee-80eb-8aad37b30b4b",{"_119":313,"_154":-5,"_117":314,"_114":315},11,["D",1708101721083],"4ec25786-ccea-11ee-ad19-325518e2651b",{"_119":129,"_154":-5,"_117":317,"_114":318},["D",1708101687798],"3aeb8dcc-ccea-11ee-b553-325518e2651b",{"_119":320,"_154":-5,"_117":321,"_114":322},9,["D",1708101556565],"ecb2f870-cce9-11ee-9c20-325518e2651b",{"_119":324,"_154":-5,"_117":325,"_114":326},8,["D",1708101554619],"eb89f084-cce9-11ee-a55c-325518e2651b",{"_119":328,"_154":-5,"_117":329,"_114":330},7,["D",1708101421694],"9c4f5144-cce9-11ee-838f-325518e2651b",{"_119":332,"_154":-5,"_117":333,"_114":334},6,["D",1708101399066],"8ed26fec-cce9-11ee-a29b-325518e2651b",{"_119":123,"_154":-5,"_117":336,"_114":337},["D",1708101275553],"4533e5aa-cce9-11ee-b3ce-325518e2651b",{"_119":339,"_154":-5,"_117":340,"_114":341},4,["D",1708101147318],"f8c4d9f4-cce8-11ee-abf1-325518e2651b",{"_119":343,"_154":-5,"_117":344,"_114":345},3,["D",1708011023831],"22fc1a66-cc17-11ee-9424-325518e2651b",{"_119":90,"_154":-5,"_117":347,"_114":348},["D",1708009273209],"0f884c38-cc13-11ee-b05a-325518e2651b",{"_119":133,"_154":-5,"_117":350,"_114":351},["D",1708009227824],"f47b0d9a-cc12-11ee-ac07-325518e2651b",{"_119":31,"_154":-5,"_117":353,"_114":354},["D",1708008409741],"0cdd7794-cc11-11ee-94e1-325518e2651b","recentThread","breadcrumbs","comments",[359,368,373,378,383,388,393,398,403,408,413,418,423,428,433,440,445,450],{"_114":360,"_361":362,"_117":363,"_364":-5,"_365":26,"_366":26,"_20":367},"2abf00e6-d5be-11ee-9bd5-8aad37b30b4b","body","Seems like it adds this artifact:\n\n\n![Screenshot 2024-02-27 at 17.18.20.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/5ac983c3-edb2-4e29-ca4c-a121608f4100/public)\n",["D",1709072323272],"updatedAt","canDelete","canEdit",{"_139":140,"_141":142},{"_114":369,"_361":370,"_117":371,"_364":-5,"_365":26,"_366":26,"_20":372},"3005a154-d5be-11ee-9bd5-8aad37b30b4b","URL: https://dateme.directory/home\n",["D",1709072332124],{"_139":140,"_141":142},{"_114":374,"_361":375,"_117":376,"_364":-5,"_365":26,"_366":26,"_20":377},"428a75c0-d5be-11ee-bd50-8aad37b30b4b","Also, clicking it seems to go to this val, not the val where my code lives",["D",1709072363193],{"_139":140,"_141":142},{"_114":379,"_361":380,"_117":381,"_364":-5,"_365":26,"_366":26,"_20":382},"ad25ba74-d5bf-11ee-bdb6-8aad37b30b4b","Should be fixed now!",["D",1709072971545],{"_139":144,"_141":145},{"_114":384,"_361":385,"_117":386,"_364":-5,"_365":26,"_366":26,"_20":387},"8a85b954-d5c1-11ee-b118-8aad37b30b4b","Thanks! \n\nNew issue: on mobile it's getting in the way of my important navbar element. Demo: https://www.val.town/v/stevekrouse/dateme_code_on_val_town\n\nSo I had to remove it. It'd be awesome to have it be configurable to show up on other spots on the page or be smaller or be a footer :)",["D",1709073772448],{"_139":140,"_141":142},{"_114":389,"_361":390,"_117":391,"_364":-5,"_365":26,"_366":26,"_20":392},"49219616-d5c3-11ee-83e1-8aad37b30b4b","For now, I removed it for screens below 768px",["D",1709074521733],{"_139":144,"_141":145},{"_114":394,"_361":395,"_117":396,"_364":-5,"_365":26,"_366":26,"_20":397},"547b5128-d5c8-11ee-a917-8aad37b30b4b","It looks like the css itself is fairly fixed: https://github.com/simonwhitaker/github-fork-ribbon-css/blob/gh-pages/gh-fork-ribbon.css\n\nI see a couple options on how to customize this:\n\n1. Let users pass a custom element\n2. Let users add their custom `

codeOnValTown

Version 44