Gatsby Integration

This guide shows you how to add JamComments to a Gatsby site. Before starting, you’ll need:

• A JamComments account
• A site created in your account
• An API key (get one in your account settings)

Installation

npm install @jam-comments/gatsby

Configuration

Add the plugin to your gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: "@jam-comments/gatsby",
      options: {
        apiKey: process.env.JAM_COMMENTS_API_KEY,
        domain: process.env.JAM_COMMENTS_DOMAIN,
        tz: "America/Chicago", // optional
      },
    },
  ],
};

In production, store these values in environment variables instead of hardcoding them.

Environment

In development (when NODE_ENV is not “production”), the plugin shows dummy comments and silently accepts submissions without saving them. In production, it fetches real comments and saves submissions.

Set JAM_COMMENTS_ENVIRONMENT to override this behavior.

Usage

Import the component and pass the pageContext from Gatsby’s page 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} />
    </article>
  );
};

export default MyPost;

The pageContext contains the comment data Gatsby fetches at build time.

Customizing UI Text

Override the default text in your config:

{
  resolve: '@jam-comments/gatsby',
  options: {
    apiKey: process.env.JAM_COMMENTS_API_KEY,
    domain: process.env.JAM_COMMENTS_DOMAIN,
    copy: {
      commentPlaceholder: "Share your thoughts...",
      submitButton: "Post Comment",
    }
  }
}

Property	Default
confirmationMessage	”Comment successfully submitted!”
submitButton	”Submit”
namePlaceholder	(empty)
emailPlaceholder	(empty)
commentPlaceholder	”Write something in plain text or Markdown…”
writeTab	”Write”
previewTab	”Preview”
authButton	”Log In or Register”
logOutButton	”Log Out”
replyButton	”Reply”
nameLabel	”Name”
emailLabel	”Email”
commentCountLabel	”comment/comments”
replyCountLabel	”reply/replies”

Note: Count labels are automatically pluralized.

Date Format

Change how dates are displayed (uses PHP date format):

{
  resolve: '@jam-comments/gatsby',
  options: {
    apiKey: process.env.JAM_COMMENTS_API_KEY,
    domain: process.env.JAM_COMMENTS_DOMAIN,
    dateFormat: "l, F j, Y", // Thursday, October 31, 2024
  }
}

Contributing

Found a bug or have an improvement? Open an issue or pull request on GitHub.