feat: share link or fedi post link

_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">

_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.

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)
+  if (mentions.filter((m) => m.author.name !== "Ayo Ayco").length)
-    webMentionsSection.innerHTML = "<h2>From Across the Web:</h2>";
+    webMentionsSection.innerHTML = "<h2>From Across the Web</h2>";
 
   const heading = {
     "like-of": "👍 {x} Likes",

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 {
+    #reply-by-email a:hover,
-      margin: 1em 0;
+    #fedi-link a:hover {
-    }
-    #reply-by-email a:hover {
-      color: #ee4a03;
       border: 1px solid #ee4a03;
     }
-    #reply-by-email a {
+    #reply-by-email a,
-      color: #bb4a03;
+    #fedi-link a {
       background-color: #f5f5f5;
       border: 1px solid #ccc;
       border-radius: 5px;
-      padding: 1em;
+      margin: 0 0.5em;
-      width: 100%;
+      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 {