From b5294eb29b5bc5e9738eb683081459ff4721cce0 Mon Sep 17 00:00:00 2001
From: eltrac <hi@eltr.ac>
Date: Wed, 18 Feb 2026 22:32:15 +0800
Subject: perf: use <details> to toggle webmention display, remove JS

---
 layouts/_partials/posts/action-menu.html        | 12 ++++---
 layouts/_partials/posts/webmention-likes.html   | 43 -------------------------
 layouts/_partials/posts/webmention-summary.html | 43 +++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 48 deletions(-)
 delete mode 100644 layouts/_partials/posts/webmention-likes.html
 create mode 100644 layouts/_partials/posts/webmention-summary.html

diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html
index 9358ce0d..b5204bc2 100644
--- a/layouts/_partials/posts/action-menu.html
+++ b/layouts/_partials/posts/action-menu.html
@@ -14,17 +14,19 @@
 {{ end }}
 {{ end }}
 
-<div id="action-menu" class="my-4 mb-5">
-    {{ partial "posts/webmention-likes" (dict
+<details class="my-4 mb-5">
+    <summary class="cursor-pointer">
+        {{ partial "posts/webmention-summary" (dict
         "likes" $likes
         "page" .
         "othercount" (add (len $replies) (len $mentions))
-    ) }}
-    <div id="webmention-collapse" class="hidden">
+        ) }}
+    </summary>
+    <div id="webmention-details">
         {{ partial "posts/webmention-replies" $replies }}
         {{ partial "posts/webmention-mentions" $mentions }}
     </div>
 
     <!-- kept for legacy pages -->
     {{ partial "posts/comment" . }}
-</div>
+</details>
diff --git a/layouts/_partials/posts/webmention-likes.html b/layouts/_partials/posts/webmention-likes.html
deleted file mode 100644
index 54fcef4a..00000000
--- a/layouts/_partials/posts/webmention-likes.html
+++ /dev/null
@@ -1,43 +0,0 @@
-{{ $likes := .likes }}
-{{ $page := .page }}
-{{ $othercount := .othercount }}
-
-<section class="group relative mb-6 vertical-middle">
-      <!-- Action Area Toggle -->
-      <button data-tooltip id="action-area-btn" title="{{ T "actionMenu.interact" }}" class="m-0 p-0 bg-transparent hover:no-underline cursor-pointer float-left mr-2">
-          <div class="w-5 h-5 bg-neutral-200 dark:bg-neutral-600 flex justify-center items-center rd-full font-800">+</div>
-      </button>
-
-      <!-- Action Area -->
-      <div id="action-area" class="hidden absolute top-7 left-0 z-50 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rd-md shadow-lg p-4 w-80">
-          <div class="grid grid-cols-2 gap-4">
-            {{ partial "posts/fediverse-form" $page }}
-            {{ partial "posts/webmention-form" $page }}
-          </div>
-          <div class="flex justify-between mt-2 items-center">
-              <p class="text-sm text-secondary m-0"><a href="mailto:hi@eltr.ac?subject=Re%3A%20{{ $page.Title }}">📧 {{ T "actionMenu.email" }}</a></p>
-              {{ if eq $page.Site.Language.Lang "zh" }}
-              <p class="m-0 text-xs"><a class="text-secondary" href="/posts/site-report-4/#所以怎么点赞和评论你的博客">这是什么？</a></p>
-              {{ end }}
-          </div>
-      </div>
-
-      <!-- Likes -->
-      {{ range $likes }}
-      <a href="{{ .author.url }}" target="_blank" title="{{ .author.name }}" class="box-border hover:no-underline inline-block h-5 w-5 float-left -ml-1">
-          {{ $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"
-              loading="lazy"
-              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 class="text-secondary m-0 text-sm inline ml-2">
-    {{ printf (T "webmention.likedBy") (len $likes ) }}
-    {{ if gt $othercount 0 }}
-        <a id="toggle-webmentions" class="cursor-pointer" onclick="document.getElementById('webmention-collapse').classList.toggle('hidden')">{{ printf (T "webmention.repliedAndMentionedBy") $othercount }}</a>
-    {{ end }}
- </div>
- <div class="clear-left"></div>
-</section>
-
diff --git a/layouts/_partials/posts/webmention-summary.html b/layouts/_partials/posts/webmention-summary.html
new file mode 100644
index 00000000..65bd8b31
--- /dev/null
+++ b/layouts/_partials/posts/webmention-summary.html
@@ -0,0 +1,43 @@
+{{ $likes := .likes }}
+{{ $page := .page }}
+{{ $othercount := .othercount }}
+
+<section class="group relative mb-6 vertical-middle">
+      <!-- Action Area Toggle -->
+      <button data-tooltip id="action-area-btn" title="{{ T "actionMenu.interact" }}" class="m-0 p-0 bg-transparent hover:no-underline cursor-pointer float-left mr-2">
+          <div class="w-5 h-5 bg-neutral-200 dark:bg-neutral-600 flex justify-center items-center rd-full font-800">+</div>
+      </button>
+
+      <!-- Action Area -->
+      <div id="action-area" class="hidden absolute top-7 left-0 z-50 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rd-md shadow-lg p-4 w-80">
+          <div class="grid grid-cols-2 gap-4">
+            {{ partial "posts/fediverse-form" $page }}
+            {{ partial "posts/webmention-form" $page }}
+          </div>
+          <div class="flex justify-between mt-2 items-center">
+              <p class="text-sm text-secondary m-0"><a href="mailto:hi@eltr.ac?subject=Re%3A%20{{ $page.Title }}">📧 {{ T "actionMenu.email" }}</a></p>
+              {{ if eq $page.Site.Language.Lang "zh" }}
+              <p class="m-0 text-xs"><a class="text-secondary" href="/posts/site-report-4/#所以怎么点赞和评论你的博客">这是什么？</a></p>
+              {{ end }}
+          </div>
+      </div>
+
+      <!-- Likes -->
+      {{ range $likes }}
+      <a href="{{ .author.url }}" target="_blank" title="{{ .author.name }}" class="box-border hover:no-underline inline-block h-5 w-5 float-left -ml-1">
+          {{ $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"
+              loading="lazy"
+              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 class="text-secondary m-0 text-sm inline ml-2">
+    {{ printf (T "webmention.likedBy") (len $likes ) }}
+    {{ if gt $othercount 0 }}
+        {{ printf (T "webmention.repliedAndMentionedBy") $othercount }}
+    {{ end }}
+ </div>
+ <div class="clear-left"></div>
+</section>
+
-- 
cgit v1.2.3