Working with MDX and Components

[just-andy]

This may be a really basic question on MDX but struggling to find a sample or what terms to Google.

I am using MDX and the FileAPI to create pages for case studies. I'd like to create some custom layout components to drop in shortcodes that place images and text in styled layouts.

I am stuck on two things:

1. How or can I pass in markdown content as children, and render it as normal? I'm trying not to switch to HTML formatting in markdown.

2. With the new Gatsby Image Plugin how should you reference the image in the component when using gatsby-remark-images?

Example code snippet of what I am using on my MDX pages.

<ImageText image="banner.jpg" alt="Some Alt Text">
### Header 3

This is some sample *that is in* markdown.

* List Items
* List Items
</ImageText>

[flikteoh]

You could create custom components that styles/wrap text and image.

Then import them and use as shortcode/components

Example:

// in Image.js

// ...do your styling and etc

const Image = ({ children, props }) => {
  return (
    <figure>
      {children}
      <figcaption>{props.caption}</figcaption>
    </figure>
  )
}


// in PostLayout.js

import Image from './components/Image';
import { MDXProvider } from '@mdx-js/react'

const components = {
  img: Image
  // ...other custom components for mdx
};

export default function PostLayout({ children }) {
  return (
    <MDXProvider components={components}>
      {children}
    </MDXProvider>
  )
}

// in some-post.mdx

## My Post Title

<Image caption="some caption">

![some image](./image.jpg)

</Image>

Ref-1: https://mdxjs.com/docs/using-mdx/#mdx-provider
Ref-2: https://www.gatsbyjs.com/docs/how-to/routing/customizing-components/
Ref-3: https://www.gatsbyjs.com/docs/mdx/importing-and-using-components/#make-components-available-globally-as-shortcodes

[just-andy]

thanks @flikteoh I've been trying to work this out since you posted and still no luck. I even looked at @LekoArts sample code and cannot work it out.

Here is a live preview (second section): https://just-andy.netlify.app/projects/virtual-world/

And the template code that calls the MDX renderer: https://github.com/just-andy/just-andy-22/blob/main/src/templates/projects-template.js

it all looks the same as the sample @LekoArts provided here from his portfolio: https://github.com/LekoArts/portfolio-v2/blob/847b33039587738d3d75cc9c027ae53f6ef33c82/www/content/garden/2021-07-28--smooth-shadows-for-images-using-their-dominant-color/index.mdx?plain=1#L109-L120