3 files changed, 110 insertions, 7 deletions

diff --git a/haunt/static/css/style.css b/haunt/static/css/style.css
index 6dbbe4e..4b682d2 100644
--- a/haunt/static/css/style.css
+++ b/haunt/static/css/style.css
@@ -169,21 +169,52 @@ ul#webmention-container {
     list-style-type: none;
 }
 
-div.h-entry, ul#webmention-container li {
+ul#webmention-container li {
     border: 2px solid #d2d6dd;
-    padding: 1rem;
+    border-bottom: none;
+}
+
+ul#webmention-container li:last-child {
+    border-bottom: 2px solid #d2d6dd;
+}
+
+ul#webmention-container li.comment {
+    padding: 1.5rem;
 }
 
-img.u-photo {
+ul#webmention-container li.comment img.u-photo {
     width: 4rem;
     padding: 0 1rem 1rem 0;
     float: left;
 }
 
-div.p-author * {
+ul#webmention-container li.interaction {
+    padding: 4px;
+}
+
+ul#webmention-container li.interaction img.u-photo {
+    max-width: 16px;
+    margin-right: 8px;
+    float: left;
+}
+
+ul#webmention-container div.p-author * {
     padding-right: 1rem;
 }
 
+/* Webmention (or comment) source indicator. */
+
+ul#webmention-container .comment-source-webmention {
+    position: relative;
+}
+
+ul#webmention-container .comment-source-webmention .comment-source-identifier {
+    position: absolute;
+    top: 0;
+    right: 0;
+    max-width: 16px;
+}
+
 /* Webmention form. */
 
 form {
diff --git a/haunt/static/image/webmention-logo.png b/haunt/static/image/webmention-logo.png
new file mode 100644
index 0000000..a4ffda1
--- /dev/null
+++ b/haunt/static/image/webmention-logo.png
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);
     })});