make Remark rehype options available in astro config (#4138)

* make remark-rehype config available in astro.config.mjs

* add test for remark-rehype config, checks that footnotes can be translated

* update lockfile to take the added test into account

* omit handlers and unkownHandler from the RemarkRehype type

* define RemarkRehype with proper references to the handler and handlers types

* formatting

* changeset

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
Co-authored-by: Matthew Phillips <matthew@skypack.dev>

.changeset/giant-pandas-roll.md

@@ -0,0 +1,6 @@
+---
+'astro': minor
+'@astrojs/markdown-remark': minor
+---
+
+Makes remark-rehype options available in astro.config.mjs

packages/astro/src/@types/astro.ts

@@ -4,6 +4,7 @@ import type {
 	MarkdownRenderingResult,
 	RehypePlugins,
 	RemarkPlugins,
+	RemarkRehype,
 	ShikiConfig,
 } from '@astrojs/markdown-remark';
 import type * as babel from '@babel/core';
@@ -680,6 +681,23 @@ export interface AstroUserConfig {
 		 * ```
 		 */
 		rehypePlugins?: RehypePlugins;
+		/**
+		 * @docs
+		 * @name markdown.remarkRehype
+		 * @type {RemarkRehype}
+		 * @description
+		 * Pass options to [remark-rehype](https://github.com/remarkjs/remark-rehype#api) .
+		 *
+		 * ```js
+		 * {
+		 *   markdown: {
+		 *     // Example: Translate the footnotes text to another language, here are the default English values
+		 *     remarkRehype: { footnoteLabel: "Footnotes", footnoteBackLabel: "Back to content"},
+		 *   },
+		 * };
+		 * ```
+		 */
+		remarkRehype?: RemarkRehype;
 	};
 
 	/**

packages/astro/src/core/config.ts

@@ -1,4 +1,4 @@
-import type { RehypePlugin, RemarkPlugin } from '@astrojs/markdown-remark';
+import type { RehypePlugin, RemarkPlugin, RemarkRehype } from '@astrojs/markdown-remark';
 import type * as Postcss from 'postcss';
 import type { ILanguageRegistration, IThemeRegistration, Theme } from 'shiki';
 import type { Arguments as Flags } from 'yargs-parser';
@@ -51,6 +51,7 @@ const ASTRO_CONFIG_DEFAULTS: AstroUserConfig & any = {
 		},
 		remarkPlugins: [],
 		rehypePlugins: [],
+		remarkRehype: {},
 	},
 	vite: {},
 	legacy: {
@@ -214,6 +215,10 @@ export const AstroConfigSchema = z.object({
 				])
 				.array()
 				.default(ASTRO_CONFIG_DEFAULTS.markdown.rehypePlugins),
+			remarkRehype: z
+				.custom<RemarkRehype>((data) => data instanceof Object && !Array.isArray(data))
+				.optional()
+				.default(ASTRO_CONFIG_DEFAULTS.markdown.remarkRehype),
 		})
 		.default({}),
 	vite: z

packages/astro/test/astro-markdown-remarkRehype.test.js

@@ -0,0 +1,43 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('Astro Markdown without remark-rehype config', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/astro-markdown-remarkRehype/',
+		});
+		await fixture.build();
+	});
+	it('Renders footnotes with default English labels', async () => {
+		const html = await fixture.readFile('/index.html');
+		const $ = cheerio.load(html);
+		expect($('#footnote-label').text()).to.equal('Footnotes');
+		expect($('.data-footnote-backref').first().attr('aria-label')).to.equal('Back to content');
+	});
+});
+
+describe('Astro Markdown with remark-rehype config', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/astro-markdown-remarkRehype/',
+			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 $ = cheerio.load(html);
+		expect($('#footnote-label').text()).to.equal('Catatan kaki');
+		expect($('.data-footnote-backref').first().attr('aria-label')).to.equal('Kembali ke konten');
+	});
+});

packages/astro/test/fixtures/astro-markdown-remarkRehype/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@test/astro-markdown-remarkRehype",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}

packages/astro/test/fixtures/astro-markdown-remarkRehype/src/pages/index.md

@@ -0,0 +1,9 @@
+---
+foo: bar
+---
+
+# Hello world
+
+This[^1] should be visible.
+
+[^1]: And there would be a footnote.

packages/markdown/remark/src/index.ts

@@ -38,6 +38,7 @@ export async function renderMarkdown(
 		shikiConfig = {},
 		remarkPlugins = [],
 		rehypePlugins = [],
+		remarkRehype = {},
 		isAstroFlavoredMd = false,
 	} = opts;
 	const input = new VFile({ value: content, path: fileURL });
@@ -85,6 +86,7 @@ export async function renderMarkdown(
 							'mdxTextExpression',
 					  ]
 					: [],
+				...remarkRehype,
 			},
 		],
 	]);

packages/markdown/remark/src/types.ts

@@ -1,6 +1,11 @@
 import type * as hast from 'hast';
 import type * as mdast from 'mdast';
 import type { ILanguageRegistration, IThemeRegistration, Theme } from 'shiki';
+import type {
+	Options as RemarkRehypeOptions,
+	all as Handlers,
+	one as Handler,
+} from 'remark-rehype';
 import type * as unified from 'unified';
 import type { VFile } from 'vfile';
 
@@ -20,6 +25,10 @@ export type RehypePlugin<PluginParameters extends any[] = any[]> = unified.Plugi
 
 export type RehypePlugins = (string | [string, any] | RehypePlugin | [RehypePlugin, any])[];
 
+export type RemarkRehype = Omit<RemarkRehypeOptions, 'handlers' | 'unknownHandler'> & {
+	handlers: typeof Handlers;
+} & { handler: typeof Handler };
+
 export interface ShikiConfig {
 	langs?: ILanguageRegistration[];
 	theme?: Theme | IThemeRegistration;
@@ -33,6 +42,7 @@ export interface AstroMarkdownOptions {
 	shikiConfig?: ShikiConfig;
 	remarkPlugins?: RemarkPlugins;
 	rehypePlugins?: RehypePlugins;
+	remarkRehype?: RemarkRehype;
 }
 
 export interface MarkdownRenderingOptions extends AstroMarkdownOptions {