feat: Pass remote Markdown images through image service #13254

p0lyw0lf · 2025-02-15T01:42:59Z

Changes

Currently, in Markdown files, only local images get passed to the image service
- This was because the image service only supported local files when it was first released.
However, the image service now supports remote images
So, this PR adds support for passing remote images in Markdown files to the image service.

Testing

I tested this change by creating a small project with a single allowed remote domain, and rendering markdown files from:

a page
a content collection

Both approaches work. I can provide these test files if needed, though I'm not sure how we'll want to deal with the fact it'll require an internet connection.

Known Issues

If the remote image is styled in some way, the newly added width and height attributes could mess up that styling. Ideally, we'd like to be able to modify the properties after getImage runs somehow, but seeing as this is also the case for local images transformed using this method too, I think this is more a deficiency in getImage best left addressed by the responsive image experiment.

This is only an issue for remote images as configured under images.domains. Other images are untouched.

Docs

If this change goes through, we will need to update the images guide to reflect that remote images are now supported in markdown files. PR: withastro/docs#11021

When in regular .md files, the images show up as expected. However, in content md files, they still misbehave. Also, it seems the responsive attributes are only added by the <Image> component, not the image transformation that's done later, which I find a bit weird; there's other responsive stuff being done tho?? So maybe I need to fix that while I'm here too.

changeset-bot · 2025-02-15T01:43:04Z

🦋 Changeset detected

Latest commit: a21e0b5

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions

This PR is blocked because it contains a minor changeset. A reviewer will merge this at the next release if approved.

codspeed-hq · 2025-02-15T01:55:21Z

CodSpeed Performance Report

Merging #13254 will not alter performance

_{Comparing p0lyw0lf:markdown-collect-remote-image (a21e0b5) with main (2e1321e)}

Summary

✅ 6 untouched benchmarks

This time the fail was becase we were transforming too many remote images. We should inject allowedRemoteDomains into the remark plugin so we only collect the allowed remote images in the first place.

ematipico

Thank you @p0lyw0lf for your PR! I left some comments and questions around the new feature

packages/astro/src/content/runtime.ts

packages/markdown/remark/src/remark-collect-images.ts

packages/markdown/remark/src/rehype-images.ts

packages/integrations/mdx/src/rehype-images-to-component.ts

This commit moves remote pattern checking functionality into @astrojs/markdown-remark, out of the main astro package, so it can be used by remark-collect-images. We do this instead of moving it into a shared @astrojs/internal-helpers because part of that package uses node APIs, and remark-collect-images needs to work in a browser.

p0lyw0lf · 2025-02-18T14:41:46Z

@ematipico I believe I've addressed your feedback. One of the bigger changes was moving the checks for https://docs.astro.build/en/guides/images/#authorizing-remote-images out of astro and into @astrojs/markdown-remark, so as to not duplicate them.

This time, the problem is certain parts of `astro` don't like depending on `@astrojs/markdown-remark`, because it brings in `node:fs` somehow. This on its own is probably a problem, but I think I'll work around it by moving the relevant shared code into `@astrojs/internal-helpers/remote` so that we can stay node-free.

p0lyw0lf · 2025-02-19T02:41:54Z

The fixes I pushed this morning were not enough; there was a error where moving isRemoteAllowed into @astrojs/markdown-remark and including in astro caused node:fs to show up in the module path somehow. I fixed this by moving that code into @astrojs/internal-helpers instead. There was also a small error with that move in the first place, which I have also fixed. Tests pass locally now, hoping they pass here too.

ematipico · 2025-02-19T07:23:23Z

Since you added code to another package, that package must have a changeset. Without changeset it won't have its version bumped and it will break in production.

It should be a new changeset, not the one you currently have

p0lyw0lf · 2025-02-19T13:22:49Z

@ematipico I've updated the changeset

ematipico · 2025-02-21T14:58:32Z

@p0lyw0lf Thank you for you PR. Coding-wise, it looks good to me. Would you be able to send a PR to docs? If not, that's fine, we can do that. Just let us know. We aim to release the new feature next Thursday.

packages/astro/src/vite-plugin-markdown/images.ts

p0lyw0lf · 2025-02-22T02:44:19Z

@ematipico I opened a docs PR: withastro/docs#11021

Also, any notes on #13256 by any chance?

sarah11918

Exciting feature! 🚀

I left my thought on the changeset for docs, and Ema can guide you on creating individual ones that describe what's new / changes about the other packages.

I've also reviewed the docs PR which won't take much to polish it up! 🙌

