Could the MDX default export get the frontmatter as props?

[remix-run]

Could the MDX default export get the frontmatter as props?

[joe-bell]

Apologies if this is the wrong issue to raise this, but it felt somewhat related – I'd love to be able to access these attributes (or frontmatter) within the layout wrapping my MDX routes

Something like…

---
title: "Do Not Disturb"
date: "2019-01-03"
description: "Modern mindfulness tips for connected life"
---

Some markdown content nested within `app/routes/blog/`

// app/routes/blog.tsx
import { Outlet, useLoaderData } from "remix";
import type { LoaderFunction } from "remix";

export const loader: LoaderFunction = async ({ attributes }) => {
  return { attributes };
};

export default function BlogPost() {
  const { attributes } = useLoaderData();

  return (
    <article>
      <header>
        <h1>{attributes.title}</h1>
        <p>{attributes.description}</p>
      </header>
      <Outlet />
    </article>
  );
}

This feels a bit more akin to Remix layouts, and would also open up the door to more server-side logic in MDX posts (e.g. creating an image placeholder on the server-side for a hero image. Heck! If content was available too, I could even create placeholders for all MDX images on the server-side)

[ryanflorence]

I think I could get behind this.

This code is no different, but feels less magic when you explicitly write it out like this:

---
meta:
  title: Remix Rocks
  description: A solid description of this document.
---

This is the content for the blog post

export default ({ attributes, body }) => (
  <div>
    <h1>{attributes.meta.title}</h1>
    <article>{body}</article>
  </div>
)

So by default, the default export is the body of the markdown as a component. If you export default, then that's the component we'll use, and Remix passes the attributes and body to you.

To complete the picture but in reverse, mdx components export the attributes:

import MdxPage, { attributes } from "../mdx/some-page";

export default function Page() {
  return (
    <div>
      <h1>{attributes.title}</h1>
      <MdxPage />
    </div>
  );
}

WDYT?

[lachlanjc]

Big fan of calling this frontmatter/adding support for this!

[ryanflorence]

been thinking about this too, have you done this elsewhere? what does SlimLayout look like?

[kentcdodds]

It's not much right now. But I'd like to have access to frontmatter.

import * as React from 'react'
import {Link} from 'react-router-dom'

function SlimLayout({
  children,
  ...props
}: React.PropsWithChildren<{}>): React.ReactNode {
  console.log(props) // <-- I want the frontmatter in there
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">kentcdodds.com</Link>
          </li>
        </ul>
      </nav>
      <main>{children}</main>
      <footer>Join the newsletter!</footer>
    </div>
  )
}

export {SlimLayout}

[kentcdodds]

I like that!

Could we call it frontmatter instead of attributes? That's consistent with the common term for the "YAML at the top of markdown" I think.