A feature-rich serverless comment library based on LeanCloud

Foreword

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

See also

• Nexment for Vue.js / Web Component https://github.com/ttttonyhe/nexment-vue
• Nexment for React.js https://github.com/ttttonyhe/nexment

Docs

Visit Nexment documentation site at https://nexment.ouorz.com

Demo

Visit Nexment demo site at https://nexment-demo.ouorz.com

Installation

Part I - LeanCloud

1. Register / Login LeanCloud
2. Create an App in Dashboard
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)
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:

yarn add nexment

or using NPM:

npm install nexment

Use Nexment in your project:

Import nexment library:

import Nexment from "nexment"

Setup nexment configuration:

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: 'xxx@xxx.xxx',
  },
  blackList:[{
    name: "xxx",
    email: "xxx",
    keyword: "xxx",
    link: "xxx"
  },
  {
    keyword: "xxx"
  }]
};

Use the nexment component:

<Nexment config={config} />

Use Nexment in Next.js

Create a Nexment component(Nexment.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 <Nexment config={config} />;
};

export default Nexment;

import this Nexment component anywhere in your project using "next/dynamic":

import dynamic from "next/dynamic";
const NexmentDiv = dynamic(() => import("./Nexment"), {
  ssr: false,
});

const Index = () =>{
  return (
    <div>
      <NexmentDiv />
    </div>
  )
}

export default Index;

TypeScript Support

Nexment for React has full support for TypeScript type-checking

Roadmap

See Github projects→

Sponsor

Your name will be on the list Sponsors

Contribution

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