open-index/open-npm huggingface dataset:
npm package: @commentrig/svelte
Description: CommentRig, A seamless, powerfull modern comment management system for websites.
Latest version: 0.1.2

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

## Installation;

```bash
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

```js
// .env

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

### Import

Import Comment component from '@commentrig/svelte'

```js
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:

```js
let entities = {
    title: 'CommentRig Demo Page'
    email:'yaqeen@commentrig.com',
    domain:'https://commentrig.com',
    rich: true,
}
```

Feed this into commentrig.

```svelte
<Comment {entities} />
```

...And that's it.

![CommentRig Interface, A seamless, powerfull modern comment management system for websites.](https://paper-attachments.dropboxusercontent.com/s_AC91E74BCB9A4AAE2B2B844C910F19E6EB10764403AFDF37DF66C6D17BDECD57_1723389455179_Screenshot+2024-08-11+at+16-16-55+.png)

## 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

```css
: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](https://www.commentrig.com/docs/svelte)