initial commit i watched a youtube video essay on this guy and was so inspired to make this, copied over some files from another webpage i test made

2026-02-23 20:30:09 -06:00
parent 0a0be9ca9c
commit 5f5d710613
8 changed files with 200098 additions and 0 deletions
--- a/docs/commentsLoader.js
+++ b/docs/commentsLoader.js
@@ -0,0 +1,84 @@
+async function loadComments() {
+  try {
+    const response = await fetch("comments.json");
+    const allComments = await response.json();
+
+    renderComments(allComments);
+  } catch (error) {
+    console.error("Error loading comments:", error);
+    document.getElementById("comments-list").innerHTML =
+      '<li style="color: red; padding: 1rem;">Error loading comments. Please check if comments.json exists.</li>';
+  }
+}
+
+/**
+ * Likes get formatted, every 1000 likes is a K, every 1,000,000 is a M
+ * @param {*} count 
+ * @returns 
+ */
+function formatLikes(count) {
+  if (count >= 1000) {
+    return (count / 1000).toFixed(count >= 10000 ? 0 : 1) + "K";
+  }
+  if (count >= 1000000000) {
+    return (count / 1000000000).toFixed(count >= 10000 ? 0 : 1) + "M";
+  }
+  return count.toString();
+}
+
+function createCommentHTML(comment) {
+  const badges = [];
+
+  if (comment.is_pinned) {
+    badges.push('<span class="stat-badge pinned-badge">📌 Pinned</span>');
+  }
+
+//   if (comment.is_favorited) {
+//     badges.push('<span class="stat-badge favorited-badge">❤️ Favorited</span>');
+//   }
+
+  return `
+        <div class="comment">
+            <div class="avatar">
+                <a href="${comment.author_url}" target="_blank" rel="noopener noreferrer">
+                    <img src="${comment.author_thumbnail}" alt="${comment.author}">
+                </a>
+            </div>
+            <div class="comment__wrapper">
+                <div class="comment__body">
+                    <a href="${comment.author_url}" target="_blank" rel="noopener noreferrer" class="comment__author">${comment.author}</a>
+                    <p class="comment__text" dir="auto">${comment.text}</p>
+                </div>
+                <div class="comment__stats">
+                    ${badges.join("")}
+                </div>
+                <div class="comment__meta">
+                    <span class="comment__likes">👍 ${formatLikes(comment.like_count)}</span>
+                    <span class="comment__time">${comment._time_text}</span>
+                </div>
+            </div>
+        </div>
+    `;
+}
+
+// <div class="comment__actions">
+//     <a href="#">Like</a>
+//     <a href="#">Reply</a>
+// </div>
+
+/**
+ * Render the comments into the HTML
+ * @param {} comments 
+ */
+function renderComments(comments) {
+  const commentsList = document.getElementById("comments-list");
+  commentsList.innerHTML = "";
+
+  comments.forEach((comment) => {
+    const li = document.createElement("li");
+    li.innerHTML = createCommentHTML(comment);
+    commentsList.appendChild(li);
+  });
+}
+
+document.addEventListener("DOMContentLoaded", loadComments);