(Also noting, I didn't notice any new error messages associated with this feature.)

.changeset/shy-bats-exist.md

Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>

p0lyw0lf · 2025-02-25T02:11:44Z

@sarah11918 @ematipico I've split the changeset into multiple, adding specifics on what's changed for each package. Thanks again for reviewing this!!

.changeset/tiny-cows-march.md

.changeset/warm-planes-swim.md

.changeset/quiet-birds-joke.md

Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>

sarah11918

Looks good to me! Approving for docs! 🥳

(And noting that I dont see any new error messages introduced with this feature)

Merge day

aholbreich · 2025-02-28T09:24:24Z

Has anything changed on the usage side?

having

---
cover: https://remote-cdn.io/cool.jpeg
---

would still work?
Btw. I remember to see some warnings about width in those cases..

p0lyw0lf added 2 commits February 14, 2025 18:17

works i think!!

c3feda4

github-actions bot added feat: markdown Related to Markdown (scope) pkg: integration Related to any renderer integration (scope) pkg: astro Related to the core `astro` package (scope) labels Feb 15, 2025

changeset

63b98d7

github-actions bot added the semver: minor Change triggers a `minor` release label Feb 15, 2025

github-actions bot previously requested changes Feb 15, 2025

View reviewed changes

fix failing test

3b10d82

p0lyw0lf mentioned this pull request Feb 15, 2025

feat: Add CSS variables in getImage for experimental.responsiveImages #13256

Merged

fix failing test 2

400a14f

This time the fail was becase we were transforming too many remote images. We should inject allowedRemoteDomains into the remark plugin so we only collect the allowed remote images in the first place.

ematipico reviewed Feb 18, 2025

View reviewed changes

p0lyw0lf added 2 commits February 18, 2025 09:27

rehype feedback

a93ec1b

github-actions bot added the docs pr label Feb 18, 2025

p0lyw0lf requested a review from ematipico February 18, 2025 14:42

p0lyw0lf added 3 commits February 18, 2025 09:46

fix test

65a9cc5

better rehype-images typechecking

9a4ab79

update changeset

deb478a

ematipico added this to the 5.4.0 milestone Feb 21, 2025

ematipico approved these changes Feb 21, 2025

View reviewed changes

packages/astro/src/vite-plugin-markdown/images.ts Show resolved Hide resolved

p0lyw0lf mentioned this pull request Feb 22, 2025

5.4.0: Markdown Remote Images withastro/docs#11021

Merged

sarah11918 reviewed Feb 23, 2025

View reviewed changes

.changeset/shy-bats-exist.md Outdated Show resolved Hide resolved

ascorbic approved these changes Feb 24, 2025

View reviewed changes

p0lyw0lf and others added 2 commits February 24, 2025 20:57

Update .changeset/shy-bats-exist.md

2f4e959

Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>

separate changesets

63dab18

sarah11918 reviewed Feb 25, 2025

View reviewed changes

.changeset/tiny-cows-march.md Outdated Show resolved Hide resolved

sarah11918 reviewed Feb 25, 2025

View reviewed changes

.changeset/warm-planes-swim.md Outdated Show resolved Hide resolved

sarah11918 reviewed Feb 25, 2025

View reviewed changes

.changeset/quiet-birds-joke.md Outdated Show resolved Hide resolved

p0lyw0lf and others added 4 commits February 25, 2025 11:49

JSX tag

2419bfb

Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>

Update quiet-birds-joke.md

acb9076

Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>

Update warm-planes-swim.md

926ac77

Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>

Update warm-planes-swim.md

a21e0b5

sarah11918 approved these changes Feb 25, 2025

View reviewed changes

ematipico merged commit 1e11f5e into withastro:main Feb 26, 2025
17 checks passed

astrobot-houston mentioned this pull request Feb 26, 2025

[ci] release #13318

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Pass remote Markdown images through image service #13254

feat: Pass remote Markdown images through image service #13254

p0lyw0lf commented Feb 15, 2025 •

edited

Loading

changeset-bot bot commented Feb 15, 2025 •

edited

Loading

github-actions bot left a comment

codspeed-hq bot commented Feb 15, 2025 •

edited

Loading

ematipico left a comment

p0lyw0lf commented Feb 18, 2025

p0lyw0lf commented Feb 19, 2025

ematipico commented Feb 19, 2025

p0lyw0lf commented Feb 19, 2025

ematipico commented Feb 21, 2025

p0lyw0lf commented Feb 22, 2025 •

edited

Loading

sarah11918 left a comment •

edited

Loading

p0lyw0lf commented Feb 25, 2025

sarah11918 left a comment

aholbreich commented Feb 28, 2025 •

edited

Loading

feat: Pass remote Markdown images through image service #13254

feat: Pass remote Markdown images through image service #13254

Conversation

p0lyw0lf commented Feb 15, 2025 • edited Loading

Changes

Testing

Known Issues

Docs

changeset-bot bot commented Feb 15, 2025 • edited Loading

🦋 Changeset detected

github-actions bot left a comment

Choose a reason for hiding this comment

codspeed-hq bot commented Feb 15, 2025 • edited Loading

CodSpeed Performance Report

Merging #13254 will not alter performance

Summary

ematipico left a comment

Choose a reason for hiding this comment

p0lyw0lf commented Feb 18, 2025

p0lyw0lf commented Feb 19, 2025

ematipico commented Feb 19, 2025

p0lyw0lf commented Feb 19, 2025

ematipico commented Feb 21, 2025

p0lyw0lf commented Feb 22, 2025 • edited Loading

sarah11918 left a comment • edited Loading

Choose a reason for hiding this comment

p0lyw0lf commented Feb 25, 2025

sarah11918 left a comment

Choose a reason for hiding this comment

aholbreich commented Feb 28, 2025 • edited Loading

p0lyw0lf commented Feb 15, 2025 •

edited

Loading

changeset-bot bot commented Feb 15, 2025 •

edited

Loading

codspeed-hq bot commented Feb 15, 2025 •

edited

Loading

p0lyw0lf commented Feb 22, 2025 •

edited

Loading

sarah11918 left a comment •

edited

Loading

aholbreich commented Feb 28, 2025 •

edited

Loading