garrettmills/www
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Chorus - implement support for rendering replies

Browse Source
This commit is contained in:
Garrett Mills 2025-01-05 19:56:45 -05:00
parent 92018efa5c
commit 3ae6b90ba9
2 changed files with 40 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/app/resources/assets/chorus.js
View File

@ -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) {

2
src/app/resources/views/blog/post.pug
View File

@ -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)