Could the MDX default export get the frontmatter as props?

[kentcdodds]

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

headers:
  og:image: './some-awesome-image.jpg'
---

This is the content for the blog post

That's right it does!!!

import {SlimLayout} from '../../shared/slim-layout'

export default SlimLayout

I would like it if the SlimLayout component could access the meta (and everything else in the frontmatter) so it can display the title, description, and the headers['og:image'].

[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}

[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?

[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.

[lachlanjc]

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

[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)

[davecranwell-vocovo]

I've been stumbling into this too. The lack of support for frontmatter with the same functionality as we can expect from Jekyll etc, feels like quite a limit to adoption as a blog engine, but I can appreciate you have higher goals than that. Still, having frontmatter accessible to useMatches() for example would be really useful.

[kiliman]

The issue is that .mdx files are treated the same as regular routes but without a loader, so no way to return the frontmatter. I posted on Discord that it would be nice if Remix would create a default loader for .mdx routes that returned the frontmatter. Then your parent layout would be able to access it via useMatches just like any other route.