Open for Comments

Published: 2024-01-02 10:55 PM | Updated: 2024-01-19 10:25 AM

Category: Technology | Tags: comments, diy, code, programming, flask

Well, I did a thing. I built a little service to add comments back into my blog. This was a little bit of a project because I had to build a backend process to handle the comment database as well as update my blog templates to fetch, display, and allow for comment submissions.

Receiving Comments in Flask

I love Flask. It's easy to get anything up and running quickly and runs great. David and the whole Pallets team do a great job maintaining and building the platform and I just enjoy working in it.

I threw a new endpoint on my main domain which will take in comments from my blog. Because they're on different domains, I had to handle CORS by allowing requests from my blog to the endpoint. Once a comment comes in, nefarious input is cleaned with nh3 and then stored in a SQLite database.

I want to moderate any submissions, so everything is marked "pending" by default. This meant I needed a little dashboard to both view and update the approved flag on the submission. I ended up making a small user model which allows me to log into an admin area on the site to manage the comments. There aren't any relationships on the model right now, so it's really just taking them one at at time.

Sending Comments from a Static Page

I took this as an opportunity to learn about HTML custom elements. I followed a few helpful articles and used the MDN docs to get a little element together which is now part of the article markup generated by Pelican. The component is a small javascript file which fetches any comments for the current article and throws them into the DOM.

The hard part about dynamically loading content onto a static page, especially content that is specific to that page, is how to have a unique identifier. Luckily, I've managed to have unique post titles for everything, so the page slug becomes the point of reference. Starting now, when a post loads, a request is sent to the Flask application with the page slug and any approved comments are then sent back over the wire and loaded.

The component also includes a form to submit your thoughts. I use htmx which handles the form submission through AJAX. But, if you're browsing with Javascript disabled, you can still submit the form because it falls back to the HTML action declaration in the markup.

They're Only Comments

There is no point to this other than it's something I wanted to do. I got to learn a bunch about custom elements and spend some time getting my little corner of the web a little more the way I want it.