Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danmarcab/comments
Simple bare-bones anonymous blog comment system
https://github.com/danmarcab/comments
Last synced: about 1 month ago
JSON representation
Simple bare-bones anonymous blog comment system
- Host: GitHub
- URL: https://github.com/danmarcab/comments
- Owner: danmarcab
- License: apache-2.0
- Created: 2019-11-19T20:45:15.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2019-11-26T18:31:22.000Z (about 5 years ago)
- Last Synced: 2024-08-01T12:21:57.228Z (4 months ago)
- Language: Elm
- Homepage: https://simple-comments.netlify.com/
- Size: 389 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - danmarcab/comments - Simple bare-bones anonymous blog comment system (others)
README
# Comments
Simple comment system for blogs.
- It is free (more info later)
- It doesn't have adds
- It respects your privacy
Currently a very minimal set of features are implemented, and it relies on a external service
that provides the storage and API layer.
## Usage
In order to use is you need to complete 2 steps.
## Provisioning your own backend
Our backend is going to be based in [FaunaDB](https://fauna.com/). FaunaDB provides document storage
(MongoDB like) and it can create a graphql API for you. This API will be used by our frontend to
read and write comments.
First you'll need an account in [FaunaDB](https://fauna.com/) and log in.
You will see your dashboard page like in the screenshot below.
Click on the `New database` button, enter the DB name of your choice and click `Save`.
A DB will be created and you will be redirected to the DB page.
We are going to use GraphQL so just click `GraphQL` in the left menu.
Now you need to click the `Import Schema` button and upload the file [schemal.graphql](/schemal.graphql) that lives
on this repository.
This will create the collections and indexes we need, but we need to sort out some permissions.
To do that, click on the `Shell` button on the left menu.
You will need to enter the following command in the shell:
```
Update(Collection("Comment"), {permissions: {read: "public", create: "public"}})
```
Then click on `Run Query`. The query should run and you should see a response similar to the
following screenshot.
This query applied the necessary permissions to read and create new comments. There is an additional
permission we need to change, to allow indexing comments by discussion. Enter and execute the following
query in the shell.
```
Update(Index("commentsByDiscussionId"), { permissions: { read: "public" } })
```
Nice. The permissions are ready now. There is a last step, getting the access key.
Click on the `Security` button on the left menu.
Click on `New key` to create your key.
Select `Client` as the role and enter a name of your choice as key name. When you are
happy click `Save`. The key will be shown on the screen like in the following screenshot.
Make sure you copy this key as is the only time you will see it. If you forget don't worry,
you can create a new one following the same steps.
### Load the library in your HTML/JS
First, you need to load the `Comments.js` file. The compiled file lives in
https://simple-comments.netlify.com/Comments.js. You can see the HTML code
you need below.
```html
```
Once the script is loaded, a `startComments` function should be available.
You just need to call it and pass some parameters:
- `node`: is the html node where you want to mount your comment system.
- `endpoint`: is the graphql endpoint, it you followed the instructions, it should be `https://graphql.fauna.com/graphql`.
- `accessKey`: is the key you created a minute ago.
- `discussionId`: this is used to support many topics. For example you can use the url or slug of the post.
An example is provided below:
```html
startComments({
node: document.querySelector("div"),
endpoint: "https://graphql.fauna.com/graphql",
accessKey: "dasdj-your-own-access-key-fjpi",
discussionId: "/posts/awesome-post-title"
});
```
Here we tell the comment system to render in the empty div, and load and save the comments
on the topic `/posts/awesome-post-title`.
Load your page and if everything was set up correctly, you should see the comment system
being rendered in you pages!
### Limits
At the moment of writing this FaunaDB offers a generous free tier with:
- 5GB storage
- 100K read operations per day
- 50K write operations per day
- 50 MB data transfer per day
These limits are more than enough for my use case, but have a look at the [current pricing](https://fauna.com/pricing)
## Ok but is it production ready?
Depends, I intend to use it for [my blog](https://danmarcab.com) where I expect between 0 and 1 comments per
month. For my use case I think is good enough. If you have a big volume of comments or page visits, you
may run into performance problems or into the limits of [FaunaDB](https://fauna.com/)
## Roadmap
At the moment there is only one feature I want to add and it's custom styling, to adjust colors and appearance
a bit more to your branding. This probably won't happen until I have the need, meaning a second site where I want
to use this.