gatsby-plugin-draft

    0.2.0 • Public • Published

    gatsby-plugin-draft

    npm version install size Build Status

    GatsbyJS Plugin for adding draft field to node.

    This plugin adds draft field to decide whether publish to Gatsby's data system node. For example, when we build blog (with gatsby-transformer-remark), GatsbyJS creates MarkdownRemark nodes. This node has frontmatter property. If frontmatter includes date metadata, gatsby-plugin-draft add automatically draft value to Gatsby's node field.

    Install

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

    How to use

    gatsby-config.js

    with Markdown

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

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

    with MDX

    You need to add gatsby-source-filesystem and gatsby-plugin-mdx. Set Mdx to nodeType option.

    module.exports = {
      plugins: [
        'gatsby-source-filesystem',
        'gatsby-plugin-mdx',
        {
          resolve: 'gatsby-plugin-draft',
          options: {
            nodeType: 'Mdx',
          },
        },
      ],
    };

    other source

    You need to add gatsby-source-anydata. Set node internal type to nodeType option.

    module.exports = {
      plugins: [
        'gatsby-source-anydata',
        {
          resolve: 'gatsby-plugin-draft',
          options: {
            nodeType: 'Anydata',
          },
        },
      ],
    };

    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.

    const markdownTemplate = 'app/template/markdown';
    const mdxTemplate = 'app/template/mdx';
    const anycmsTemplate = 'app/template/anycms';
    
    exports.createPages = async ({ graphql, actions, reporter }) => {
      const { createPage } = actions;
      const result = await graphql(
        `
          {
            allMarkdownRemark(
              filter: { fields: { draft: { eq: false } } } # add
            ) {
              edges {
                node {
                  fields {
                    slug
                  }
                }
              }
            }
            allMdx(
              filter: { fields: { draft: { eq: false } } } # add
            ) {
              edges {
                node {
                  fields {
                    slug
                  }
                }
              }
            }
            allAnycms(
              filter: { fields: { draft: { eq: false } } } # add
            ) {
              edges {
                node {
                  fields {
                    slug
                  }
                }
              }
            }
          }
        `
      );
    
      if (result.errors) {
        reporter.panic(result.errors);
      }
    
      result.data.allMarkdownRemark.edges.forEach(post => {
        createPage({
          path: post.node.fields.slug,
          component: markdownTemplate,
          context: {
            slug: post.node.fields.slug,
          },
        });
      });
    
      result.data.allMdx.edges.forEach(post => {
        createPage({
          path: post.node.fields.slug,
          component: mdxTemplate,
          context: {
            slug: post.node.fields.slug,
          },
        });
      });
    
      result.data.anyCms.edges.forEach(post => {
        createPage({
          path: post.node.fields.slug,
          component: anycmsTemplate,
          context: {
            slug: post.node.fields.slug,
          },
        });
      });
    };

    pages/index.js

    Add filter in each pages.

    export const query = graphql`
      query IndexQuery {
        allMarkdownRemark(
          filter: { fields: { draft: { eq: false } } } # here
        ) {
          edges {
            node {
              excerpt
            }
          }
        }
        allMdx(
          filter: { fields: { draft: { eq: false } } } # here
        ) {
          edges {
            node {
              excerpt
            }
          }
        }
        allAnycms(
          filter: { fields: { draft: { eq: false } } } # here
        ) {
          edges {
            node {
              excerpt
            }
          }
        }
      }
    `;

    Draft Pattern

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

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

    ---
    id: 1
    title: First Post
    date: 2019-02-20
    ---
    
    Published content.
    ---
    id: 2
    title: Second Post
    date: 2019-02-25
    ---
    
    Draft content.

    Another Example. If a post has draft: true in frontmatter, the post is never published even if date is before build date time.

    ---
    id: 3
    title: Second Post
    date: 2010-10-10
    draft: true
    ---
    
    Draft content, forever and ever!

    Options

    module.exports = {
      plugins: [
        {
          resolve: 'gatsby-plugin-draft',
          options: {
            /**
             * Be added field name. [Optional]
             *
             * Type: string
             * Default: 'draft'
             **/
            fieldName: 'notReleased',
    
            /**
             * moment-timezone. [Optional]
             *
             * Type: string
             * Default: 'UTC'
             **/
            timezone: 'Asia/Tokyo',
    
            /**
             * Gatsby's node internal type. [Optional]
             *
             * Type: string
             * Default: 'MarkdownRemark'
             **/
            nodeType: 'GatsbyNodeInternalType',
    
            /**
             * Date information. [Optional]
             *
             * Type: function
             *   - node: Gatsby's data node. https://www.gatsbyjs.com/docs/node-interface/
             * Default: node => node.frontmatter.date
             **/
            pickDate: node => node.metadata.publishedAt,
    
            /**
             * Draft information. [Optional]
             *
             * Type: function
             *   - node: Gatsby's data node. https://www.gatsbyjs.com/docs/node-interface/
             * Default: node => node.frontmatter.draft
             **/
            pickDraft: node => node.metadata.isDraft,
    
            /**
             * publish draft posts [Optional]
             * Default is 'false'
             **/
            publishDraft: process.env.NODE_ENV !== 'production',
          },
        },
      ],
    };

    publishDraft

    If publishDraft is false, the posts which have draft field valued true does not published. So we can not edit watching that posts. This option is useful when we edit posts in development mode (gatsby develop).

    Install

    npm i gatsby-plugin-draft

    DownloadsWeekly Downloads

    68

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    9.15 kB

    Total Files

    5

    Last publish

    Collaborators

    • shooontan