MDX support

Because LFP Docs plugs into the Eleventy ecosystem without occupying or inhibiting Eleventy's core functionality, it is possible to integrate all kinds of extensions to enhance the authoring experience.

For example, if the project to document benefits from extensive showcases that are destined to be implemented using React components, MDX is a great enhancement for Markdown, making React-like components available in source documents.

Eleventy shows how to implement a MDX preprocessor for source documents. The integration is relatively straight-forward:

import { pathToFileURL } from 'node:url';
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(str, {
				...runtime,
				baseUrl: pathToFileURL(inputPath)
			});

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

eleventyConfig.addTemplateFormats('mdx');

A blog entry might then look like this:

---
title: An MDX blog entry
---
import Component from './path/to/component.js';

export const value = 42;

Markdown syntax is allowed everywhere in the document.

<Component prop="It's all allowed" bool={false} answer={value} />

## Additional content follows here

...

Here, the import path has to be relative to the importing file. Frontmatter works as with every other Markdown, but keep in mind that .mdx files are not preprocessed by Liquid, as are all other template languages. This means that shortcodes (e.g., shortcodes provided by LFP Docs) do not work in .mdx files.