How can I provide relative path to mdx component?

[cangulo]

Summary

Hi there! I have a .mdx file with the next code

[test](./test.js)

<Caption path="./test.js" title="Test"/>

As you see, I'm using a component called Caption where I provide a relative path to the test.js file. The code of this component is next:

import React from "react"

const Caption = ({ path, title }) => {
    return (
        <p align="center">
            <a href={path}><i>{title}</i></a>
        </p>
    )
}

export default Caption

The problem I have is that when this .mdx is rendered into HTML, the relative path for the test.js file is only updated for the md link ([test](./test.js)) not for my Caption component:

How can I make the relative path I provide in the Caption component to be updated as the default markdown link?

PD: I already have the gatsby-remark-copy-linked-files plugin in my gatsby-config.js

Thanks in advance!

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[pvdz]

Is it possible to post the repo that contains this repro?

@johno can you take a look at this, please? :)

[cangulo]

Is it possible to post the repo that contains this repro?

@johno can you take a look at this, please? :)

thank so much for the quick answer @pvdz

This is the repo:

https://github.com/cangulo/cangulo-site-2/tree/question-relative-path-component

Please note the code I made reference is in the branch question-relative-path-component. Then the main files are:

• src\components\caption.js -> Component I want to provide the path
• content\blog\hello-world\index.mdx -> .mdx file where I use the previous component

The project is based on the gatsby-starter-blog template, I only added the MDX features following this tutorial:
https://www.gatsbyjs.org/docs/mdx/migrate-remark-to-mdx/

Thank you so much!

[cangulo]

@pvdz @janson