Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
v51 was merged from the PR "Update version to 50 to fix bugs" by stevekrouse
Comments
18
stevekrouse avatar

Seems like it adds this artifact:

Screenshot 2024-02-27 at 17.18.20.png

stevekrouse avatar
stevekrouse avatar

Also, clicking it seems to go to this val, not the val where my code lives

andreterron avatar

Should be fixed now!

stevekrouse avatar

Thanks!

New 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

So 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 :)

andreterron avatar

For now, I removed it for screens below 768px

andreterron avatar

It looks like the css itself is fairly fixed: https://github.com/simonwhitaker/github-fork-ribbon-css/blob/gh-pages/gh-fork-ribbon.css

I see a couple options on how to customize this:

  1. Let users pass a custom element
  2. Let users add their custom <style> tag to be injected in the shadow DOM
  3. We fork github-fork-ribbon-css and use that instead. Then we'd do css wrangling to enable placement and color customization.

To show it on other spots or to make it smaller, either option works. In order for it to be a footer, I think the best way is option (1).

As a user of the wrapper, what would you prefer?

stevekrouse avatar

I don't want it removed on small screens always. I have it on other small screens looking good now.

I like the idea of passing a custom element or providing other options.

This little GitHub icon is really elegant: https://counterscale.dev/

stevekrouse avatar

Would be awesome if these "inject" utilities were able to inject arbitrary stuff, ie like this https://www.val.town/v/stevekrouse/ReloadScript

stevekrouse avatar

modifyFetchHandler should work on fetch handlers that don't return Promises as well

andreterron avatar

I don't want it removed on small screens always.

I'll add a style parameter, so that it can be customized any time it's used. I'll also see if a minWidth parameter could make sense as well.

This little GitHub icon is really elegant

That doesn't feel like it's generic enough to be achieved with an injector. For this and similar scenarios, we can provide separate vals that (a) infer the val URL and (b) returns the Val Town logo URL. Users can then build a more integrated component in their website.

Would be awesome if these "inject" utilities were able to inject arbitrary stuff

True! @andreterron/InjectHTMLElementStream can inject anything. We can also build generic injectors for strings, handlers, responses, etc.

modifyFetchHandler should work on fetch handlers that don't return Promises as well

Good catch!

andreterron avatar

Added the style parameter, and updated the modifyFetchHandler to support non-Promise returns!

stevekrouse avatar

Nice! Worked well - updated @stevekrouse/dateme

stevekrouse avatar

I don't know when or why, but now on @stevekrouse/dateme, the ribbon links to this page, not the dateme val. I will set it manually. I wonder why the rootVal inference broke

willthereader avatar

When I tried including it in my val https://www.val.town/v/willthereader/Jumpchain_Website, it takes me to this page.

stevekrouse avatar

Sent you a pr that fixes it by just bumping the version to the latest: https://www.val.town/pulls/56b82afc-4935-11ef-8dcf-de64eea55b61

I also sent a pr to this val to update the readme usage to also use v50: https://www.val.town/pulls/42c48072-4935-11ef-a7c9-de64eea55b61

willthereader avatar

Thank you @ stevekrouse for fixing my bug!

andreterron avatar
Updated: July 25, 2024