Remix Integration

Remix is a modern, full-stack framework with a strong emphasis on user experience and web standards.

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.

Prerequisites

In order to use this plugin, you’ll need a JamComments account, where you’ll also need to have created a site and generated an API key.

Installation

npm install @jam-comments/remix

Environment Variables

After installation, set the following environment variables for your Remix application:

Environment Variables

Variable	Description
JAM_COMMENTS_DOMAIN	The root domain of your site (without https://).
JAM_COMMENTS_API_KEY	The API key found 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

In order to fetch comments for a route, we’ll use the fetchMarkup() function from @jam-comments/remix/server. To avoid polluting browser code with Node built-ins, it’s recommended that you re-export that function from a *.server.ts file:

comments.server.ts

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

Then, retrieve the data and pass it to the <JamComments /> component. For more information on fetch options, see here.

// posts.$slug.tsx

import getPostFromWherever from "./get-posts";
import { json } from "@remix-run/node";
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 postSchema = {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    // ...the rest
  };

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

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

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

  return (
    <article>
      <div dangerouslySetInnerHTML={{ __html: content }}></div>

      {/* Comments will be rendered here: */}
      <JamComments markup={markup} />
    </article>
  );
}

Overriding Copy in UI

The JamComments UI comes with its own set of 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:

const commentData = await fetchMarkup({
  domain: process.env.JAM_COMMENTS_DOMAIN,
  apiKey: process.env.JAM_COMMENTS_API_KEY,
  path: `/posts/${params.slug}`,
  copy: {
    commentPlaceholder: "Write something",
    submitButton: "Send it!",
    namePlaceholder: "Ur Mom",
    emailPlaceholder: "[email protected]",
  },
});

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:

const commentData = await fetchMarkup({
  domain: process.env.JAM_COMMENTS_DOMAIN,
  apiKey: process.env.JAM_COMMENTS_API_KEY,
  path: `/posts/${params.slug}`,
  dateFormat: "DD/MM/YYYY",
});

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.