Remix Integration

This guide shows you how to add JamComments to a Remix 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/remix

Environment Variables

Set these environment variables:

Variable	Description
JAM_COMMENTS_DOMAIN	Your site’s domain (without “https://“)
JAM_COMMENTS_API_KEY	Your API key from account settings
JAM_COMMENTS_ENVIRONMENT	”production” or “development” (optional, defaults to NODE_ENV)

Basic Usage

In your route’s loader function, fetch the comment markup and pass it to your component:

// posts.$slug.tsx

import { JamComments } from "@jam-comments/remix";
import { fetchMarkup } from "@jam-comments/remix/server";

export const loader = async ({ params }) => {
  const post = await getPostFromWherever(params.slug);

  const markup = await fetchMarkup({
    domain: process.env.JAM_COMMENTS_DOMAIN,
    apiKey: process.env.JAM_COMMENTS_API_KEY,
    path: `/posts/${params.slug}`,
  });

  return json({ post, markup });
};

export default function Post() {
  const { post, markup } = useLoaderData();

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />

      {/* Comments will render here */}
      <JamComments markup={markup} />
    </article>
  );
}

Note: Import fetchMarkup from @jam-comments/remix/server to avoid including Node.js code in your browser bundle.

Optional: Structured Data

You can pass a schema object to have JamComments include your comments in the page’s JSON-LD:

const postSchema = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  headline: post.title,
  datePublished: post.date,
};

const markup = await fetchMarkup({
  domain: process.env.JAM_COMMENTS_DOMAIN,
  apiKey: process.env.JAM_COMMENTS_API_KEY,
  path: `/posts/${params.slug}`,
  schema: postSchema,
});

Customizing UI Text

Override the default text in the comment form:

const markup = await fetchMarkup({
  domain: process.env.JAM_COMMENTS_DOMAIN,
  apiKey: process.env.JAM_COMMENTS_API_KEY,
  path: `/posts/${params.slug}`,
  copy: {
    commentPlaceholder: "Share your thoughts...",
    submitButton: "Post Comment",
    namePlaceholder: "Your name",
  },
});

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):

const markup = await fetchMarkup({
  domain: process.env.JAM_COMMENTS_DOMAIN,
  apiKey: process.env.JAM_COMMENTS_API_KEY,
  path: `/posts/${params.slug}`,
  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.