feat(markdown): Add support for imageReference paths when collecting 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,4 +1,5 @@
-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';
 
@@ -6,9 +7,18 @@ 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/'),
 };

pnpm-lock.yaml

@@ -4918,6 +4918,9 @@ importers:
       import-meta-resolve:
         specifier: ^3.0.0
         version: 3.0.0
+      mdast-util-definitions:
+        specifier: ^6.0.0
+        version: 6.0.0
       rehype-raw:
         specifier: ^6.1.1
         version: 6.1.1
@@ -13425,6 +13428,14 @@ packages:
       '@types/unist': 2.0.7
       unist-util-visit: 4.1.2
 
+  /mdast-util-definitions@6.0.0:
+    resolution: {integrity: sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==}
+    dependencies:
+      '@types/mdast': 4.0.0
+      '@types/unist': 3.0.0
+      unist-util-visit: 5.0.0
+    dev: false
+
   /mdast-util-find-and-replace@2.2.2:
     resolution: {integrity: sha512-MTtdFRz/eMDHXzeK6W3dO7mXUlF82Gom4y0oOgvHhh/HXZAGvIQDUvQ0SuUx+j2tv44b8xTHOm8K/9OoRFnXKw==}
     dependencies: