SupaComments
β‘ A blazing fast, lightweight, and open source comment system for your static website, blogs
π
Demo
You can visit the Below demo blog post to see the SupaComments in action.
πͺ
Lightweight
SupaComments js bundle is less than 25kb and CSS bundle is less than 5kb.
π¦
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 betrue
- 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 thepubic/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.
β
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
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