feat(image): Support for relative images in Markdown (WIP)

withastro · Princesseuh · Mar 7, 2023 · Jan 31, 2023 · Feb 3, 2023 · Feb 3, 2023
commit 3b0d49c04c980302e76d7a4ab3340b1d8e64efcc
diff --git a/examples/images/src/content/blog/_elsa-and-anna.jpg b/examples/images/src/content/blog/_elsa-and-anna.jpg
diff --git a/examples/images/src/content/blog/hello.md b/examples/images/src/content/blog/hello.md
@@ -0,0 +1,5 @@
+# Hello
+
+This is my website! This is a Markdown page with a relative image!
+
+![Elsa and Anna from Frozen](./_elsa-and-anna.jpg)
diff --git a/examples/images/src/env.d.ts b/examples/images/src/env.d.ts
@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client-image" />
diff --git a/examples/images/src/pages/hello.astro b/examples/images/src/pages/hello.astro
@@ -0,0 +1,18 @@
+---
+import { getEntryBySlug } from 'astro:content';
+
+const entry = await getEntryBySlug('blog', 'hello');
+const { Content, headings } = await entry.render();
+---
+
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Document</title>
+	</head>
+	<body>
+		<Content />
+	</body>
+</html>
diff --git a/packages/astro/src/image/internal.ts b/packages/astro/src/image/internal.ts
@@ -10,7 +10,7 @@ export function isESMImportedImage(src: ImageMetadata | string): src is ImageMet
 	return typeof src === 'object';
 }
 
