feat(markdown): Add support for imageReference paths when collectin…

…g images (#8475)

.changeset/grumpy-seas-learn.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/markdown-remark': minor
+---
+
+feat(markdown): Add support for `imageReference` paths when collecting images

packages/markdown/remark/package.json

@@ -34,6 +34,7 @@
     "@astrojs/prism": "^3.0.0",
     "github-slugger": "^2.0.0",
     "import-meta-resolve": "^3.0.0",
+    "mdast-util-definitions": "^6.0.0",
     "rehype-raw": "^6.1.1",
     "rehype-stringify": "^9.0.4",
     "remark-gfm": "^3.0.1",

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

@@ -1,14 +1,24 @@
-import type { Image } from 'mdast';
+import type { Image, ImageReference } from 'mdast';
+import { definitions } from 'mdast-util-definitions';
 import { visit } from 'unist-util-visit';
 import type { MarkdownVFile } from './types.js';
 
 export function remarkCollectImages() {
 	return function (tree: any, vfile: MarkdownVFile) {
 		if (typeof vfile?.path !== 'string') return;
 
+		const definition = definitions(tree);
 		const imagePaths = new Set<string>();
-		visit(tree, 'image', (node: Image) => {
-			if (shouldOptimizeImage(node.url)) imagePaths.add(node.url);
+		visit(tree, ['image', 'imageReference'], (node: Image | ImageReference) => {
+			if (node.type === 'image') {
+				if (shouldOptimizeImage(node.url)) imagePaths.add(node.url);
+			}
+			if (node.type === 'imageReference') {
+				const imageDefinition = definition(node.identifier);
+				if (imageDefinition) {
+					if (shouldOptimizeImage(imageDefinition.url)) imagePaths.add(imageDefinition.url);
+				}
+			}
 		});
 
 		vfile.data.imagePaths = imagePaths;

packages/markdown/remark/test/remark-collect-images.test.js

@@ -0,0 +1,28 @@
+import { renderMarkdown } from '../dist/index.js';
+import { mockRenderMarkdownParams } from './test-utils.js';
+import chai from 'chai';
+
+describe('collect images', () => {
+	it('should collect inline image paths', async () => {
+		const { code, vfile } = await renderMarkdown(
+			`Hello ![inline image url](./img.png)`,
+			mockRenderMarkdownParams
+		);
+
+		chai
+			.expect(code)
+			.to.equal('<p>Hello <img alt="inline image url" __ASTRO_IMAGE_="./img.png"></p>');
+
+		chai.expect(Array.from(vfile.data.imagePaths)).to.deep.equal(['./img.png']);
+	});
+
+	it('should add image paths from definition', async () => {
+		const { code, vfile } = await renderMarkdown(
+			`Hello ![image ref][img-ref]\n\n[img-ref]: ./img.webp`,
+			mockRenderMarkdownParams
+		);
+
+		chai.expect(code).to.equal('<p>Hello <img alt="image ref" __ASTRO_IMAGE_="./img.webp"></p>');
+		chai.expect(Array.from(vfile.data.imagePaths)).to.deep.equal(['./img.webp']);
+	});
+});

packages/markdown/remark/test/test-utils.js

@@ -1,3 +1,4 @@
 export const mockRenderMarkdownParams = {
+	fileURL: 'file.md',
 	contentDir: new URL('file:///src/content/'),
 };