gatsby-plugin-draft

0.0.2 • Public • Published 11 days ago

gatsby-plugin-draft

GatsbyJS Plugin for adding draft field to node.

This plugin adds draft fields to decide whether publish to Gatsby's data system node. The MarkdownRemark type node which generated by gatsby-transformer-remark has frontmatter property. If frontmatter has date and the date is later then build date time, this plugin adds draft valued true to node field. If not, draft field is false.

Install

# npm 
$ npm install gatsby-plugin-draft
 
# or yarn 
$ yarn add gatsby-plugin-draft

How to use

gatsby-config.js

You need to add gatsby-source-filesystem and gatsby-transformer-remark.

module.exports = {
  plugins: [
    'gatsby-source-filesystem',
    'gatsby-transformer-remark',
    'gatsby-plugin-draft'
  ],
};

gatsby-node.js

You can query like the following. The important thing is to add filter. That query results is only the post whose draft is false.

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions;
  const templatePath = 'app/template/path';
 
  return graphql(
    `
      {
        site {
          siteMetadata {
            title
          }
        }
        allMarkdownRemark(
          filter: { fields: { draft: { eq: false } } } # add
        ) {
          edges {
            node {
              excerpt
              frontmatter {
                date
                title
              }
            }
          }
        }
      }
    `
  ).then(result => {
    result.data.allMarkdownRemark.edges.forEach(post => {
      // create page
      createPage({
        path: post.node.fields.slug,
        component: templatePath,
      });
    })
  });
};

Let's say you have the following content. If you run gatsby build on Feb 22. 2019, the First-Post will be built and published, but Second-post will not be built or published.

If you build on Feb 26. 2019, both post will be built and published.

---
id: 1
title: First Post
date: 2019-02-20
---
 
Published content.

---
id: 2
title: Second Post
date: 2019-02-25
---
 
Draft content.

📝 Note 📝

In develop (gatsby develop), draft will always be false, so posts will display.

draft will be true only when in production (gatsby build).

Options

module.exports = {
  plugins: [
    'gatsby-source-filesystem',
    'gatsby-transformer-remark',
    {
      resolve: 'gatsby-plugin-draft',
      options: {
        /**
         * be added field name
         * Default is 'draft'
         **/
        fieldName: 'released',
      },
    },
  ],
};

Keywords

install

npm i gatsby-plugin-draft

weekly downloads

version

0.0.2

license

MIT

homepage

github.com

repository

github

last publish

11 days ago

collaborators

Test with RunKit

Report a vulnerability