mcnaveen/supacomments

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

SupaComments

🔥 This Project will be renamed and you can expect some bigger features soon. (Updated: 16/08/2022)

⚡ 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.

https://supacomments.vercel.app/demo/

🪄 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 be true

• 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

Example

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.
• Change the yoursite.com to your website URL. (No https:// or http:// or / at the end)
• Example: mysupacomments.com

<div id="comments" data-url="yoursite.com" clickToLoad="false"></div>

• Optionally, You can set the clickToLoad attribute to true to disable autoloading of comments, the User has to click Load Comments button. (Default is false)

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

⚠️ 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 Next.js

💚 Message

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

License

Copyright (c) 2022 SupaComments

supacomments's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Replace dependency rollup-plugin-terser with @rollup/plugin-terser 0.1.0
• Update dependency autoprefixer to v10.4.19
• Update actions/checkout action to v4
• Update actions/setup-node action to v4
• Update dependency @rollup/plugin-commonjs to v25
• Update dependency @rollup/plugin-json to v6
• Update dependency @rollup/plugin-node-resolve to v15
• Update dependency @rollup/plugin-replace to v5
• Update dependency @supabase/supabase-js to v2
• Update dependency concurrently to v8
• Update dependency postcss-cli to v11
• Update dependency rollup to v4
• Update dependency rollup-plugin-css-only to v4
• Update dependency svelte to v4
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency @rollup/plugin-commonjs to v22.0.2
• Update dependency @supabase/supabase-js to v1.35.7
• Update actions/checkout action to v3.6.0
• Update actions/setup-node action to v3.8.2
• Update dependency concurrently to v7.6.0
• Update dependency dotenv to v16.4.5
• Update dependency rollup to v2.79.1
• Update dependency rollup-plugin-svelte to v7.2.0
• Update dependency svelte to v3.59.2
• Update dependency tailwindcss to v3.4.3
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/build.yml

• actions/checkout v3.0.2
• actions/setup-node v3.2.0

npm

package.json

• @supabase/supabase-js 1.35.3
• generate-avatar 1.4.10
• sirv-cli 2.0.2
• @rollup/plugin-commonjs 22.0.0
• @rollup/plugin-json 4.1.0
• @rollup/plugin-node-resolve 13.3.0
• @rollup/plugin-replace 4.0.0
• autoprefixer 10.4.18
• concurrently 7.2.0
• cross-env 7.0.3
• dotenv 16.0.1
• postcss-cli 9.1.0
• rollup 2.74.1
• rollup-plugin-css-only 3.1.0
• rollup-plugin-livereload 2.0.5
• rollup-plugin-svelte 7.1.0
• rollup-plugin-terser 7.0.2
• svelte 3.48.0
• tailwindcss 3.0.24

---

• Check this box to trigger a request for Renovate to run again on this repository

Commenting on comments

Is your feature request related to a problem? Please describe.
No problem. But a comment section gets more lively when you can comment on other peoples comment. At least for admins

Describe the solution you'd like
Commenting on other users comment

Additional context
I think that clear enough ;-)

clickToLoad="false" - seems not working

clickToLoad="false" - seems not working. Must click to load/show comments.

Small update:
Tested with Chrome and Firefox. Server side was cPanel.

(nice design/layout. A manual installation guide would be great. Seems not to match goHugo static sites where js goes into ./static/js/ and is then build by the Hugo command)