1 files changed, 75 insertions, 3 deletions

diff --git a/haunt/static/js/webmention.js b/haunt/static/js/webmention.js
index 2267da8..c451031 100644
--- a/haunt/static/js/webmention.js
+++ b/haunt/static/js/webmention.js
@@ -26,7 +26,7 @@ function buildApiUri() {
     `http://${ref}/blog/${slug}.html`,
     `https://${ref}/blog/${slug}.html`,
   ];
-  return ["https://webmention.io/api/mentions.jf2?"].concat(
+  return ["https://webmention.io/api/mentions.jf2?per-page=200&page=0"].concat(
     endpoints.map((endpoint) => {
       return `target[]=${endpoint}`;
     }).join("&")
@@ -138,10 +138,15 @@ function makeComment(comment) {
   });
   metalineContainer.appendChild(linkBack);
 
+  let sourceIcon = document.createElement("img");
+  sourceIcon.classList.add("comment-source-identifier")
+  sourceIcon.src = "/static/image/webmention-logo.png";
+
   // Put it all together.
   let wrapper = element("li", {
-    "class": "p-comment h-cite comment",
+    "class": "p-comment h-cite comment comment-source-webmention",
   });
+  wrapper.appendChild(sourceIcon);
   wrapper.appendChild(hCardContainer);
   wrapper.appendChild(contentContainer);
   wrapper.appendChild(metalineContainer);
@@ -149,9 +154,76 @@ function makeComment(comment) {
   return wrapper;
 }
 
+function makeInteraction(ent) {
+  const strip = (uri) => {
+    const sep = "://";
+    return uri.substring(uri.indexOf(sep) + sep.length);
+  };
+
+  const element = (type, attributes) => {
+    let res = document.createElement(type);
+    for (const attribute in attributes) {
+      res.setAttribute(attribute, attributes[attribute]);
+    }
+    return res;
+  };
+
+  // Create the h-card section.
+  let avatar = element("img", {
+    "class": "u-photo",
+    "src": ent.url.startsWith("https://lobste.rs/")
+      ? "/static/image/lobsters.png"
+      : ent.author.photo || "/static/image/default-icon.png"
+  });
+  let avatarContainer = element("a", {
+    "href": ent.author.url
+  });
+  avatarContainer.appendChild(avatar);
+
+  // Create the content section.
+  let contentContainer = element("div", {
+    "class": "e-content p-name comment-content",
+  });
+  let em = element("em", {});
+  if ("repost-of" === ent["wm-property"]) {
+    em.textContent = "Reposted this!";
+  } else if ("like-of" === ent["wm-property"]) {
+    em.textContent = "Favorited this!";
+  } else {
+    return null;
+  }
+  contentContainer.appendChild(em);
+
+  let sourceIcon = document.createElement("img");
+  sourceIcon.classList.add("comment-source-identifier")
+  sourceIcon.src = "/static/image/webmention-logo.png";
+
+  // Put it all together.
+  let wrapper = element("li", {
+    "class": "p-comment h-cite interaction comment-source-webmention",
+  });
+  wrapper.appendChild(avatarContainer);
+  wrapper.appendChild(contentContainer);
+  wrapper.appendChild(sourceIcon);
+
+  return wrapper;
+}
+
+function makeEntry(ent) {
+  if (ent.hasOwnProperty("wm-property")) {
+    if (ent.hasOwnProperty("content") && ent["wm-property"] !== "repost-of") {
+      return makeComment(ent);
+    } else {
+      return makeInteraction(ent);
+    }
+  }
+  return null;
+}
+
 getData(buildApiUri(), (json) => {
   json.children
-    .map(makeComment)
+    .map(makeEntry)
+    .filter((x) => x !== null)
     .forEach((elem) => {
       document.getElementById("webmention-container").appendChild(elem);
     })});