Gatsby Source Comment Server

A minimal plugin that pulls comments from https://gatsbyjs-comment-server.herokuapp.com/.

The server is a nodeJS server that serves comments and allows posting of new comments from any website.

Demo

A blog has been created to test this plugin.

Note: To load new comments, the server has to be restarted (A fix would come for this in the future).

Installation

npm install gatsby-source-comment-server
// or
yarn add gatsby-source-comment-server

Add into your gatsby-config.js:

//...
module.exports{
  plugins: [
    {
      resolve: "gatsby-source-comment-server",
      options: {
        website: "Unique URL of a blog/website"
      }
    }
  ]
}

What it does

It pulls comments from the server using the website as a distinguishing factor. And adds a new field comments to MarkdownRemak type containing comments that is added with the page slug

Posting of new comment

To post a new comment, a POST /comments can be made using a form with the following field in the body of the request.

• website: String
• slug: String
• name: String
• content: Content

Consuming comments

To consume a comment update any MarkdownRemark query to look like

query {
  markdownRemark {
    comments: {
      _id
      name
      content
      website
      slug
    }
  }
}

And you can use the graphql helper to fetch the comments.

This comments is an array and could be traversed and rendered using React.

<ul>
  {comments &&
    comments.map((comment) => {
      return (
        <li>
          <div>{comment.author}</div>
          <div>{comment.content}</div>
        </li>
      );
    })}
</ul>