Knowasiak community
Show HN: Discuzz – open-source Comment System

Show HN: Discuzz – open-source Comment System



Discuzz


Open source Comment System

Advertisements


Discuzz

Table of contents

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.

Advertisements

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="--- 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

  1. Discuzz component
yarn add @discuzz/discuzz
  1. Comment Viewer and Comment Composer
yarn add @discuzz/viewer-plaintext @discuzz/composer-plaintext
  1. 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=

Join the pack! Join 8000+ others registered users, and get chat, make groups, post updates and make friends around the world!
www.knowasiak.com/register/
Read More

Charlie Layers - avatar
About the author: Charlie Layers
Fill your life with experiences so you always have a great story to tell
Advertisements
Advertisements
Please login to continue.
Join and find an online community where thousands of people are posting their photos, videos and written articles daily.
No comments yet