Gatsby: Bug: relative url for links and images in package readme are not working

[muescha]

Description

Relative URL for links and images, definition in package readme results in 404

Steps to reproduce

Source of Readme: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-sharp/README.md#L167
Location: Just above https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/#fit

Screenshot

Examples

bad ones - point to files in the repo:

• ![Sharp transform fit options](./sharp-transform-fit-options.png)
• [index.js](./src/index.js)

good ones:

• external full links -> [overlayWith](http://sharp.pixelplumbing.com/en/stable/api-composite/#overlaywith)
• points to gatsbyjs.org -> [gatsby-image](/packages/gatsby-image/)

Expected result

• image should be displayed
• links should working

Actual result

• images are not displayed
• link to source code not working

Environment

gatsbyjs.org website

Credits

reported by @Kaknut in:

• #25919 Look's Like the image is missing

[muescha]

Analytics

the way for a package readme into the gatsby site is via the npm search in gatsby-source-npm-package-search. the readme is fetched from unpkg if there is no readme included.

so there is no defined basepath for the relative url in the readme

[kaknut]

Thanks for opening the issue and explaining it well.

[muescha]

possible Solutions

1) force absolute path

• disallow relative paths
• only allow full qualified paths

pro:
-> can be forced with a remark-lint rule on internal packages
-> no code change needed (except the markdown)

con:
-> only possible for "internal" packages
-> hard to force on external packages -> since we can only change it with a PR

2) calculate source dir

• get the repo from package info
• get from this repo the URL
• with the relative path calculate a full path

pro:
-> can be used with every package readme

con:
-> more complicated to calculate
-> not all packages have repo url
-> links should be "changed" from repo to the CDN url for raw content (for github)

[dillionmegida]

Hello team, I'd like to mention a bug I faced similar to this:

Here's a package I created - gatsby-remark-liquid-tags

The SERVICES.md file referenced is treated as a relative link to gatsby, hence a 404 page.

But npm treats it as an external link using the repo as the base URL. This is what I expect for gatsby too.

I'd love to hear you thoughts on this.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[muescha]

Not stale

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