Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/ttttonyhe/nexment
- Owner: ttttonyhe
- License: mit
- Created: 2020-07-12T02:43:36.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-06-19T20:15:25.000Z (7 months ago)
- Last Synced: 2024-12-13T20:54:16.839Z (27 days ago)
- Topics: comment-system, esbuild, leancloud, leancloud-storage, react, react-library, reactjs, typescript
- Language: TypeScript
- Homepage: https://nexment-demo.ouorz.com
- Size: 17.1 MB
- Stars: 38
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
## 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