Extract MDX compilation logic and enable MDX in all frontmatter values

[Copilot]

Summary: Support MDX Content in Frontmatter Values ✅

Successfully implemented MDX support in frontmatter values, allowing markdown formatting in fields like description and title.

Changes Made:

1. ✅ Extracted MDX compilation logic into src/utils/compileMdxContent.tsx:

   • compileMdxContent() - Full MDX compilation with all plugins (for document content)
   • compileMdxFrontmatter() - Simplified MDX compilation for inline content (for frontmatter values)
   • Return types inferred by TypeScript
   • Uses exported Entry type from @/components/mdx/Entries

2. ✅ Simplified Doc type to use compiled ReactNode values:

   • title?: ReactNode - Compiled MDX title for display
   • description?: ReactNode - Compiled MDX description for display
   • metadata: { title: string; description: string } - Raw strings for SEO metadata
   • Clean separation between display values (ReactNode) and metadata (strings)

3. ✅ Always compile frontmatter: No optimization - all frontmatter values are compiled as MDX

4. ✅ Updated page rendering to use ReactNode title and description directly, with metadata for SEO

5. ✅ Comprehensive testing: 9 unit tests that validate HTML structure without coupling to CSS classes

   • Tests use regex patterns with [^>]* to match HTML elements
   • Resilient to styling changes while maintaining strong validation
   • Focus on semantic correctness rather than exact class names
   • Consistent use of .toMatch() with regex for HTML structure validation

6. ✅ Updated example: docs/authoring/intro.mdx demonstrates MDX in both title and description

7. ✅ Documentation: Added comprehensive documentation in docs/authoring/introduction.mdx

   • New "MDX Support in Frontmatter" section explaining inline Markdown formatting support
   • Documents support for bold, italic, code, and links in frontmatter values
   • Includes TIP callout about YAML quoting requirements for special characters (like backticks)
   • Provides clear examples demonstrating the feature

Example Usage:

---
title: '`Intro`'
description: Introduction component for **documentation** pages with `code` and [links](#test)
---

Both title and description render with proper formatting! The compiled ReactNode values are used for display, while raw strings are preserved in the metadata object for SEO purposes.

Original prompt

On intro.mdx:2-2, for ex: https://github.com/pmndrs/docs/blob/main/docs/authoring/intro.mdx?plain=1#L2

i'd like frontmatter's values like here Intro support mdx content, the exact same way we support it in src/utils/docs.tsx

maybe we should "extract" the compileMDX (2nd pass) to get the exact same mdxOptions and components -- it would also allow us to unit-test this exracted function with simple mdx text and check it correctly/unitely compiles to correct html

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[abernier]

@copilot

[Copilot]

@copilot

All feedback addressed in commit 86b393d:

• ✅ Removed type assertions from tests
• ✅ Let TypeScript infer return types
• ✅ Always compile MDX frontmatter (removed optimization)
• ✅ Added title MDX support alongside description
• ✅ Explained vitest and .gitignore changes

The PR now supports MDX in any frontmatter value (title, description, etc.).

[abernier]

@copilot

[Copilot]

@copilot

All feedback addressed in commit f6b1af6:

• ✅ Using Entry[] type from Entries component
• ✅ All test expectations now use exact value comparisons with .toBe() instead of weak .toContain() assertions
• ✅ All tests passing with 100% accurate HTML output validation

[abernier]

@copilot

[Copilot]

@copilot

All feedback addressed in commit 9e304d2:

• ✅ Simplified Doc type to use ReactNode for title and description (removed string versions)
• ✅ Added metadata: { title: string; description: string } for SEO/metadata purposes
• ✅ Updated page rendering to use ReactNode directly
• ✅ All tests passing, type checking passing

[abernier]

@copilot

[abernier]

@copilot tu peux pas plutot faire comme pour le test d'apres, avec les [^] ?

[Copilot]

Mis à jour dans commit 8506959. Remplacé .toContain('<div'), .toContain('<pre'), .toContain('<code') par .toMatch(/<div[^>]*>/), .toMatch(/<pre[^>]*>/), .toMatch(/<code[^>]*>/) pour cohérence avec les autres tests.