From 39398a1f783a5e7e65740b383e6fcb32508d420b Mon Sep 17 00:00:00 2001 From: Noah Petherbridge Date: Sat, 23 Nov 2024 12:55:13 -0800 Subject: [PATCH] Improve comment threads and reply syntax * On Forums and photo comment threads: display the poster's username below their display name, if their username differs. If they do not have a distinct display name, a small @ appears in front of their display name instead. * On Quote & Reply, wrap the @mention with a Markdown hyperlink to the specific comment ID. --- pkg/controller/forum/new_post.go | 9 ++++++++- web/static/js/inline-replies.js | 22 ++++++++++++++++++---- web/templates/base.html | 10 ++++------ web/templates/forum/thread.html | 21 +++++++++++++++++---- web/templates/photo/permalink.html | 19 ++++++++++++++++--- 5 files changed, 63 insertions(+), 18 deletions(-) diff --git a/pkg/controller/forum/new_post.go b/pkg/controller/forum/new_post.go index 6df654f..f3dca70 100644 --- a/pkg/controller/forum/new_post.go +++ b/pkg/controller/forum/new_post.go @@ -109,7 +109,14 @@ func NewPost() http.HandlerFunc { if len(quoteCommentID) > 0 { if i, err := strconv.Atoi(quoteCommentID); err == nil { if comment, err := models.GetComment(uint64(i)); err == nil { - message = markdown.Quotify(comment.Message) + "\n\n" + + // Prefill the message with the @mention and quoted post. + message = fmt.Sprintf( + "[@%s](/go/comment?id=%d)\n\n%s\n\n", + comment.User.Username, + comment.ID, + markdown.Quotify(comment.Message), + ) } } } diff --git a/web/static/js/inline-replies.js b/web/static/js/inline-replies.js index c2f4c74..3610d74 100644 --- a/web/static/js/inline-replies.js +++ b/web/static/js/inline-replies.js @@ -8,13 +8,20 @@ document.addEventListener('DOMContentLoaded', function() { // at the page header instead of going to the dedicated comment page. (document.querySelectorAll(".nonshy-quote-button") || []).forEach(node => { const message = node.dataset.quoteBody, - replyTo = node.dataset.replyTo; + replyTo = node.dataset.replyTo, + commentID = node.dataset.commentId; + + // If we have a comment ID, have the at-mention link to it. + let atMention = "@" + replyTo; + if (commentID) { + atMention = `[@${replyTo}](/go/comment?id=${commentID})`; + } node.addEventListener("click", (e) => { e.preventDefault(); if (replyTo) { - $message.value += "@" + replyTo + "\n\n"; + $message.value += atMention + "\n\n"; } // Prepare the quoted message. @@ -30,11 +37,18 @@ document.addEventListener('DOMContentLoaded', function() { }); (document.querySelectorAll(".nonshy-reply-button") || []).forEach(node => { - const replyTo = node.dataset.replyTo; + const replyTo = node.dataset.replyTo, + commentID = node.dataset.commentId; + + // If we have a comment ID, have the at-mention link to it. + let atMention = "@" + replyTo; + if (commentID) { + atMention = `[@${replyTo}](/go/comment?id=${commentID})`; + } node.addEventListener("click", (e) => { e.preventDefault(); - $message.value += "@" + replyTo + "\n\n"; + $message.value += atMention + "\n\n"; $message.scrollIntoView(); $message.focus(); }); diff --git a/web/templates/base.html b/web/templates/base.html index 2d72e74..be58dda 100644 --- a/web/templates/base.html +++ b/web/templates/base.html @@ -1,7 +1,6 @@ {{define "title"}}Untitled{{end}} {{define "content"}}{{end}} {{define "scripts"}}{{end}} -{{define "head-scripts"}}{{end}} {{define "base"}} @@ -10,18 +9,17 @@ - {{if eq .WebsiteTheme "light"}} + {{- if eq .WebsiteTheme "light" -}} - {{else if eq .WebsiteTheme "dark"}} + {{- else if eq .WebsiteTheme "dark" -}} - {{else}} + {{- else -}} - {{end}} + {{- end -}} {{template "title" .}} - {{ .Title }} - {{template "head-scripts" .}}