{"id":14968856,"url":"https://github.com/mcnaveen/supacomments","last_synced_at":"2025-04-05T05:05:20.050Z","repository":{"id":38191030,"uuid":"479794704","full_name":"mcnaveen/SupaComments","owner":"mcnaveen","description":"⚡ A blazing fast, lightweight, and open source comment system for your static website, blogs powered by Supabase","archived":false,"fork":false,"pushed_at":"2025-03-11T14:15:14.000Z","size":251,"stargazers_count":142,"open_issues_count":13,"forks_count":13,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-05T05:05:11.326Z","etag":null,"topics":["blog","comment-system","comments-widget","gatsby","hugo","jekyll","producthunt","supabase","supabase-client","supabase-js","svelte","tailwindcss"],"latest_commit_sha":null,"homepage":"https://supacomments.vercel.app/?ref=github-repo","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mcnaveen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-09T17:18:07.000Z","updated_at":"2025-03-31T15:47:01.000Z","dependencies_parsed_at":"2024-03-27T17:44:52.006Z","dependency_job_id":"dc175c6c-a9dc-4a7c-a384-569e837dbf9e","html_url":"https://github.com/mcnaveen/SupaComments","commit_stats":{"total_commits":39,"total_committers":4,"mean_commits":9.75,"dds":0.5384615384615384,"last_synced_commit":"0c93ef43c7fa3758b8652fd30566ba9da437d142"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcnaveen%2FSupaComments","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcnaveen%2FSupaComments/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcnaveen%2FSupaComments/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcnaveen%2FSupaComments/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mcnaveen","download_url":"https://codeload.github.com/mcnaveen/SupaComments/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289426,"owners_count":20914464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blog","comment-system","comments-widget","gatsby","hugo","jekyll","producthunt","supabase","supabase-client","supabase-js","svelte","tailwindcss"],"created_at":"2024-09-24T13:40:42.775Z","updated_at":"2025-04-05T05:05:20.029Z","avatar_url":"https://github.com/mcnaveen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## SupaComments \n\n\u003e 🔥 This Project will be renamed and you can expect some bigger features soon. (Updated: 16/08/2022)\n\n![SupaComments](./images/cover.png)\n\u003e :zap: A blazing fast, lightweight, and open source comment system for your static website, blogs\n\n![build](https://github.com/mcnaveen/SupaComments/actions/workflows/build.yml/badge.svg) \n\n\u003ca href=\"https://www.producthunt.com/posts/supacomments?utm_source=badge-top-post-badge\u0026utm_medium=badge\u0026utm_souce=badge-supacomments\" target=\"_blank\"\u003e\u003cimg src=\"https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=341628\u0026theme=light\u0026period=daily\" alt=\"SupaComments - A\u0026#0032;blazing\u0026#0032;fast\u0026#0032;comment\u0026#0032;system\u0026#0032;for\u0026#0032;your\u0026#0032;JamStack\u0026#0032;sites | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /\u003e\u003c/a\u003e\n\n### :rocket: Demo\n\nYou can visit the Below demo blog post to see the SupaComments in action.\n\n\u003e [https://supacomments.vercel.app/demo/](https://supacomments.vercel.app/demo/)\n\n### :magic_wand: Lightweight\n\nSupaComments js bundle is less than 25kb and CSS bundle is less than 5kb.\n\n![SupaComments](./images/lightweight.png)\n\n![Page Speed Insights](./images/psi.png)\n\n### :package: Requirements\n\n```\nStatic Blog or Website\n```\n\n### :sparkles: Installation and Usage\n\n- Clone the Repo\n\n```\ngit clone https://github.com/mcnaveen/supacomments.git\n```\n\n- cd into the directory\n\n```\ncd supacomments\n```\n\n- Install dependencies\n\n```\nyarn install\n```\n\n- Configure the environment variables\n\n```\ncp .env.example .env\n```\n\n- In the [Supabase Dashboard](https://app.supabase.io) create a new project and database.\n- Table name should be: `comments`\n- Make sure you have the same table structure like below.\n\n```sql\nid - int8\nname - text\nemail - text\npostURL - text\ncomment - text\ncreated_at - timestamp\nshow - boolean\n```\n\n- Default value for `show` should be `true`\n\n![Table Structure](./images/db.png)\n\n- Copy API URL and Key ([Supabase Guide for Creating API URL and Key](https://supabase.com/docs/guides/api#api-url-and-keys))\n- Now open the `.env` and change the values copied from the above step\n\n\u003e ### Example\n\u003e\n\u003e ```\n\u003e SUPACOMMENT_SUPABASE_URL=https://xxxxxxxxxxxx.supabase.co\n\u003e SUPACOMMENT_SUPABASE_ANON_KEY=xxxxxxxxxxxxxxxxx\n\u003e ```\n\nOnce you have the environment variables set, run the following command to start the build process.\n\n```\nyarn build\n```\n\n- This will create a `comments.js` \u0026 `comments.css` files under the `pubic/build` directory.\n\n- Copy and paste the two files to root of your static website or blog.\n\n### :pen: Usage\n\n- To import the `comments.js` \u0026 `comments.css` file, paste the below code before `\u003c/head\u003e` closing tag.\n\n```html\n\u003cscript src=\"./comments.js\"\u003e\n\u003clink rel=\"stylesheet\" href=\"./comments.css\" /\u003e\n```\n\n- Then, paste the Below code where you want to show the comments.\n- Change the `yoursite.com` to your website URL. (No https:// or http:// or / at the end)\n- Example: `mysupacomments.com`\n\n```html\n\u003cdiv id=\"comments\" data-url=\"yoursite.com\" clickToLoad=\"false\"\u003e\u003c/div\u003e\n```\n\n- 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`)\n\nNow, If you open your static website or blog, you will see the comments section like below.\n\n![Comments Example](./images/comments.png)\n\n### :white_check_mark: TODO/Features\n\n- [x] Ability to add comment section based on div element\n- [x] Click to load user's comments\n- [ ] Add native styling instead of Tailwind CSS\n- [ ] Add Docker support\n- [ ] Add Reply to comment feature\n- [ ] Add ability to edit and delete comment\n- [ ] Add ability to add comment as logged in user or anonymous user\n- [ ] Add Admin Panel for managing comments (As Monorepo)\n\n\u003e These are the planned features, if you have any feature request, please open an feature request on [Github](https://github.com/mcnaveen/SupaComments/issues/new?assignees=\u0026labels=\u0026template=feature_request.md\u0026title=)\n\n### :books: Contributions\nCheckout the [Contributing Guide](CONTRIBUTION.md)\n### Breaking Changes\n:warning: Use it with caution, Breaking changes ahead!\n\n### Disclaimer\n\nYou can add features and fixes but please don't claim this project as your own.\n\n### :pray: Additional Information\n\nThis project uses [Supabase](https://supabase.com) for the database, [Svelte](https://svelte.dev/) for the frontend and [Tailwind CSS](https://tailwindcss.com/) for the styling and Demo is built with Next.js\n\n\n### :green_heart: Message\n\nI hope you find this project useful. If you have any questions, please create an issue.\n\n\n### License\n\nCopyright (c) 2022 [SupaComments](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmcnaveen%2Fsupacomments","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmcnaveen%2Fsupacomments","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmcnaveen%2Fsupacomments/lists"}