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:

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'
 }
};

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.