feat: new webmention section

with better support for replies, likes and mentions


Former-commit-id: 385e36dbef14d6a3d24685dc032a70c3d0d16b8b

3 files changed, 83 insertions, 42 deletions

diff --git a/layouts/_partials/components/toggle-button.html b/layouts/_partials/components/toggle-button.html
index 2b1de2f9..29e3440e 100644
--- a/layouts/_partials/components/toggle-button.html
+++ b/layouts/_partials/components/toggle-button.html
@@ -1,20 +1,8 @@
-{{/* 
-  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".
-  - group: (string, optional) Mutual exclusion group name. If provided, opening this toggle will close others in the same group.
-*/}}
 {{ $id := .id }}
 {{ $buttonId := default (printf "%s-toggle" $id) .buttonId }}
 {{ $sectionId := default (printf "%s-section" $id) .sectionId }}
 {{ $countId := default (printf "%s-count" $id) .countId }}
+{{ $count := default "..." .count }}
 {{ $group := .group }}
 
 <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"
@@ -23,7 +11,7 @@
       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>
+        id="{{ $countId }}">{{ $count }}</span>
 </button>
 
 <script>
@@ -40,7 +28,7 @@
 
       const closeSection = () => {
         if (section.classList.contains('hidden')) return;
-        
+
         section.classList.remove(entranceAnimation);
         section.classList.add(exitAnimation);
         setTimeout(() => {
@@ -66,8 +54,8 @@
 
         if (isHidden) {
           if (group) {
-             const event = new CustomEvent('toggle-group-open', { 
-                detail: { group: group, sourceId: "{{ $buttonId }}" } 
+             const event = new CustomEvent('toggle-group-open', {
+                detail: { group: group, sourceId: "{{ $buttonId }}" }
              });
              document.dispatchEvent(event);
           }
diff --git a/layouts/_partials/posts/action-menu/webmention-button.html b/layouts/_partials/posts/action-menu/webmention-button.html
index 190b0f8b..aba5891f 100644
--- a/layouts/_partials/posts/action-menu/webmention-button.html
+++ b/layouts/_partials/posts/action-menu/webmention-button.html
@@ -1,18 +1,13 @@
+{{ $webmentions := index .Site.Data.webmentions .RelPermalink }}
+{{ $count := 0 }}
+{{ with $webmentions }}
+  {{ $count = len $webmentions }}
+{{ end }}
 {{ partial "components/toggle-button.html" (dict
   "id" "webmention"
   "title" (T "actionMenu.webmention")
   "icon" "/img/mention.svg"
   "countId" "mention-count"
+  "count" $count
   "group" "action-menu-section"
 ) }}
-
-<script>
-const target = encodeURIComponent("{{ .Permalink }}")
-document.addEventListener('DOMContentLoaded', () => {
-    fetch("https://webmention.io/api/count?target="+target)
-        .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
index 55588444..441e2491 100644
--- a/layouts/_partials/posts/action-menu/webmention-section.html
+++ b/layouts/_partials/posts/action-menu/webmention-section.html
@@ -1,27 +1,85 @@
 <!-- Comment Section -->
 <div class="overflow-hidden">
     <div class="mt-4 hidden animate-duration-200" id="webmention-section">
-        <div id="webmentions">
-            <p class="no-webmention">{{ T "webmention.fetching" }}</p>
-        </div>
         <div>
-          {{ $permalink := printf "https://www.geedea.pro%s" .RelPermalink }}
-          {{ $webmentions := index .Site.Data.webmentions $permalink }}
-          {{ $permalink }}
+          {{ $webmentions := index .Site.Data.webmentions .RelPermalink }}
           {{ with $webmentions }}
+
+            {{ $webmentionLikes := slice }}
+            {{ $webmentionReplies := slice }}
+            {{ $webmentionMentions := slice }}
+            {{ range . }}
+              {{ if eq .type "like-of" }}
+                {{ $webmentionLikes = $webmentionLikes | append . }}
+              {{ else if eq .type "in-reply-to" }}
+                {{ $webmentionReplies = $webmentionReplies | append . }}
+              {{ else if eq .type "mention-of" }}
+                {{ $webmentionMentions = $webmentionMentions | append . }}
+              {{ end }}
+            {{ end }}
+
+            <!-- likes -->
+            {{ with $webmentionLikes }}
+            <section class="mb-6 flex gap-2 items-center">
+              <div class="flex gap-1 group">
+              {{ range . }}
+              <a href="{{ .author.url }}" target="_blank" title="{{ .author.name }}">
+                  {{ $value := math.Floor (mul math.Rand 80) }}
+                  {{ $rotate := cond (lt $value 40) (sub 10 $value) (sub $value 30) }}
+                  <img src="{{ .author.photo }}" alt="Profile Picture"
+                                                 class="h-5 w-5 rd-full transition-transform {{ if lt $rotate 0 }}group-hover:-rotate-{{ mul -1 $rotate }}{{ else }}group-hover:rotate-{{ $rotate }}{{ end }} hover:scale-150" />
+                </a>
+              {{ end }}
+             </div>
+             <p class="text-secondary m-0 text-sm">{{ printf (T "webmention.likedBy") (len $webmentionLikes) }}</p>
+            </section>
+            {{ end }}
+
+            <!-- replies -->
+            {{ with $webmentionReplies }}
+            <section>
             {{ range . }}
-              {{ if eq .type "in-reply-to" }}
-                <div class="">
-                  <div class="flex">
-                    <img src="{{ .author.photo }}" alt="Profile Picture"
-                       class="h-10 w-10 rd-full" />
+              <div>
+                <div class="flex items-center gap-3">
+                  <img src="{{ .author.photo }}" alt="Profile Picture"
+                     class="h-8 w-8 rd-full" loading="lazy" />
+                  <div class="text-secondary">
+                    <h4 class="m-0">
+                      <a href="{{ or .url .author.url }}">
+                        {{ .author.name }}
+                      </a>
+                    </h4>
+                    {{ $t := time.AsTime .received }}
+                    <p class="m-0"><time>{{ time.Format "2006-1-2" $t}}</time></p>
                   </div>
                 </div>
-              {{ end }}
+                <div class="markdown-body leading-relaxed px-2">{{ .content.html | safeHTML }}</div>
+              </div>
+            {{ end }}
+            </section>
+            <hr />
+            {{ end }}
+
+            <!-- mentions -->
+            {{ with $webmentionMentions }}
+            <section class="markdown-body">
+              <h3>{{ T "webmention.mentionsHeading" . }}</h3>
+            {{ range . }}
+              <ul class="">
+                {{ with .content }}
+                  <li class="markdown-body leading-relaxed">{{ .html | safeHTML }}</li>
+                {{ else }}
+                  <li><a href="{{ .url }}" target="_blank">{{ .url }}</a></li>
+                {{ end }}
+              </ul>
             {{ end }}
-          {{ end}}
+            </section>
+            {{ end }}
+
+          {{ end }}
         </div>
-        <div>
+
+        <div class="bg-blockBg mt-3 py-3 px-5 rd markdown-body">
             <form
               id="webmention-form"
               action="https://webmention.io/www.geedea.pro/webmention"