feat: new webmention section

with better support for replies, likes and mentions

2 files changed, 78 insertions, 25 deletions

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"