Show HN: Discuzz – open-source Comment System

Discuzz

Open source Comment System

Table of contents

Homepage
Features
Usage
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.

To suggest anything, please join our Discussion board.

Usage

You can embed Discuzz in many ways:

As a Web Component
As a React Component
…

Firebase

You’d need to create a Firebase project, and add a web platform. It will give you the config parameters.

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="--- PUT THE firebaseConfig HERE ---" 
  auths="-- PUT THE AUTHENTICATION METHODS YOU WANT HERE ---"
>x-discuzz>

Example

“>

<script src="https://discuzz.mph.am/static/js/main.js">script>
<x-discuzz 
  service="{'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

Discuzz component

yarn add @discuzz/discuzz

Comment Viewer and Comment Composer

yarn add @discuzz/viewer-plaintext @discuzz/composer-plaintext

Locale

yarn add @discuzz/locale-en date-fns

Example component usage

);
}”>

import { Discuzz } from '@discuzz/discuzz'

const LocaleProviderEn = lazy(() => import('@discuzz/locale-en'))
const ComposerPlaintext = lazy(() => import('@discuzz/composer-plaintext'))
const ViewerPlaintext = lazy(() => import('@discuzz/viewer-plaintext'))

function App() {
  return (
    <Suspense fallback={<span>Loading...</span>}>
      <Discuzz
        url={global.location.href}
        service={{
          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=