@astrojs/markdown-remark 2.0.0 → 2.1.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/markdown-remark:build: cache hit, replaying output 6cabe659bf0ade09
+@astrojs/markdown-remark:build: cache hit, replaying output a9a85fd17740b5e6
 @astrojs/markdown-remark:build: 
-@astrojs/markdown-remark:build: > @astrojs/markdown-remark@2.0.0 build /home/runner/work/astro/astro/packages/markdown/remark
+@astrojs/markdown-remark:build: > @astrojs/markdown-remark@2.1.0 build /home/runner/work/astro/astro/packages/markdown/remark
 @astrojs/markdown-remark:build: > astro-scripts build "src/**/*.ts" && tsc -p tsconfig.json
 @astrojs/markdown-remark:build: 

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @astrojs/markdown-remark
 
+## 2.1.0
+
+### Minor Changes
+
+- [#6344](https://github.com/withastro/astro/pull/6344) [`694918a56`](https://github.com/withastro/astro/commit/694918a56b01104831296be0c25456135a63c784) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Add a new experimental flag (`experimental.assets`) to enable our new core Assets story.
+
+  This unlocks a few features:
+
+  - A new built-in image component and JavaScript API to transform and optimize images.
+  - Relative images with automatic optimization in Markdown.
+  - Support for validating assets using content collections.
+  - and more!
+
+  See [Assets (Experimental)](https://docs.astro.build/en/guides/assets/) on our docs site for more information on how to use this feature!
+
+- [#6213](https://github.com/withastro/astro/pull/6213) [`afbbc4d5b`](https://github.com/withastro/astro/commit/afbbc4d5bfafc1779bac00b41c2a1cb1c90f2808) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Updated compilation settings to disable downlevelling for Node 14
+
+### Patch Changes
+
+- Updated dependencies [[`fec583909`](https://github.com/withastro/astro/commit/fec583909ab62829dc0c1600e2387979365f2b94), [`b087b83fe`](https://github.com/withastro/astro/commit/b087b83fe266c431fe34a07d5c2293cc4ab011c6), [`694918a56`](https://github.com/withastro/astro/commit/694918a56b01104831296be0c25456135a63c784), [`a20610609`](https://github.com/withastro/astro/commit/a20610609863ae3b48afe96819b8f11ae4f414d5), [`a4a74ab70`](https://github.com/withastro/astro/commit/a4a74ab70cd2aa0d812a1f6b202c4e240a8913bf), [`75921b3cd`](https://github.com/withastro/astro/commit/75921b3cd916d439f6392c487c21532fde35ed13), [`afbbc4d5b`](https://github.com/withastro/astro/commit/afbbc4d5bfafc1779bac00b41c2a1cb1c90f2808)]:
+  - astro@2.1.0
+  - @astrojs/prism@2.1.0
+
+## 2.0.1
+
+### Patch Changes
+
+- [#5978](https://github.com/withastro/astro/pull/5978) [`7abb1e905`](https://github.com/withastro/astro/commit/7abb1e9056c4b4fd0abfced347df32a41cdfbf28) Thanks [@HiDeoo](https://github.com/HiDeoo)! - Fix MDX heading IDs generation when using a frontmatter reference
+
+- Updated dependencies [[`b53e0717b`](https://github.com/withastro/astro/commit/b53e0717b7f6b042baaeec7f87999e99c76c031c), [`60b32d585`](https://github.com/withastro/astro/commit/60b32d58565d87e87573eb268408293fc28ec657), [`883e0cc29`](https://github.com/withastro/astro/commit/883e0cc29968d51ed6c7515be035a40b28bafdad), [`dabce6b8c`](https://github.com/withastro/astro/commit/dabce6b8c684f851c3535f8acead06cbef6dce2a), [`aedf23f85`](https://github.com/withastro/astro/commit/aedf23f8582e32a6b94b81ddba9b323831f2b22a)]:
+  - astro@2.0.2
+
 ## 2.0.0
 
 ### Major Changes
@@ -41,47 +73,47 @@
 - [#5785](https://github.com/withastro/astro/pull/5785) [`16107b6a1`](https://github.com/withastro/astro/commit/16107b6a10514ef1b563e585ec9add4b14f42b94) Thanks [@delucis](https://github.com/delucis)! - Drop support for legacy Astro-flavored Markdown
 
 - [#5684](https://github.com/withastro/astro/pull/5684) [`a9c292026`](https://github.com/withastro/astro/commit/a9c2920264e36cc5dc05f4adc1912187979edb0d) & [#5769](https://github.com/withastro/astro/pull/5769) [`93e633922`](https://github.com/withastro/astro/commit/93e633922c2e449df3bb2357b3683af1d3c0e07b) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Refine Markdown and MDX configuration options for ease-of-use.
-  
+
   - **Markdown**
 
-      - **Replace the `extendDefaultPlugins` option** with a `gfm` boolean and a `smartypants` boolean. These are enabled by default, and can be disabled to remove GitHub-Flavored Markdown and SmartyPants.
-  
-      - Ensure GitHub-Flavored Markdown and SmartyPants are applied whether or not custom `remarkPlugins` or `rehypePlugins` are configured. If you want to apply custom plugins _and_ remove Astro's default plugins, manually set `gfm: false` and `smartypants: false` in your config.
+    - **Replace the `extendDefaultPlugins` option** with a `gfm` boolean and a `smartypants` boolean. These are enabled by default, and can be disabled to remove GitHub-Flavored Markdown and SmartyPants.
+
+    - Ensure GitHub-Flavored Markdown and SmartyPants are applied whether or not custom `remarkPlugins` or `rehypePlugins` are configured. If you want to apply custom plugins _and_ remove Astro's default plugins, manually set `gfm: false` and `smartypants: false` in your config.
 
   - **Migrate `extendDefaultPlugins` to `gfm` and `smartypants`**
 
-      You may have disabled Astro's built-in plugins (GitHub-Flavored Markdown and Smartypants) with the `extendDefaultPlugins` option. This has now been split into 2 flags to disable each plugin individually:
+    You may have disabled Astro's built-in plugins (GitHub-Flavored Markdown and Smartypants) with the `extendDefaultPlugins` option. This has now been split into 2 flags to disable each plugin individually:
 
-      - `markdown.gfm` to disable GitHub-Flavored Markdown
-      - `markdown.smartypants` to disable SmartyPants
+    - `markdown.gfm` to disable GitHub-Flavored Markdown
+    - `markdown.smartypants` to disable SmartyPants
 
-      ```diff
-      // astro.config.mjs
-      import { defineConfig } from 'astro/config';
+    ```diff
+    // astro.config.mjs
+    import { defineConfig } from 'astro/config';
 
-      export default defineConfig({
-        markdown: {
-      -   extendDefaultPlugins: false,
-      +   smartypants: false,
-      +   gfm: false,
-        }
-      });
-      ```
+    export default defineConfig({
+      markdown: {
+    -   extendDefaultPlugins: false,
+    +   smartypants: false,
+    +   gfm: false,
+      }
+    });
+    ```
 
-      Additionally, applying remark and rehype plugins **no longer disables** `gfm` and `smartypants`. You will need to opt-out manually by setting `gfm` and `smartypants` to `false`.
+    Additionally, applying remark and rehype plugins **no longer disables** `gfm` and `smartypants`. You will need to opt-out manually by setting `gfm` and `smartypants` to `false`.
 
   - **MDX**
 
-      - Support _all_ Markdown configuration options (except `drafts`) from your MDX integration config. This includes `syntaxHighlighting` and `shikiConfig` options to further customize the MDX renderer.
+    - Support _all_ Markdown configuration options (except `drafts`) from your MDX integration config. This includes `syntaxHighlighting` and `shikiConfig` options to further customize the MDX renderer.
 
-      - Simplify `extendPlugins` to an `extendMarkdownConfig` option. MDX options will default to their equivalent in your Markdown config. By setting `extendMarkdownConfig` to false, you can "eject" to set your own syntax highlighting, plugins, and more.
+    - Simplify `extendPlugins` to an `extendMarkdownConfig` option. MDX options will default to their equivalent in your Markdown config. By setting `extendMarkdownConfig` to false, you can "eject" to set your own syntax highlighting, plugins, and more.
 
   - **Migrate MDX's `extendPlugins` to `extendMarkdownConfig`**
 
-      You may have used the `extendPlugins` option to manage plugin defaults in MDX. This has been replaced by 3 flags:
+    You may have used the `extendPlugins` option to manage plugin defaults in MDX. This has been replaced by 3 flags:
 
-      - `extendMarkdownConfig` (`true` by default) to toggle Markdown config inheritance. This replaces the `extendPlugins: 'markdown'` option.
-      - `gfm` (`true` by default) and `smartypants` (`true` by default) to toggle GitHub-Flavored Markdown and SmartyPants in MDX. This replaces the `extendPlugins: 'defaults'` option.
+    - `extendMarkdownConfig` (`true` by default) to toggle Markdown config inheritance. This replaces the `extendPlugins: 'markdown'` option.
+    - `gfm` (`true` by default) and `smartypants` (`true` by default) to toggle GitHub-Flavored Markdown and SmartyPants in MDX. This replaces the `extendPlugins: 'defaults'` option.
 
 - [#5825](https://github.com/withastro/astro/pull/5825) [`52209ca2a`](https://github.com/withastro/astro/commit/52209ca2ad72a30854947dcb3a90ab4db0ac0a6f) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Baseline the experimental `contentCollections` flag. You're free to remove this from your astro config!
 
@@ -98,7 +130,6 @@
 
   This marks `astro` as a `peerDependency` of several packages that are already getting `major` version bumps. This is so we can more properly track the dependency between them and what version of Astro they are being used with.
 
-
 **Patch Changes**
 
 - [#5837](https://github.com/withastro/astro/pull/5837) [`12f65a4d5`](https://github.com/withastro/astro/commit/12f65a4d55e3fd2993c2f67b18794dd536280c69) Thanks [@giuseppelt](https://github.com/giuseppelt)! - fix shiki css class replace logic

package/dist/index.js

@@ -1,7 +1,7 @@
 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 toRemarkCollectImages from "./remark-collect-images.js";
 import remarkPrism from "./remark-prism.js";
 import scopedStyles from "./remark-scoped-styles.js";
 import remarkShiki from "./remark-shiki.js";
@@ -13,6 +13,7 @@ import markdownToHtml from "remark-rehype";
 import remarkSmartypants from "remark-smartypants";
 import { unified } from "unified";
 import { VFile } from "vfile";
+import { rehypeImages } from "./rehype-images.js";
 import { rehypeHeadingIds as rehypeHeadingIds2 } from "./rehype-collect-headings.js";
 export * from "./types.js";
 const markdownConfigDefaults = {
@@ -28,6 +29,7 @@ const markdownConfigDefaults = {
   gfm: true,
   smartypants: true
 };
+const isPerformanceBenchmark = Boolean(process.env.ASTRO_PERFORMANCE_BENCHMARK);
 async function renderMarkdown(content, opts) {
   var _a;
   let {
@@ -39,32 +41,37 @@ async function renderMarkdown(content, opts) {
     remarkRehype = markdownConfigDefaults.remarkRehype,
     gfm = markdownConfigDefaults.gfm,
     smartypants = markdownConfigDefaults.smartypants,
-    contentDir,
     frontmatter: userFrontmatter = {}
   } = opts;
   const input = new VFile({ value: content, path: fileURL });
   const scopedClassName = (_a = opts.$) == null ? void 0 : _a.scopedClassName;
   let parser = unified().use(markdown).use(toRemarkInitializeAstroData({ userFrontmatter })).use([]);
-  if (gfm) {
-    parser.use(remarkGfm);
-  }
-  if (smartypants) {
-    parser.use(remarkSmartypants);
+  if (!isPerformanceBenchmark && gfm) {
+    if (gfm) {
+      parser.use(remarkGfm);
+    }
+    if (smartypants) {
+      parser.use(remarkSmartypants);
+    }
   }
   const loadedRemarkPlugins = await Promise.all(loadPlugins(remarkPlugins));
   const loadedRehypePlugins = await Promise.all(loadPlugins(rehypePlugins));
   loadedRemarkPlugins.forEach(([plugin, pluginOpts]) => {
     parser.use([[plugin, pluginOpts]]);
   });
-  if (scopedClassName) {
-    parser.use([scopedStyles(scopedClassName)]);
-  }
-  if (syntaxHighlight === "shiki") {
-    parser.use([await remarkShiki(shikiConfig, scopedClassName)]);
-  } else if (syntaxHighlight === "prism") {
-    parser.use([remarkPrism(scopedClassName)]);
+  if (!isPerformanceBenchmark) {
+    if (scopedClassName) {
+      parser.use([scopedStyles(scopedClassName)]);
+    }
+    if (syntaxHighlight === "shiki") {
+      parser.use([await remarkShiki(shikiConfig, scopedClassName)]);
+    } else if (syntaxHighlight === "prism") {
+      parser.use([remarkPrism(scopedClassName)]);
+    }
+    if (opts.experimentalAssets) {
+      parser.use([toRemarkCollectImages(opts.resolveImage)]);
+    }
   }
-  parser.use([toRemarkContentRelImageError({ contentDir })]);
   parser.use([
     [
       markdownToHtml,
@@ -78,7 +85,13 @@ async function renderMarkdown(content, opts) {
   loadedRehypePlugins.forEach(([plugin, pluginOpts]) => {
     parser.use([[plugin, pluginOpts]]);
   });
-  parser.use([rehypeHeadingIds, rehypeRaw]).use(rehypeStringify, { allowDangerousHtml: true });
+  if (opts.experimentalAssets) {
+    parser.use(rehypeImages(await opts.imageService, opts.assetsDir));
+  }
+  if (!isPerformanceBenchmark) {
+    parser.use([rehypeHeadingIds]);
+  }
+  parser.use([rehypeRaw]).use(rehypeStringify, { allowDangerousHtml: true });
   let vfile;
   try {
     vfile = await parser.process(input);

package/dist/rehype-collect-headings.js

@@ -1,5 +1,6 @@
 import Slugger from "github-slugger";
 import { visit } from "unist-util-visit";
+import { InvalidAstroDataError, safelyGetAstroData } from "./frontmatter-injection.js";
 const rawNodeTypes = /* @__PURE__ */ new Set(["text", "raw", "mdxTextExpression"]);
 const codeTagNames = /* @__PURE__ */ new Set(["code", "pre"]);
 function rehypeHeadingIds() {
@@ -7,6 +8,7 @@ function rehypeHeadingIds() {
     const headings = [];
     const slugger = new Slugger();
     const isMDX = isMDXFile(file);
+    const astroData = safelyGetAstroData(file.data);
     visit(tree, (node) => {
       if (node.type !== "element")
         return;
@@ -29,7 +31,17 @@ function rehypeHeadingIds() {
         }
         if (rawNodeTypes.has(child.type)) {
           if (isMDX || codeTagNames.has(parent.tagName)) {
-            text += child.value;
+            let value = child.value;
+            if (isMdxTextExpression(child) && !(astroData instanceof InvalidAstroDataError)) {
+              const frontmatterPath = getMdxFrontmatterVariablePath(child);
+              if (Array.isArray(frontmatterPath) && frontmatterPath.length > 0) {
+                const frontmatterValue = getMdxFrontmatterVariableValue(astroData, frontmatterPath);
+                if (typeof frontmatterValue === "string") {
+                  value = frontmatterValue;
+                }
+              }
+            }
+            text += value;
           } else {
             text += child.value.replace(/\{/g, "${");
           }
@@ -51,6 +63,37 @@ function isMDXFile(file) {
   var _a;
   return Boolean((_a = file.history[0]) == null ? void 0 : _a.endsWith(".mdx"));
 }
+function getMdxFrontmatterVariablePath(node) {
+  var _a;
+  if (!((_a = node.data) == null ? void 0 : _a.estree) || node.data.estree.body.length !== 1)
+    return new Error();
+  const statement = node.data.estree.body[0];
+  if ((statement == null ? void 0 : statement.type) !== "ExpressionStatement" || statement.expression.type !== "MemberExpression")
+    return new Error();
+  let expression = statement.expression;
+  const expressionPath = [];
+  while (expression.type === "MemberExpression" && expression.property.type === (expression.computed ? "Literal" : "Identifier")) {
+    expressionPath.push(
+      expression.property.type === "Literal" ? String(expression.property.value) : expression.property.name
+    );
+    expression = expression.object;
+  }
+  if (expression.type !== "Identifier" || expression.name !== "frontmatter")
+    return new Error();
+  return expressionPath.reverse();
+}
+function getMdxFrontmatterVariableValue(astroData, path) {
+  let value = astroData.frontmatter;
+  for (const key of path) {
+    if (!value[key])
+      return void 0;
+    value = value[key];
+  }
+  return value;
+}
+function isMdxTextExpression(node) {
+  return node.type === "mdxTextExpression";
+}
 export {
   rehypeHeadingIds
 };

package/dist/rehype-images.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdownVFile } from './types.js';
+export declare function rehypeImages(imageService: any, assetsDir: URL | undefined): () => (tree: any, file: MarkdownVFile) => void;

package/dist/rehype-images.js

@@ -0,0 +1,71 @@
+import sizeOf from "image-size";
+import { join as pathJoin } from "node:path";
+import { fileURLToPath } from "node:url";
+import { visit } from "unist-util-visit";
+import { pathToFileURL } from "url";
+function rehypeImages(imageService, assetsDir) {
+  return () => function(tree, file) {
+    visit(tree, (node) => {
+      var _a;
+      if (!assetsDir)
+        return;
+      if (node.type !== "element")
+        return;
+      if (node.tagName !== "img")
+        return;
+      if ((_a = node.properties) == null ? void 0 : _a.src) {
+        if (file.dirname) {
+          if (!isRelativePath(node.properties.src) && !isAliasedPath(node.properties.src))
+            return;
+          let fileURL;
+          if (isAliasedPath(node.properties.src)) {
+            fileURL = new URL(stripAliasPath(node.properties.src), assetsDir);
+          } else {
+            fileURL = pathToFileURL(pathJoin(file.dirname, node.properties.src));
+          }
+          const fileData = sizeOf(fileURLToPath(fileURL));
+          fileURL.searchParams.append("origWidth", fileData.width.toString());
+          fileURL.searchParams.append("origHeight", fileData.height.toString());
+          fileURL.searchParams.append("origFormat", fileData.type.toString());
+          let options = {
+            src: {
+              src: fileURL,
+              width: fileData.width,
+              height: fileData.height,
+              format: fileData.type
+            },
+            alt: node.properties.alt
+          };
+          const imageURL = imageService.getURL(options);
+          node.properties = Object.assign(node.properties, {
+            src: imageURL,
+            ...imageService.getHTMLAttributes !== void 0 ? imageService.getHTMLAttributes(options) : {}
+          });
+        }
+      }
+    });
+  };
+}
+function isAliasedPath(path) {
+  return path.startsWith("~/assets");
+}
+function stripAliasPath(path) {
+  return path.replace("~/assets/", "");
+}
+function isRelativePath(path) {
+  return startsWithDotDotSlash(path) || startsWithDotSlash(path);
+}
+function startsWithDotDotSlash(path) {
+  const c1 = path[0];
+  const c2 = path[1];
+  const c3 = path[2];
+  return c1 === "." && c2 === "." && c3 === "/";
+}
+function startsWithDotSlash(path) {
+  const c1 = path[0];
+  const c2 = path[1];
+  return c1 === "." && c2 === "/";
+}
+export {
+  rehypeImages
+};

package/dist/remark-collect-images.d.ts

@@ -0,0 +1,4 @@
+import type { VFile } from 'vfile';
+declare type OptionalResolveImage = ((path: string) => Promise<string>) | undefined;
+export default function toRemarkCollectImages(resolveImage: OptionalResolveImage): () => (tree: any, vfile: VFile) => Promise<void>;
+export {};

package/dist/remark-collect-images.js

@@ -0,0 +1,28 @@
+import { visit } from "unist-util-visit";
+function toRemarkCollectImages(resolveImage) {
+  return () => async function(tree, vfile) {
+    if (typeof (vfile == null ? void 0 : vfile.path) !== "string")
+      return;
+    const imagePaths = /* @__PURE__ */ new Set();
+    visit(tree, "image", function raiseError(node) {
+      imagePaths.add(node.url);
+    });
+    if (imagePaths.size === 0) {
+      vfile.data.imagePaths = [];
+      return;
+    } else if (resolveImage) {
+      const mapping = /* @__PURE__ */ new Map();
+      for (const path of Array.from(imagePaths)) {
+        const id = await resolveImage(path);
+        mapping.set(path, id);
+      }
+      visit(tree, "image", function raiseError(node) {
+        node.url = mapping.get(node.url);
+      });
+    }
+    vfile.data.imagePaths = Array.from(imagePaths);
+  };
+}
+export {
+  toRemarkCollectImages as default
+};

package/dist/types.d.ts

@@ -38,10 +38,12 @@ export interface MarkdownRenderingOptions extends AstroMarkdownOptions {
     $?: {
         scopedClassName: string | null;
     };
-    /** Used to prevent relative image imports from `src/content/` */
-    contentDir: URL;
     /** Used for frontmatter injection plugins */
     frontmatter?: Record<string, any>;
+    experimentalAssets?: boolean;
+    imageService?: any;
+    assetsDir?: URL;
+    resolveImage?: (path: string) => Promise<string>;
 }
 export interface MarkdownHeading {
     depth: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/markdown-remark",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "author": "withastro",
   "license": "MIT",
@@ -17,11 +17,12 @@
     "./dist/internal.js": "./dist/internal.js"
   },
   "peerDependencies": {
-    "astro": "^2.0.0"
+    "astro": "^2.1.0"
   },
   "dependencies": {
-    "@astrojs/prism": "^2.0.0",
+    "@astrojs/prism": "^2.1.0",
     "github-slugger": "^1.4.0",
+    "image-size": "^1.0.2",
     "import-meta-resolve": "^2.1.0",
     "rehype-raw": "^6.1.1",
     "rehype-stringify": "^9.0.3",
@@ -36,13 +37,15 @@
   },
   "devDependencies": {
     "@types/chai": "^4.3.1",
+    "@types/estree": "^1.0.0",
     "@types/github-slugger": "^1.3.0",
     "@types/hast": "^2.3.4",
     "@types/mdast": "^3.0.10",
     "@types/mocha": "^9.1.1",
     "@types/unist": "^2.0.6",
-    "astro-scripts": "0.0.10",
+    "astro-scripts": "0.0.14",
     "chai": "^4.3.6",
+    "mdast-util-mdx-expression": "^1.3.1",
     "mocha": "^9.2.2"
   },
   "scripts": {

package/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 toRemarkCollectImages from './remark-collect-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 { rehypeImages } from './rehype-images.js';
 
 export { rehypeHeadingIds } from './rehype-collect-headings.js';
 export * from './types.js';
@@ -39,6 +40,9 @@ export const markdownConfigDefaults: Omit<Required<AstroMarkdownOptions>, 'draft
 	smartypants: true,
 };
 
+// Skip nonessential plugins during performance benchmark runs
+const isPerformanceBenchmark = Boolean(process.env.ASTRO_PERFORMANCE_BENCHMARK);
+
 /** Shared utility for rendering markdown */
 export async function renderMarkdown(
 	content: string,
@@ -53,7 +57,6 @@ export async function renderMarkdown(
 		remarkRehype = markdownConfigDefaults.remarkRehype,
 		gfm = markdownConfigDefaults.gfm,
 		smartypants = markdownConfigDefaults.smartypants,
-		contentDir,
 		frontmatter: userFrontmatter = {},
 	} = opts;
 	const input = new VFile({ value: content, path: fileURL });
@@ -64,12 +67,13 @@ export async function renderMarkdown(
 		.use(toRemarkInitializeAstroData({ userFrontmatter }))
 		.use([]);
 
-	if (gfm) {
-		parser.use(remarkGfm);
-	}
-
-	if (smartypants) {
-		parser.use(remarkSmartypants);
+	if (!isPerformanceBenchmark && gfm) {
+		if (gfm) {
+			parser.use(remarkGfm);
+		}
+		if (smartypants) {
+			parser.use(remarkSmartypants);
+		}
 	}
 
 	const loadedRemarkPlugins = await Promise.all(loadPlugins(remarkPlugins));
@@ -79,18 +83,22 @@ export async function renderMarkdown(
 		parser.use([[plugin, pluginOpts]]);
 	});
 
-	if (scopedClassName) {
-		parser.use([scopedStyles(scopedClassName)]);
-	}
+	if (!isPerformanceBenchmark) {
+		if (scopedClassName) {
+			parser.use([scopedStyles(scopedClassName)]);
+		}
 
-	if (syntaxHighlight === 'shiki') {
-		parser.use([await remarkShiki(shikiConfig, scopedClassName)]);
-	} else if (syntaxHighlight === 'prism') {
-		parser.use([remarkPrism(scopedClassName)]);
-	}
+		if (syntaxHighlight === 'shiki') {
+			parser.use([await remarkShiki(shikiConfig, scopedClassName)]);
+		} else if (syntaxHighlight === 'prism') {
+			parser.use([remarkPrism(scopedClassName)]);
+		}
 
-	// Apply later in case user plugins resolve relative image paths
-	parser.use([toRemarkContentRelImageError({ contentDir })]);
+		if (opts.experimentalAssets) {
+			// Apply later in case user plugins resolve relative image paths
+			parser.use([toRemarkCollectImages(opts.resolveImage)]);
+		}
+	}
 
 	parser.use([
 		[
@@ -107,7 +115,14 @@ export async function renderMarkdown(
 		parser.use([[plugin, pluginOpts]]);
 	});
 
-	parser.use([rehypeHeadingIds, rehypeRaw]).use(rehypeStringify, { allowDangerousHtml: true });
+	if (opts.experimentalAssets) {
+		parser.use(rehypeImages(await opts.imageService, opts.assetsDir));
+	}
+	if (!isPerformanceBenchmark) {
+		parser.use([rehypeHeadingIds]);
+	}
+
+	parser.use([rehypeRaw]).use(rehypeStringify, { allowDangerousHtml: true });
 
 	let vfile: MarkdownVFile;
 	try {
@@ -144,7 +159,7 @@ function prefixError(err: any, prefix: string) {
 	const wrappedError = new Error(`${prefix}${err ? `: ${err}` : ''}`);
 	try {
 		wrappedError.stack = err.stack;
-		// @ts-ignore
+		// @ts-expect-error
 		wrappedError.cause = err;
 	} catch (error) {
 		// It's ok if we could not set the stack or cause - the message is the most important part

package/src/rehype-collect-headings.ts

@@ -1,7 +1,11 @@
+import { type Expression, type Super } from 'estree';
 import Slugger from 'github-slugger';
+import { type MdxTextExpression } from 'mdast-util-mdx-expression';
+import { type Node } from 'unist';
 import { visit } from 'unist-util-visit';
 
-import type { MarkdownHeading, MarkdownVFile, RehypePlugin } from './types.js';
+import { InvalidAstroDataError, safelyGetAstroData } from './frontmatter-injection.js';
+import type { MarkdownAstroData, MarkdownHeading, MarkdownVFile, RehypePlugin } from './types.js';
 
 const rawNodeTypes = new Set(['text', 'raw', 'mdxTextExpression']);
 const codeTagNames = new Set(['code', 'pre']);
@@ -11,6 +15,7 @@ export function rehypeHeadingIds(): ReturnType<RehypePlugin> {
 		const headings: MarkdownHeading[] = [];
 		const slugger = new Slugger();
 		const isMDX = isMDXFile(file);
+		const astroData = safelyGetAstroData(file.data);
 		visit(tree, (node) => {
 			if (node.type !== 'element') return;
 			const { tagName } = node;
@@ -31,7 +36,17 @@ export function rehypeHeadingIds(): ReturnType<RehypePlugin> {
 				}
 				if (rawNodeTypes.has(child.type)) {
 					if (isMDX || codeTagNames.has(parent.tagName)) {
-						text += child.value;
+						let value = child.value;
+						if (isMdxTextExpression(child) && !(astroData instanceof InvalidAstroDataError)) {
+							const frontmatterPath = getMdxFrontmatterVariablePath(child);
+							if (Array.isArray(frontmatterPath) && frontmatterPath.length > 0) {
+								const frontmatterValue = getMdxFrontmatterVariableValue(astroData, frontmatterPath);
+								if (typeof frontmatterValue === 'string') {
+									value = frontmatterValue;
+								}
+							}
+						}
+						text += value;
 					} else {
 						text += child.value.replace(/\{/g, '${');
 					}
@@ -57,3 +72,58 @@ export function rehypeHeadingIds(): ReturnType<RehypePlugin> {
 function isMDXFile(file: MarkdownVFile) {
 	return Boolean(file.history[0]?.endsWith('.mdx'));
 }
+
+/**
+ * Check if an ESTree entry is `frontmatter.*.VARIABLE`.
+ * If it is, return the variable path (i.e. `["*", ..., "VARIABLE"]`) minus the `frontmatter` prefix.
+ */
+function getMdxFrontmatterVariablePath(node: MdxTextExpression): string[] | Error {
+	if (!node.data?.estree || node.data.estree.body.length !== 1) return new Error();
+
+	const statement = node.data.estree.body[0];
+
+	// Check for "[ANYTHING].[ANYTHING]".
+	if (statement?.type !== 'ExpressionStatement' || statement.expression.type !== 'MemberExpression')
+		return new Error();
+
+	let expression: Expression | Super = statement.expression;
+	const expressionPath: string[] = [];
+
+	// Traverse the expression, collecting the variable path.
+	while (
+		expression.type === 'MemberExpression' &&
+		expression.property.type === (expression.computed ? 'Literal' : 'Identifier')
+	) {
+		expressionPath.push(
+			expression.property.type === 'Literal'
+				? String(expression.property.value)
+				: expression.property.name
+		);
+
+		expression = expression.object;
+	}
+
+	// Check for "frontmatter.[ANYTHING]".
+	if (expression.type !== 'Identifier' || expression.name !== 'frontmatter') return new Error();
+
+	return expressionPath.reverse();
+}
+
+function getMdxFrontmatterVariableValue(astroData: MarkdownAstroData, path: string[]) {
+	let value: MdxFrontmatterVariableValue = astroData.frontmatter;
+
+	for (const key of path) {
+		if (!value[key]) return undefined;
+
+		value = value[key];
+	}
+
+	return value;
+}
+
+function isMdxTextExpression(node: Node): node is MdxTextExpression {
+	return node.type === 'mdxTextExpression';
+}
+
+type MdxFrontmatterVariableValue =
+	MarkdownAstroData['frontmatter'][keyof MarkdownAstroData['frontmatter']];

package/src/rehype-images.ts

@@ -0,0 +1,78 @@
+import sizeOf from 'image-size';
+import { join as pathJoin } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { visit } from 'unist-util-visit';
+import { pathToFileURL } from 'url';
+import type { MarkdownVFile } from './types.js';
+
+export function rehypeImages(imageService: any, assetsDir: URL | undefined) {
+	return () =>
+		function (tree: any, file: MarkdownVFile) {
+			visit(tree, (node) => {
+				if (!assetsDir) return;
+				if (node.type !== 'element') return;
+				if (node.tagName !== 'img') return;
+
+				if (node.properties?.src) {
+					if (file.dirname) {
+						if (!isRelativePath(node.properties.src) && !isAliasedPath(node.properties.src)) return;
+
+						let fileURL: URL;
+						if (isAliasedPath(node.properties.src)) {
+							fileURL = new URL(stripAliasPath(node.properties.src), assetsDir);
+						} else {
+							fileURL = pathToFileURL(pathJoin(file.dirname, node.properties.src));
+						}
+
+						const fileData = sizeOf(fileURLToPath(fileURL));
+						fileURL.searchParams.append('origWidth', fileData.width!.toString());
+						fileURL.searchParams.append('origHeight', fileData.height!.toString());
+						fileURL.searchParams.append('origFormat', fileData.type!.toString());
+
+						let options = {
+							src: {
+								src: fileURL,
+								width: fileData.width,
+								height: fileData.height,
+								format: fileData.type,
+							},
+							alt: node.properties.alt,
+						};
+
+						const imageURL = imageService.getURL(options);
+						node.properties = Object.assign(node.properties, {
+							src: imageURL,
+							...(imageService.getHTMLAttributes !== undefined
+								? imageService.getHTMLAttributes(options)
+								: {}),
+						});
+					}
+				}
+			});
+		};
+}
+
+function isAliasedPath(path: string) {
+	return path.startsWith('~/assets');
+}
+
+function stripAliasPath(path: string) {
+	return path.replace('~/assets/', '');
+}
+
+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 === '/';
+}

package/src/remark-collect-images.ts

@@ -0,0 +1,32 @@
+import type { Image } from 'mdast';
+import { visit } from 'unist-util-visit';
+import type { VFile } from 'vfile';
+
+type OptionalResolveImage = ((path: string) => Promise<string>) | undefined;
+
+export default function toRemarkCollectImages(resolveImage: OptionalResolveImage) {
+	return () =>
+		async function (tree: any, vfile: VFile) {
+			if (typeof vfile?.path !== 'string') return;
+
+			const imagePaths = new Set<string>();
+			visit(tree, 'image', function raiseError(node: Image) {
+				imagePaths.add(node.url);
+			});
+			if (imagePaths.size === 0) {
+				vfile.data.imagePaths = [];
+				return;
+			} else if (resolveImage) {
+				const mapping = new Map<string, string>();
+				for (const path of Array.from(imagePaths)) {
+					const id = await resolveImage(path);
+					mapping.set(path, id);
+				}
+				visit(tree, 'image', function raiseError(node: Image) {
+					node.url = mapping.get(node.url)!;
+				});
+			}
+
+			vfile.data.imagePaths = Array.from(imagePaths);
+		};
+}

package/src/types.ts

@@ -58,10 +58,12 @@ export interface MarkdownRenderingOptions extends AstroMarkdownOptions {
 	$?: {
 		scopedClassName: string | null;
 	};
-	/** Used to prevent relative image imports from `src/content/` */
-	contentDir: URL;
 	/** Used for frontmatter injection plugins */
 	frontmatter?: Record<string, any>;
+	experimentalAssets?: boolean;
+	imageService?: any;
+	assetsDir?: URL;
+	resolveImage?: (path: string) => Promise<string>;
 }
 
 export interface MarkdownHeading {

package/tsconfig.json

@@ -3,8 +3,8 @@
   "include": ["src"],
   "compilerOptions": {
     "allowJs": true,
-    "target": "ES2020",
-    "module": "ES2020",
+    "target": "ES2021",
+    "module": "ES2022",
     "outDir": "./dist"
   }
 }

package/dist/remark-content-rel-image-error.d.ts

@@ -1,8 +0,0 @@
-import type { VFile } from 'vfile';
-/**
- * `src/content/` does not support relative image paths.
- * This plugin throws an error if any are found
- */
-export default function toRemarkContentRelImageError({ contentDir }: {
-    contentDir: URL;
-}): () => (tree: any, vfile: VFile) => void;

package/dist/remark-content-rel-image-error.js

@@ -1,41 +0,0 @@
-import { visit } from "unist-util-visit";
-import { pathToFileURL } from "url";
-function toRemarkContentRelImageError({ contentDir }) {
-  return function remarkContentRelImageError() {
-    return (tree, vfile) => {
-      if (typeof (vfile == null ? void 0 : vfile.path) !== "string")
-        return;
-      const isContentFile = pathToFileURL(vfile.path).href.startsWith(contentDir.href);
-      if (!isContentFile)
-        return;
-      const relImagePaths = /* @__PURE__ */ new Set();
-      visit(tree, "image", function raiseError(node) {
-        if (isRelativePath(node.url)) {
-          relImagePaths.add(node.url);
-        }
-      });
-      if (relImagePaths.size === 0)
-        return;
-      const errorMessage = `Relative image paths are not supported in the content/ directory. Place local images in the public/ directory and use absolute paths (see https://docs.astro.build/en/guides/images/#in-markdown-files)
-` + [...relImagePaths].map((path) => JSON.stringify(path)).join(",\n");
-      throw errorMessage;
-    };
-  };
-}
-function isRelativePath(path) {
-  return startsWithDotDotSlash(path) || startsWithDotSlash(path);
-}
-function startsWithDotDotSlash(path) {
-  const c1 = path[0];
-  const c2 = path[1];
-  const c3 = path[2];
-  return c1 === "." && c2 === "." && c3 === "/";
-}
-function startsWithDotSlash(path) {
-  const c1 = path[0];
-  const c2 = path[1];
-  return c1 === "." && c2 === "/";
-}
-export {
-  toRemarkContentRelImageError as default
-};

package/src/remark-content-rel-image-error.ts

@@ -1,53 +0,0 @@
-import type { Image } from 'mdast';
-import { visit } from 'unist-util-visit';
-import { pathToFileURL } from 'url';
-import type { VFile } from 'vfile';
-
-/**
- * `src/content/` does not support relative image paths.
- * This plugin throws an error if any are found
- */
-export default function toRemarkContentRelImageError({ contentDir }: { contentDir: URL }) {
-	return function remarkContentRelImageError() {
-		return (tree: any, vfile: VFile) => {
-			if (typeof vfile?.path !== 'string') return;
-
-			const isContentFile = pathToFileURL(vfile.path).href.startsWith(contentDir.href);
-			if (!isContentFile) 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;
-
-			const errorMessage =
-				`Relative image paths are not supported in the content/ directory. Place local images in the public/ directory and use absolute paths (see https://docs.astro.build/en/guides/images/#in-markdown-files)\n` +
-				[...relImagePaths].map((path) => JSON.stringify(path)).join(',\n');
-
-			// Throw raw string to use `astro:markdown` default formatting
-			throw errorMessage;
-		};
-	};
-}
-
-// Following utils taken from `packages/astro/src/core/path.ts`:
-
-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 === '/';
-}