gatsby-remark-normalize-paths
normalize your paths to be gatsby compliant.
It finds absolute paths deeply in the frontmatter and the body of your markdown files and transforms them to relative paths. If you have empty fields, it deletes them (optional).
- You use a CMS (eg: Netlify-cms) to manage your markdown files but it does not format gatsby-friendly paths.
- You use
gatsby-transformer-sharp
and your images fields should not be empty to avoid the errorGraphQL Error Field must not have a selection since type "String" has no subfields
when you build,
Let's imagine your gatsby data structure is the following:
/
↳ content
↳ posts
↳ post-1.md
↳ images
↳ image-1.jpeg
↳ image-2.jpeg
↳ image-3.jpeg
↳ image-4.jpeg
↳ image-5.jpeg
↳ src
↳ public
↳ static
And your markdown files contain absolute paths:
---
title: "Post 1"
cover: "/content/images/image-1.jpg"
images:
- "/content/images/image-2.jpg"
- "/content/images/image-3.jpg"
- "/content/images/image-4.jpg"
---
Lorem ipsum ![](/content/images/image-5.jpg) Lorem ipsum
In your markdown frontmatter or body, you can use absolute paths (/content/images/image-1.jpg
) and they will be converted to relative paths (../images/image-1.jpg
)
You can download gatsby-remark-normalize-paths
from the NPM registry via the
npm
or yarn
commands
yarn add gatsby-remark-normalize-paths
npm install gatsby-remark-normalize-paths --save
Add the plugin in your gatsby-config.js
file:
module.exports = {
plugins: [
{
resolve: "gatsby-transformer-remark",
options: {
plugins: [
// without options
"gatsby-remark-normalize-paths"
// or
// with options
{
resolve: "gatsby-remark-normalize-paths",
options: {
pathFields: ["image", "cover"],
},
},
],
},
},
],
}
Note: If you don't want this plugin to delete empty frontmatter of some fields, you need to specify pathFields
- ⇄ Pull/Merge requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.
See CONTRIBUTING.md guidelines
See CHANGELOG.md
This project is licensed under the MIT License - see the LICENCE.md file for details