https://github.com/marksteve/usapan
A no-frills comments widget powered by Firebase
https://github.com/marksteve/usapan
comments disqus firebase firebase-auth firestore react serverless vite
Last synced: about 2 months ago
JSON representation
A no-frills comments widget powered by Firebase
- Host: GitHub
- URL: https://github.com/marksteve/usapan
- Owner: marksteve
- Created: 2022-01-06T00:46:34.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-15T07:37:08.000Z (over 4 years ago)
- Last Synced: 2025-03-25T16:21:24.660Z (about 1 year ago)
- Topics: comments, disqus, firebase, firebase-auth, firestore, react, serverless, vite
- Language: TypeScript
- Homepage: https://usapan.marksteve.com
- Size: 372 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Usapan
A no-frills comments widget powered by Firebase
_Usapan is the Filipino word for discussion_
## Features
- Unstyled
- Serverless
- Nested comments
- Abuse protection through [App Check](https://firebase.google.com/docs/app-check)
## Usage
1. Set up a Firebase project.
2. Enable the Google sign-in provider.
3. Set up Firestore security rules. Check out `firestore.rules.example` in the repository.
4. Add a web app to the project and note its config.
5. (Optional) [Set up App Check](https://firebase.google.com/docs/app-check/web/recaptcha-provider) from the Firebase console. You don't need to do step 3. The widget initializes App Check if you supply the reCAPTCHA site key.
6. Add the following code in your page:
```
import usapan from 'https://unpkg.com/usapan@0.2.0/dist/usapan.es.js'
usapan({
el: document.querySelector('#comments'), // Element to render comments
firebaseConfig: { ... }, // Your Firebase config
firestoreCollection: 'usapan', // Root Firestore collection
pageId: 'my-page', // Unique page identifier
recaptchaSiteKey: '...', // reCAPTCHA v3 site key for App Check
})
```
7. (Optional) Load the default stylesheet:
```
```
## Todo
- [x] Permalinks
- [ ] Reactions
- [ ] Anonymous mode
- [ ] Reduce bundle size
- [x] Switch from React to Preact
- [ ] Add Cloudflare as alternative storage option
- [ ] Moderation
## Demo
[https://usapan.marksteve.com](https://usapan.marksteve.com)
## Development
```
npm i
npm run dev
```
## Release
```
npm version
npm publish
```
Example page is automatically deployed on merge to main.