MDX integration

[spences10]

How will this work with MDX?

Can I keep my existing markdown files in Gatsby which are nested in a file structure content/yyyy/mm/dd/some-folder-name/index.mdx along with the front matter?

The filing structure used makes up the routing as well less the content folder so that would be mysite.com/yyyy/mm/dd/some-folder-name I see the page routing is the same as Gatsby, will there be something along the lines of the new Gatsby file system API to do that or will it all need to be generated via a Gatsby node equivalent?

Thanks

[natemoo-re]

I'm still thinking through some ideas on how to integrate MDX out of the box to make this process as simple as possible. It's near the top of the list for upcoming features.

I included some thoughts below, but it isn't an ideal solution. I'm going to keep iterating on this (until it actually works) and make an official example.

---

I don't imagine you'll have to change your file structure at all. In this case, you could keep your content directory as it is, it likely just needs to be moved inside of src. Using Microsite's data fetching APIs, we can create a page at src/pages/[year]/[month]/[day]/[slug].tsx which handles most of this logic.

That file could look something like below... assuming @mdx-js/runtime had a Preact implementation.

import { FunctionComponent } from 'preact';
import { definePage } from 'microsite/page';

// Import the MDX runtime Component
import MDX from '@mdx-js/runtime'; 
// Provide custom components for markdown elements
const components = {
  h1: props => <h1 style={{color: 'tomato'}} {...props} />,
  Demo: props => <h1>This is a demo component</h1>
}
// Provide variables that might be referenced by JSX
const scope = {
  some: 'value'
}

const Post: FunctionComponent<{ content: string }> = ({ content }) => {
  return (
    <MDX components={components} scope={scope}>
      {mdx}
    </MDX>
  );
}

export default defineComponent(Post, {
  path: '/[year]/[month]/[day]/[slug]',
  async getStaticPaths() {
    // Microsite extends `fetch` to work on the server (and the file system relative to `process.cwd()`)
    const posts = await fetch('./src/content/').then(res => res.json());
    const paths = posts.map(post => {
      const [year, month, day, slug] = post.split('/');

      // slug.trim() is to remove `.mdx` extension from file path
      return { params: { year, month, day, slug: slug.trim(0, -4) } };
    });
    return { paths };
  },
  async getStaticProps({ params }) { 
    const { year, month, day, slug } = params;
    const text = await fetch(`./src/content/${year}/${month}/${day}/${slug}.md`).then(res => res.text());
    return { props: { content: text } };
  }
})

[spences10]

@molebox tagging you in on this for all things MDX in minimal frameworks/library's

[natemoo-re]

Just wanted to give you an update on this! [email protected] will add support for custom snowpack.config.cjs files, which means adding something like snowpack-plugin-mdx will be super easy. I'll be sure to add an example similar to what you've outlined.

I'm still thinking about adding an out-of-the-box MDX integration in the future, but exposing the Snowpack config should cover this in the meantime.

[molebox]

Boya! Nice! The routing will still need to be handled. I good set of docs on this would be super helpful. I might move my blog over if this works. Very exciting. 🕺