CommentRig, A seamless, powerfull modern comment management system for websites.

Installation;

npm i @commentrig/svelte @commentrig/core quilljs

Usage;

Key Config;

In your .env, create a new variable name PUBLIC_RIG_API_KEY set it to the value of your license key.

example

// .env

PUBLIC_RIG_API_KEY = 'XXXXX-XXX-XXXX-XXX-XXXXXX';

Import

Import Comment component from '@commentrig/svelte'

import { Comment } from '@commentrig/svelte';

Props

Since commentrig is not using typescript, we have a built a custom way for props validation and invalidation.

Props includes:

• title: title of the page/post (string) (required)

• email: The email of the author of the the post (string) (required)

• domain: Your websites production domain url (string) (required).

  • It will always be in test mode if the your production url is running on does not match your domain url.

• rich: Whether to initialize with rich text editor or plain text editor (boolean) (optional). defaults to plain text.

• user: properties of the current signed in user if any (object) (optional)

  • email (string)
  • username/name (string)
  • avatar (url)

Example:

let entities = {
    title: 'CommentRig Demo Page'
    email:'[email protected]',
    domain:'https://commentrig.com',
    rich: true,
}

Feed this into commentrig.

<Comment {entities} />

...And that's it.

Customization;

while every element in CommentRig has a class you can modify it with, we have a set of custom variables to make things easier for you.

--rig-color-primary: Primary Color of your site.; --rig-color-accent: Accent color, defaults to primary color if not set.

--rig-background-color: Current background color of your site, this helps adjust areas of need relatively.

--rig-inactive-color: Used for inactive elements

You can and should update these attributes in dark mode.

Example

:root {
	--rig-color-primary: #7dd3fc;
	--rig-text-color: black;
	--rig-background-color: white;
}

/* Dark mode */
html.dark {
	--rig-text-color: #404953;
	--rig-background-color: black;
	--rig-color-primary: #34b1e8;
}

Go to docs