Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ttttonyhe/nexment

A Feature-rich, Framework-agnostic Serverless Comment Library
https://github.com/ttttonyhe/nexment

comment-system esbuild leancloud leancloud-storage react react-library reactjs typescript

Last synced: 22 days ago
JSON representation

A Feature-rich, Framework-agnostic Serverless Comment Library

Awesome Lists containing this project

README

        



A feature-rich serverless comment library based on LeanCloud



github ci


npm downloads


license



## Foreword

> **Note**
> This project is undergoing a major refactorization, stay tune for exciting updates to come.


## See also
+ Nexment for Vue.js / Web Component [https://github.com/ttttonyhe/nexment-vue](https://github.com/ttttonyhe/nexment-vue)
+ Nexment for React.js [https://github.com/ttttonyhe/nexment](https://github.com/ttttonyhe/nexment)


## Docs
Visit Nexment documentation site at [https://nexment.ouorz.com](https://nexment.ouorz.com)


## Demo
Visit Nexment demo site at [https://nexment-demo.ouorz.com](https://nexment-demo.ouorz.com)


## Installation
### Part I - LeanCloud
1. Register / Login [LeanCloud](https://leancloud.cn/dashboard/login.html#/signup)
2. Create an App in [Dashboard](https://leancloud.cn/dashboard/applist.html#/apps)
3. Go to Your App => **LeanStorage** tab => Objects
4. Create a class named "test" using default settings
5. Go to Your App => **Settings** tab => App keys
6. Copy AppID and AppKey
7. Configure REST API Server URL. For configuration instructions, see [How to Specify API Server URL (Chinese)](https://leancloud.cn/docs/custom-api-domain-guide.html#hash810845114)
8. Go to Your App => **Settings** tab => Security and add your project domain to Web secure domains


### Part II - Nexment
Add Nexment to your project dependencies
using Yarn:
```shell
yarn add nexment
```
or using NPM:
```shell
npm install nexment
```

Use Nexment in your project:

Import nexment library:
```js
import Nexment from "nexment"
```
Setup nexment configuration:
```js
const config = {
pageKey: 'xxx' | undefined;
features: {
linkInput: true | false | undefined,
replyListModal: true | false | undefined,
replyEmailNotifications: true | false | undefined,
descriptionTag: true | false | undefined,
} | undefined,
leancloud: {
appId: 'xxx',
appKey: 'xxx',
serverURL: 'https://xxx.xxx',
},
admin: {
name: 'xxx',
email: '[email protected]',
},
blackList:[{
name: "xxx",
email: "xxx",
keyword: "xxx",
link: "xxx"
},
{
keyword: "xxx"
}]
};
```
Use the nexment component:
```jsx

```


## Use Nexment in Next.js
Create a Nexment component(Nexment.tsx):
```tsx
import React from "react";
import Nexment from "nexment";

const Nexment = () => {
const config = {
pageKey: "xxx",
features: {
linkInput: true,
replyListModal: true,
replyEmailNotifications: true,
descriptionTag: true,
},
leancloud: {
appId: "xxx",
appKey: "xxx",
serverURL: "xxx",
},
admin: {
name: "xxx",
email: "xxx",
},
blackList:[
{
name: "xxx",
email: "xxx",
keyword: "xxx",
link: "xxx"
},
{
keyword: "xxx"
}
]
};
return ;
};

export default Nexment;
```

import this Nexment component anywhere in your project using "next/dynamic":
```tsx
import dynamic from "next/dynamic";
const NexmentDiv = dynamic(() => import("./Nexment"), {
ssr: false,
});

const Index = () =>{
return (




)
}

export default Index;
```


## TypeScript Support
Nexment for React has full support for TypeScript type-checking


## Roadmap
See Github [projects→](https://github.com/ttttonyhe/nexment/projects)


## Sponsor
Your name will be on the list [Sponsors](https://www.ouorz.com/sponsor)


## Contribution
File an issue whenever you encountered a problem, pull requests are always welcomed