ttttonyhe / nexment

A Feature-rich, Framework-agnostic Serverless Comment Library

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: '[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

nexment's Issues

[Suggestion]: Migrate to PBandJ

Given tsdx isn't maintained anymore and is very inefficient to todays standards, it may make sense to migrate to PBandJ:

https://github.com/moishinetzer/pbandj

It also includes config for vitest, changesets for publishing and other modern features and tools such as storybook v7 etc.

I'm happy to help make the transition if you need any help!