Staticman nested comment

[VincentTam]

Overview

To provide nested comment support

Demo site: https://staticman-gitlab-pages.frama.io/hugo-swift-theme

This is a port of Huginn's Staticman Integration, which is a port of halogenica/beautifulhugo#222. I hope this is the first repo where this functionality gets merged officially.

Background

Refer to https://github.com/onweru/hugo-swift-theme/projects/1 and halogenica/beautifulhugo#222.

Working principle

Modified the form and comment display templates using Staticman's author's suggestion in eduardoboucas/staticman#35 to achieve a logic-error free 2-level deep nested comments. Here's my "OO-diagram" for the problem as a non-developer.

When the "reply to this comment" button is clicked, reply* fields will be recorded into the form fields as hidden values, so that Staticman (API server & integration in this theme) can process them and render them as a comemnt_reply. When it's submitted, the form data will be converted into a condensed JSON string by handleForm() and sent to the endpoint specified in site config file config.toml. Staticman API server will conver the JSON string received according to the format specified in the repo config file staticman.yml and push to the GitHub/GitLab repo for your site either directly or as a pull/merge request.

When this theme reads the comment data folder data/comments, the Hugo $comments is taken to be the comments read from the relevant subfolder data/comments/{options.slug}. We use a double-loop over $comments for rendering comments. The outer loop is for "main comments", comments having no parent. The replyThread of a comment reply matches the _id of a main comment. The replyID and replyName is for back-referencing the reply target

In addition, to enhance the user experience, I've added a reply notice on top of the form, displaying the avatar and the name of the intended reply target, so that the commenter knows who (s)he is replying to while writing the post. To reset things, two reset buttons are added. "Reset" resets every input fields and the reply target, while the ":x:" on the right-hand side of the reply notice only resets the reply target. When a reply button is clicked, the reply target is reset.

During form submission, the submit button text changes to "Submitted" until the popup modal is closed. After closing the modal for successful submission, everything is reset, and the form closes.

Critics

1. My use of the elem() method on the top doesn't follow a consistent style, due to the changing file. After a day of testing and a weekend of developping, I'm torn. You may refactor them if you like.
2. The creation of the JSON object for the POST request is manual. I don't know fancy JS stuff. You might improve it if you like, but be careful about the double hierarchy of fields like <input name="options[reCaptcha][siteKey]">. A simple data[element.name] = element.key won't give the correct JSON structure needed for Staticman.
3. I've never tested the display on mobile devices.

[onweru]

@VincentTam, I will go through the js file and scss files when I'm settled later. While testing, I will refactor accordingly, if need be. Thanks for the good work; there are tonnes (exaggerating 😄 , a little) of changes here.

[VincentTam]

@VincentTam, I will go through the js file and scss files when I'm settled later. While testing, I will refactor accordingly, if need be. Thanks for the good work; there are tonnes (exaggerating , a little) of changes here.

Thanks for being the first repo owner to merge my nested comment integration.