Is there a way to configure pages to display custom components that have access to frontmatter?

[williamlmao]

For example, I want each of my MDX pages to display the title and description that I place in the front matter. It would be repetitive for me to import a Title and Description component in every MDX file, so I would like to be able to configure this at some page layout level.

[fuma-nama]

Yes, if you are using nextra-docs-theme, here's how you can get the frontMatter of the page

import { useConfig } from "nextra-theme-docs";

//inside a component
const frontMatter = useConfig().frontMatter

To inject components into the body, you may override the main component
Check here for further information

[williamlmao]

Thanks @SonMooSans!

For anyone who runs into this in the future, I added this to my theme.config.jsx file. The docs are not very clear about this at the moment, so it took a little bit for me to figure it out by referencing some of the showcased repos. I will submit a PR to add an example to the docs when I have the time.

  main: ({ children }) => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const { frontMatter } = useConfig();
    return (
      <main className="">
        <h1 className="nx-mt-2 nx-text-4xl nx-font-bold nx-tracking-tight">
          {frontMatter?.title}
        </h1>
        <p>{frontMatter?.description}</p>
        <div className="">{children}</div>
      </main>
    );
  },