⚡ A blazing fast, lightweight, and open source comment system for your static website, blogs
You can visit the Below demo blog post to see the SupaComments in action.
SupaComments js bundle is less than 25kb and CSS bundle is less than 5kb.
Static Blog or Website
✨ Installation and Usage
- Clone the Repo
git clone https://github.com/mcnaveen/supacomments.git
- cd into the directory
- Install dependencies
- Configure the environment variables
cp .env.example .env
- In the Supabase Dashboard create a new project and database.
- Table name should be:
- 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
- Copy API URL and Key (Supabase Guide for Creating API URL and Key)
- Now open the
.envand change the values copied from the above step
- Change the Hostname to your domain name without http:// or https:// and trailing slash
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.
This will create a
comments.cssfiles under the
Copy and paste the two files to root of your static website or blog.
- To import the
comments.cssfile, paste the below code before
<script src="./comments.js"> <link rel="stylesheet" href="./comments.css" />
- Then, paste the Below code where you want to show the comments.
Now, If you open your static website or blog, you will see the comments section like below.
- 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
Checkout the Contributing Guide
⚠️ Use it with caution, Breaking changes ahead!
You can add features and fixes but please don’t claim this project as your own.
🙏 Additional Information
I hope you find this project useful. If you have any questions, please create an issue.
Copyright (c) 2022 SupaComments