MDX support including components and data

To make richer markdown pages we want MDX and be able to use components and data in the page e.g.

import MyComponent from '@components/MyComponent'

const orgs = [ 'abc' ]

# Hello world

Acceptance

• ~[x] A demo page working using a component and data that is passed in e.g. <MyCoolComponent value={props.mydata} />~ 2022-08-11 (olayway:) we’re no longer using demo pages
• Document these in a new page on flowershow.app e.g. docs/howto-use-components-in-your-markdown ✅ 2022-07-07 see https://flowershow.app/docs/howto-use-components-in-your-markdown | 🚧 2022-08-11 (olayway:) 80% done, will include some context about MDX and how to import custom components/external data but also how to define them locally in a markdown file | 2022-08-15 done in PR #89
  • How do we use components in the mdx file 🚧 2022-08-11 (olayway:) 80% done | 2022-08-15 done in PR #89
  • How do we pass data into the mdx file and use in components have to add the data in pages/[[slug]].js | 🚧 2022-08-11 (olayway:) 80% done + no, you don’t have to add the data in pages/[[slug]].js - you can import it from external file or define it directly in markdown | 2022-08-15 done in PR #89

• Research if we really can import components and hero - see [Rufus comment below] ✅ 2022-08-22 (olayway:) yes, we can(https://github.com/flowershow/flowershow/issues/20#issuecomment-1180376744)
  • Report on whether it works or not by trying out a demo in our case (key will probably be getting import path right) ✅ 2022-08-22 (olayway:) currently you can see it working here

BONUS: find out if contentlayer supports direct imports in the MDX file e.g.

import MyComponent from '@components/MyComponent'

# Hello world

🚫 tried but not working and could not find, but next-mdx-remote does so I may be missing something ? ✅ 2022-08-22 (olayway:) yes, tested and works -> Contentlayer supports MDX and ESM import/export statements are part of MDX standard syntax, currently you can see it working here

Tasks

• ~[ ] Demo page of component with props @ /demo~ 2022-08-11 (olayway:) we’re no longer using demo pages
• Documentation at notes/howto-use-components-in-your-markdown 🚧 2022-08-11 (olayway:) 80% done; my idea is to put it in /docs/mdx cuz I’m adding a bit context about MDX + it will include sections about: 1) how you can import custom components 2) how you can define components within markdown file (no importing) 3) how you can import data 4) how you can define data(variables) directly in your markdown | 2022-08-15 done in PR #89

Using components

https://github.com/contentlayerdev/website/blob/main/src/pages/docs/[[...slug]].tsx

Options:

• 🚫 add component in components/MDX.js and use it in markdown eg. <MyComponent /> 2022-08-11 (olayway:) no, you don’t have to do that, but of course, you can - e.g. for the component you use across a lot of your md files so it makes sense to make them available globally
• import components directly in mdx not working. (tried with .mdx file too) 2022-08-11 (olayway:) works but you have to change React components’ file extension from .js to .jsx (for reference, see comments from Contentlayer team on the issue we’ve submitted)

Passing props

Can pass arguments to MDX renderer and access as props? ✅ YES

❕2022-08-11 (olayway:) You can also define data directly in your markdown files or import them from JSON file into your markdown files and then pass it as props to your components

Add as global props …

// in pages/[[...slug]].js

...
const Component = useMDXComponent(body.code, { globalProps })
...

See https://spectrum.chat/mdx/general/resolved-how-to-use-props-or-variables-with-mdx-files~3cd95635-1d93-440e-9802-7571cacfd578 - https://github.com/gatsbyjs/gatsby/issues/17551

[olayway]

@rufuspollock, @khalilcodes I couldn’t resist trying out (¯_(ツ)_/¯ 😄) so I’ll share what I’ve found out

1. Changing files extension from .js to .jsx does seem to work. You can see a flash of the button on the page, but another error pops up:

1. I’ve created a separate testing page page-3 to see if the problem will persist if we import other components than Button.jsx, that don’t include Next.js Link (I suspect this may be the cause of an error). Here I’m importing a Test2.jsx component, which has a child Test.jsx and uses some basic props. And it works just fine:

See: https://flowershow.app/test/page-3

[rufuspollock]

Can you wait for me to review before we do another trial.