-async function getConfiguredService(): Promise<ImageService> {
+export async function getConfiguredService(): Promise<ImageService> {
 	if (!globalThis.astroImageService) {
 		const { default: service }: { default: ImageService } = await import(
 			// @ts-ignore

diff --git a/packages/astro/src/vite-plugin-markdown/index.ts b/packages/astro/src/vite-plugin-markdown/index.ts
@@ -1,7 +1,7 @@
 import { renderMarkdown } from '@astrojs/markdown-remark';
 import {
 	InvalidAstroDataError,
-	safelyGetAstroData,
+	safelyGetAstroData
 } from '@astrojs/markdown-remark/dist/internal.js';
 import fs from 'fs';
 import matter from 'gray-matter';
@@ -14,6 +14,7 @@ import { AstroError, AstroErrorData, MarkdownError } from '../core/errors/index.
 import type { LogOptions } from '../core/logger/core.js';
 import { warn } from '../core/logger/core.js';
 import { isMarkdownFile } from '../core/util.js';
+import { getConfiguredService as getConfiguredImageService } from '../image/internal.js';
 import type { PluginMetadata } from '../vite-plugin-astro/types.js';
 import { escapeViteEnvReferences, getFileInfo } from '../vite-plugin-utils/index.js';
 
@@ -68,15 +69,19 @@ export default function markdown({ settings, logging }: AstroPluginOptions): Plu
 				const { fileId, fileUrl } = getFileInfo(id, settings.config);
 				const rawFile = await fs.promises.readFile(fileId, 'utf-8');
 				const raw = safeMatter(rawFile, id);
+
+				const imageService = getConfiguredImageService();
 				const renderResult = await renderMarkdown(raw.content, {
 					...settings.config.markdown,
 					fileURL: new URL(`file://${fileId}`),
 					contentDir: getContentPaths(settings.config).contentDir,
 					frontmatter: raw.data,
+					imageService,
 				});
 
-				const html = renderResult.code;
+				let html = renderResult.code;
 				const { headings } = renderResult.metadata;
+				const { relImagePaths } = renderResult.vfile.data as { relImagePaths: string[] };
 				const astroData = safelyGetAstroData(renderResult.vfile.data);
 				if (astroData instanceof InvalidAstroDataError) {
 					throw new AstroError(AstroErrorData.InvalidFrontmatterInjectionError);
@@ -96,8 +101,23 @@ export default function markdown({ settings, logging }: AstroPluginOptions): Plu
 				const code = escapeViteEnvReferences(`
 				import { Fragment, jsx as h } from ${JSON.stringify(astroJsxRuntimeModulePath)};
 				${layout ? `import Layout from ${JSON.stringify(layout)};` : ''}
+				import { getImage } from "astro:assets";
+
+				const images = {
+					${relImagePaths.map(
+						(entry) =>
+							`'${entry}': await getImage({ src: await (await import('${entry}')).default, alt: ''})`
+					)}
+				}
+
+				const html = () => {
+					const rawHTML = ${JSON.stringify(html)}
+				}
 
-				const html = ${JSON.stringify(html)};
+				${JSON.stringify(html).replaceAll(
+					/\$AstroImage\$(.*)\$AstroImage\$/gm,
+					'${images["$1"].src}'
+				)}\`;
 
 				export const frontmatter = ${JSON.stringify(frontmatter)};
 				export const file = ${JSON.stringify(fileId)};
@@ -106,7 +126,7 @@ export default function markdown({ settings, logging }: AstroPluginOptions): Plu
 					return ${JSON.stringify(raw.content)};
 				}
 				export function compiledContent() {
-					return html;
+					return html();
 				}
 				export function getHeadings() {
 					return ${JSON.stringify(headings)};

diff --git a/packages/integrations/mdx/src/plugins.ts b/packages/integrations/mdx/src/plugins.ts
@@ -148,7 +148,7 @@ export async function getRemarkPlugins(
 	}
 
 	// Apply last in case user plugins resolve relative image paths
-	remarkPlugins.push(toRemarkContentRelImageError(config));
+	// remarkPlugins.push(toRemarkContentRelImageError(config));
 
 	return remarkPlugins;
 }

diff --git a/packages/markdown/remark/src/index.ts b/packages/markdown/remark/src/index.ts
@@ -8,7 +8,7 @@ import type {
 import { toRemarkInitializeAstroData } from './frontmatter-injection.js';
 import { loadPlugins } from './load-plugins.js';
 import { rehypeHeadingIds } from './rehype-collect-headings.js';
-import toRemarkContentRelImageError from './remark-content-rel-image-error.js';
+import toRemarkCollectRelativeImages from './remark-collect-rel-images.js';
 import remarkPrism from './remark-prism.js';
 import scopedStyles from './remark-scoped-styles.js';
 import remarkShiki from './remark-shiki.js';
@@ -21,6 +21,7 @@ import markdownToHtml from 'remark-rehype';
 import remarkSmartypants from 'remark-smartypants';
 import { unified } from 'unified';
 import { VFile } from 'vfile';
+import { rehypeRelativeImages } from './rehype-rel-images.js';
 
 export { rehypeHeadingIds } from './rehype-collect-headings.js';
 export * from './types.js';
@@ -90,7 +91,7 @@ export async function renderMarkdown(
 	}
 
 	// Apply later in case user plugins resolve relative image paths
-	parser.use([toRemarkContentRelImageError({ contentDir })]);
+	parser.use([toRemarkCollectRelativeImages()]);
 
 	parser.use([
 		[
@@ -107,6 +108,7 @@ export async function renderMarkdown(
 		parser.use([[plugin, pluginOpts]]);
 	});
 
+	parser.use(rehypeRelativeImages(await opts.imageService));
 	parser.use([rehypeHeadingIds, rehypeRaw]).use(rehypeStringify, { allowDangerousHtml: true });
 
 	let vfile: MarkdownVFile;

diff --git a/packages/markdown/remark/src/rehype-rel-images.ts b/packages/markdown/remark/src/rehype-rel-images.ts
@@ -0,0 +1,43 @@
+import { visit } from 'unist-util-visit';
+import type { MarkdownVFile } from './types.js';
+
+export function rehypeRelativeImages(imageService: any) {
+	return () =>
+		function (tree: any, file: MarkdownVFile) {
+			visit(tree, (node) => {
+				if (node.type !== 'element') return;
+				if (node.tagName !== 'img') return;
+
+				if (node.properties?.src) {
+					if (isRelativePath(node.properties.src.toString())) {
+						node.properties.$injectURL = node.properties.src;
+
+						if (!node.properties.width) {
+							node.properties.$injectWidth = true;
+						}
+
+						if (!node.properties.height) {
+							node.properties.$injectHeight = true;
+						}
+					}
+				}
+			});
+		};
+}
+
+function isRelativePath(path: string) {
+	return startsWithDotDotSlash(path) || startsWithDotSlash(path);
+}
+
+function startsWithDotDotSlash(path: string) {
+	const c1 = path[0];
+	const c2 = path[1];
+	const c3 = path[2];
+	return c1 === '.' && c2 === '.' && c3 === '/';
+}
+
+function startsWithDotSlash(path: string) {
+	const c1 = path[0];
+	const c2 = path[1];
+	return c1 === '.' && c2 === '/';
+}
diff --git a/...ark/src/remark-content-rel-image-error.ts → ...n/remark/src/remark-collect-rel-images.ts b/...ark/src/remark-content-rel-image-error.ts → ...n/remark/src/remark-collect-rel-images.ts
@@ -3,11 +3,28 @@ import { visit } from 'unist-util-visit';
 import { pathToFileURL } from 'url';
 import type { VFile } from 'vfile';
 
+export default function toRemarkCollectRelativeimages() {
+	return () =>
+		function (tree: any, vfile: VFile) {
+			if (typeof vfile?.path !== 'string') return;
+
+			const relImagePaths = new Set<string>();
+			visit(tree, 'image', function raiseError(node: Image) {
+				if (isRelativePath(node.url)) {
+					relImagePaths.add(node.url);
+				}
+			});
+			if (relImagePaths.size === 0) return;
+
+			vfile.data.relImagePaths = Array.from(relImagePaths);
+		};
+}
+
 /**
  * `src/content/` does not support relative image paths.
  * This plugin throws an error if any are found
  */
-export default function toRemarkContentRelImageError({ contentDir }: { contentDir: URL }) {
+export function toRemarkContentRelImageError({ contentDir }: { contentDir: URL }) {
 	return function remarkContentRelImageError() {
 		return (tree: any, vfile: VFile) => {
 			if (typeof vfile?.path !== 'string') return;

diff --git a/packages/markdown/remark/src/types.ts b/packages/markdown/remark/src/types.ts
@@ -62,6 +62,7 @@ export interface MarkdownRenderingOptions extends AstroMarkdownOptions {
 	contentDir: URL;
 	/** Used for frontmatter injection plugins */
 	frontmatter?: Record<string, any>;
+	imageService?: any;
 }
 
 export interface MarkdownHeading {
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		/// <reference path="../.astro/types.d.ts" />
		/// <reference types="astro/client-image" />