Skip to content

Eleventy Integration

The official plugin for integrating JamComments into your Eleventy site.

Prerequisites

In order to use this plugin, you’ll need to do the following:

Installation

Run npm install @jam-comments/eleventy.

Configuration

In your .eleventy.js file, require the plugin and initialize it with your site’s domain and API key.

const jamComments = require('@jam-comments/eleventy');
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(jamComments, {
domain: process.env.JAM_COMMENTS_DOMAIN,
apiKey: process.env.JAM_COMMENTS_API_KEY,
tz: "America/Chicago" // Optional.
});
});

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.

Displaying Comments

Embed the jamcomments Nunjucks shortcode in the template that renders individual posts or pages. Note that explicitly passing the path.url is optional. If it’s not provided, it’ll use the current path as indicated by Eleventy on build.

<h1>My Page Title</h1>
<p>Here's some page content.</p>
<!-- Form and comments will render here! -->
{% jamcomments path.url %}

Overriding Copy in UI

The JamComments UI comes with its own set of basic copy for its components (submission confirmation, submit button text, etc.). However, many of these can be overridden:

PropertyWhere It AppearsDefault
confirmationMessageIn the success banner after submitting a comment.”Comment successfully submitted!”
submitButtonIn the comment submission button.”Submit”
namePlaceholderIn the “name” input.(empty)
emailPlaceholderIn the “email” input.(empty)
commentPlaceholderIn the comment textarea.”Write something in plain text or Markdown…”
writeTabIn the tab for composing a comment.”Write”
previewTabIn the tab for previewing a comment.”Preview”
authButtonIn the link for signing in or registering.”Log In or Register”
logOutButtonIn the link for logging out.”Log Out”

To customize these values, use the copy option when registering the plugin:

eleventyConfig.addPlugin(jamComments, {
domain: process.env.JAM_COMMENTS_DOMAIN,
apiKey: process.env.JAM_COMMENTS_API_KEY,
copy: {
commentPlaceholder: "Write something",
submitButton: "Send it!",
namePlaceholder: "Ur Mom",
emailPlaceholder: "[email protected]",
},
});

Automated Schema Generation

Out of the box, JamComments will automatically generate structured data (JSON-LD) for your pages, as long as a BlogPosting or Article entity already exists in the document. This configuration-free approach generates the data client-side with JavaScript — an approach well-supported by Google.

However, if you’d like that data to be server-rendered for more robustness, pass a JSON string or JavaScript object in your shortcode:

{% jamcomments path.url, {
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "My Blog Post"
} %}

When schema is passed like this, the plugin will render the full object with comments into the HTML. Just remember to not render it yourself if you use this feature, as to avoid duplicate records appearing on the page.

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:

eleventyConfig.addPlugin(jamComments, {
domain: process.env.JAM_COMMENTS_DOMAIN,
apiKey: process.env.JAM_COMMENTS_API_KEY,
dateFormat: "DD/MM/YYYY",
});

Supported Rendering Engines

  • *.njk
  • *.liquid

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.