From 673c0cd86d38040dd80b5c23b3a2f4d1a610efa2 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Wed, 31 May 2023 23:03:35 +0200
Subject: [PATCH] feat: share link or fedi post link

---
 _layouts/post.html                            | 18 ++++++++-
 ...2023-05-28-stopped-tracking-on-my-sites.md |  1 +
 assets/js/webmention-utils.mjs                |  4 +-
 assets/main.scss                              | 37 ++++++++++++++-----
 4 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/_layouts/post.html b/_layouts/post.html
index cfb5926..1f4f54c 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -73,12 +73,28 @@ layout: default
   </div>
 
   <div class="blog-post__after-content">
+    <h2>Thoughts?</h2>
+
     <div id="reply-by-email">
-      <a href="mailto:blog@ayco.io?subject=Re:%20{{page.title | url_encode}}&body=%0A%0AResponse%20to:%20{{site.url}}{{page.url}}">Thoughts? Reply by email</a>
+      <a href="mailto:blog@ayco.io?subject=Re:%20{{page.title | url_encode}}&body=%0A%0AResponse%20to:%20{{site.url}}{{page.url}}">Reply by private email</a>
     </div>
+
+    <div id="fedi-link">
+      {% if page.fedi-url %}
+        <a href="{{ page.fedi-url }}">Join the conversation!</a>
+      {% else %}
+        <a href="https://sharetomastodon.github.io/?title=🎉 {{ page.title }} by {{page.author}} (@ayo@ayco.io)&url={{ site.url }}{{ page.url }}" target="_blank">
+          Share on Mastodon!
+        </a>
+      {% endif %}
+    </div>
+
+    <div class="clear-both"></div>
+
     <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>
+
   </div>
 
   <div class="blog-post__web-mentions">
diff --git a/_posts/2023-05-28-stopped-tracking-on-my-sites.md b/_posts/2023-05-28-stopped-tracking-on-my-sites.md
index 55ce4fd..6244031 100644
--- a/_posts/2023-05-28-stopped-tracking-on-my-sites.md
+++ b/_posts/2023-05-28-stopped-tracking-on-my-sites.md
@@ -7,6 +7,7 @@ image-attrib-url: https://metapixl.com/p/ayo/566394313649618586
 image-alt: An empty bench in front of a calm river on a sunny day
 description: "I was never happy about being tracked, why should I do that to others?"
 category: personal
+fedi-url: https://social.ayco.io/@ayo/110448123075434123
 ---
 
 Back in 2021, I deleted my Facebook account that had thousands of connections, and created a new one just for closest family members and friends.
diff --git a/assets/js/webmention-utils.mjs b/assets/js/webmention-utils.mjs
index 504d083..66a1a00 100644
--- a/assets/js/webmention-utils.mjs
+++ b/assets/js/webmention-utils.mjs
@@ -2,8 +2,8 @@ export function renderMentions(mentions, className) {
   const webMentionsSection = document.querySelector(className);
   mentions = mentions.filter((m) => m["wm-private"] !== true);
 
-  if (mentions.length)
-    webMentionsSection.innerHTML = "<h2>From Across the Web:</h2>";
+  if (mentions.filter((m) => m.author.name !== "Ayo Ayco").length)
+    webMentionsSection.innerHTML = "<h2>From Across the Web</h2>";
 
   const heading = {
     "like-of": "👍 {x} Likes",
diff --git a/assets/main.scss b/assets/main.scss
index e4d9934..f1b7487 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -390,6 +390,10 @@ table.image caption {
     }
   }
   &__after-content {
+    h2 {
+      text-align: center;
+    }
+
     #rss-sign-up {
       color: #90c049;
       font-weight: bold;
@@ -410,25 +414,26 @@ table.image caption {
       color: #ee4a03;
     }
 
-    #reply-by-email {
-      margin: 1em 0;
-    }
-    #reply-by-email a:hover {
-      color: #ee4a03;
+    #reply-by-email a:hover,
+    #fedi-link a:hover {
       border: 1px solid #ee4a03;
     }
-    #reply-by-email a {
-      color: #bb4a03;
+    #reply-by-email a,
+    #fedi-link a {
       background-color: #f5f5f5;
       border: 1px solid #ccc;
       border-radius: 5px;
-      padding: 1em;
-      width: 100%;
+      margin: 0 0.5em;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      padding: 1em 0.5em;
+      width: calc(50% - 1em);
+      float: left;
       text-align: center;
       text-decoration: underline;
       text-decoration-thickness: 1px;
       display: inline-block;
-      font-size: 24px;
+      font-size: large;
       font-weight: bold;
       font-family: medium-content-sans-serif-font, -apple-system,
         BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
@@ -436,6 +441,9 @@ table.image caption {
     }
   }
   &__web-mentions {
+    h2 {
+      text-align: center;
+    }
     margin: 2em 0;
     max-width: fit-content;
 
@@ -564,6 +572,15 @@ table.image caption {
         font-size: 36px;
       }
     }
+
+    &__after-content {
+      #reply-by-email a,
+      #fedi-link a {
+        display: inline-block;
+        width: calc(100% - 1em);
+        margin-bottom: 1em;
+      }
+    }
   }
 
   .blog-home {