Skip to content

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

Terminal window
npm install @jam-comments/remix

Environment Variables

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

Environment Variables

VariableDescription
JAM_COMMENTS_DOMAINThe root domain of your site (without https://).
JAM_COMMENTS_API_KEYThe API key found in your account settings.
JAM_COMMENTS_ENVIRONMENTThe 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.

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”

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.