Frontmatter injection for MD and MDX (#4176)

* feat: inject vfile data as exports

* feat: add vfile to renderMarkdown output

* feat: add safe astroExports parser to utils

* refactor: expose vite-plugin-utils on astro package

* feat: handle astroExports in mdx

* deps: vfile

* chore: lockfile

* test: astroExports in mdx

* refactor: merge plugin exports into forntmatter

* refactor: astroExports -> astro.frontmatter

* refactor: md astroExports -> astro.frontmatter

* feat: astro.frontmatter vite-plugin-markdown

* chore: remove unused import

* fix: inline safelyGetAstroData in MDX integration

* chore: check that frontmatter export is valid export name

* chore: error log naming

* test: mdx remark frontmatter injection

* fix: inconsistent shiki mod resolution

* fix: add new frontmatter and heading props

* test: remark vdata

* fix: spread astro.data.frontmatter

* test deps: mdast-util-to-string, reading-time

* fix: astro-md test package name

* test: md frontmatter injection

* fix: layouts

* deps: remove vite-plugin-utils export

* fix: package lock

* chore: remove dup import

* chore: changeset

* chore: add comment on safelyGetAstroData source

* deps: move mdast-util-to-string + reading-time to test fixture

* chore: move remark plugins to test fixture

* fix: override plugin frontmatter with user frontmatter

* test: md injected frontmatter overrides

* test: frontmatter injection overrides mdx

11 files changed, 133 insertions, 8 deletions

diff --git a/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/astro.config.mjs b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/astro.config.mjs
new file mode 100644
index 000000000..fc15686c2
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/astro.config.mjs
@@ -0,0 +1,12 @@
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import { rehypeReadingTime, remarkTitle } from './src/markdown-plugins.mjs';
+
+// https://astro.build/config
+export default defineConfig({
+  site: 'https://astro.build/',
+	integrations: [mdx({
+		remarkPlugins: [remarkTitle],
+		rehypePlugins: [rehypeReadingTime],
+	})],
+});
diff --git a/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/package.json b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/package.json
new file mode 100644
index 000000000..8affcbbf6
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@test/mdx-frontmatter-injection",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/mdx": "workspace:*",
+    "mdast-util-to-string": "^3.1.0",
+    "reading-time": "^1.5.0",
+    "unist-util-visit": "^4.1.0"
+  }
+}
diff --git a/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/markdown-plugins.mjs b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/markdown-plugins.mjs
new file mode 100644
index 000000000..c0d5f7b2e
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/markdown-plugins.mjs
@@ -0,0 +1,20 @@
+import getReadingTime from 'reading-time';
+import { toString } from 'mdast-util-to-string';
+import { visit } from 'unist-util-visit';
+
+export function rehypeReadingTime() {
+	return function (tree, { data }) {
+		const readingTime = getReadingTime(toString(tree));
+		data.astro.frontmatter.injectedReadingTime = readingTime;
+	};
+}
+
+export function remarkTitle() {
+	return function (tree, { data }) {
+		visit(tree, ['heading'], (node) => {
+			if (node.depth === 1) {
+				data.astro.frontmatter.title = toString(node.children);
+			}
+		});
+	};
+}
diff --git a/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/glob.json.js b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/glob.json.js
new file mode 100644
index 000000000..b73cd234d
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/glob.json.js
@@ -0,0 +1,6 @@
+export async function get() {
+	const docs = await import.meta.glob('./*.mdx', { eager: true });
+	return {
+		body: JSON.stringify(Object.values(docs).map(doc => doc.frontmatter)),
+	}
+}
diff --git a/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/page-1.mdx b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/page-1.mdx
new file mode 100644
index 000000000..2fcd655ec
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/page-1.mdx
@@ -0,0 +1,3 @@
+# Page 1
+
+Look at that!
diff --git a/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/page-2.mdx b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/page-2.mdx
new file mode 100644
index 000000000..4a6b9addd
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/page-2.mdx
@@ -0,0 +1,19 @@
+# Page 2
+
+## Table of contents
+
+## Section 1
+
+Some text!
+
+### Subsection 1
+
+Some subsection test!
+
+### Subsection 2
+
+Oh cool, more text!
+
+## Section 2
+
+More content
diff --git a/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/with-overrides.mdx b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/with-overrides.mdx
new file mode 100644
index 000000000..4e11c1c37
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-frontmatter-injection/src/pages/with-overrides.mdx
@@ -0,0 +1,7 @@
+---
+title: 'Overridden title'
+injectedReadingTime: 
+  text: '1000 min read'
+---
+
+# Working!
diff --git a/packages/integrations/mdx/test/fixtures/mdx-rehype-plugins/src/pages/reading-time.json.js b/packages/integrations/mdx/test/fixtures/mdx-rehype-plugins/src/pages/reading-time.json.js
index 60f7cb1be..e31c57983 100644
--- a/packages/integrations/mdx/test/fixtures/mdx-rehype-plugins/src/pages/reading-time.json.js
+++ b/packages/integrations/mdx/test/fixtures/mdx-rehype-plugins/src/pages/reading-time.json.js
@@ -1,7 +1,7 @@
-import { readingTime } from './space-ipsum.mdx';
+import * as exps from './space-ipsum.mdx';
 
 export function get() {
 	return {
-		body: JSON.stringify(readingTime),
+		body: JSON.stringify(exps),
 	}
 }
