summaryrefslogtreecommitdiff
path: root/packages/integrations/mdx/src
diff options
context:
space:
mode:
Diffstat (limited to 'packages/integrations/mdx/src')
-rw-r--r--packages/integrations/mdx/src/plugins.ts38
-rw-r--r--packages/integrations/mdx/src/utils.ts19
2 files changed, 56 insertions, 1 deletions
diff --git a/packages/integrations/mdx/src/plugins.ts b/packages/integrations/mdx/src/plugins.ts
index d46ab6cd4..a93db383b 100644
--- a/packages/integrations/mdx/src/plugins.ts
+++ b/packages/integrations/mdx/src/plugins.ts
@@ -1,9 +1,11 @@
import { rehypeHeadingIds } from '@astrojs/markdown-remark';
+import type { Image } from 'mdast';
import { nodeTypes } from '@mdx-js/mdx';
import type { PluggableList } from '@mdx-js/mdx/lib/core.js';
import type { Options as MdxRollupPluginOptions } from '@mdx-js/rollup';
import type { AstroConfig, MarkdownAstroData } from 'astro';
import type { Literal, MemberExpression } from 'estree';
+import { visit } from 'unist-util-visit';
import { visit as estreeVisit } from 'estree-util-visit';
import { bold, yellow } from 'kleur/colors';
import rehypeRaw from 'rehype-raw';
@@ -15,7 +17,8 @@ import { rehypeInjectHeadingsExport } from './rehype-collect-headings.js';
import rehypeMetaString from './rehype-meta-string.js';
import remarkPrism from './remark-prism.js';
import remarkShiki from './remark-shiki.js';
-import { jsToTreeNode } from './utils.js';
+import { jsToTreeNode, isRelativePath } from './utils.js';
+import { pathToFileURL } from 'node:url';
export function recmaInjectImportMetaEnvPlugin({
importMetaEnv,
@@ -113,6 +116,34 @@ export function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any
};
}
+/**
+ * `src/content/` does not support relative image paths.
+ * This plugin throws an error if any are found
+ */
+function toRemarkContentRelImageError({ srcDir }: { srcDir: URL }) {
+ const contentDir = new URL('content/', srcDir);
+ return function remarkContentRelImageError() {
+ return (tree: any, vfile: VFile) => {
+ 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 new Error(errorMessage);
+ };
+ };
+}
+
const DEFAULT_REMARK_PLUGINS: PluggableList = [remarkGfm, remarkSmartypants];
const DEFAULT_REHYPE_PLUGINS: PluggableList = [];
@@ -146,6 +177,11 @@ export async function getRemarkPlugins(
}
remarkPlugins = [...remarkPlugins, ...(mdxOptions.remarkPlugins ?? [])];
+
+ // Apply last in case user plugins resolve relative image paths
+ if (config.experimental.contentCollections) {
+ remarkPlugins.push(toRemarkContentRelImageError(config));
+ }
return remarkPlugins;
}
diff --git a/packages/integrations/mdx/src/utils.ts b/packages/integrations/mdx/src/utils.ts
index 60a50c85a..e803dc300 100644
--- a/packages/integrations/mdx/src/utils.ts
+++ b/packages/integrations/mdx/src/utils.ts
@@ -95,3 +95,22 @@ export function handleExtendsNotSupported(pluginConfig: any) {
);
}
}
+
+// Following utils taken from `packages/astro/src/core/path.ts`:
+
+export 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 === '/';
+}