From 8ce1d883be04a2db1a9c034fac51fd00ff4191e0 Mon Sep 17 00:00:00 2001 From: Thomas Jaggi Date: Thu, 17 Nov 2022 11:51:10 +0100 Subject: [PATCH 1/6] [MDX] Support remark-rehype options from Astro Markdown config --- .changeset/nice-jokes-smile.md | 5 +++ packages/integrations/mdx/src/index.ts | 1 + .../src/pages/index.mdx | 5 +++ .../mdx-astro-markdown-remarkRehype.test.js | 34 +++++++++++++++++++ 4 files changed, 45 insertions(+) create mode 100644 .changeset/nice-jokes-smile.md create mode 100644 packages/integrations/mdx/test/fixtures/mdx-astro-markdown-remarkRehype/src/pages/index.mdx create mode 100644 packages/integrations/mdx/test/mdx-astro-markdown-remarkRehype.test.js diff --git a/.changeset/nice-jokes-smile.md b/.changeset/nice-jokes-smile.md new file mode 100644 index 000000000000..ebbb7377c8ec --- /dev/null +++ b/.changeset/nice-jokes-smile.md @@ -0,0 +1,5 @@ +--- +'@astrojs/mdx': minor +--- + +Uses remark-rehype options from astro.config.mjs diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index 4bac982af6bc..0d4177a8d973 100644 --- a/packages/integrations/mdx/src/index.ts +++ b/packages/integrations/mdx/src/index.ts @@ -71,6 +71,7 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration { // Note: disable `.md` (and other alternative extensions for markdown files like `.markdown`) support format: 'mdx', mdExtensions: [], + remarkRehypeOptions: config.markdown.remarkRehype, }; let importMetaEnv: Record = { diff --git a/packages/integrations/mdx/test/fixtures/mdx-astro-markdown-remarkRehype/src/pages/index.mdx b/packages/integrations/mdx/test/fixtures/mdx-astro-markdown-remarkRehype/src/pages/index.mdx new file mode 100644 index 000000000000..8b8f1d189be9 --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-astro-markdown-remarkRehype/src/pages/index.mdx @@ -0,0 +1,5 @@ +# Hello world + +This[^1] should be visible. + +[^1]: And there would be a footnote. \ No newline at end of file diff --git a/packages/integrations/mdx/test/mdx-astro-markdown-remarkRehype.test.js b/packages/integrations/mdx/test/mdx-astro-markdown-remarkRehype.test.js new file mode 100644 index 000000000000..04fef8df3c10 --- /dev/null +++ b/packages/integrations/mdx/test/mdx-astro-markdown-remarkRehype.test.js @@ -0,0 +1,34 @@ +import mdx from '@astrojs/mdx'; + +import { expect } from 'chai'; +import { parseHTML } from 'linkedom'; +import { loadFixture } from '../../../astro/test/test-utils.js'; + +describe('MDX with Astro Markdown remark-rehype config', () => { + let fixture; + + before(async () => { + fixture = await loadFixture({ + root: new URL('./fixtures/mdx-astro-markdown-remarkRehype/', import.meta.url), + integrations: [mdx()], + markdown: { + remarkRehype: { + footnoteLabel: 'Catatan kaki', + footnoteBackLabel: 'Kembali ke konten', + }, + }, + }); + + await fixture.build(); + }); + + it('Renders footnotes with values from the configuration', async () => { + const html = await fixture.readFile('/index.html'); + const { document } = parseHTML(html); + + expect(document.querySelector('#footnote-label').textContent).to.equal('Catatan kaki'); + expect(document.querySelector('.data-footnote-backref').getAttribute('aria-label')).to.equal( + 'Kembali ke konten' + ); + }); +}); From 470883946f9053e5df28477da0e7ae98be64d5d6 Mon Sep 17 00:00:00 2001 From: Thomas Jaggi Date: Fri, 18 Nov 2022 00:22:55 +0100 Subject: [PATCH 2/6] [MDX] Add remarkRehype to MdxOptions, extend with default markdown config --- packages/integrations/mdx/package.json | 1 + packages/integrations/mdx/src/index.ts | 13 ++++++++++++- pnpm-lock.yaml | 9 ++------- 3 files changed, 15 insertions(+), 8 deletions(-) diff --git a/packages/integrations/mdx/package.json b/packages/integrations/mdx/package.json index 41ff139ce095..152f0746612d 100644 --- a/packages/integrations/mdx/package.json +++ b/packages/integrations/mdx/package.json @@ -63,6 +63,7 @@ "mocha": "^9.2.2", "reading-time": "^1.5.0", "rehype-pretty-code": "^0.4.0", + "remark-rehype": "^10.1.0", "remark-shiki-twoslash": "^3.1.0", "remark-toc": "^8.0.1", "vite": "^3.0.0" diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index 0d4177a8d973..b97c112a7b51 100644 --- a/packages/integrations/mdx/src/index.ts +++ b/packages/integrations/mdx/src/index.ts @@ -1,3 +1,4 @@ +import type { Options as RemarkRehypeOptions } from 'remark-rehype'; import { compile as mdxCompile } from '@mdx-js/mdx'; import { PluggableList } from '@mdx-js/mdx/lib/core.js'; import mdxPlugin, { Options as MdxRollupPluginOptions } from '@mdx-js/rollup'; @@ -33,6 +34,7 @@ export type MdxOptions = { * - false - do not inherit any plugins */ extendPlugins?: 'markdown' | 'astroDefaults' | false; + remarkRehype?: RemarkRehypeOptions; }; export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration { @@ -62,6 +64,15 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration { console.info(`See "extendPlugins" option to configure this behavior.`); } + let remarkRehypeOptions = mdxOptions.remarkRehype; + + if (mdxOptions.extendPlugins === 'markdown') { + remarkRehypeOptions = { + ...remarkRehypeOptions, + ...config.markdown.remarkRehype, + }; + } + const mdxPluginOpts: MdxRollupPluginOptions = { remarkPlugins: await getRemarkPlugins(mdxOptions, config), rehypePlugins: getRehypePlugins(mdxOptions, config), @@ -71,7 +82,7 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration { // Note: disable `.md` (and other alternative extensions for markdown files like `.markdown`) support format: 'mdx', mdExtensions: [], - remarkRehypeOptions: config.markdown.remarkRehype, + remarkRehypeOptions, }; let importMetaEnv: Record = { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e577bedc0c80..620c820dcb34 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2804,6 +2804,7 @@ importers: rehype-raw: ^6.1.1 remark-frontmatter: ^4.0.1 remark-gfm: ^3.0.1 + remark-rehype: ^10.1.0 remark-shiki-twoslash: ^3.1.0 remark-smartypants: ^2.0.0 remark-toc: ^8.0.1 @@ -2844,6 +2845,7 @@ importers: mocha: 9.2.2 reading-time: 1.5.0 rehype-pretty-code: 0.4.0_shiki@0.11.1 + remark-rehype: 10.1.0 remark-shiki-twoslash: 3.1.0 remark-toc: 8.0.1 vite: 3.2.3 @@ -14160,7 +14162,6 @@ packages: '@types/mdast': 3.0.10 '@types/unist': 2.0.6 unist-util-visit: 4.1.1 - dev: false /mdast-util-find-and-replace/2.2.1: resolution: {integrity: sha512-SobxkQXFAdd4b5WmEakmkVoh18icjQRxGy5OWTCzgsLRm1Fu/KCtwD1HIQSsmq5ZRjVH0Ehwg6/Fn3xIUk+nKw==} @@ -14320,7 +14321,6 @@ packages: unist-util-generated: 2.0.0 unist-util-position: 4.0.3 unist-util-visit: 4.1.1 - dev: false /mdast-util-to-markdown/1.3.0: resolution: {integrity: sha512-6tUSs4r+KK4JGTTiQ7FfHmVOaDrLQJPmpjD6wPMlHGUVXoG9Vjc3jIeP+uyBWRf8clwB2blM+W7+KrlMYQnftA==} @@ -16371,7 +16371,6 @@ packages: '@types/mdast': 3.0.10 mdast-util-to-hast: 12.2.4 unified: 10.1.2 - dev: false /remark-shiki-twoslash/3.1.0: resolution: {integrity: sha512-6LqSqVtHQR4S0DKfdQ2/ePn9loTKUtpyopYvwk8johjDTeUW5MkaLQuZHlWNkkST/4aMbz6aTkstIcwfwcHpXg==} @@ -17436,7 +17435,6 @@ packages: /trim-lines/3.0.1: resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==} - dev: false /trim-newlines/3.0.1: resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==} @@ -17792,11 +17790,9 @@ packages: resolution: {integrity: sha512-GFxmfEAa0vi9i5sd0R2kcrI9ks0r82NasRq5QHh2ysGngrc6GiqD5CDf1FjPenY4vApmFASBIIlk/jj5J5YbmQ==} dependencies: '@types/unist': 2.0.6 - dev: false /unist-util-generated/2.0.0: resolution: {integrity: sha512-TiWE6DVtVe7Ye2QxOVW9kqybs6cZexNwTwSMVgkfjEReqy/xwGpAXb99OxktoWwmL+Z+Epb0Dn8/GNDYP1wnUw==} - dev: false /unist-util-is/3.0.0: resolution: {integrity: sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==} @@ -17831,7 +17827,6 @@ packages: resolution: {integrity: sha512-p/5EMGIa1qwbXjA+QgcBXaPWjSnZfQ2Sc3yBEEfgPwsEmJd8Qh+DSk3LGnmOM4S1bY2C0AjmMnB8RuEYxpPwXQ==} dependencies: '@types/unist': 2.0.6 - dev: false /unist-util-remove-position/4.0.1: resolution: {integrity: sha512-0yDkppiIhDlPrfHELgB+NLQD5mfjup3a8UYclHruTJWmY74je8g+CIFr79x5f6AkmzSwlvKLbs63hC0meOMowQ==} From 42aaa5e895de6ab16272a33f336aff3635dffbe8 Mon Sep 17 00:00:00 2001 From: Thomas Jaggi Date: Fri, 18 Nov 2022 00:29:11 +0100 Subject: [PATCH 3/6] [MDX] Add remarkRehype to README --- packages/integrations/mdx/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md index ade680fbd8c7..88fc344fde0e 100644 --- a/packages/integrations/mdx/README.md +++ b/packages/integrations/mdx/README.md @@ -518,6 +518,12 @@ These are plugins that modify the output [estree](https://github.com/estree/estr We suggest [using AST Explorer](https://astexplorer.net/) to play with estree outputs, and trying [`estree-util-visit`](https://unifiedjs.com/explore/package/estree-util-visit/) for searching across JavaScript nodes. +### remarkRehype + +Options for `remarkRehype`. See [markdown.remarkRehype](https://docs.astro.build/en/reference/configuration-reference/#markdownremarkrehype). + +When `extendPlugins` is set to `'markdown'` (default), this config is extended with `remarkRehype` from Astro's default markdown config. + ## Examples - The [Astro MDX example](https://github.com/withastro/astro/tree/latest/examples/with-mdx) shows how to use MDX files in your Astro project. From 359d944bd2eee2baf976725df626df4d5fa85895 Mon Sep 17 00:00:00 2001 From: Thomas Jaggi Date: Fri, 18 Nov 2022 07:44:27 +0100 Subject: [PATCH 4/6] [MDX] Fix remarkRehype inheritance, add tests --- packages/integrations/mdx/src/index.ts | 2 +- .../mdx-astro-markdown-remarkRehype.test.js | 57 +++++++++++++++++-- 2 files changed, 53 insertions(+), 6 deletions(-) diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index b97c112a7b51..33286b2e2799 100644 --- a/packages/integrations/mdx/src/index.ts +++ b/packages/integrations/mdx/src/index.ts @@ -68,8 +68,8 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration { if (mdxOptions.extendPlugins === 'markdown') { remarkRehypeOptions = { - ...remarkRehypeOptions, ...config.markdown.remarkRehype, + ...remarkRehypeOptions, }; } diff --git a/packages/integrations/mdx/test/mdx-astro-markdown-remarkRehype.test.js b/packages/integrations/mdx/test/mdx-astro-markdown-remarkRehype.test.js index 04fef8df3c10..778849207d6d 100644 --- a/packages/integrations/mdx/test/mdx-astro-markdown-remarkRehype.test.js +++ b/packages/integrations/mdx/test/mdx-astro-markdown-remarkRehype.test.js @@ -5,10 +5,8 @@ import { parseHTML } from 'linkedom'; import { loadFixture } from '../../../astro/test/test-utils.js'; describe('MDX with Astro Markdown remark-rehype config', () => { - let fixture; - - before(async () => { - fixture = await loadFixture({ + it('Renders footnotes with values from the default configuration', async () => { + const fixture = await loadFixture({ root: new URL('./fixtures/mdx-astro-markdown-remarkRehype/', import.meta.url), integrations: [mdx()], markdown: { @@ -20,9 +18,32 @@ describe('MDX with Astro Markdown remark-rehype config', () => { }); await fixture.build(); + const html = await fixture.readFile('/index.html'); + const { document } = parseHTML(html); + + expect(document.querySelector('#footnote-label').textContent).to.equal('Catatan kaki'); + expect(document.querySelector('.data-footnote-backref').getAttribute('aria-label')).to.equal( + 'Kembali ke konten' + ); }); - it('Renders footnotes with values from the configuration', async () => { + it('Renders footnotes with values from custom configuration extending the default', async () => { + const fixture = await loadFixture({ + root: new URL('./fixtures/mdx-astro-markdown-remarkRehype/', import.meta.url), + integrations: [mdx({ + remarkRehype: { + footnoteLabel: 'Catatan kaki', + footnoteBackLabel: 'Kembali ke konten', + }, + })], + markdown: { + remarkRehype: { + footnoteBackLabel: 'Replace me', + }, + }, + }); + + await fixture.build(); const html = await fixture.readFile('/index.html'); const { document } = parseHTML(html); @@ -31,4 +52,30 @@ describe('MDX with Astro Markdown remark-rehype config', () => { 'Kembali ke konten' ); }); + + it('Renders footnotes with values from custom configuration without extending the default', async () => { + const fixture = await loadFixture({ + root: new URL('./fixtures/mdx-astro-markdown-remarkRehype/', import.meta.url), + integrations: [mdx({ + extendPlugins: 'astroDefaults', + remarkRehype: { + footnoteLabel: 'Catatan kaki', + }, + })], + markdown: { + remarkRehype: { + footnoteBackLabel: 'Kembali ke konten', + }, + }, + }); + + await fixture.build(); + const html = await fixture.readFile('/index.html'); + const { document } = parseHTML(html); + + expect(document.querySelector('#footnote-label').textContent).to.equal('Catatan kaki'); + expect(document.querySelector('.data-footnote-backref').getAttribute('aria-label')).to.equal( + 'Back to content' + ); + }); }); From 3ae2d8d421389513d97613d036f9c034b05947ca Mon Sep 17 00:00:00 2001 From: Thomas Jaggi Date: Fri, 18 Nov 2022 07:56:35 +0100 Subject: [PATCH 5/6] [MDX] Update remarkRehype docs in README Co-authored-by: Sarah Rainsberger --- packages/integrations/mdx/README.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md index 88fc344fde0e..87514489bdbf 100644 --- a/packages/integrations/mdx/README.md +++ b/packages/integrations/mdx/README.md @@ -520,9 +520,20 @@ We suggest [using AST Explorer](https://astexplorer.net/) to play with estree ou ### remarkRehype -Options for `remarkRehype`. See [markdown.remarkRehype](https://docs.astro.build/en/reference/configuration-reference/#markdownremarkrehype). +Markdown content is transformed into HTML through remark-rehype which has [a number of options](https://github.com/remarkjs/remark-rehype#options). -When `extendPlugins` is set to `'markdown'` (default), this config is extended with `remarkRehype` from Astro's default markdown config. +You can use remark-rehype options in your MDX integration config file like so: + +```js +// astro.config.mjs +export default { + integrations: [mdx({ + remarkRehype: { + footnoteLabel: 'Catatan kaki', + footnoteBackLabel: 'Kembali ke konten', + }, + })], +}; ## Examples From 4151592b579813d3443714008001c54911abf440 Mon Sep 17 00:00:00 2001 From: Thomas Jaggi Date: Fri, 18 Nov 2022 07:59:42 +0100 Subject: [PATCH 6/6] [MDX] Fix remarkRehype docs --- packages/integrations/mdx/README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md index 87514489bdbf..9b05cb76b033 100644 --- a/packages/integrations/mdx/README.md +++ b/packages/integrations/mdx/README.md @@ -534,6 +534,9 @@ export default { }, })], }; +``` + +This inherits the configuration of `markdown.remarkRehype`. This behavior can be changed by configuring `extendPlugins`. ## Examples