Fix MDX heading IDs generation when using a frontmatter reference (#5978)

* Fix MDX heading IDs generation when using a frontmatter reference

* Hoist safelyGetAstroData() call and add statement null check

2 files changed, 88 insertions, 0 deletions

diff --git a/packages/integrations/mdx/test/fixtures/mdx-get-headings/src/pages/test-with-frontmatter.mdx b/packages/integrations/mdx/test/fixtures/mdx-get-headings/src/pages/test-with-frontmatter.mdx
new file mode 100644
index 000000000..d40537eb8
--- /dev/null
+++ b/packages/integrations/mdx/test/fixtures/mdx-get-headings/src/pages/test-with-frontmatter.mdx
@@ -0,0 +1,45 @@
+---
+title: The Frontmatter Title
+keywords: [Keyword 1, Keyword 2, Keyword 3]
+tags:
+  - Tag 1
+  - Tag 2
+  - Tag 3
+items:
+  - value: Item 1
+  - value: Item 2
+  - value: Item 3
+nested_items:
+  nested:
+    - value: Nested Item 1
+    - value: Nested Item 2
+    - value: Nested Item 3
+---
+
+# {frontmatter.title}
+
+This ID should be the frontmatter title.
+
+## frontmatter.title
+
+The ID should not be the frontmatter title.
+
+### {frontmatter.keywords[1]}
+
+The ID should be the frontmatter keyword #2.
+
+### {frontmatter.tags[0]}
+
+The ID should be the frontmatter tag #1.
+
+#### {frontmatter.items[1].value}
+
+The ID should be the frontmatter item #2.
+
+##### {frontmatter.nested_items.nested[2].value}
+
+The ID should be the frontmatter nested item #3.
+
+###### {frontmatter.unknown}
+
+This ID should not reference the frontmatter.
diff --git a/packages/integrations/mdx/test/mdx-get-headings.test.js b/packages/integrations/mdx/test/mdx-get-headings.test.js
index 03290abc5..1b1987e77 100644
--- a/packages/integrations/mdx/test/mdx-get-headings.test.js
+++ b/packages/integrations/mdx/test/mdx-get-headings.test.js
@@ -149,3 +149,46 @@ describe('MDX heading IDs can be injected before user plugins', () => {
 		expect(h1?.id).to.equal('heading-test');
 	});
 });
+
+describe('MDX headings with frontmatter', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL('./fixtures/mdx-get-headings/', import.meta.url),
+			integrations: [mdx()],
+		});
+
+		await fixture.build();
+	});
+
+	it('adds anchor IDs to headings', async () => {
+		const html = await fixture.readFile('/test-with-frontmatter/index.html');
+		const { document } = parseHTML(html);
+
+		const h3Ids = document.querySelectorAll('h3').map((el) => el?.id);
+
+		expect(document.querySelector('h1').id).to.equal('the-frontmatter-title');
+		expect(document.querySelector('h2').id).to.equal('frontmattertitle');
+		expect(h3Ids).to.contain('keyword-2');
+		expect(h3Ids).to.contain('tag-1');
+		expect(document.querySelector('h4').id).to.equal('item-2');
+		expect(document.querySelector('h5').id).to.equal('nested-item-3');
+		expect(document.querySelector('h6').id).to.equal('frontmatterunknown');
+	});
+
+	it('generates correct getHeadings() export', async () => {
+		const { headingsByPage } = JSON.parse(await fixture.readFile('/pages.json'));
+		expect(JSON.stringify(headingsByPage['./test-with-frontmatter.mdx'])).to.equal(
+			JSON.stringify([
+				{ depth: 1, slug: 'the-frontmatter-title', text: 'The Frontmatter Title' },
+				{ depth: 2, slug: 'frontmattertitle', text: 'frontmatter.title' },
+				{ depth: 3, slug: 'keyword-2', text: 'Keyword 2' },
+				{ depth: 3, slug: 'tag-1', text: 'Tag 1' },
+				{ depth: 4, slug: 'item-2', text: 'Item 2' },
+				{ depth: 5, slug: 'nested-item-3', text: 'Nested Item 3' },
+				{ depth: 6, slug: 'frontmatterunknown', text: 'frontmatter.unknown' },
+			])
+		);
+	});
+});