Gatsby MDX и корневые относительные пути

Question

У меня есть два случая в файлах MDX, когда я хотел бы использовать относительный корень вместо относительных путей. Страницы многомерных выражений глубоко вложены. Так что я попадаю во многие../../..

Примеры папок:

/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

Я последовал этому примеру.

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

Компоненты

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

Возможно ли что-то подобное?

---
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.*/}/>

Answer 1

Увидел голосование и пришел к этому старому вопросу. Итак, вот решение.

Пути и компоненты изображения Frontmatter

https://www.gatsbyjs.com/plugins/gatsby-remark-normalize-paths/ решает эту проблему .

Только компоненты

С помощью коротких кодов мы можем полностью исключить необходимость явного импорта компонентов в файлы MDX.

Допустим, у вас есть шаблон «вокруг» содержимого MDX.

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

Допустим, вы используете пользовательский компонент <BlueBox />в ваших файлах содержимого MDX. Импортируйте этот компонент в шаблон и оберните <MDXRenderer>с <MDXProvider>

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