getMarkdownCodeForImages() — astro Function Reference

Architecture documentation for the getMarkdownCodeForImages() function in images.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine

Entity Profile

CoreAstro→ RenderingEngine→ getMarkdownCodeForImages() — astro Function Reference

Dependency Diagram

graph TD
  739c4682_c75a_cce7_59a5_a5432ccaa01d["getMarkdownCodeForImages()"]
  b3456883_2af3_3f4e_f2c8_52ffbabf214a["images.ts"]
  739c4682_c75a_cce7_59a5_a5432ccaa01d -->|defined in| b3456883_2af3_3f4e_f2c8_52ffbabf214a
  style 739c4682_c75a_cce7_59a5_a5432ccaa01d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/vite-plugin-markdown/images.ts lines 3–82

export function getMarkdownCodeForImages(
	localImagePaths: MarkdownImagePath[],
	remoteImagePaths: string[],
	html: string,
) {
	return `
			import { getImage } from "astro:assets";
			${localImagePaths
				.map((entry) => `import Astro__${entry.safeName} from ${JSON.stringify(entry.raw)};`)
				.join('\n')}

			const images = async function(html) {
					const imageSources = {};
					${localImagePaths
						.map((entry) => {
							const rawUrl = JSON.stringify(entry.raw).replace(/'/g, '&#x27;');
							return `{
											const regex = new RegExp('__ASTRO_IMAGE_="([^"]*' + ${rawUrl.replace(
												/[.*+?^${}()|[\]\\]/g,
												'\\\\$&',
											)} + '[^"]*)"', 'g');
											let match;
											let occurrenceCounter = 0;
											while ((match = regex.exec(html)) !== null) {
													const matchKey = ${rawUrl} + '_' + occurrenceCounter;
													const imageProps = JSON.parse(match[1].replace(/&#x22;/g, '"').replace(/&#x27;/g, "'"));
													const { src, ...props } = imageProps;
													imageSources[matchKey] = await getImage({src: Astro__${entry.safeName}, ...props});
													occurrenceCounter++;
											}
									}`;
						})
						.join('\n')}
					${remoteImagePaths
						.map((raw) => {
							const rawUrl = JSON.stringify(raw).replace(/'/g, '&#x27;');
							return `{
											const regex = new RegExp('__ASTRO_IMAGE_="([^"]*' + ${rawUrl.replace(
												/[.*+?^${}()|[\]\\]/g,
												'\\\\$&',
											)} + '[^"]*)"', 'g');
											let match;
											let occurrenceCounter = 0;
											while ((match = regex.exec(html)) !== null) {
													const matchKey = ${rawUrl} + '_' + occurrenceCounter;
													const props = JSON.parse(match[1].replace(/&#x22;/g, '"').replace(/&#x27;/g, "'"));
													imageSources[matchKey] = await getImage(props);
													occurrenceCounter++;
											}
									}`;
						})
						.join('\n')}
					return imageSources;
			};

		async function updateImageReferences(html) {
			const imageSources = await images(html);

			return html.replaceAll(/__ASTRO_IMAGE_="([^"]+)"/gm, (full, imagePath) => {
				const decodedImagePath = JSON.parse(imagePath.replace(/&#x22;/g, '"'));

				// Use the 'index' property for each image occurrence
				const srcKey = decodedImagePath.src + '_' + decodedImagePath.index;

				if (imageSources[srcKey].srcSet && imageSources[srcKey].srcSet.values.length > 0) {
					imageSources[srcKey].attributes.srcset = imageSources[srcKey].srcSet.attribute;
				}

				const { index, ...attributesWithoutIndex } = imageSources[srcKey].attributes;

				return spreadAttributes({
					src: imageSources[srcKey].src,
					...attributesWithoutIndex,
				});
			});
		}

		const html = async () => await updateImageReferences(${JSON.stringify(html)});
	`;
}