Discuzz Open source Comment System

Related tags

Validation discuzz
Overview

Discuzz

Open source Comment System


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.

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={['google', 'apple', 'facebook', 'github', 'twitter', 'microsoft', 'yahoo']}
        config={{
          composer: ComposerPlaintext,
          viewer: ViewerPlaintext
        }}
        locale={LocaleProviderEn}
      />
    </Suspense>
  );
}

Advanced usages

Markdown support

yarn add @discuzz/viewer-markdown @discuzz/composer-markdown
); }">
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'))

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={['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 the correct theme.

Discuzz is built on top of MUI library. You can customize by using the component, to wrap outside the component.

Custom locale provider

You could write your own locale provider, using createProvider function, then pass it to the 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 follows the auth.ts and posts.ts.

Contributing

Please contribute using GitHub Flow. Create a branch, add commits, and then open a pull request.

License

This project is licensed under the GNU General Public License v3.0 - see the LICENSE file for details.

You might also like...

Reference for How to Write an Open Source JavaScript Library - https://egghead.io/series/how-to-write-an-open-source-javascript-library

Reference for How to Write an Open Source JavaScript Library The purpose of this document is to serve as a reference for: How to Write an Open Source

Dec 24, 2022

A damn-sexy, open source real-time dashboard builder for IOT and other web mashups. A free open-source alternative to Geckoboard.

A damn-sexy, open source real-time dashboard builder for IOT and other web mashups. A free open-source alternative to Geckoboard.

freeboard free·board (noun) *\ˈfrē-ˌbȯrd* the distance between the waterline and the main deck or weather deck of a ship or between the level of the w

Dec 28, 2022

An Open-Source Platform to certify open-source projects.

An Open-Source Platform to certify open-source projects.

OC-Frontend This includes the frontend for Open-Certs. 📜 After seeing so many open-source projects being monetized 💵 without giving any recognition

Oct 23, 2022

This project is for hacktoberfest to encourage new developer and open source developers to contribute to open source and improve skills which require debugging, write testable code, industry standards, problem solving and many more,

This project is for hacktoberfest to encourage new developer and open source developers to contribute to open source and improve skills which require debugging, write testable code, industry standards, problem solving and many more,

🚀 Blog project for hacktoberfest In this repository, you can find issues related to a blog project that is built on top of Next.js. The project is a

Oct 9, 2022

This is a project for open source enthusiast who want to contribute to open source in this hacktoberfest 2022. 💻 🎯🚀

This is a project for open source enthusiast who want to contribute to open source in this hacktoberfest 2022.  💻 🎯🚀

HACKTOBERFEST-2022-GDSC-IET-LUCKNOW Beginner-Hacktoberfest Need Your first pr for hacktoberfest 2k22 ? come on in About Participate in Hacktoberfest b

Oct 29, 2022

İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

 İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

🟡 instagram-clone This is a instagram clone. You can sign in, sign up, upload image, make comment 📷 ⚡ LIVE To check out the live demo of this app AB

Apr 20, 2022

In this project we made a Tv shows webpage where you can like or comment the different shows.

In this project we made a Tv shows webpage where you can like or comment the different shows.

JS Capstone Project In this project we made a Tv shows webpage where you can like or comment the differents shows. Built With HTML CSS JavaScript Lint

Mar 16, 2022

GitHub Action that posts the report in a comment on a GitHub Pull Request from coverage data generated by nyc (istanbul)

GitHub Action that posts the report in a comment on a GitHub Pull Request from coverage data generated by nyc (istanbul)

GitHub Action: Report NYC coverage GitHub Action that posts the report in a comment on a GitHub Pull Request from coverage data generated by nyc (ista

Nov 23, 2022

An action intended to run on pull request and post a comment summarizing any changes to DevCycle variables.

An action intended to run on pull request and post a comment summarizing any changes to DevCycle variables.

Overview With this Github action, information on which DevCycle features have been added or removed in a code change will be shown directly on each Pu

Jun 14, 2022

A website which displays a list of movies and allows the user to leave a comment and like.

A website which displays a list of movies and allows the user to  leave a comment and  like.

Movie-website Description Mobile Version Desktop Version "Movie-website" is a website which display movies from TVmaze api allowing users to like and

Nov 7, 2022

A webpage where the user can search for different TV shows, comment them and like them.

A webpage where the user can search for different TV shows, comment them and like them.

TV Shows In this project we built a webpage where the user can search for different TV shows, comment them and like them. Video Built With Major langu

Jul 9, 2022

A website that allows users to find, like, and comment on different TV shows.

TV Shows Network A website that allows users to find, like, and comment on different TV shows. Built With: HTML SCSS JavaScript Webpack TVMaze API & I

Dec 21, 2022

A website where all the members can participate and ask questions. anybody can comment and give the answer.

A website where all the members can participate and ask questions. anybody can comment and give the answer. if the creator of the question feels that answer is correct then he/she can mark the answer as correct. The project is under construction. Open source contributions are most welcome.🙌

Dec 19, 2022

An Awesome Toggle Menu created with HTML,CSS,JQuery,font-awesome and line by line comment.

An Awesome Toggle Menu created with HTML,CSS,JQuery,font-awesome and line by line comment.

Demo : https://blackx-732.github.io/AwesomeMenu/ Under open source license No ©copyright issues Anyone can be modify this code as well Specifically we

Feb 9, 2021

This App is about British Food where you find a list of meals that you can like and comment.

British Classic Meals The British Classic Meals is a seclection of the most favorite and famous british recipes. Things you can do in this website: ch

Aug 20, 2022

A list of movies are shown and you can add a comment on them or like them.

Dynasty Entertainment. A list of movies are shown and you can add a comment on them or like them. Built With HTML, CSS & JavaScript. webpack, bootstra

Nov 25, 2022

Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Try live example at https://duetds.github.io/date-picker/

Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Try live example at https://duetds.github.io/date-picker/

Duet Date Picker Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Duet Date Picker can be implemented and us

Jan 6, 2023

Free, open-source crypto trading bot, automated bitcoin / cryptocurrency trading software, algorithmic trading bots. Visually design your crypto trading bot, leveraging an integrated charting system, data-mining, backtesting, paper trading, and multi-server crypto bot deployments.

Free, open-source crypto trading bot, automated bitcoin / cryptocurrency trading software, algorithmic trading bots. Visually design your crypto trading bot, leveraging an integrated charting system, data-mining, backtesting, paper trading, and multi-server crypto bot deployments.

Free, open-source crypto trading bot, automated bitcoin / cryptocurrency trading software, algorithmic trading bots. Visually design your crypto trading bot, leveraging an integrated charting system, data-mining, backtesting, paper trading, and multi-server crypto bot deployments.

Jan 1, 2023
Releases(v1.11.18)
Owner
null
Credit Card Issuance System with Sudo.Africa

sudo-creditcard Credit Card Issuance System with Sudo.Africa Project Structure Client - Frontend (Vue JS) src assets compponents router service (api r

Shamsuddeen Omacy 1 Feb 6, 2022
This is the code repository of the official mun testnet validator node source code.

How to join Munchain network Infrastructure **Recommended configuration:** - Number of CPUs: 4 - Memory: 16GB - OS: Ubuntu 22.04 LTS - Allow all incom

MUN Blockchain 16 Dec 15, 2022
An open UI for Hydra, a protocol on Solana for facilitating collective account pooling, fan out wallet and dao treasury

An open UI for Hydra, a protocol on Solana for facilitating collective account pooling, fan out wallet and dao treasury.

Cardinal 16 Dec 20, 2022
⚡ A blazing fast, lightweight, and open source comment system for your static website, blogs powered by Supabase

SupaComments ⚡ A blazing fast, lightweight, and open source comment system for your static website, blogs ?? Demo You can visit the Below demo blog po

MC Naveen 112 Dec 27, 2022
The Frontend of Escobar's Inventory Management System, Employee Management System, Ordering System, and Income & Expense System

Usage Create an App # with npx $ npx create-nextron-app my-app --example with-javascript # with yarn $ yarn create nextron-app my-app --example with-

Viver Bungag 4 Jan 2, 2023
Personal blog and portfolio with a admin panel and comment system.

Implementation of a Full Stack Blog With a Comment System And Admin Panel With PHP, React & MYSQL FULL DOCUMENTATION SITE LINK Contents Database Desig

Andres Arturo Rodriguez Calderon 22 Oct 21, 2022
A simple comment system with backend support.

Waline A simple comment system with backend support. 中文 README Documatation English | 简体中文 Feature Fast Really Safe Support full markdown syntax Simpl

Waline 1.2k Jan 9, 2023