Skip to content

ttttonyhe/nexment

Repository files navigation

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


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: '[email protected]',
  },
  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