MDX Documentation Site Builder

Build a documentation site generator that processes MDX files with custom layouts.

Requirements

You need to create a tool that:

1. Compiles MDX content with custom layout components that wrap the content
2. Supports two layout modes:
   • Default layout exported from the MDX file itself
   • Custom wrapper layout passed via component props
3. Ensures the layout component receives all props from the compilation and passes them to the content
4. Returns the compiled module with the properly wrapped MDX content

Behavior

Layout Wrapping

When an MDX file exports a default layout component, that layout should wrap the content. The layout component should receive props including children (the MDX content itself) and any other props passed during render.

When no default layout is exported from the MDX file, but a wrapper component is provided through props.components, that wrapper should be used instead.

The layout precedence is: exported default layout takes priority over wrapper prop.

Compilation Output

The compilation should produce executable code that can be run to get the MDX module, which includes:

• The default export (the MDX content component)
• Any named exports from the MDX file
• Proper layout wrapping based on the above rules

Test Cases

• Compiles MDX with an exported default layout and wraps content correctly @test
• Uses wrapper component from props when no default layout is exported @test
• Exported default layout takes precedence over wrapper prop @test
• Layout component receives props and children correctly @test

Implementation

@generates

API

/**
 * Compiles and evaluates MDX content with layout support.
 *
 * @param {string} mdxContent - The MDX source code to compile
 * @param {object} options - Compilation options including components
 * @returns {Promise<object>} The compiled MDX module
 */
async function compileMDXWithLayout(mdxContent, options) {
  // IMPLEMENTATION HERE
}

module.exports = { compileMDXWithLayout };

Dependencies { .dependencies }

@mdx-js/mdx { .dependency }

Provides MDX compilation and evaluation support with layout system capabilities.