Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nickcellino/nbb-comments
A service for adding basic comment functionality to any blog post/webpage.
https://github.com/nickcellino/nbb-comments
clojurescript dynamodb lambda nbb serverless
Last synced: 7 days ago
JSON representation
A service for adding basic comment functionality to any blog post/webpage.
- Host: GitHub
- URL: https://github.com/nickcellino/nbb-comments
- Owner: NickCellino
- Created: 2022-09-02T20:01:36.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2022-09-03T19:39:11.000Z (about 2 years ago)
- Last Synced: 2023-02-26T19:02:47.525Z (over 1 year ago)
- Topics: clojurescript, dynamodb, lambda, nbb, serverless
- Language: Clojure
- Homepage: https://nickcellino.com/blog/2022-09-03-nbb-comments.html
- Size: 295 KB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# nbb-comments
A service for adding basic comment functionality to any blog post/webpage. Visitors to your site can leave comments and view others' comments.
- Built with [nbb](https://github.com/babashka/nbb)
- Deployed on AWS Lambda using [Serverless Framework](https://www.serverless.com/)
- Uses DynamoDB for storage
You can:
- [Deploy it](#using-it-on-your-own-site) to your own AWS account to use it on your own site
- [Run it locally](#running-server-locally) to poke around and see how it works
- [See it in action](https://nickcellino.com/blog/2022-09-03-nbb-comments.html) (scroll to the bottom of the linked page)
## Why
I wanted to allow people visiting [my personal blog](https://nickcellino.com) to be able to leave comments without creating any sort of account/login. I used Google reCAPTCHA v3 to prevent bot abuse.
## Overview
`nbb-comments` uses an AWS Lambda function (backed by DynamoDB) to serve HTTP requests to:
- add a new comment for a certain blog post
- list existing comments for a certain blog post
- retrieve the HTML to render the comments form
It uses [htmx](https://htmx.org/) to handle interactions with the server and make dynamic updates to the DOM without reloading the page.
Once you deploy your backend, adding it to any webpage is as simple as:
```html
Leave a comment
Comments
```
## Running server locally
##### Prerequisites
- Install [babashka](https://babashka.org/)
- Install [node/npm](https://nodejs.org/en/download/)
First, install node dependencies:
```bash
npm install
```
Then, to run the server locally, run:
```bash
bb dev-server
```
Then visit `http://localhost:3000` and you can see it in action!
## Using it on your own site
To use this for your own blog/site, you will need to:
1. [Deploy your own instance](#deploy-your-own-instance)
2. [Hook it up to your frontend](#hook-it-up-to-your-frontend)
### Deploy your own instance
#### Prerequisites
- [Setup your AWS credentials](https://www.serverless.com/framework/docs/providers/aws/guide/credentials) so that you can deploy using Serverless Framework
- [Register a Google reCAPTCHA v3 key](https://www.google.com/recaptcha/admin/create)
- Install [node/npm](https://nodejs.org/en/download/)
1. Create an `.env` with the following contents:
```
RECAPTCHA_SECRET=""
RECAPTCHA_SITEKEY=""
ALLOWED_ORIGIN_URL="" # for example "https://nickcellino.com"
```
2. Run `npm install` in the root of this project.
3. Run `npx serverless deploy`. If everything worked correctly, this should print out something like:
```bash
➜ npx serverless deploy
Deploying comments-api to stage dev (us-east-1)
✔ Service deployed to stack comments-api-dev (84s)
endpoint: ANY - https://s390h072qf.execute-api.us-east-1.amazonaws.com/{proxy+}
functions:
comments-api: comments-api-dev-comments-api (65 MB)
Monitor all your API routes with Serverless Console: run "serverless --console"
```
Take note of the endpoint url you get back. In this example, it is `https://s390h072qf.execute-api.us-east-1.amazonaws.com`
If you can see that, your backend is all set!
### Hook it up to your frontend
1. Load `htmx` script somewhere in the `` of your HTML like so:
```html
...
...
```
This is used to dynamically fetch the comments form and comments from the backend.
2. Add the comments form somewhere on your page like so (replacing *your-backend-url* with the proper value for your backend):
```html
```
For this step and the next, you should specify a value for the post-id query parameter that is specific to whatever page you are adding this functionality to. If you add this to a different page, you would use a different post-id in order to have a separate comment thread per-page.
3. Add the comments list (where the comemnts will actually be displayed) somewhere on your page like so (replacing *your-backend-url* with the proper value for your backend):
```html
```
Once you have done that, you are all set to receive brilliant insights from random strangers on the internet!
You can find a minimal working example of this [here](./src/dev/index.html).
## Styling
The HTML snippets above will load HTML from the server and render it onto the page.
You will need to know what that rendered HTML looks like in order to style it.
You can also run [the dev server](#running-server-locally) to play around with the styling.
#### Rendered "add comment" form example
```html
Name (optional)
Comment
function announce(token) {
const event = new Event('recaptcha-verified');
const elem = document.querySelector('#comment-form');
elem.dispatchEvent(event);
}
Submit
```
#### Rendered comment list example
```html
Nick said...
20:21, September 2, 2022
```
#### Styling example
There is a very, very basic example of styling in [the example HTML](./src/dev/index.html).
```html
.comment {
border-bottom: 1px solid;
}
input, textarea {
width: 100%;
margin-bottom: 5px;
}
button {
margin-top: 5px;
}
```
That will result in this magnificence:
Anonymous said...
20:22, September 2, 2022