gatsby-remark-normalize-paths

    1.1.0 • Public • Published

    gatsby-remark-normalize-paths

    Npm version Npm downloads MIT license PRs welcome


    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).

    Usecase

    • 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 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 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)

    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 to 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

    Install

    npm i gatsby-remark-normalize-paths

    DownloadsWeekly Downloads

    533

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    12.3 kB

    Total Files

    12

    Last publish

    Collaborators

    • cedricdelpoux