Series: Revamping 1klb comments

A deep dive of how I rebuilt my commenting system for this blog in raw javascript with only a couple of dependencies. Goodbye disqus!

Revamping 1klb comments part one: an overview

A little while back I created a commenting system for this blog. The blog itself is served via a static site generator (specifically nanoc served on netlify), so a commenting system isn’t as simple as putting an html form in the page and hooking it up to a database on the server. Instead, I ended up using a hybrid of netlify’s forms, the web-based database system Fauna DB, and some javascript.

But the issue was that this system didn’t really work that well. Comments got lost in the churn, I got notified kind of poorly, and it was all a bit messy. So a month or so back I completely revamped the commenting system, cutting out the middle-man (in this case Netlify forms), adding some moderation features, improving notifications, and generally making it run smoother.

The end product takes a bit more effort to put into production, but I think it’s worth showing off. In this first post, I’ll do a big picture overview of the whole system.

Revamping 1klb comments part two: the database

We’re building a commenting system for a static site blog! Or at least, I’m taking you on a guided tour of my blog commenting system.

In my last blog post I outlined how the commenting system of the blog works, at least at the big picture level. In this post, I’ll go through how we set up the database.

Revamping 1klb comments part three: displaying comments

In the previous two posts on this subject I showed off the big picture overview of how this whole system was going to work, and showed you how I set up my database in Fauna to deal with those comments. Assuming that all went according to plan, let’s explore how we actually go from bits in a database, to, yknow, comments on the website.

Two ways of talking to Fauna

I’ve mentioned previously that there’s two ways of talking to the Fauna database:

Revamping 1klb comments part four: submitting comments

Over the last few posts on this blog(1 2 3) I’ve been introducing my system for collating, storing, and displaying comments on my static site blog using Javascript + HTML for the front-end and FaunaDB for the backend. We’ve gone through the basic outline of the system, set up the database, and talked about how we can fetch and display comments. In this post, I’ll show how you can easily build a comment submission form in HTML, and create a solid, secure comment submission system with server-side functions.

A basic comment form

It’s pretty easy to build a basic comment submission form in html: