@discuzz/discuzz NPM

Discuzz

Homepage
Features
Usage - Examples - Firebase - Web Component - React Component - Advanced usages
Contributing
Changelog
License

Homepage

discuzz.mph.am

Features

Discuzz is an open source comment system, that you can embed in your website to increase reader engagement, grow audience and traffic.
Supporting Firestore as the data storage, with Realtime and Offline support. You can use Discuzz easily without any backend server.
With Firebase Auth support, you can provide many ways to authenticate for your users.
You can easily config the access control, to adjust permissions (Example: open to all people, or only authenticated users, or you can also turn on moderation mode for every comments)
Customizable theme, with built-in light/dark theme.
Also, you can write your own Authentication provider and Data provider, and configure them with Discuzz.

To suggest anything, please join our Discussion board.

Usage

You can embed Discuzz in many ways:

As a Web Component
As a React Component
...

Examples

There are several example integrations, which you can check here

Firebase

If you want to use Firebase as the Authentication & Data provider, you'd need to create a Firebase project, and add a web platform. It will give you the config parameters.

ABI

Web Component

You can embed Discuzz in your website with the following code

<script src="https://discuzz.mph.am/static/js/main.js"></script>
<x-discuzz
  service="{'auth':'[AUTH PROVIDER]','data':'[DATA PROVIDER]','config':'[SERVICE CONFIG]'}"
  auths="[IDENTITY PROVIDER LIST]"
></x-discuzz>

Example

<script src="https://discuzz.mph.am/static/js/main.js"></script>
<x-discuzz 
  service="{'auth':'firebase', 'data': 'firestore', 'config': {'apiKey':'AIzaSyDm837cbdbvkrAdYL9TAqUF3iML6UvZXk4','authDomain':'fire-talk-88.firebaseapp.com','projectId':'fire-talk-88','storageBucket':'fire-talk-88.appspot.com','messagingSenderId':'719566664522','appId':'1:719566664522:web:e1a9d26be22387e55b47b3'}}" 
  auths="['google', 'apple', 'facebook', 'github', 'twitter', 'microsoft', 'yahoo']"
/></x-discuzz>

React Component

Install dependencies 1) Discuzz component

yarn add @discuzz/discuzz

2) Locale

yarn add @discuzz/locale-en date-fns

3) Auth & Data provider

yarn add @discuzz/auth-firebase @discuzz/data-firestore firebase

Example component usage

import { Discuzz } from '@discuzz/discuzz'

import LocaleProviderEn from '@discuzz/locale-en'
import AuthFirebase from '@discuzz/auth-firebase'
import DataFirestore from '@discuzz/data-firestore'

function App() {
  return (
    <Discuzz
      url={global.location && global.location.href}
      service={{
        auth: AuthFirebase,
        data: DataFirestore,
        config: {
          apiKey: "AIzaSyDm837cbdbvkrAdYL9TAqUF3iML6UvZXk4",
          authDomain: "fire-talk-88.firebaseapp.com",
          projectId: "fire-talk-88",
          storageBucket: "fire-talk-88.appspot.com",
          messagingSenderId: "719566664522",
          appId: "1:719566664522:web:e1a9d26be22387e55b47b3"
        }
      }}
      auths={['google', 'apple', 'facebook', 'github', 'twitter', 'microsoft', 'yahoo']}
      locale={LocaleProviderEn}
    />
  )
}

Advanced usages

Code splitting & Lazy load

You can config Discuzz to load services and providers on-demand with Suspense.

import { lazy, Suspense } from 'react'
import { Discuzz, loadService } from '@discuzz/discuzz'

const LocaleProviderEn = lazy(() => import('@discuzz/locale-en'))

const AuthFirebase = loadService(() => import('@discuzz/auth-firebase'))
const DataFirestore = loadService(() => import('@discuzz/data-firestore'))

