From d4a79d1303c70a496521f6812c9703a85bfa0e1d Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Tue, 30 May 2023 16:11:38 +0200
Subject: [PATCH] add web mentions h2

---
 _includes/head.html            | 25 +++++++++++--------------
 _includes/replies-section.html |  6 +++++-
 assets/main.scss               | 10 ++++++++++
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/_includes/head.html b/_includes/head.html
index 0846c0f..ac9ee52 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -89,25 +89,17 @@
       document.URL.replace("http://localhost:4000", "https://ayos.blog")
     );
     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) {
             // render to post header meta
+            const repliesSection = document.querySelector("section#replies");
             document.getElementById(
               "page-replies"
-            ).innerHTML = `• ${replies.length} replies`;
+            ).innerHTML = `• <a href="#replies">${replies.length} replies</a>`;
 
             // render to replies section
             const repliesTable = document.createElement("table");
@@ -131,21 +123,26 @@
               cell.appendChild(replyBlock);
               repliesTable.append(row);
             });
-            document.querySelector("section#replies").append(repliesTable);
+
+            repliesSection.innerHTML = "<h2>Web Mentions:</h2>";
+            repliesSection.append(repliesTable);
           }
 
+          const likes = mentions.filter((m) => m["wm-property"] === "like-of");
+          if (likes.length)
+            document.getElementById(
+              "page-likes"
+            ).innerHTML = `• ${likes.length} likes`;
+
           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`;
         })
         .catch((err) => console.log("err", err));
-    } else {
-      console.log("ignoring url: ", url);
     }
 
     async function getMentions(url) {
diff --git a/_includes/replies-section.html b/_includes/replies-section.html
index e2d6f2c..4d72e5d 100644
--- a/_includes/replies-section.html
+++ b/_includes/replies-section.html
@@ -1,9 +1,13 @@
 <section id="replies"></section>
 
 <style>
+  section#replies {
+    margin: 1em 0;
+  }
+
   .reply-block {
     display: block;
-    margin: 1em 0;
+    margin: 0 0 1em;
     padding: 1em;
     border-left: 3px solid #ccc;
   }
diff --git a/assets/main.scss b/assets/main.scss
index 5914183..2c45746 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -41,6 +41,16 @@ body {
     text-decoration: underline;
     text-decoration-thickness: 1px;
   }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: "Source Serif Pro", serif;
+    font-weight: bold;
+  }
 }
 
 .category-head {