Gatsby Integration

These instructions assume you've already created a JamComments account as well as a "site" within that account. If you haven't, learn more about that process on the Getting Started page.

Installation & Configuration

Install the plugin by running npm install @jam-comments/gatsby or yarn add @jam-comments/gatsby. After doing so, configure it by adding the following to your gatsby-config.js.

module.exports = {
  // ... other configuration stuff
  plugins: [
    // ...other plugins
    {
      resolve: '@jam-comments/gatsby',
      options: {
        api_key: process.env.JAM_COMMENTS_API_KEY,
        domain: process.env.JAM_COMMENTS_DOMAIN
      }
    }
  ]
};

Usage

Embedding Comments

To include a comment form and existing comments on your blog posts, you'll need to place the following component on your page component(s), along with the required pageContext, apiKey, and domain props.

import React from "react";
import JamComments from "@jam-comments/gatsby/ui";

const MyPost = (props) => {
  return (
    <article>
      <h1>{props.title}</h1>
      <div>{props.content}</div>
      <JamComments
        pageContext={props.pageContext}
        apiKey={process.env.JAM_COMMENTS_API_KEY}
        domain={process.env.JAM_COMMENTS_DOMAIN}
      />
    </article>
  );
};

export default MyPost;

Component Props

pageContext

Also provided by Gatsby, the pageContext object holds any comment data that's already been submitted, which will then be rendered on the page when it's built.

apiKey

You API key for the site generated in the JamComments dashboard. It'll be the same value used in your gatsby-config.js file, so you should probably store it in the same environment variable for easy sharing.

domain

The domain for your blog.

Querying for Data

If needed, you can query available comments by using the following type of query:

{
  allJamComment(limit: 10) {
    edges {
      node {
        content
        name
        path
        id
      }
    }
  }
}

Contributions

The source for this plugin is open to contributions. If you have a bug fix or idea for improvement, leave a pull request or issue in the GitHub repository.