Implement reply rich rendering. Add jump to and highlight/hovering functionality for them

internal/util/util.go

@@ -1,19 +1,35 @@
 package util
 
 import (
+	"fmt"
 	"html/template"
 	"strings"
 )
 
 func EnrichPost(body string) string {
-	lines := strings.Split(body, "\n")
+	var b strings.Builder
-	for i, line := range lines {
+	for _, raw := range strings.Split(body, "\n") {
-		if strings.HasPrefix(line, ">") {
+		var out string
-			escaped := template.HTMLEscapeString(line)
+		switch {
-			lines[i] = `<span class="greentext">` + escaped + `</span>`
+		case strings.HasPrefix(raw, ">>"):
-		} else {
+			postId := strings.TrimPrefix(raw, ">>")
-			lines[i] = template.HTMLEscapeString(line)
+			esc := template.HTMLEscapeString(raw)
+			out = fmt.Sprintf(
+				`<a  onclick="onReplyLinkClick(event)" 
+					 onmouseover="highlightPost(%[1]s, event)" `+
+					`onmouseleave="highlightPost(%[1]s, event, false)" `+
+					`href="#post-%[1]s" class="reply-link">%s</a>`,
+				postId, esc,
+			)
+		case strings.HasPrefix(raw, ">"):
+			esc := template.HTMLEscapeString(raw)
+			out = `<span class="greentext">` + esc + `</span>`
+		default:
+			out = template.HTMLEscapeString(raw)
 		}
+
+		b.WriteString(out)
+		b.WriteString("<br />")
 	}
-	return strings.Join(lines, "<br />")
+	return b.String()
 }

web/static/index.css

@@ -111,6 +111,11 @@ body {
     margin-left: auto;
 }
 
+#newPostBody {
+    width: 270px;
+    height: 100px;
+}
+
 .new-post-container {
     width: max-content;
     margin: auto;
@@ -145,6 +150,23 @@ body {
     margin-right: 5px;
 }
 
+.post-op {
+    margin-bottom: 10px;
+}
+
+.post {
+    display: inline-block;
+    margin: 5x;
+    padding: 10px;
+    background-color: #D6DAF0;
+    border: 1px solid #282a2e;
+    margin-bottom: 10px;
+}
+
+.post-highlighted {
+    background: #D6BAD0;
+}
+
 .post-header {
     display: flex;
     margin-bottom: 10px;
@@ -174,23 +196,21 @@ body {
     line-height: 1.3;
 }
 
-.op-post {
+.post-num:hover {
-    margin-bottom: 10px;
+    cursor: pointer;
-}
+    color: #ff0000;
-
-.post {
-    display: inline-block;
-    margin: 5x;
-    padding: 10px;
-    background-color: #D6DAF0;
-    border: 1px solid #282a2e;
-    margin-bottom: 10px;
 }
 
 .greentext {
     color: #789922
 }
 
+.reply-link {
+    color: #D00;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
 /* GENERAL LAYOUT */
 
 .container {

web/static/index.js

@@ -1 +1,57 @@
 const $ = (id) => document.getElementById(id);
+
+function isOffScreen(el) {
+    const rect = el.getBoundingClientRect();
+    const vh = window.innerHeight || document.documentElement.clientHeight;
+    const vw = window.innerWidth || document.documentElement.clientWidth;
+
+    return (
+        rect.bottom < 0 ||
+        rect.top > vh ||
+        rect.right < 0 ||
+        rect.left > vw
+    );
+}
+
+function insertAfter(referenceNode, newNode) {
+    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+}
+
+function onReplyLinkClick(e) {
+    const hoveringPost = document.getElementById("hoveringPost");
+    hoveringPost?.remove();
+}
+
+function highlightPost(postId, e, status = true) {
+    const posts = Array.from(document.querySelectorAll("article"));
+    const postToHighlight = posts.find(p => +p.id.split("-")[1] === +postId);
+    if (!postToHighlight) return;
+
+    const isOp = postToHighlight.id === posts[0]?.id;
+    if (isOffScreen(postToHighlight) || isOp) {
+        if (e.type === "mouseleave") {
+            const hoveringPost = document.querySelector("#hoveringPost")
+            hoveringPost.remove();
+        }
+        else {
+            const postCopy = postToHighlight.cloneNode(true);
+            postCopy.style.position = "absolute";
+            postCopy.id = "hoveringPost";
+
+            if (isOp) {
+                postCopy.classList.remove("post-op");
+                postCopy.classList.add("post");
+            }
+
+            insertAfter(e.target, postCopy);
+        }
+    }
+    else {
+        if (status) {
+            postToHighlight.classList.add("post-highlighted");
+        }
+        else {
+            postToHighlight.classList.remove("post-highlighted");
+        }
+    }
+}

web/views/shared/layout.templ

@@ -8,6 +8,7 @@ templ Layout() {
 			<title>Comfychan</title>
 			<script src="https://unpkg.com/htmx.org@2.0.4"></script>
 			<script src="https://unpkg.com/hyperscript.org@0.9.14"></script>
+			<script src="/static/index.js" defer></script>
 			<link rel="stylesheet" href="/static/reset.css"/>
 			<link rel="stylesheet" href="/static/index.css"/>
 		</head>

web/views/thread.templ

@@ -8,24 +8,44 @@ import (
 	"strconv"
 )
 
+func getPostClass(isOp bool) string {
+	if isOp {
+		return "post-op"
+	}
+	return "post"
+}
+
+templ ThreadPost(post database.Post, thread *database.Thread) {
+	{{ isOp := thread != nil }}
+	<article id={ fmt.Sprintf("post-%d", post.Id) } class={ getPostClass(isOp) }>
+		if post.MediaPath != "" {
+			<div class="post-img-container">
+				<img src={ fmt.Sprintf("/static/img/posts/%s", post.MediaPath) } class="post-img"/>
+			</div>
+		}
+		<header class="post-header">
+			if isOp && thread.Subject != "" {
+				<h1 class="thread-subject">{ thread.Subject } -</h1>
+			}
+			<span class="post-author">{ post.Author }</span>
+			<span class="post-date">{ post.CreatedAt.Format("01/02/2006") }</span>
+			<span class="post-time">{ post.CreatedAt.Format("15:04") }</span>
+			<span
+				_={ fmt.Sprintf("on click set #newPostBody.value to #newPostBody.value + '>>%d\n'", post.Id) }
+				class=" post-num"
+			>
+				No. { strconv.Itoa(post.Id) }
+			</span>
+		</header>
+		<p>
+			@templ.Raw(util.EnrichPost(post.Body))
+		</p>
+	</article>
+}
+
 templ ThreadPosts(posts []database.Post) {
 	for _, post := range (posts) {
-		<article class="post">
+		@ThreadPost(post, nil)
-			if post.MediaPath != "" {
-				<div class="post-img-container">
-					<img src={ fmt.Sprintf("/static/img/posts/%s", post.MediaPath) } class="post-img"/>
-				</div>
-			}
-			<header class="post-header">
-				<span class="post-author">{ post.Author }</span>
-				<span class="post-date">{ post.CreatedAt.Format("01/02/2006") }</span>
-				<span class="post-time">{ post.CreatedAt.Format("15:04") }</span>
-				<span class="post-num">No. { strconv.Itoa(post.Id) }</span>
-			</header>
-			<p>
-				@templ.Raw(util.EnrichPost(post.Body))
-			</p>
-		</article>
 		<br/>
 	}
 }
@@ -61,23 +81,7 @@ templ Thread(board database.Board, thread database.Thread, posts []database.Post
 			</form>
 		</div>
 		<div class="thread">
-			<article class="op-post">
+			@ThreadPost(posts[0], &thread)
-				if posts[0].MediaPath != "" {
-					<div class="post-img-container">
-						<img src={ fmt.Sprintf("/static/img/posts/%s", posts[0].MediaPath) } class="post-img"/>
-					</div>
-				}
-				<header class="post-header">
-					<h1 class="thread-subject">{ thread.Subject } -</h1>
-					<span class="post-author">{ posts[0].Author }</span>
-					<span class="post-date">{ posts[0].CreatedAt.Format("01/02/2006") }</span>
-					<span class="post-time">{ posts[0].CreatedAt.Format("15:04") }</span>
-					<span class="post-num">No. { strconv.Itoa(posts[0].Id) }</span>
-				</header>
-				<p class="post-body">
-					@templ.Raw(util.EnrichPost(posts[0].Body))
-				</p>
-			</article>
 			<div hx-get={ fmt.Sprintf("/hx/%s/threads/%d/posts", board.Slug, thread.Id) } hx-trigger="refreshPosts from:body">
 				@ThreadPosts(posts[1:])
 			</div>

web/views/threads.templ

@@ -14,10 +14,10 @@ templ ThreadsCatalog(previews []CatalogThreadPreview) {
 	<div id="catalog">
 		for _, preview := range previews {
 			<div class="catalog-preview">
-				<a href={ templ.SafeURL(preview.ThreadURL) }>
+				<a href={ templ.URL(preview.ThreadURL) }>
 					<img class="catalog-preview-img" src={ fmt.Sprintf("/static/img/posts/%s", preview.MediaPath) }/>
 				</a>
-				<h1><a href={ templ.SafeURL(preview.ThreadURL) } class="catalog-preview-link">{ preview.Subject }</a></h1>
+				<h1><a href={ templ.URL(preview.ThreadURL) } class="catalog-preview-link">{ preview.Subject }</a></h1>
 				<p>
 					@templ.Raw(util.EnrichPost(preview.Body))
 				</p>