Skip to content

Latest commit

 

History

History
110 lines (83 loc) · 3.17 KB

README.md

File metadata and controls

110 lines (83 loc) · 3.17 KB
Raw

gatsby-remark-normalize-paths

npm package

gatsby-remark-normalize-paths normalize your paths to be gatsby compliant.

It find absolute paths deeply in the frontmatter and the body of your markdown files and transform them to relative paths. If you have empty fields, it delete them (optional).

Usecase

  • You use a CMS (eg: Netlify-cms) to manage your markdown files but it do not format paths like gatsby want to.
  • You use gatsby-transformer-sharp and your images fields should not be empty to avoid the error GraphQL 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 containing 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 it will be convert to relative paths (../images/image-1.jpg)

Getting started

gatsby-remark-normalize-paths

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

Usage

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 delete empty frontmatter of some fields, you need to specify pathFields

Contributing

  • ⇄ Pull/Merge requests and ★ Stars are always welcome.
  • For bugs and feature requests, please create an issue.

See CONTRIBUTING.md guidelines

Changelog

See CHANGELOG.md

License

This project is licensed under the MIT License - see the LICENCE.md file for details