finally proper comment pagination

assets/js/comment-pagination.js

@@ -0,0 +1,35 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const commentsContainer = document.getElementById("comments-container");
+  const loadMoreBtn = document.getElementById("load-more-btn");
+  const comments = commentsContainer.getElementsByClassName("comment-item");
+  const commentsPerPage = 10;
+  let currentlyShown = commentsPerPage;
+
+  // Initially hide comments beyond the first 10
+  for (let i = commentsPerPage; i < comments.length; i++) {
+    comments[i].style.display = "none";
+  }
+
+  // Hide the "Load more" button if there are 10 or fewer comments
+  if (comments.length <= commentsPerPage) {
+    loadMoreBtn.style.display = "none";
+  }
+
+  loadMoreBtn.addEventListener("click", function () {
+    // Show the next set of comments
+    for (
+      let i = currentlyShown;
+      i < currentlyShown + commentsPerPage && i < comments.length;
+      i++
+    ) {
+      comments[i].style.display = "block";
+    }
+
+    currentlyShown += commentsPerPage;
+
+    // Hide the "Load more" button if all comments are shown
+    if (currentlyShown >= comments.length) {
+      loadMoreBtn.style.display = "none";
+    }
+  });
+});

assets/views/artwork.jet.html

@@ -44,10 +44,10 @@
       {{- else if .Illust.Comments == 0 }}
       <p class="mb-4">There are no comments yet</p>
       {{- else }}
-      <div class="list-group">
+      <div class="list-group" id="comments-container">
         {{ range .Illust.CommentsList }}
         <!-- Element for a single comment -->
-        <div class="list-group-item border-0 p-0 mb-4">
+        <div class="list-group-item border-0 p-0 mb-4 comment-item">
           <div class="row">
 
             <!-- Comment author avatar image -->
@@ -85,6 +85,9 @@
           </div>
         </div>
         {{- end }}
+        <div class="d-flex justify-content-center mb-4">
+        <button type="button" class="btn btn-outline-primary" id="load-more-btn">Load more</button>
+        </div>
       </div>
       {{ end }}
     </div>

assets/views/layout/default.jet.html

@@ -23,6 +23,7 @@
 
   <script src="/js/illust-preview.js" defer></script>
   <script src="/js/horizontal-scroll.js" defer></script>
+  <script src="/js/comment-pagination.js" defer></script>
 
   <meta content="summary_large_image" name="twitter:card" />