Giter Site home page Giter Site logo

ballandbat / gatsby-remark-normalize-paths Goto Github PK

View Code? Open in Web Editor NEW

This project forked from cedricdelpoux/gatsby-remark-normalize-paths

0.0 1.0 0.0 90 KB

Normalize paths in frontmatter and body of markdown files to be gatsby compliant

License: MIT License

JavaScript 100.00%

gatsby-remark-normalize-paths's Introduction

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.