Code Monkey home page Code Monkey logo

easycomments's Introduction

Easy Comments is a simple web app that allows you to add comments functionality to any website, be it a portfolio site or a blog

Read the blog post - https://blog.anishde.dev/easy-comments

MIT License Shields.io Badge GitHub Repo stars


๐ŸŽ›๏ธ Features

  • Unlimited Sites
  • Unlimited Comments
  • Approval stage for comments (optional)
  • Free and Open Source
  • No Trackers and No Ads
  • Route wise comments
  • Ability to edit and delete a comment
  • Markdown Support

๐Ÿ–ผ๏ธ Screenshots

Click to see screenshots Home Page Screenshot Sites Page Screenshot Manage Comments Page Screenshot My Comments Page Screenshot Leave a Comment Page Screenshot

โœ”๏ธ To-Do

  • Support for reactions
  • Comment threads
  • Better markdown support, support for LaTeX
  • Support for custom color schemes, site based

Open a discussion for a feature request and I will add it here!!!


๐Ÿ“– Guide

Create an account

First click the Sign In button

Sign in picture

You will be redirected to an Auth0 Universal Login page where you can sign in with Google or else create an account with an email and password.

Auth0 Universal Login Page Picture

Add a Site

You need to add a site to get a link for embedding the comments widget. Visit the Sites Dashboard to add a site.

Add Site Button Picutre

Here you need to just fill in the required fields. You can change some settings if you want to (can be changed later). After you are done, click Save.

AddSiteModal Picture

Get the Embed URL

Now you need to click on the button that says "See Embed Url" and copy the Url from there. You can specify a route and also a preferred color scheme.

See Embed Url Button Picuture

See Embed Url Modal Picture

You are almost done, you are now ready to embed the comments widget on your website

Embed the Comments Widget

This can be done in many ways. The embed supports Iframe Resizer. I would recommend using this. You can refer the Iframe Resizer documentation for more information.

For React - https://github.com/davidjbradshaw/iframe-resizer-react

For Vue - https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/use_with/vue.md

For Angular - davidjbradshaw/iframe-resizer#478 (comment)

You can also embed this in any website which supports embeds (e.g. Notion)


๐Ÿ› Encountered a bug?

Open a GitHub issue in this repository. There is a bug report remplate so please stick to that.

๐Ÿ›ก๏ธ Contibuting

Pull requests are welcome!!! Please fork the project and create a seperate branch for the pull request. Please stick to just 1 new feature or fixing 1 big per pull request. If you want to make a big change, open a discussion thread in the discussions section in the "Ideas" catogery. If you open a pull request and you are still working on it, please label it WIP (Work in Progress) and make it a draft. I also recommend you to stick to the yarn package manager.


๐Ÿ’ป Running locally

First clone the repository using git or download the zip and extract it.

https://github.com/AnishDe12020/easycomments.git

You must have NodeJS and NPM installed. We use yarn for manageing dependencies but you can use npm as well.

To install dependencies -

  • With npm
npm install
  • With yarn
yarn

You will need to fill out some environment vairables. Refer to .env.example

Firstly, you need to create a new Auth0 account if you already don't have one. You need to create a SPA application and fill out the required fields. You can refer to the NextJS Auth0 Quickstart for a guide.

You also need to make a new project in firebase and create a web application in the same. You can refer to the Firebase Web Setup Guide. You are also required to create a Firebase service account. This can be done in the Firebase Proect Settings -> Service Accounts. Make sure you download the JSON file and keep it somewhere safe as it contains sensitive information and you will not be able to download it again.

For the environment variable NEXT_PUBLIC_SITE_EMBED_URL, you can use the following value -

https://easycomments.anishde.dev/embed/EwI3VgCSuJkl85wh18Ru/

Now you can run the development server.

With npm -

npm run dev

With yarn -

yarn dev

Then visit localhost:3000 in your browser to see the site in a development environment.

โญ If you liked the project, don't forget to star it!!!

Note: This was one of my first projects and I had built it after learning a lot from Lee Robinson's React2025 course

easycomments's People

Contributors

anishde12020 avatar chiragmahawar7 avatar deepsourcebot avatar dependabot[bot] avatar shadeslayer234 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

easycomments's Issues

Support for reactions on comments

Discussed in #5

Originally posted by AnishDe12020 September 29, 2021
People might want to react to comments with emojis, this will be a great feature to have

[BUG] Cannot create account for easy comments, server 500 error

Is there an existing issue for this?

  • I have searched the existing issues

Current Behavior

When I try and create an account, or indeed open any page apart from the main page on the easycomments website, it throws a 500 server error.

image
image

Expected Behavior

It should have opened the sign up page, but it didn't.

Steps To Reproduce

Try and log in to the easy comments dashboard.

Browser

Vivaldi browser. Doesn't work on alternative browsers either.

Anything else?

No response

Support for threads in comments

Discussed in #3

Originally posted by AnishDe12020 September 29, 2021
Support for threads will be a great feature as replies to a comment can be kept separate from other comments and replies

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.