gatsby-source-hashnode

Gatsby source plugin for building websites using Hashnode as data source.

npm npm-next npm npm

license semantic-release Commitizen friendly test workflow release workflow


Highlights

  • Retrieves user posts from hashnode.
  • Calculates estimated reading time.
  • Fetches user details.
  • Converts images for gatsby-plugin-image.
  • Supports Gatsby v3.

Install

npm install gatsby-source-hashnode

How to use

Configure the plugin in gatsby-config.js:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-hashnode",
      options: {
        username: "<HASHNODE_USERNAME>",
      },
    },
  ],
};

How to query

Get user posts

{
  allHashNodePost {
    edges {
      node {
        brief # "In this article..."
        coverImage {
          # File node (to be used with gatsby-plugin-image)
          childImageSharp {
            gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED)
          }
          # OR
          # url // "https://cdn.hashnode.com/...
        }
        slug # "my-great-article"
        title # "My Great Article"
      }
    }
  }
}

Get post’s reading time

(With the kind help of reading-time)

{
  allHashNodePost {
    edges {
      node {
        title
        readingTime {
          minutes # 2
          text # "2 min read"
          time # 120000
          words # 100
        }
      }
    }
  }
}

Get user details

{
  allHashNodeUser {
    edges {
      node {
        _id
        blogHandle # "userhandle1"
        coverImage # "https:/...
        dateJoined # "2014-01-01T01:00:00.000Z"
        isDeactivated # false
        isEvangelist # true
        location # "Canada"
        name # "First last"
        numFollowers # 503
        numFollowing # 14
        numPosts # 50
        numReactions # 95
        photo # "https:/...
        publicationDomain # "blog.mydomain.."
        tagline # "I do stuff"
        username # "username1"
      }
    }
  }
}