Broken image bug

[simonw]

On https://til.simonwillison.net/cocktails/pisco-sour

That should be this image: https://github.com/simonw/til/blob/05d1d8a6eb311ca7cace0c306f28f989e259edc0/cocktails/pisco-sour.md?plain=1#L5

https://static.simonwillison.net/static/2022/pisco-sour.jpg

In the HTML the broken image is this: <p><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/6ac29b2022a4cd0d49a12a97177f2eed894b9b2c1facf0ed7e7e18d2f638201f/68747470733a2f2f7374617469632e73696d6f6e77696c6c69736f6e2e6e65742f7374617469632f323032322f706973636f2d736f75722e6a7067"><img src="https://camo.githubusercontent.com/6ac29b2022a4cd0d49a12a97177f2eed894b9b2c1facf0ed7e7e18d2f638201f/68747470733a2f2f7374617469632e73696d6f6e77696c6c69736f6e2e6e65742f7374617469632f323032322f706973636f2d736f75722e6a7067" alt="A pisco sour in a fancy crystal glass, with a thin layer of white foam on top" data-canonical-src="https://static.simonwillison.net/static/2022/pisco-sour.jpg" style="max-width: 100%;"></a></p>

https://camo.githubusercontent.com/6ac29b2022a4cd0d49a12a97177f2eed894b9b2c1facf0ed7e7e18d2f638201f/68747470733a2f2f7374617469632e73696d6f6e77696c6c69736f6e2e6e65742f7374617469632f323032322f706973636f2d736f75722e6a7067 returns Bad Signature.

[simonw]

The Markdown has been rendered via the GitHub API: https://github.com/simonw/til/blob/05d1d8a6eb311ca7cace0c306f28f989e259edc0/build_database.py#L81-L89

[simonw]

API documentation: https://docs.github.com/en/rest/markdown/markdown?apiVersion=2022-11-28#render-a-markdown-document

Nothing in there about images expiring.

[simonw]

I've seen this bug before:

• https://github.com/simonw/datasette.io/issues/156

[simonw]

Using the new GFM checkbox on https://til.simonwillison.net/tools/render-markdown I've confirmed that camo.githubusercontent.com is only included if you render with mode: gfm - using mode: markdown leaves the original image URL intact.

But that doesn't make sense, because I'm using that mode already!

I'm going to try pushing a rebuild of that TIL.

[simonw]

Ah no, I was wrong! The thing that removes the camo.githubusercontent.com links is selecting the "Strip hidden and cleanup HTML" option - gfm v.s. markdown makes no difference.

Here's what that code does (all implemented in client-side JavaScript against the DOM): https://github.com/simonw/til/blob/a16a30779f541e3187d37d8643e8c0a88ee141f3/templates/pages/tools/render-markdown.html#L184-L200

[simonw]

Idea: catch the image loading error and swap out the data-canonical-src. Code prototyped here: https://chat.openai.com/share/5f911249-93b0-4e24-aff8-3e7967fe4f4a

[simonw]

That will do. Works on https://til.simonwillison.net/imagemagick/set-a-gif-to-loop

Ideally I'd fix this on the backend, but I don't want to spend the time on that right now.