SupaComments

SupaComments

⚡ A blazing fast, lightweight, and open source comment system for your static website, blogs

build

🚀 Demo

You can visit the Below demo blog post to see the SupaComments in action.

https://supacomments.netlify.app/abc/

🪄 Lightweight

SupaComments js bundle is less than 25kb and CSS bundle is less than 5kb.

SupaComments

Page Speed Insights

📦 Requirements

Static Blog or Website

✨ Installation and Usage

  • Clone the Repo
git clone https://github.com/mcnaveen/supacomments.git
  • cd into the directory
cd supacomments
  • Install dependencies
yarn install
  • Configure the environment variables
cp .env.example .env
  • In the Supabase Dashboard create a new project and database.
  • Table name should be: comments
  • Make sure you have the same table structure like below.

id - int8
name - text
email - text
postURL - text
comment - text
created_at - timestamp
show - boolean
  • Default value for show should be true

Table Structure

  • Copy API URL and Key (Supabase Guide for Creating API URL and Key)
  • Now open the .env and change the values copied from the above step
  • Change the Hostname to your domain name without http:// or https:// and trailing slash

Example

SUPACOMMENT_HOST_URL=supabase.com
SUPACOMMENT_SUPABASE_URL=https://xxxxxxxxxxxx.supabase.co
SUPACOMMENT_SUPABASE_ANON_KEY=xxxxxxxxxxxxxxxxx

Once you have the environment variables set, run the following command to start the build process.

yarn build
  • This will create a comments.js & comments.css files under the pubic/build directory.

  • Copy and paste the two files to root of your static website or blog.

🖊️ Usage

  • To import the comments.js & comments.css file, paste the below code before </head> closing tag.

<script src="./comments.js">
<link rel="stylesheet" href="./comments.css" />
  • Then, paste the Below code where you want to show the comments.
<div id='comments'></div>

Now, If you open your static website or blog, you will see the comments section like below.

Comments Example

✅ TODO/Features

  • Ability to add comment section based on div element
  • Click to load user’s comments
  • Add native styling instead of Tailwind CSS
  • Add Docker support
  • Add Reply to comment feature
  • Add ability to edit and delete comment
  • Add ability to add comment as logged in user or anonymous user
  • Add Admin Panel for managing comments (As Monorepo)

These are the planned features, if you have any feature request, please open an feature request on Github

📚 Contributions

Checkout the Contributing Guide

Breaking Changes

⚠️ Use it with caution, Breaking changes ahead!

Disclaimer

You can add features and fixes but please don’t claim this project as your own.

🙏 Additional Information

This project uses Supabase for the database, Svelte for the frontend and Tailwind CSS for the styling and Demo is built with Gatsby MDX Starter.

💚 Message

I hope you find this project useful. If you have any questions, please create an issue.

License

Copyright (c) 2022 SupaComments

GitHub

View Github