From ae9ce08544cde1cec21c0548ded8271b06e5a8e8 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Tue, 30 May 2023 12:59:18 +0200
Subject: [PATCH] feat: initial display replies from webmention.io

---
 _includes/head.html            | 105 +++++++++++++++++++++------------
 _includes/replies-section.html |  30 ++++++++++
 _layouts/post.html             |   2 +
 3 files changed, 99 insertions(+), 38 deletions(-)
 create mode 100644 _includes/replies-section.html

diff --git a/_includes/head.html b/_includes/head.html
index 4fea8b1..e3668ba 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -74,49 +74,78 @@
   />
 
   <script>
-    const url = document.URL.replace(
-      "http://localhost:4000",
-      "https://ayos.blog"
+    const ignore = ["/", "/categories/"];
+    const url = new URL(
+      document.URL.replace("http://localhost:4000", "https://ayos.blog")
     );
-    console.log("url: ", url);
-    const mentions = getMentions(url)
-      .then((mentions) => {
-        const likes = mentions.filter((m) => m["wm-property"] === "like-of");
-        console.log("likes", likes);
-        if (likes.length)
-          document.getElementById(
-            "page-likes"
-          ).innerHTML = `${likes.length} likes`;
+    if (!ignore.includes(url.pathname)) {
+      console.log("url: ", url);
+      const mentions = getMentions(url.toString())
+        .then((mentions) => {
+          const likes = mentions.filter((m) => m["wm-property"] === "like-of");
+          console.log("likes", likes);
+          if (likes.length)
+            document.getElementById(
+              "page-likes"
+            ).innerHTML = `${likes.length} likes`;
 
-        const replies = mentions.filter(
-          (m) => m["wm-property"] === "in-reply-to"
-        );
-        console.log("replies", replies);
-        if (replies.length)
-          document.getElementById(
-            "page-replies"
-          ).innerHTML = `${replies.length} replies`;
+          const replies = mentions.filter(
+            (m) => m["wm-property"] === "in-reply-to"
+          );
+          console.log("replies", replies);
+          if (replies.length) {
+            // render to post header meta
+            document.getElementById(
+              "page-replies"
+            ).innerHTML = `${replies.length} replies`;
 
-        const reposts = mentions.filter(
-          (m) => m["wm-property"] === "repost-of"
-        );
-        console.log("reposts", reposts);
-        if (reposts.length)
-          document.getElementById(
-            "page-reposts"
-          ).innerHTML = `${reposts.length} reposts`;
+            // render to replies section
+            const repliesTable = document.createElement("table");
+            replies.forEach((reply) => {
+              const row = document.createElement("tr");
+              const cell = document.createElement("td");
+              row.append(cell);
+              const author = document.createElement("p");
+              author.className = "author-wrapper";
+              author.innerHTML = `<img class="reply-photo" src="${
+                reply.author.photo
+              }" /> <span class="reply-name">${
+                reply.author.name
+              }</span><a href="${reply.url}" class="reply-date">${new Date(
+                reply.published
+              ).toLocaleDateString()}</a><div class="clear-both"></div>`;
+              const replyBlock = document.createElement("quote");
+              replyBlock.innerHTML = reply.content.html;
+              replyBlock.insertBefore(author, replyBlock.firstChild);
+              cell.appendChild(replyBlock);
+              repliesTable.append(row);
+            });
+            document.querySelector("section#replies").append(repliesTable);
+          }
 
-        const others = mentions.filter(
-          (m) =>
-            m["wm-property"] !== "like-of" &&
-            m["wm-property"] !== "in-reply-to" &&
-            m["wm-property"] !== "repost-of"
-        );
-        console.log("others", others);
+          const reposts = mentions.filter(
+            (m) => m["wm-property"] === "repost-of"
+          );
+          console.log("reposts", reposts);
+          if (reposts.length)
+            document.getElementById(
+              "page-reposts"
+            ).innerHTML = `${reposts.length} reposts`;
 
-        // console.log("mentions", mentions);
-      })
-      .catch((err) => console.log("err", err));
+          const others = mentions.filter(
+            (m) =>
+              m["wm-property"] !== "like-of" &&
+              m["wm-property"] !== "in-reply-to" &&
+              m["wm-property"] !== "repost-of"
+          );
+          console.log("others", others);
+
+          // console.log("mentions", mentions);
+        })
+        .catch((err) => console.log("err", err));
+    } else {
+      console.log("ignoring url: ", url);
+    }
 
     async function getMentions(url) {
       let mentions = [];
diff --git a/_includes/replies-section.html b/_includes/replies-section.html
new file mode 100644
index 0000000..91dfb59
--- /dev/null
+++ b/_includes/replies-section.html
@@ -0,0 +1,30 @@
+<section id="replies"></section>
+
+<style>
+  quote {
+    display: block;
+    margin: 1em 0;
+    padding: 1em;
+    border-left: 3px solid #ccc;
+
+    .author-wrapper {
+      display: block;
+      .reply-photo {
+        width: 2em;
+        height: 2em;
+        border-radius: 50%;
+        float: left;
+      }
+
+      .reply-name,
+      .reply-date {
+        margin-left: 0.5em;
+        float: left;
+      }
+
+      .reply-name {
+        font-weight: bold;
+      }
+    }
+  }
+</style>
diff --git a/_layouts/post.html b/_layouts/post.html
index be0bdfa..0c9edf5 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -115,6 +115,8 @@ layout: default
     <div id="rss-sign-up">
       <span>For more <em>{{ page.category }}</em> posts like this, subscribe to my <a href={{'feed.xml' | relative_url}}>RSS feed</a></span>
     </div>
+  
+    {% include replies-section.html %}
   </div>
 
   <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>