Chorus - implement support for rendering replies

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 ) {
+    Chorus.processCommentArray(threadData.comments)
-        comment.date = new Date(comment.date)
-    }
 
     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')
+    if ( refreshDate ) {
-    lastRefreshLi.innerText = `Last refreshed: ${refreshDate.toLocaleString()}`
+        const lastRefreshLi = document.createElement('li')
-    summaryUl.appendChild(lastRefreshLi)
+        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) {

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)