diff options
| -rw-r--r-- | .changeset/curly-badgers-boil.md | 16 | ||||
| -rw-r--r-- | packages/integrations/mdx/src/index.ts | 7 | ||||
| -rw-r--r-- | packages/integrations/mdx/src/remark-images-to-component.ts | 7 | ||||
| -rw-r--r-- | packages/integrations/mdx/test/fixtures/mdx-images/src/pages/houston.png | bin | 0 -> 160915 bytes | |||
| -rw-r--r-- | packages/integrations/mdx/test/fixtures/mdx-images/src/pages/index.mdx | 6 | ||||
| -rw-r--r-- | packages/integrations/mdx/test/fixtures/mdx-images/src/pages/relative/houston.png | bin | 0 -> 160915 bytes | |||
| -rw-r--r-- | packages/integrations/mdx/test/mdx-images.test.js | 6 |
7 files changed, 39 insertions, 3 deletions
diff --git a/.changeset/curly-badgers-boil.md b/.changeset/curly-badgers-boil.md new file mode 100644 index 000000000..f7fc51ecb --- /dev/null +++ b/.changeset/curly-badgers-boil.md @@ -0,0 +1,16 @@ +--- +"@astrojs/mdx": patch +--- + +Fixes an issue where images in MDX required a relative specifier (e.g. `./`) + +Now, you can use the standard `` syntax in MDX files for images colocated in the same folder: no relative specifier required! + +There is no need to update your project; your existing images will still continue to work. However, you may wish to remove any relative specifiers from these MDX images as they are no longer necessary: + +```diff +-  ++  +<!-- This dog lives in the same folder as my article! --> +``` + diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index bdf1c9062..db7f64134 100644 --- a/packages/integrations/mdx/src/index.ts +++ b/packages/integrations/mdx/src/index.ts @@ -106,6 +106,13 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI } } }, + async resolveId(source, importer, options) { + if (importer?.endsWith('.mdx') && source[0] !== '/') { + let resolved = await this.resolve(source, importer, options); + if (!resolved) resolved = await this.resolve('./' + source, importer, options); + return resolved; + } + }, // Override transform to alter code before MDX compilation // ex. inject layouts async transform(_, id) { diff --git a/packages/integrations/mdx/src/remark-images-to-component.ts b/packages/integrations/mdx/src/remark-images-to-component.ts index 4ab6a0422..46d04d443 100644 --- a/packages/integrations/mdx/src/remark-images-to-component.ts +++ b/packages/integrations/mdx/src/remark-images-to-component.ts @@ -24,7 +24,6 @@ export function remarkImageToComponent() { // If we haven't already imported this image, add an import statement if (!importName) { importName = `__${importedImages.size}_${node.url.replace(/\W/g, '_')}__`; - importsStatements.push({ type: 'mdxjsEsm', value: '', @@ -35,7 +34,11 @@ export function remarkImageToComponent() { body: [ { type: 'ImportDeclaration', - source: { type: 'Literal', value: node.url, raw: JSON.stringify(node.url) }, + source: { + type: 'Literal', + value: node.url, + raw: JSON.stringify(node.url), + }, specifiers: [ { type: 'ImportDefaultSpecifier', diff --git a/packages/integrations/mdx/test/fixtures/mdx-images/src/pages/houston.png b/packages/integrations/mdx/test/fixtures/mdx-images/src/pages/houston.png Binary files differnew file mode 100644 index 000000000..345ed0e9d --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-images/src/pages/houston.png diff --git a/packages/integrations/mdx/test/fixtures/mdx-images/src/pages/index.mdx b/packages/integrations/mdx/test/fixtures/mdx-images/src/pages/index.mdx index b34d50b7c..de126a6a0 100644 --- a/packages/integrations/mdx/test/fixtures/mdx-images/src/pages/index.mdx +++ b/packages/integrations/mdx/test/fixtures/mdx-images/src/pages/index.mdx @@ -9,3 +9,9 @@ Image with a title: Image with spaces in the path:  + +Image using a relative path with no slashes: + + +Image using a relative path with nested directory: + diff --git a/packages/integrations/mdx/test/fixtures/mdx-images/src/pages/relative/houston.png b/packages/integrations/mdx/test/fixtures/mdx-images/src/pages/relative/houston.png Binary files differnew file mode 100644 index 000000000..345ed0e9d --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-images/src/pages/relative/houston.png diff --git a/packages/integrations/mdx/test/mdx-images.test.js b/packages/integrations/mdx/test/mdx-images.test.js index d4af271ec..3d544f855 100644 --- a/packages/integrations/mdx/test/mdx-images.test.js +++ b/packages/integrations/mdx/test/mdx-images.test.js @@ -29,7 +29,7 @@ describe('MDX Page', () => { const { document } = parseHTML(html); const imgs = document.getElementsByTagName('img'); - assert.equal(imgs.length, 4); + assert.equal(imgs.length, 6); // Image using a relative path assert.equal(imgs.item(0).src.startsWith('/_image'), true); // Image using an aliased path @@ -38,6 +38,10 @@ describe('MDX Page', () => { assert.equal(imgs.item(2).title, 'Houston title'); // Image with spaces in the path assert.equal(imgs.item(3).src.startsWith('/_image'), true); + // Image using a relative path with no slashes + assert.equal(imgs.item(4).src.startsWith('/_image'), true); + // Image using a relative path with nested directory + assert.equal(imgs.item(5).src.startsWith('/_image'), true); }); for (const route of imageTestRoutes) { |
