Allow remark plugins to affect getImage call for .md files

[OliverSpeir]

Changes

• adds hProperties into getImage call for images that should be optimized in .md files
• current pipeline is
  • @markdown/remark/remark-collect-images --> @markdown/remark/rehype-images --> @astro/src/vite-plugin-markdown/images.ts
• this pr adds any hProperties a user's remark plugin might have added into the __ASTRO_IMAGE__ property in rehype-images then extracts those and passes them to the getImage call in images.ts

Testing

• Tested manually by adding an optimized img and a remark plugin to the @examples/blog, looked into adding a test in core-images.test.js but because it gets the html I didn't see a simple way to run a remark plugin.

Docs

• This shouldn't need documenting, but if accepted a guide or tutorial about creating a remark plugin to make images eager loaded or change their width could be made later.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1b35d03

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

[OliverSpeir]

@Princesseuh think this should add srcset if widths or densities is passed?

[Princesseuh]

@Princesseuh think this should add srcset if widths or densities is passed?

Sorry, I had actually started a review, but then I had a meeting and a network outage and completely forgot to continue 🤦‍♀️

I think that would be great, yes! I don't think it's super hard, should just be a check like the one done here:

astro/packages/astro/components/Image.astro

Lines 29 to 31 in bd3f36e

	if (image.srcSet.values.length > 0) {
	additionalAttributes.srcset = image.srcSet.attribute;
	}

, this can be even shorter in here because spreadAttributes should normally already handle undefined arguments.

[OliverSpeir]

Alright yeah you're right, I'll add it looking back not sure why I didn't do it initially

[OliverSpeir]

If this gets accepted this plugin will make it easy to add these attributes https://www.npmjs.com/package/remark-imgattr

[sarah11918]

No accompanying docs necessary here (though, we wouldn't turn down an interesting recipe that makes use of this new functionality!)

Would ask that the changeset present a user benefit, or what will be seen/experienced though!

[sarah11918]

Docs is happy with the changeset!

[Princesseuh]

I would love to see a test in core for this, because I feel like this can quickly become a source of problem.

Here's how I would do it:

• Add a fixture in packages/astro/test/fixtures with a remark plugin adding attributes
• Add a test either in core-image.test.js or in a new file (core-image.test.js is getting a bit big) in package/astro/test
• Confirm the attributes result in different images, you can test this in dev by making sure the _image URLs have the proper params.

[ematipico]

Hi @OliverSpeir, do you think you'll have some to address the comments?

[OliverSpeir]

• Add a fixture in packages/astro/test/fixtures with a remark plugin adding attributes

I agree, I didn't realize this was possible will do

[Princesseuh]

Awesome, thank you!