Append `?raw=true` to image URLs within Readmes

[confused-Techie]

Thanks in advance for your bug report!

• [X] Have you reproduced this issue in incognito/private browsing?
• [X] Have you made sure you issue doesn't already exist?

Where is the URL that this occurs?

https://web.pulsar-edit.dev/packages/pulsar-column-select-mode

What's your issue?

Seems for some reason images may sometimes not be properly loaded when given a path within the repo, rather than say githubusercontent.

I'm not totally sure of the cause, but at the very least a simple resolution here would be adding ?raw=true to the end of the content to ensure we get an image back rather than HTML.

Which OS/Browser/Version does this happen on?

N/A

Steps to Reproduce/Additional Details:

No response

[Daeraxa]

That's really weird, never noticed that before with GitHub. It seems that in this case the .git refers to the file ending within the GH source tree and not the actual file itself as the browser wants to see it. If you click the below you can see it takes you to an entire github page and not a link. (Not teaching you to suck eggs @confused-Techie, more for if other people see this).

https://github.com/tom-power/pulsar-column-select-mode/blob/main/assets/demo.gif

Honestly I don't see a better solution than what you propose unless we substitute the url to githubusercontent.

i.e.

https://github.com/tom-power/pulsar-column-select-mode/blob/main/assets/demo.gif to https://raw.githubusercontent.com/tom-power/pulsar-column-select-mode/main/assets/demo.gif

Either directly or is there a library or GH API that can "unwrap" the URL into the usercontent one?

[confused-Techie]

@Daeraxa yeah converting this links would be really cool, but since I wouldn't want to accidentally break any links (Since presumably we can append the raw value from above to nearly any link without repercussions) I'd want to make sure we get it totally right.

As I'm not currently aware of any module that's able to interact with GitHub links like this, but if we can find a spec on how they are created we more than likely could implement one ourselves.

[Daeraxa]

I can't seem to find anything official in their docs unfortunately but the approach I mentioned seems to be pretty stable and well known.

For example https://github.com/orgs/community/discussions/22537 and an npm package https://www.npmjs.com/package/rawbot.

Not fussed what approach we take, just offering an alternative.

[confused-Techie]

I do like the approach taken by the package you've linked. It's super simple, but seems to be rather effective, testing it on the problem link above worked without issue.

So might be a totally valid way forward.

[asiloisad]

i'm always using https://github.com/tom-power/pulsar-column-select-mode/raw/main/assets/demo.gif instead https://github.com/tom-power/pulsar-column-select-mode/blob/main/assets/demo.gif and working as desired. blob -> raw