alexhyett / gatsby-source-hashnode

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

gatsby-source-hashnode

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

---

• Highlights
• Install
• How to use
• How to query
  • Get user posts
  • Get post's reading time
  • Get user details

Highlights

• Retrieves user posts
• 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"
      }
    }
  }
}