feat: add webmention to action menu

Former-commit-id: dd27c7bfb5932d8402b1f89984196f8566c14d5e

6 files changed, 85 insertions, 38 deletions

diff --git a/layouts/_partials/components/toggle-button.html b/layouts/_partials/components/toggle-button.html
new file mode 100644
index 00000000..3aef1509
--- /dev/null
+++ b/layouts/_partials/components/toggle-button.html
@@ -0,0 +1,53 @@
+{{/* 
+  Reusable Toggle Button Component
+  
+  Parameters:
+  - id: (string) Unique identifier for the button group (e.g. "comments"). 
+        Used to generate IDs: {id}-toggle, {id}-section, {id}-count.
+  - title: (string) Tooltip title.
+  - icon: (string) Path to the icon image.
+  - countId: (string, optional) Override for count element ID. Defaults to "{id}-count".
+  - sectionId: (string, optional) Override for section element ID. Defaults to "{id}-section".
+  - buttonId: (string, optional) Override for button element ID. Defaults to "{id}-toggle".
+*/}}
+{{ $id := .id }}
+{{ $buttonId := default (printf "%s-toggle" $id) .buttonId }}
+{{ $sectionId := default (printf "%s-section" $id) .sectionId }}
+{{ $countId := default (printf "%s-count" $id) .countId }}
+
+<button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group"
+    id="{{ $buttonId }}" title="{{ .title }}" data-tooltip>
+  <img src="{{ .icon }}" width="20" height="20"
+      alt="{{ .title }}"
+      class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
+  <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70"
+      id="{{ $countId }}">...</span>
+</button>
+
+<script>
+  (function() {
+    document.addEventListener('DOMContentLoaded', () => {
+      const button = document.getElementById("{{ $buttonId }}");
+      const section = document.getElementById("{{ $sectionId }}");
+
+      if (!button || !section) return;
+
+      button.addEventListener('click', () => {
+        const isHidden = section.classList.contains('hidden');
+        const entranceAnimation = 'animate-slide-in-down';
+        const exitAnimation = 'animate-slide-out-up';
+
+        if (isHidden) {
+          section.classList.remove('hidden', exitAnimation);
+          section.classList.add(entranceAnimation);
+        } else {
+          section.classList.remove(entranceAnimation);
+          section.classList.add(exitAnimation);
+          setTimeout(() => {
+            section.classList.add('hidden');
+          }, 200);
+        }
+      });
+    });
+  })();
+</script>
diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html
index ae19873a..cc5aca46 100644
--- a/layouts/_partials/posts/action-menu.html
+++ b/layouts/_partials/posts/action-menu.html
@@ -3,10 +3,12 @@
   <div class="flex justify-between items-center">
     <div class="flex gap-2">
         {{ partial "posts/action-menu/comment-button" . }}
+        {{ partial "posts/action-menu/webmention-button" . }}
         {{ partial "posts/action-menu/like-button" . }}
     </div>
     {{ partial "posts/action-menu/info-links" . }}
   </div>
   <!-- Like Count Display -->
   {{ partial "posts/action-menu/comment-section" . }}
+  {{ partial "posts/action-menu/webmention-section" . }}
 </div>
diff --git a/layouts/_partials/posts/action-menu/comment-button.html b/layouts/_partials/posts/action-menu/comment-button.html
index d646ca27..cd6fe33b 100644
--- a/layouts/_partials/posts/action-menu/comment-button.html
+++ b/layouts/_partials/posts/action-menu/comment-button.html
@@ -1,42 +1,14 @@
-<button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group"
-    id="comments-toggle" title="{{ T "actionMenu.comment" }}" data-tooltip>
-  <img src="/img/comments.svg" width="20" height="20"
-      alt="{{ T "actionMenu.comment" }}"
-      class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
-  <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70" id="comment-count">...</span>
-</button>
+{{ partial "components/toggle-button.html" (dict 
+  "id" "comments"
+  "title" (T "actionMenu.comment")
+  "icon" "/img/comments.svg"
+  "countId" "comment-count" 
+) }}
 
 <script>
 // initialize button features and comment count
 document.addEventListener('DOMContentLoaded', () => {
 
-  function initButtonFeature() {
-    const commentsToggle = document.getElementById('comments-toggle');
-    const commentsSection = document.getElementById('comments-section');
-
-    if (!commentsToggle || !commentsSection) return;
-
-    // click on toggle
-    commentsToggle.addEventListener('click', function() {
-      const isHidden = commentsSection.classList.contains('hidden');
-      const entranceAnimation = 'animate-slide-in-down';
-      const exitAnimation = 'animate-slide-out-up';
-
-      if (isHidden) {
-        // swtich on
-        commentsSection.classList.remove('hidden', exitAnimation);
-        commentsSection.classList.add(entranceAnimation);
-      } else {
-        // switch off
-        commentsSection.classList.remove(entranceAnimation);
-        commentsSection.classList.add(exitAnimation);
-        setTimeout(() => {
-          commentsSection.classList.add('hidden');
-        }, 200);
-      }
-    });
-  }
-
   function initCommentCount() {
     const commentCountEl = document.getElementById('comment-count');
     if (!commentCountEl) return;
@@ -66,7 +38,6 @@ document.addEventListener('DOMContentLoaded', () => {
     observer.observe(document.body, { childList: true, subtree: true });
   }
 
-  initButtonFeature();
   initCommentCount();
 });
 </script>
diff --git a/layouts/_partials/posts/action-menu/webmention-button.html b/layouts/_partials/posts/action-menu/webmention-button.html
new file mode 100644
index 00000000..b447090a
--- /dev/null
+++ b/layouts/_partials/posts/action-menu/webmention-button.html
@@ -0,0 +1,16 @@
+{{ partial "components/toggle-button.html" (dict
+  "id" "webmention"
+  "title" (T "actionMenu.comment")
+  "icon" "/img/mention.svg"
+  "countId" "mention-count"
+) }}
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    fetch("https://webmention.io/api/count?target={{.Permalink}}")
+        .then(response => response.json())
+        .then(responseJson => {
+            document.getElementById("mention-count").textContent = responseJson.count;
+        });
+});
+</script>
diff --git a/layouts/_partials/posts/action-menu/webmention-section.html b/layouts/_partials/posts/action-menu/webmention-section.html
new file mode 100644
index 00000000..5d726aff
--- /dev/null
+++ b/layouts/_partials/posts/action-menu/webmention-section.html
@@ -0,0 +1,8 @@
+<!-- Comment Section -->
+<div class="overflow-hidden my-4">
+    <div class="mt-4 hidden animate-duration-200" id="webmention-section">
+        <div id="webmentions">
+            <p class="no-webmention"></p>
+        </div>
+    </div>
+</div>
diff --git a/layouts/_partials/posts/comment.html b/layouts/_partials/posts/comment.html
index d05ff2d4..6e959f49 100644
--- a/layouts/_partials/posts/comment.html
+++ b/layouts/_partials/posts/comment.html
@@ -33,9 +33,6 @@
     </p>
 </div>
 
-<!-- webmention -->
-<div id="webmentions"></div>
-
 <!-- giscus script -->
 <script>
 function loadGiscus() {