Add front matter support to MDX

[jurajk]

Is your feature request related to a problem? Please describe.

Front matter is not yet supported in MDX, as mentioned in https://www.11ty.dev/docs/languages/mdx/. Using a data export is recommended. Exporting data is a bit more cumbersome and "scary" for less experienced people (e.g. editor comfortable with markdown, but not JS exports)

Describe the solution you'd like

Yaml front matter support in MDX

---
title: My awesome page
---

# {title}

Paragraph content

<Component />

Describe alternatives you've considered

• searching if this issue already exists
• opening a pull request, but do not have the experience to develop this

Additional context

No response

[zachleat]

This will work with MDX (and 11ty front matter/data cascade)!

import {evaluate} from '@mdx-js/mdx'
import {renderToStaticMarkup} from 'react-dom/server'
import * as runtime from 'react/jsx-runtime'

export default function(eleventyConfig) {
	eleventyConfig.addExtension("mdx", {
		compile: async (str, inputPath) => {
			const { default: mdxContent } = await evaluate({
				path: inputPath,
				value: str
			}, {
				...runtime,
				baseUrl: import.meta.url
			});

			return async function(props) {
				let res = await mdxContent(props);
				return renderToStaticMarkup(res);
			}
		}
	});
};

[zachleat]

I swapped the MDX docs on the website to use the above method! Deployment will roll up shortly!

[jurajk]

Wow! thank you so much.