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
.
Environment Configuration
In non-production mode, this plugin will render a list of dummy comments on your pages, making it easier to adjust styles before deploying to production. Additionally, any new comments will be silently submitted.
In order to remove these dummy comments and allow submissions to go through, either the NODE_ENV
or JAM_COMMENTS_ENVIRONMENT
environment variables must be set to production
.
Usage
Embedding Comments
To include a form and comments on your blog posts, you’ll need to place the following component in your page component, along with the required pageContext
prop. This object holds any comment data that’s already been submitted, which will then be rendered on the page when it’s built.
Overriding Copy in UI
The JamComments UI comes with its own set of basic copy for its components (submission confirmation, submit button text, etc.). Many of this copy can be overridden.
Property | Where It Appears | Default |
---|---|---|
confirmationMessage | In the success banner after submitting a comment. | ”Comment successfully submitted!” |
submitButton | In the comment submission button. | ”Submit” |
namePlaceholder | In the “name” input. | (empty) |
emailPlaceholder | In the “email” input. | (empty) |
commentPlaceholder | In the comment textarea. | ”Write something in plain text or Markdown…” |
writeTab | In the tab for composing a comment. | ”Write” |
previewTab | In the tab for previewing a comment. | ”Preview” |
authButton | In the link for signing in or registering. | ”Log In or Register” |
logOutButton | In the link for logging out. | ”Log Out” |
You can pass these values in the copy
prop:
Setting a Date Format
The default date format for comments is 'm/d/Y
. If you’re from another country, that might be weird. So, you can customize it by using the dateFormat
option:
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.