@astrojs/markdoc 0.0.4 → 0.1.0

package/dist/index.js

@@ -1,13 +1,27 @@
 import Markdoc from "@markdoc/markdoc";
 import fs from "node:fs";
 import { fileURLToPath } from "node:url";
-import { getAstroConfigPath, MarkdocError, parseFrontmatter } from "./utils.js";
-function markdoc(markdocConfig = {}) {
+import { isValidUrl, MarkdocError, parseFrontmatter, prependForwardSlash } from "./utils.js";
+import { emitESMImage } from "astro/assets";
+import { bold, red } from "kleur/colors";
+import { applyDefaultConfig } from "./default-config.js";
+import { loadMarkdocConfig } from "./load-config.js";
+function markdocIntegration(legacyConfig) {
+  if (legacyConfig) {
+    console.log(
+      `${red(
+        bold("[Markdoc]")
+      )} Passing Markdoc config from your \`astro.config\` is no longer supported. Configuration should be exported from a \`markdoc.config.mjs\` file. See the configuration docs for more: https://docs.astro.build/en/guides/integrations-guide/markdoc/#configuration`
+    );
+    process.exit(0);
+  }
   return {
     name: "@astrojs/markdoc",
     hooks: {
       "astro:config:setup": async (params) => {
-        const { updateConfig, config, addContentEntryType } = params;
+        const { config: astroConfig, addContentEntryType } = params;
+        const configLoadResult = await loadMarkdocConfig(astroConfig);
+        const userMarkdocConfig = (configLoadResult == null ? void 0 : configLoadResult.config) ?? {};
         function getEntryInfo({ fileUrl, contents }) {
           const parsed = parseFrontmatter(contents, fileURLToPath(fileUrl));
           return {
@@ -20,25 +34,45 @@ function markdoc(markdocConfig = {}) {
         addContentEntryType({
           extensions: [".mdoc"],
           getEntryInfo,
-          getRenderModule({ entry }) {
-            validateRenderProperties(markdocConfig, config);
+          async getRenderModule({ entry, viteId }) {
             const ast = Markdoc.parse(entry.body);
-            const content = Markdoc.transform(ast, {
-              ...markdocConfig,
-              variables: {
-                ...markdocConfig.variables,
-                entry
-              }
+            const pluginContext = this;
+            const markdocConfig = applyDefaultConfig(userMarkdocConfig, { entry });
+            const validationErrors = Markdoc.validate(ast, markdocConfig).filter((e) => {
+              return e.error.id !== "variable-undefined";
             });
-            return {
+            if (validationErrors.length) {
+              throw new MarkdocError({
+                message: [
+                  `**${String(entry.collection)} \u2192 ${String(entry.id)}** failed to validate:`,
+                  ...validationErrors.map((e) => e.error.id)
+                ].join("\n")
+              });
+            }
+            if (astroConfig.experimental.assets) {
+              await emitOptimizedImages(ast.children, {
+                astroConfig,
+                pluginContext,
+                filePath: entry._internal.filePath
+              });
+            }
+            const code = {
               code: `import { jsx as h } from 'astro/jsx-runtime';
+import { applyDefaultConfig } from '@astrojs/markdoc/default-config';
 import { Renderer } from '@astrojs/markdoc/components';
-const transformedContent = ${JSON.stringify(
-                content
+import * as entry from ${JSON.stringify(viteId + "?astroContent")};${configLoadResult ? `
+import userConfig from ${JSON.stringify(configLoadResult.fileUrl.pathname)};` : ""}${astroConfig.experimental.assets ? `
+import { experimentalAssetsConfig } from '@astrojs/markdoc/experimental-assets-config';` : ""}
+const stringifiedAst = ${JSON.stringify(
+                /* Double stringify to encode *as* stringified JSON */
+                JSON.stringify(ast)
               )};
-export async function Content ({ components }) { return h(Renderer, { content: transformedContent, components }); }
-Content[Symbol.for('astro.needsHeadRendering')] = true;`
+export async function Content (props) {
+	const config = applyDefaultConfig(${configLoadResult ? "{ ...userConfig, variables: { ...userConfig.variables, ...props } }" : "{ variables: props }"}, { entry });${astroConfig.experimental.assets ? `
+config.nodes = { ...experimentalAssetsConfig.nodes, ...config.nodes };` : ""}
+	return h(Renderer, { stringifiedAst, config }); };`
             };
+            return code;
           },
           contentModuleTypes: await fs.promises.readFile(
             new URL("../template/content-module-types.d.ts", import.meta.url),
@@ -49,45 +83,32 @@ Content[Symbol.for('astro.needsHeadRendering')] = true;`
     }
   };
 }
-function validateRenderProperties(markdocConfig, astroConfig) {
-  const tags = markdocConfig.tags ?? {};
-  const nodes = markdocConfig.nodes ?? {};
-  for (const [name, config] of Object.entries(tags)) {
-    validateRenderProperty({ type: "tag", name, config, astroConfig });
-  }
-  for (const [name, config] of Object.entries(nodes)) {
-    validateRenderProperty({ type: "node", name, config, astroConfig });
-  }
-}
-function validateRenderProperty({
-  name,
-  config,
-  type,
-  astroConfig
-}) {
-  if (typeof config.render === "string" && config.render.length === 0) {
-    throw new Error(
-      `Invalid ${type} configuration: ${JSON.stringify(
-        name
-      )}. The "render" property cannot be an empty string.`
-    );
-  }
-  if (typeof config.render === "string" && !isCapitalized(config.render)) {
-    const astroConfigPath = getAstroConfigPath(fs, fileURLToPath(astroConfig.root));
-    throw new MarkdocError({
-      message: `Invalid ${type} configuration: ${JSON.stringify(
-        name
-      )}. The "render" property must reference a capitalized component name.`,
-      hint: "If you want to render to an HTML element, see our docs on rendering Markdoc manually: https://docs.astro.build/en/guides/integrations-guide/markdoc/#render-markdoc-nodes--html-elements-as-astro-components",
-      location: astroConfigPath ? {
-        file: astroConfigPath
-      } : void 0
-    });
+async function emitOptimizedImages(nodeChildren, ctx) {
+  for (const node of nodeChildren) {
+    if (node.type === "image" && typeof node.attributes.src === "string" && shouldOptimizeImage(node.attributes.src)) {
+      const resolved = await ctx.pluginContext.resolve(node.attributes.src, ctx.filePath);
+      if ((resolved == null ? void 0 : resolved.id) && fs.existsSync(new URL(prependForwardSlash(resolved.id), "file://"))) {
+        const src = await emitESMImage(
+          resolved.id,
+          ctx.pluginContext.meta.watchMode,
+          ctx.pluginContext.emitFile,
+          { config: ctx.astroConfig }
+        );
+        node.attributes.__optimizedSrc = src;
+      } else {
+        throw new MarkdocError({
+          message: `Could not resolve image ${JSON.stringify(
+            node.attributes.src
+          )} from ${JSON.stringify(ctx.filePath)}. Does the file exist?`
+        });
+      }
+    }
+    await emitOptimizedImages(node.children, ctx);
   }
 }
-function isCapitalized(str) {
-  return str.length > 0 && str[0] === str[0].toUpperCase();
+function shouldOptimizeImage(src) {
+  return !isValidUrl(src) && !src.startsWith("/");
 }
 export {
-  markdoc as default
+  markdocIntegration as default
 };

package/dist/load-config.d.ts

@@ -0,0 +1,14 @@
+import type { AstroConfig } from 'astro';
+export declare function loadMarkdocConfig(astroConfig: Pick<AstroConfig, 'root'>): Promise<{
+    config: Readonly<Partial<{
+        nodes: Partial<Record<import("@markdoc/markdoc").NodeType, import("@markdoc/markdoc").Schema<Readonly<Partial<any>>, string>>>;
+        tags: Record<string, import("@markdoc/markdoc").Schema<Readonly<Partial<any>>, string>>;
+        variables: Record<string, any>;
+        functions: Record<string, import("@markdoc/markdoc").ConfigFunction>;
+        partials: Record<string, any>;
+        validation?: {
+            validateFunctions?: boolean | undefined;
+        } | undefined;
+    }>>;
+    fileUrl: URL;
+} | undefined>;

package/dist/load-config.js

@@ -0,0 +1,82 @@
+import { build as esbuild } from "esbuild";
+import * as fs from "node:fs";
+import { fileURLToPath } from "node:url";
+const SUPPORTED_MARKDOC_CONFIG_FILES = [
+  "markdoc.config.js",
+  "markdoc.config.mjs",
+  "markdoc.config.mts",
+  "markdoc.config.ts"
+];
+async function loadMarkdocConfig(astroConfig) {
+  let markdocConfigUrl;
+  for (const filename of SUPPORTED_MARKDOC_CONFIG_FILES) {
+    const filePath = new URL(filename, astroConfig.root);
+    if (!fs.existsSync(filePath))
+      continue;
+    markdocConfigUrl = filePath;
+    break;
+  }
+  if (!markdocConfigUrl)
+    return;
+  const { code, dependencies } = await bundleConfigFile({
+    markdocConfigUrl,
+    astroConfig
+  });
+  const config = await loadConfigFromBundledFile(astroConfig.root, code);
+  return {
+    config,
+    fileUrl: markdocConfigUrl
+  };
+}
+async function bundleConfigFile({
+  markdocConfigUrl,
+  astroConfig
+}) {
+  const result = await esbuild({
+    absWorkingDir: fileURLToPath(astroConfig.root),
+    entryPoints: [fileURLToPath(markdocConfigUrl)],
+    outfile: "out.js",
+    write: false,
+    target: ["node16"],
+    platform: "node",
+    packages: "external",
+    bundle: true,
+    format: "esm",
+    sourcemap: "inline",
+    metafile: true,
+    plugins: [
+      {
+        name: "stub-astro-imports",
+        setup(build) {
+          build.onResolve({ filter: /.*\.astro$/ }, () => {
+            return {
+              // Stub with an unused default export
+              path: "data:text/javascript,export default true",
+              external: true
+            };
+          });
+        }
+      }
+    ]
+  });
+  const { text } = result.outputFiles[0];
+  return {
+    code: text,
+    dependencies: result.metafile ? Object.keys(result.metafile.inputs) : []
+  };
+}
+async function loadConfigFromBundledFile(root, code) {
+  const tmpFileUrl = new URL(`markdoc.config.timestamp-${Date.now()}.mjs`, root);
+  fs.writeFileSync(tmpFileUrl, code);
+  try {
+    return (await import(tmpFileUrl.pathname)).default;
+  } finally {
+    try {
+      fs.unlinkSync(tmpFileUrl);
+    } catch {
+    }
+  }
+}
+export {
+  loadMarkdocConfig
+};

package/dist/utils.d.ts

@@ -1,7 +1,4 @@
-/// <reference types="node" />
-import type { AstroInstance } from 'astro';
 import matter from 'gray-matter';
-import type fsMod from 'node:fs';
 /**
  * Match YAML exception handling from Astro core errors
  * @see 'astro/src/core/errors.ts'
@@ -35,16 +32,9 @@ interface ErrorProperties {
     stack?: string;
     frame?: string;
 }
-/**
- * Matches `search` function used for resolving `astro.config` files.
- * Used by Markdoc for error handling.
- * @see 'astro/src/core/config/config.ts'
- */
-export declare function getAstroConfigPath(fs: typeof fsMod, root: string): string | undefined;
 /**
  * @see 'astro/src/core/path.ts'
  */
 export declare function prependForwardSlash(str: string): string;
-export declare function validateComponentsProp(components: Record<string, AstroInstance['default']>): void;
-export declare function isCapitalized(str: string): boolean;
+export declare function isValidUrl(str: string): boolean;
 export {};

package/dist/utils.js

@@ -1,6 +1,4 @@
-import z from "astro/zod";
 import matter from "gray-matter";
-import path from "node:path";
 function parseFrontmatter(fileContents, filePath) {
   try {
     matter.clearCache();
@@ -43,52 +41,20 @@ class MarkdocError extends Error {
     this.frame = frame;
   }
 }
-function getAstroConfigPath(fs, root) {
-  const paths = [
-    "astro.config.mjs",
-    "astro.config.js",
-    "astro.config.ts",
-    "astro.config.mts",
-    "astro.config.cjs",
-    "astro.config.cts"
-  ].map((p) => path.join(root, p));
-  for (const file of paths) {
-    if (fs.existsSync(file)) {
-      return file;
-    }
-  }
-}
 function prependForwardSlash(str) {
   return str[0] === "/" ? str : "/" + str;
 }
-function validateComponentsProp(components) {
+function isValidUrl(str) {
   try {
-    componentsPropValidator.parse(components);
-  } catch (e) {
-    throw new MarkdocError({
-      message: e instanceof z.ZodError ? e.issues[0].message : "Invalid `components` prop. Ensure you are passing an object of components to <Content />"
-    });
+    new URL(str);
+    return true;
+  } catch {
+    return false;
   }
 }
-const componentsPropValidator = z.record(
-  z.string().min(1, "Invalid `components` prop. Component names cannot be empty!").refine(
-    (value) => isCapitalized(value),
-    (value) => ({
-      message: `Invalid \`components\` prop: ${JSON.stringify(
-        value
-      )}. Component name must be capitalized. If you want to render HTML elements as components, try using a Markdoc node (https://docs.astro.build/en/guides/integrations-guide/markdoc/#render-markdoc-nodes--html-elements-as-astro-components)`
-    })
-  ),
-  z.any()
-);
-function isCapitalized(str) {
-  return str.length > 0 && str[0] === str[0].toUpperCase();
-}
 export {
   MarkdocError,
-  getAstroConfigPath,
-  isCapitalized,
+  isValidUrl,
   parseFrontmatter,
-  prependForwardSlash,
-  validateComponentsProp
+  prependForwardSlash
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/markdoc",
   "description": "Add support for Markdoc pages in your Astro site",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -21,23 +21,32 @@
   "exports": {
     ".": "./dist/index.js",
     "./components": "./components/index.ts",
+    "./default-config": "./dist/default-config.js",
+    "./config": "./dist/config.js",
+    "./experimental-assets-config": "./dist/experimental-assets-config.js",
     "./package.json": "./package.json"
   },
   "dependencies": {
     "@markdoc/markdoc": "^0.2.2",
+    "esbuild": "^0.17.12",
     "gray-matter": "^4.0.3",
+    "kleur": "^4.1.5",
     "zod": "^3.17.3"
   },
+  "peerDependencies": {
+    "astro": "^2.1.8"
+  },
   "devDependencies": {
     "@types/chai": "^4.3.1",
     "@types/html-escaper": "^3.0.0",
     "@types/mocha": "^9.1.1",
-    "astro": "2.1.5",
+    "astro": "2.1.8",
     "astro-scripts": "0.0.14",
     "chai": "^4.3.6",
     "devalue": "^4.2.0",
     "linkedom": "^0.14.12",
     "mocha": "^9.2.2",
+    "rollup": "^3.20.1",
     "vite": "^4.0.3"
   },
   "engines": {

package/src/config.ts

@@ -0,0 +1,5 @@
+import type { ConfigType as MarkdocConfig } from '@markdoc/markdoc';
+
+export function defineMarkdocConfig(config: MarkdocConfig): MarkdocConfig {
+	return config;
+}

package/src/default-config.ts

@@ -0,0 +1,18 @@
+import type { ConfigType as MarkdocConfig } from '@markdoc/markdoc';
+import type { ContentEntryModule } from 'astro';
+
+export function applyDefaultConfig(
+	config: MarkdocConfig,
+	ctx: {
+		entry: ContentEntryModule;
+	}
+): MarkdocConfig {
+	return {
+		...config,
+		variables: {
+			entry: ctx.entry,
+			...config.variables,
+		},
+		// TODO: heading ID calculation, Shiki syntax highlighting
+	};
+}

package/src/experimental-assets-config.ts

@@ -0,0 +1,29 @@
+import type { Config as MarkdocConfig } from '@markdoc/markdoc';
+import Markdoc from '@markdoc/markdoc';
+//@ts-expect-error Cannot find module 'astro:assets' or its corresponding type declarations.
+import { Image } from 'astro:assets';
+
+// Separate module to only import `astro:assets` when
+// `experimental.assets` flag is set in a project.
+// TODO: merge with `./default-config.ts` when `experimental.assets` is baselined.
+export const experimentalAssetsConfig: MarkdocConfig = {
+	nodes: {
+		image: {
+			attributes: {
+				...Markdoc.nodes.image.attributes,
+				__optimizedSrc: { type: 'Object' },
+			},
+			transform(node, config) {
+				const attributes = node.transformAttributes(config);
+				const children = node.transformChildren(config);
+
+				if (node.type === 'image' && '__optimizedSrc' in node.attributes) {
+					const { __optimizedSrc, ...rest } = node.attributes;
+					return new Markdoc.Tag(Image, { ...rest, src: __optimizedSrc }, children);
+				} else {
+					return new Markdoc.Tag('img', attributes, children);
+				}
+			},
+		},
+	},
+};

package/src/index.ts

@@ -1,9 +1,15 @@
-import type { Config } from '@markdoc/markdoc';
+import type { Node } from '@markdoc/markdoc';
 import Markdoc from '@markdoc/markdoc';
 import type { AstroConfig, AstroIntegration, ContentEntryType, HookParameters } from 'astro';
 import fs from 'node:fs';
 import { fileURLToPath } from 'node:url';
-import { getAstroConfigPath, MarkdocError, parseFrontmatter } from './utils.js';
+import { isValidUrl, MarkdocError, parseFrontmatter, prependForwardSlash } from './utils.js';
+// @ts-expect-error Cannot find module 'astro/assets' or its corresponding type declarations.
+import { emitESMImage } from 'astro/assets';
+import { bold, red } from 'kleur/colors';
+import type * as rollup from 'rollup';
+import { applyDefaultConfig } from './default-config.js';
+import { loadMarkdocConfig } from './load-config.js';
 
 type SetupHookParams = HookParameters<'astro:config:setup'> & {
 	// `contentEntryType` is not a public API
@@ -11,12 +17,24 @@ type SetupHookParams = HookParameters<'astro:config:setup'> & {
 	addContentEntryType: (contentEntryType: ContentEntryType) => void;
 };
 
-export default function markdoc(markdocConfig: Config = {}): AstroIntegration {
+export default function markdocIntegration(legacyConfig: any): AstroIntegration {
+	if (legacyConfig) {
+		// eslint-disable-next-line no-console
+		console.log(
+			`${red(
+				bold('[Markdoc]')
+			)} Passing Markdoc config from your \`astro.config\` is no longer supported. Configuration should be exported from a \`markdoc.config.mjs\` file. See the configuration docs for more: https://docs.astro.build/en/guides/integrations-guide/markdoc/#configuration`
+		);
+		process.exit(0);
+	}
 	return {
 		name: '@astrojs/markdoc',
 		hooks: {
 			'astro:config:setup': async (params) => {
-				const { updateConfig, config, addContentEntryType } = params as SetupHookParams;
+				const { config: astroConfig, addContentEntryType } = params as SetupHookParams;
+
+				const configLoadResult = await loadMarkdocConfig(astroConfig);
+				const userMarkdocConfig = configLoadResult?.config ?? {};
 
 				function getEntryInfo({ fileUrl, contents }: { fileUrl: URL; contents: string }) {
 					const parsed = parseFrontmatter(contents, fileURLToPath(fileUrl));
@@ -30,21 +48,63 @@ export default function markdoc(markdocConfig: Config = {}): AstroIntegration {
 				addContentEntryType({
 					extensions: ['.mdoc'],
 					getEntryInfo,
-					getRenderModule({ entry }) {
-						validateRenderProperties(markdocConfig, config);
+					async getRenderModule({ entry, viteId }) {
 						const ast = Markdoc.parse(entry.body);
-						const content = Markdoc.transform(ast, {
-							...markdocConfig,
-							variables: {
-								...markdocConfig.variables,
-								entry,
-							},
+						const pluginContext = this;
+						const markdocConfig = applyDefaultConfig(userMarkdocConfig, { entry });
+
+						const validationErrors = Markdoc.validate(ast, markdocConfig).filter((e) => {
+							// Ignore `variable-undefined` errors.
+							// Variables can be configured at runtime,
+							// so we cannot validate them at build time.
+							return e.error.id !== 'variable-undefined';
 						});
-						return {
-							code: `import { jsx as h } from 'astro/jsx-runtime';\nimport { Renderer } from '@astrojs/markdoc/components';\nconst transformedContent = ${JSON.stringify(
-								content
-							)};\nexport async function Content ({ components }) { return h(Renderer, { content: transformedContent, components }); }\nContent[Symbol.for('astro.needsHeadRendering')] = true;`,
+						if (validationErrors.length) {
+							throw new MarkdocError({
+								message: [
+									`**${String(entry.collection)} → ${String(entry.id)}** failed to validate:`,
+									...validationErrors.map((e) => e.error.id),
+								].join('\n'),
+							});
+						}
+
+						if (astroConfig.experimental.assets) {
+							await emitOptimizedImages(ast.children, {
+								astroConfig,
+								pluginContext,
+								filePath: entry._internal.filePath,
+							});
+						}
+
+						const code = {
+							code: `import { jsx as h } from 'astro/jsx-runtime';
+import { applyDefaultConfig } from '@astrojs/markdoc/default-config';
+import { Renderer } from '@astrojs/markdoc/components';
+import * as entry from ${JSON.stringify(viteId + '?astroContent')};${
+								configLoadResult
+									? `\nimport userConfig from ${JSON.stringify(configLoadResult.fileUrl.pathname)};`
+									: ''
+							}${
+								astroConfig.experimental.assets
+									? `\nimport { experimentalAssetsConfig } from '@astrojs/markdoc/experimental-assets-config';`
+									: ''
+							}
+const stringifiedAst = ${JSON.stringify(
+								/* Double stringify to encode *as* stringified JSON */ JSON.stringify(ast)
+							)};
+export async function Content (props) {
+	const config = applyDefaultConfig(${
+		configLoadResult
+			? '{ ...userConfig, variables: { ...userConfig.variables, ...props } }'
+			: '{ variables: props }'
+	}, { entry });${
+								astroConfig.experimental.assets
+									? `\nconfig.nodes = { ...experimentalAssetsConfig.nodes, ...config.nodes };`
+									: ''
+							}
+	return h(Renderer, { stringifiedAst, config }); };`,
 						};
+						return code;
 					},
 					contentModuleTypes: await fs.promises.readFile(
 						new URL('../template/content-module-types.d.ts', import.meta.url),
@@ -56,52 +116,49 @@ export default function markdoc(markdocConfig: Config = {}): AstroIntegration {
 	};
 }
 
-function validateRenderProperties(markdocConfig: Config, astroConfig: AstroConfig) {
-	const tags = markdocConfig.tags ?? {};
-	const nodes = markdocConfig.nodes ?? {};
-
-	for (const [name, config] of Object.entries(tags)) {
-		validateRenderProperty({ type: 'tag', name, config, astroConfig });
-	}
-	for (const [name, config] of Object.entries(nodes)) {
-		validateRenderProperty({ type: 'node', name, config, astroConfig });
+/**
+ * Emits optimized images, and appends the generated `src` to each AST node
+ * via the `__optimizedSrc` attribute.
+ */
+async function emitOptimizedImages(
+	nodeChildren: Node[],
+	ctx: {
+		pluginContext: rollup.PluginContext;
+		filePath: string;
+		astroConfig: AstroConfig;
 	}
-}
+) {
+	for (const node of nodeChildren) {
+		if (
+			node.type === 'image' &&
+			typeof node.attributes.src === 'string' &&
+			shouldOptimizeImage(node.attributes.src)
+		) {
+			// Attempt to resolve source with Vite.
+			// This handles relative paths and configured aliases
+			const resolved = await ctx.pluginContext.resolve(node.attributes.src, ctx.filePath);
 
-function validateRenderProperty({
-	name,
-	config,
-	type,
-	astroConfig,
-}: {
-	name: string;
-	config: { render?: string };
-	type: 'node' | 'tag';
-	astroConfig: Pick<AstroConfig, 'root'>;
-}) {
-	if (typeof config.render === 'string' && config.render.length === 0) {
-		throw new Error(
-			`Invalid ${type} configuration: ${JSON.stringify(
-				name
-			)}. The "render" property cannot be an empty string.`
-		);
-	}
-	if (typeof config.render === 'string' && !isCapitalized(config.render)) {
-		const astroConfigPath = getAstroConfigPath(fs, fileURLToPath(astroConfig.root));
-		throw new MarkdocError({
-			message: `Invalid ${type} configuration: ${JSON.stringify(
-				name
-			)}. The "render" property must reference a capitalized component name.`,
-			hint: 'If you want to render to an HTML element, see our docs on rendering Markdoc manually: https://docs.astro.build/en/guides/integrations-guide/markdoc/#render-markdoc-nodes--html-elements-as-astro-components',
-			location: astroConfigPath
-				? {
-						file: astroConfigPath,
-				  }
-				: undefined,
-		});
+			if (resolved?.id && fs.existsSync(new URL(prependForwardSlash(resolved.id), 'file://'))) {
+				const src = await emitESMImage(
+					resolved.id,
+					ctx.pluginContext.meta.watchMode,
+					ctx.pluginContext.emitFile,
+					{ config: ctx.astroConfig }
+				);
+				node.attributes.__optimizedSrc = src;
+			} else {
+				throw new MarkdocError({
+					message: `Could not resolve image ${JSON.stringify(
+						node.attributes.src
+					)} from ${JSON.stringify(ctx.filePath)}. Does the file exist?`,
+				});
+			}
+		}
+		await emitOptimizedImages(node.children, ctx);
 	}
 }
 
-function isCapitalized(str: string) {
-	return str.length > 0 && str[0] === str[0].toUpperCase();
+function shouldOptimizeImage(src: string) {
+	// Optimize anything that is NOT external or an absolute path to `public/`
+	return !isValidUrl(src) && !src.startsWith('/');
 }