diff --git a/packages/integrations/mdx/test/fixtures/mdx-remark-plugins/src/pages/headings-glob.json.js b/packages/integrations/mdx/test/fixtures/mdx-remark-plugins/src/pages/headings-glob.json.js
new file mode 100644
index 000000000..b73cd234d
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-remark-plugins/src/pages/headings-glob.json.js
@@ -0,0 +1,6 @@
+export async function get() {
+	const docs = await import.meta.glob('./*.mdx', { eager: true });
+	return {
+		body: JSON.stringify(Object.values(docs).map(doc => doc.frontmatter)),
+	}
+}
diff --git a/packages/integrations/mdx/test/mdx-frontmatter-injection.test.js b/packages/integrations/mdx/test/mdx-frontmatter-injection.test.js
new file mode 100644
index 000000000..ae1d485bb
--- /dev/null
+++ b/packages/integrations/mdx/test/mdx-frontmatter-injection.test.js
@@ -0,0 +1,40 @@
+import { expect } from 'chai';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+const FIXTURE_ROOT = new URL('./fixtures/mdx-frontmatter-injection/', import.meta.url);
+
+describe('MDX frontmatter injection', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: FIXTURE_ROOT,
+		});
+		await fixture.build();
+	});
+
+	it('remark supports custom vfile data - get title', async () => {
+		const frontmatterByPage = JSON.parse(await fixture.readFile('/glob.json'));
+		const titles = frontmatterByPage.map((frontmatter = {}) => frontmatter.title);
+		expect(titles).to.contain('Page 1');
+		expect(titles).to.contain('Page 2');
+	});
+
+	it('rehype supports custom vfile data - reading time', async () => {
+		const frontmatterByPage = JSON.parse(await fixture.readFile('/glob.json'));
+		const readingTimes = frontmatterByPage.map((frontmatter = {}) => frontmatter.injectedReadingTime);
+		expect(readingTimes.length).to.be.greaterThan(0);
+		for (let readingTime of readingTimes) {
+			expect(readingTime).to.not.be.null;
+			expect(readingTime.text).match(/^\d+ min read/);
+		}
+	});
+
+	it('overrides injected frontmatter with user frontmatter', async () => {
+		const frontmatterByPage = JSON.parse(await fixture.readFile('/glob.json'));
+		const readingTimes = frontmatterByPage.map((frontmatter = {}) => frontmatter.injectedReadingTime?.text);
+		const titles = frontmatterByPage.map((frontmatter = {}) => frontmatter.title);
+		expect(titles).to.contain('Overridden title');
+		expect(readingTimes).to.contain('1000 min read');
+	});
+});
diff --git a/packages/integrations/mdx/test/mdx-rehype-plugins.test.js b/packages/integrations/mdx/test/mdx-rehype-plugins.test.js
index d8761b9fb..d60c09a07 100644
--- a/packages/integrations/mdx/test/mdx-rehype-plugins.test.js
+++ b/packages/integrations/mdx/test/mdx-rehype-plugins.test.js
@@ -1,15 +1,15 @@
 import mdx from '@astrojs/mdx';
-import { jsToTreeNode } from '../dist/utils.js';
 
-import { expect } from 'chai';
-import { parseHTML } from 'linkedom';
 import getReadingTime from 'reading-time';
 import { toString } from 'mdast-util-to-string';
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import { jsToTreeNode } from '../dist/utils.js';
 
 import { loadFixture } from '../../../astro/test/test-utils.js';
 
-export function rehypeReadingTime() {
-	return function (tree) {
+function rehypeReadingTime() {
+	return function (tree, { data }) {
 		const readingTime = getReadingTime(toString(tree));
 		tree.children.unshift(
 			jsToTreeNode(`export const readingTime = ${JSON.stringify(readingTime)}`)
@@ -46,7 +46,7 @@ describe('MDX rehype plugins', () => {
 		});
 
 		it('supports custom rehype plugins - reading time', async () => {
-			const readingTime = JSON.parse(await fixture.readFile('/reading-time.json'));
+			const { readingTime } = JSON.parse(await fixture.readFile('/reading-time.json'));
 
 			expect(readingTime).to.not.be.null;
 			expect(readingTime.text).to.match(/^\d+ min read/);