Search code examples
gatsbygatsby-imagegatsby-remark-image

Gatsby MDX and root relative paths

I have two occasions in MDX files, where I would like to use root relative instead of relative paths. MDX pages are deeply nested. So I end up in many ../../..

Folder-examples are:

/content/products/
/content/products/brands/some-brand/index.mdx
/content/products/brands/some-brand/some-feature/first-product.mdx
/content/images/brand-images/some-brand.png
/content/images/brand-images/other-brand.png
/src/components/products/

Frontmatter image paths

I followed this example.

---
title: Some title
brand-image: ../../../images/brand-images/some-brand.png
---

Components

import Products from '../../../../src/components/products';

Is something like this possible?

---
title: Some title
brand-image: ${PROJECT_ROOT}/content/images/brand-images/some-brand.png
---

import Products from '${PROJECT_ROOT}/src/components/products';

Hi, I'm a page with many products. It's just to show, how I use the MDX pages.

<Products pkey="some-brand" tags={/.*Corp.*Gov.*/}/>
Solution

  • Saw an upvote and came over this old question. So, here is the solution.

    Frontmatter Image Paths and Components

    The https://www.gatsbyjs.com/plugins/gatsby-remark-normalize-paths/ resolves this problem.

    Components only

    With shortcodes we can completely eliminate the need of explicit component imports in MDX files.

    Let's say, you have a template "around" your MDX content.

    ...
<MDXRenderer>{body}</MDXRenderer>
...

    Let's say, you use a custom component <BlueBox /> in your MDX content files. Import this component in the template and wrap <MDXRenderer> with <MDXProvider>

    ...
import BlueBox from "../components/mdx/blue-box"
import AnotherComponent from "../components/mdx/another-component"
...
<MDXProvider components={{BlueBox, AnotherComponent}}><MDXRenderer>{body}</MDXRenderer></MDXProvider>
...