Astro Integration

Astro is a modern framework that’s been causing a stir as of late, billing itself as being great for building “fast, content-focused websites.” Two of its primary selling points include a framework-agnostic approach to building sites, as well as the “islands” architecture it’s been pioneering.

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/astro or yarn add @jam-comments/astro. After doing so, you can configure it by setting the following environment variables in your site:

| Syntax | Description | | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | | JAM_COMMENTS_DOMAIN | The domain for your site as configured in your account. Don’t include the protocol (“https”). | | JAM_COMMENTS_API_KEY | The API generated in your account settings. | | JAM_COMMENTS_ENVIRONMENT | The environment JamComments will use to determine if it should render dummy comments. If this isn’t set, NODE_ENV is used. | |

Usage

Import the JamComments.astro component, place it where you’d like comments to render, and pass in the current path as a prop. You’re done!

import JamComments from '@jam-comments/astro';

const { url } = Astro.props;
---

// The rest of your markup...

<JamComments path={url} />

If you’d like to more explicitly configure the integration, you can also pass the following props to the component, rather than relying on environment variables:

import JamComments from '@jam-comments/astro';

const { url } = Astro.props;
---

// The rest of your markup...

<JamComments
  path={url}
  apiKey="123ABC"
  domain="whatever.com"
  environment="production"
  tz="America/Chicago
/>

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.