function App() {
  return (
    <Suspense fallback={<span>Loading...</span>}>
      <Discuzz
        url={global.location && global.location.href}
        service={{
          auth: AuthFirebase,
          data: DataFirestore,
          config: {
            apiKey: "AIzaSyDm837cbdbvkrAdYL9TAqUF3iML6UvZXk4",
            authDomain: "fire-talk-88.firebaseapp.com",
            projectId: "fire-talk-88",
            storageBucket: "fire-talk-88.appspot.com",
            messagingSenderId: "719566664522",
            appId: "1:719566664522:web:e1a9d26be22387e55b47b3"
          }
        }}
        auths={['google', 'apple', 'facebook', 'github', 'twitter', 'microsoft', 'yahoo']}
        locale={LocaleProviderEn}
      />
    </Suspense>
  );
}

On NextJS, you can lazy load modules with next/dynamic.

import lazy from 'next/dynamic'
import { Discuzz, loadService } from '@discuzz/discuzz'

const LocaleProviderEn = lazy(() => import('@discuzz/locale-en'), { ssr: false })

const AuthFirebase = loadService(() => import('@discuzz/auth-firebase'))
const DataFirestore = loadService(() => import('@discuzz/data-firestore'))

function App() {
  return (
    <Discuzz
      url={global.location && global.location.href}
      service={{
        auth: AuthFirebase,
        data: DataFirestore,
        config: {
          apiKey: "AIzaSyDm837cbdbvkrAdYL9TAqUF3iML6UvZXk4",
          authDomain: "fire-talk-88.firebaseapp.com",
          projectId: "fire-talk-88",
          storageBucket: "fire-talk-88.appspot.com",
          messagingSenderId: "719566664522",
          appId: "1:719566664522:web:e1a9d26be22387e55b47b3"
        }
      }}
      auths={['google', 'apple', 'facebook', 'github', 'twitter', 'microsoft', 'yahoo']}
      locale={LocaleProviderEn}
    />
  );
}

Markdown support

yarn add @discuzz/viewer-markdown @discuzz/composer-markdown rich-markdown-editor styled-components

import { Discuzz } from '@discuzz/discuzz'

const LocaleProviderEn = lazy(() => import('@discuzz/locale-en'))
const ComposerMarkdown = lazy(() => import('@discuzz/composer-markdown'))
const ViewerMarkdown = lazy(() => import('@discuzz/viewer-markdown'))

const AuthFirebase = loadService(() => import('@discuzz/auth-firebase'))
const DataFirestore = loadService(() => import('@discuzz/data-firestore'))

function App() {
  return (
    <Suspense fallback={<span>Loading...</span>}>
      <Discuzz
        url={global.location && global.location.href}
        service={{
          auth: AuthFirebase,
          data: DataFirestore,
          config: {
            apiKey: "AIzaSyDm837cbdbvkrAdYL9TAqUF3iML6UvZXk4",
            authDomain: "fire-talk-88.firebaseapp.com",
            projectId: "fire-talk-88",
            storageBucket: "fire-talk-88.appspot.com",
            messagingSenderId: "719566664522",
            appId: "1:719566664522:web:e1a9d26be22387e55b47b3"
          }
        }}
        auths={['google', 'apple', 'facebook', 'github', 'twitter', 'microsoft', 'yahoo']}
        config={{
          composer: ComposerMarkdown,
          viewer: ViewerMarkdown
        }}
        locale={LocaleProviderEn}
      />
    </Suspense>
  )
}

Theming

By default, Discuzz will check the current user's browser light/dark preference to setup theme palette.

You can set it manually by passing light or dark to the theme parameter.

Discuzz is built on top of MUI library. You can fully customize by passing a theme object into the theme parameter.

Custom locale provider

You could write your own locale provider, using createProvider function, then pass it to the <Discuzz/> component.

Custom data & authentication provider

You could also write your own data & authentication provider to using other services instead of Firebase, as long as it fullfills the Auth and Data type.

Tip: You can take a look at auth-firebase and data-firestore.