Documentation

Getting Started

Welcome to CommentRig! This guide will help you integrate CommentRig into your Svelte project.

Installation

To add CommentRig to your project, install it via npm:

npm install @commentrig/svelte

Setting Up

To setup CommentRig, in your Svelte project's src folder:

Create a new variable in your named PUBLIC_RIG_API_KEY .env and set it to your license key

Example:

PUBLIC_RIG_API_KEY="XXXX-XXXX-XXXX-XXX";

Note:

License keys are url binded, meaning only request from the domain names you update in your dashboard will go through

Basic Usage

<script>
import { Comment } from '@commentrig/svelte';

const entities = {
    title: 'Demo Page',
    email: 'demo@example.com',
    domain: 'https://example.com',
    rich: true
};
</script>

<!-- Rest of page content -->
<Comment {entities} />

Configuration Options

CommentRig is configured using the entities object. This object allows you to customize various aspects of the comment system for each instance. Here are the available options:

Property	Type	Required	Description
`title`	string	Yes	The title of the page or post where comments are being displayed.
`email`	string	Yes	The email of the author of the post.
`domain`	string	Yes	Your website's production domain URL. Used for authentication and test mode detection.
`rich`	boolean	No	Whether to use a rich text editor (true) or plain text editor (false). Defaults to false.
`user`	object	No	Properties of the current signed-in user (if any). See below for details.

User Object Properties

If a user is signed in, you can pass their information using the user object. This object can contain the following properties:

email (string): The user's email address
username or name (string): The user's display name
avatar (string): URL of the user's avatar image

Example Configuration

const entities = {
title: 'My Awesome Blog Post',
email: 'author@example.com',
domain: 'https://example.com',
rich: true,
user: {
    email: 'user@example.com',
    username: 'JohnDoe',
    avatar: 'https://example.com/avatar.jpg'
 }
};

Note:

CommentRig will always run in test mode if your production URL does not match the domain URL provided in the configuration.

Customization

CommentRig offers easy customization through CSS variables. You can adjust these variables to match your site's design:


:root {
    --rig-color-primary: #7dd3fc;
    --rig-color-accent: #3b82f6;  /* Defaults to primary color if not set */
    --rig-text-color: black;
    --rig-background-color: white;
    --rig-inactive-color: #ccc;
  }
  
  /* Dark mode example */
  html.dark {
    --rig-text-color: #404953;
    --rig-background-color: black;
    --rig-color-primary: #34b1e8;
  }

CSS Variables

--rig-color-primary: The primary color used throughout the CommentRig interface.
--rig-color-accent: An accent color for highlights or secondary elements. Defaults to the primary color if not set.
--rig-text-color: The main text color.
--rig-background-color: The background color of the CommentRig component.
--rig-inactive-color: Used for inactive elements or less prominent UI components.

These variables allow you to easily adjust the appearance of CommentRig to match your site's design. You can update these variables for different color schemes, including dark mode.

Additional Customization

While the CSS variables provide a quick way to adjust the overall look, CommentRig also allows for more detailed customization:

Every element in CommentRig has a class that you can target for more specific styling.
You can override these classes in your own CSS to further customize the appearance.

Tip:

When customizing CommentRig, ensure that you maintain sufficient color contrast for accessibility. Test your color choices to ensure readability for all users.

Events

Events emitted by the Comment component:

bind:commentLength: Returns the length of comments.

on:newComment: Fired when a new comment/reply is made.

on:commentDeleted: Fired when a comment/reply is deleted.