@astrojs/mdx 0.11.6 → 0.12.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 788a04a94f8adf80
-@astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.11.6 build /home/runner/work/astro/astro/packages/integrations/mdx
-@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
-@astrojs/mdx:build: 
+@astrojs/mdx:build: cache hit, replaying output dac9ca86e0959274
+@astrojs/mdx:build: 
+@astrojs/mdx:build: > @astrojs/mdx@0.12.0 build /home/runner/work/astro/astro/packages/integrations/mdx
+@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
+@astrojs/mdx:build: 

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @astrojs/mdx
 
+## 0.12.0
+
+### Minor Changes
+
+- [#5427](https://github.com/withastro/astro/pull/5427) [`2a1c085b1`](https://github.com/withastro/astro/commit/2a1c085b199f24e34424ec8c19041c03602c53c5) Thanks [@backflip](https://github.com/backflip)! - Uses remark-rehype options from astro.config.mjs
+
+### Patch Changes
+
+- [#5448](https://github.com/withastro/astro/pull/5448) [`ef2ffc7ae`](https://github.com/withastro/astro/commit/ef2ffc7ae9ff554860238ecd2fb3bf6d82b5801b) Thanks [@delucis](https://github.com/delucis)! - Fix broken link in README
+
 ## 0.11.6
 
 ### Patch Changes

package/README.md

@@ -191,7 +191,7 @@ export default {
 };
 ```
 
-…every MDX file will have `customProperty` in its frontmatter! See [our Markdown documentation](https://docs.astro.build/en/guides/markdown-content/#injecting-frontmatter) for more usage instructions and a [reading time plugin example](https://docs.astro.build/en/guides/markdown-content/#example-calculate-reading-time).
+…every MDX file will have `customProperty` in its frontmatter! See [our Markdown documentation](https://docs.astro.build/en/guides/markdown-content/#example-injecting-frontmatter) for more usage instructions and a [reading time plugin example](https://docs.astro.build/en/guides/markdown-content/#example-calculate-reading-time).
 
 ### Layouts
 Layouts can be applied [in the same way as standard Astro Markdown](https://docs.astro.build/en/guides/markdown-content/#frontmatter-layout). You can add a `layout` to [your frontmatter](#frontmatter) like so:
@@ -518,6 +518,26 @@ 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
+
+Markdown content is transformed into HTML through remark-rehype which has [a number of options](https://github.com/remarkjs/remark-rehype#options).
+
+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',
+    },
+  })],
+};
+```
+
+This inherits the configuration of `markdown.remarkRehype`. This behavior can be changed by configuring `extendPlugins`.
+
 ## 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.

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { PluggableList } from '@mdx-js/mdx/lib/core.js';
 import type { AstroIntegration } from 'astro';
+import type { Options as RemarkRehypeOptions } from 'remark-rehype';
 export declare type MdxOptions = {
     remarkPlugins?: PluggableList;
     rehypePlugins?: PluggableList;
@@ -12,5 +13,6 @@ export declare type MdxOptions = {
      * - false - do not inherit any plugins
      */
     extendPlugins?: 'markdown' | 'astroDefaults' | false;
+    remarkRehype?: RemarkRehypeOptions;
 };
 export default function mdx(mdxOptions?: MdxOptions): AstroIntegration;

package/dist/index.js

@@ -34,6 +34,13 @@ function mdx(mdxOptions = {}) {
           );
           console.info(`See "extendPlugins" option to configure this behavior.`);
         }
+        let remarkRehypeOptions = mdxOptions.remarkRehype;
+        if (mdxOptions.extendPlugins === "markdown") {
+          remarkRehypeOptions = {
+            ...config.markdown.remarkRehype,
+            ...remarkRehypeOptions
+          };
+        }
         const mdxPluginOpts = {
           remarkPlugins: await getRemarkPlugins(mdxOptions, config),
           rehypePlugins: getRehypePlugins(mdxOptions, config),
@@ -41,7 +48,8 @@ function mdx(mdxOptions = {}) {
           jsx: true,
           jsxImportSource: "astro",
           format: "mdx",
-          mdExtensions: []
+          mdExtensions: [],
+          remarkRehypeOptions
         };
         let importMetaEnv = {
           SITE: config.site

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.11.6",
+  "version": "0.12.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -46,7 +46,7 @@
     "@types/github-slugger": "^1.3.0",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "1.6.6",
+    "astro": "1.6.11",
     "astro-scripts": "0.0.9",
     "chai": "^4.3.6",
     "cheerio": "^1.0.0-rc.11",
@@ -56,6 +56,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"

package/src/index.ts

@@ -5,6 +5,7 @@ import type { AstroIntegration } from 'astro';
 import { parse as parseESM } from 'es-module-lexer';
 import { blue, bold } from 'kleur/colors';
 import fs from 'node:fs/promises';
+import type { Options as RemarkRehypeOptions } from 'remark-rehype';
 import { VFile } from 'vfile';
 import type { Plugin as VitePlugin } from 'vite';
 import {
@@ -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 = {
+						...config.markdown.remarkRehype,
+						...remarkRehypeOptions,
+					};
+				}
+
 				const mdxPluginOpts: MdxRollupPluginOptions = {
 					remarkPlugins: await getRemarkPlugins(mdxOptions, config),
 					rehypePlugins: getRehypePlugins(mdxOptions, config),
@@ -71,6 +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,
 				};
 
 				let importMetaEnv: Record<string, any> = {

package/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.

package/test/mdx-astro-markdown-remarkRehype.test.js

@@ -0,0 +1,85 @@
+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', () => {
+	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: {
+				remarkRehype: {
+					footnoteLabel: 'Catatan kaki',
+					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(
+			'Kembali ke konten'
+		);
+	});
+
+	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);
+
+		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 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'
+		);
+	});
+});