From 3ae6b90ba9850642fd8de73215a86fb74b576d3c Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Sun, 5 Jan 2025 19:56:45 -0500
Subject: [PATCH] Chorus - implement support for rendering replies

---
 src/app/resources/assets/chorus.js    | 46 +++++++++++++++++++++++----
 src/app/resources/views/blog/post.pug |  2 +-
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/app/resources/assets/chorus.js b/src/app/resources/assets/chorus.js
index 06de587..c81cac0 100644
--- a/src/app/resources/assets/chorus.js
+++ b/src/app/resources/assets/chorus.js
@@ -1,11 +1,19 @@
 
 if ( !window.Chorus ) window.Chorus = {}
 
+Chorus.processCommentArray = function(comments) {
+    for ( const comment of comments ) {
+        comment.date = new Date(comment.date)
+
+        if ( comment.replies ) {
+            Chorus.processCommentArray(comment.replies)
+        }
+    }
+}
+
 Chorus.processThreadData = function(threadData) {
     threadData.refresh.date = new Date(threadData.refresh.date)
-    for ( const comment of threadData.comments ) {
-        comment.date = new Date(comment.date)
-    }
+    Chorus.processCommentArray(threadData.comments)
 
     threadData.comments = threadData.comments
         .sort((a, b) => b.date.getTime() - a.date.getTime())
@@ -91,9 +99,11 @@ Chorus.render404 = async function(el, baseUrl) {
     countLi.innerText = `There are no comments yet.`
     summaryUl.appendChild(countLi)
 
-    const lastRefreshLi = document.createElement('li')
-    lastRefreshLi.innerText = `Last refreshed: ${refreshDate.toLocaleString()}`
-    summaryUl.appendChild(lastRefreshLi)
+    if ( refreshDate ) {
+        const lastRefreshLi = document.createElement('li')
+        lastRefreshLi.innerText = `Last refreshed: ${refreshDate.toLocaleString()}`
+        summaryUl.appendChild(lastRefreshLi)
+    }
 };
 
 Chorus.renderComment = function(commentsDiv, comment) {
@@ -109,9 +119,21 @@ Chorus.renderComment = function(commentsDiv, comment) {
 
     const statusEl = document.createElement('p')
     statusEl.classList.add('chorus-status')
-    statusEl.innerText = comment.date.toLocaleString()
     commentDiv.appendChild(statusEl)
 
+    const dateEl = document.createElement('span')
+    dateEl.innerText = comment.date.toLocaleString()
+    statusEl.appendChild(dateEl)
+
+    const sepEl = document.createElement('span')
+    sepEl.innerText = ' | '
+    statusEl.appendChild(sepEl)
+
+    const replyEl = document.createElement('a')
+    replyEl.innerText = 'Reply'
+    replyEl.href = `mailto:${comment.replyAddress}`
+    statusEl.appendChild(replyEl)
+
     if ( comment.subject ) {
         const subjectEl = document.createElement('h3')
         subjectEl.innerText = comment.subject
@@ -121,6 +143,16 @@ Chorus.renderComment = function(commentsDiv, comment) {
     const contentEl = document.createElement('p')
     contentEl.innerHTML = comment.rendered
     commentDiv.appendChild(contentEl)
+
+    if ( comment.replies && comment.replies.length > 0 ) {
+        const repliesDiv = document.createElement('div')
+        repliesDiv.classList.add('chorus-replies')
+        commentDiv.appendChild(repliesDiv)
+
+        for ( const reply of comment.replies ) {
+            Chorus.renderComment(repliesDiv, reply)
+        }
+    }
 };
 
 Chorus.renderSummary = function(el, threadData) {
diff --git a/src/app/resources/views/blog/post.pug b/src/app/resources/views/blog/post.pug
index f9abf82..3122135 100644
--- a/src/app/resources/views/blog/post.pug
+++ b/src/app/resources/views/blog/post.pug
@@ -53,7 +53,7 @@ block blog_content
         .comments-container
             h1 Comments
             p Thanks for reading! I'd love to hear your thoughts and questions.
-            p My blog uses an email-based comments system: <a href="mailto:#{chorusAddress}">Submit a Comment</a>
+            p My blog uses an email-based comments system: <a href="mailto:#{chorusAddress}">submit a comment</a>
             p You can also <a href="mailto:shout@garrettmills.dev">email me</a> directly.
             hr
             div.comments#chorus-container(data-chorus-url=chorusUrl data-chorus-thread=chorusThread)