feat: new comment area

Former-commit-id: a73e0b8439763fca242322d228ead3c800504ced

10 files changed, 98 insertions, 195 deletions

diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html
index ab4c87d5..afab7663 100644
--- a/layouts/_partials/posts/action-menu.html
+++ b/layouts/_partials/posts/action-menu.html
@@ -1,14 +1,24 @@
+{{ $webmentions := index .Site.Data.webmentions .RelPermalink }}
+{{ $likes := slice }}
+{{ $replies := slice }}
+{{ $mentions := slice }}
+{{ with $webmentions }}
+{{ range . }}
+  {{ if eq .type "like-of" }}
+    {{ $likes = $likes | append . }}
+  {{ else if eq .type "in-reply-to" }}
+    {{ $replies = $replies | append . }}
+  {{ else if eq .type "mention-of" }}
+    {{ $mentions = $mentions | append . }}
+  {{ end }}
+{{ end }}
+{{ end }}
+
 <div id="action-menu" class="my-4 mb-5">
-  <!-- Action Buttons -->
-  <div class="flex justify-between items-center">
-    <div class="flex gap-2">
-        {{ partial "posts/action-menu/comment-button" . }}
-        {{ partial "posts/action-menu/webmention-button" . }}
-    </div>
-    {{ partial "posts/action-menu/info-links" . }}
-  </div>
-  <div>
-      {{ partial "posts/action-menu/comment-section" . }}
-      {{ partial "posts/action-menu/webmention-section" . }}
-  </div>
+    {{ partial "posts/webmention-likes" $likes }}
+    {{ partial "posts/webmention-replies" $replies }}
+    {{ partial "posts/webmention-mentions" $mentions }}
+
+    <!-- kept for legacy pages -->
+    {{ partial "posts/comment" . }}
 </div>
diff --git a/layouts/_partials/posts/action-menu/comment-button.html b/layouts/_partials/posts/action-menu/comment-button.html
deleted file mode 100644
index 8ad02ae0..00000000
--- a/layouts/_partials/posts/action-menu/comment-button.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{{ partial "components/toggle-button.html" (dict
-  "id" "comments"
-  "title" (T "actionMenu.comment")
-  "icon" "/img/comments.svg"
-  "countId" "comment-count"
-  "group" "action-menu-section"
-) }}
diff --git a/layouts/_partials/posts/action-menu/comment-section.html b/layouts/_partials/posts/action-menu/comment-section.html
deleted file mode 100644
index d5909597..00000000
--- a/layouts/_partials/posts/action-menu/comment-section.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!-- Comment Section -->
-<div class="overflow-hidden">
-    <div class="mt-4 hidden animate-duration-200" id="comments-section">
-      {{ partial "posts/comment.html" . }}
-    </div>
-</div>
diff --git a/layouts/_partials/posts/action-menu/info-links.html b/layouts/_partials/posts/action-menu/info-links.html
deleted file mode 100644
index 46042344..00000000
--- a/layouts/_partials/posts/action-menu/info-links.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{{ if eq .Site.Language.Lang "zh" }}
-<div class="flex gap-1">
-  <a href="/sponsor" data-tooltip
-      class="dark:invert flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group"
-      title="{{ T "actionMenu.sponsor" }}">
-    <img src="/img/coffee.svg" width="16" height="16"
-        alt="{{ T "actionMenu.sponsor" }}"
-        class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
-  </a>
-</div>
-{{ end }}
diff --git a/layouts/_partials/posts/action-menu/webmention-button.html b/layouts/_partials/posts/action-menu/webmention-button.html
deleted file mode 100644
index aba5891f..00000000
--- a/layouts/_partials/posts/action-menu/webmention-button.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{{ $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"
-) }}
diff --git a/layouts/_partials/posts/action-menu/webmention-section.html b/layouts/_partials/posts/action-menu/webmention-section.html
deleted file mode 100644
index fa952e9c..00000000
--- a/layouts/_partials/posts/action-menu/webmention-section.html
+++ /dev/null
@@ -1,122 +0,0 @@
-<!-- Comment Section -->
-<div class="overflow-hidden">
-    <div class="mt-4 hidden animate-duration-200" id="webmention-section">
-        <div>
-          {{ $webmentions := index .Site.Data.webmentions .RelPermalink }}
-          {{ $webmentionLikes := slice }}
-          {{ $webmentionReplies := slice }}
-          {{ $webmentionMentions := slice }}
-          {{ with $webmentions }}
-            {{ 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 }}
-          {{ 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"
-                    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>
-           <p class="text-secondary m-0 text-sm">{{ printf (T "webmention.likedBy") (len $webmentionLikes) }}</p>
-          </section>
-          {{ end }}
-
-          <!-- replies -->
-          {{ with $webmentionReplies }}
-          <section>
-          {{ range . }}
-            <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>
-              <div class="markdown-body leading-relaxed px-2">{{ .content.html | safeHTML }}</div>
-            </div>
-          {{ end }}
-          </section>
-          <hr />
-          {{ end }}
-
-          <!-- Fediverse interaction link -->
-          <section class="text-secondary text-sm">
-            {{ with $.Params.toot }}
-            <a href="{{ . }}" target="_blank" rel="noopener noreferrer" class="text-secondary hover:underline">
-              {{ T "webmention.interactOnFediverse" }} →
-            </a>
-            {{ else }}
-            <a href="https://akk.eltr.ac/eltrac" target="_blank" rel="noopener noreferrer" class="text-secondary hover:underline">
-              {{ T "webmention.interactOnFediverse" }} →
-            </a>
-            {{ end }}
-          </section>
-
-          <!-- 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 }}
-          </section>
-          {{ end }}
-
-        </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"
-              method="POST"
-            >
-              <label for="webmention-form">{{ T "webmention.formDesc" }}</label>
-
-              <input
-                id="webmention-source"
-                type="url"
-                autocomplete="url"
-                required=""
-                pattern="^https?:\/\/(.*)"
-                name="source"
-                placeholder="{{ T "webmention.formPlaceholder" }}"
-                class="error"
-                aria-invalid="true"
-              />
-
-              <input id="webmention-submit" type="submit" name="submit" value="{{ T "webmention.submit" }}" />
-
-              <input id="webmention-format" type="hidden" name="format" value="html" />
-              <input id="webmention-target" type="hidden" name="target" value="{{ .Permalink }}" />
-            </form>
-        </div>
-    </div>
-</div>
diff --git a/layouts/_partials/posts/comment.html b/layouts/_partials/posts/comment.html
index e4ec9b3e..bcd0b17b 100644
--- a/layouts/_partials/posts/comment.html
+++ b/layouts/_partials/posts/comment.html
@@ -1,8 +1,3 @@
-<!-- email info -->
-<p class="text-size-sm text-secondary">
-    *{{ T "emailMe" }} <a href="mailto:{{ .Site.Params.email }}">{{ .Site.Params.email }}</a>
-</p>
-
 <!--
     Giscus has been abandoned since 2026-01-30,
     old data from GitHub Discussion and some other comment systems
@@ -11,32 +6,32 @@
 -->
 {{ $cutoffDate := time.AsTime "2026-01-30" }}
 {{ if .Params.Date.Before $cutoffDate }}
-
-    <p class="text-size-sm text-secondary">博客的评论区已经被禁用，旧的数据已经导出，如果存在，就会显示在下方。如果你想要讨论此文，可以邮件联系，或者在<a href="{{ with .Params.toot }}{{ . }}{{ else }}https://akk.eltr.ac/eltrac{{ end }}">联邦宇宙上互动</a>。</p>
-
-    <hr />
-
     {{ $giscusData := .Site.Data.giscus }}
     {{ $pageTitle := .Title }}
     {{ range $giscusData }}
         {{ if eq .title $pageTitle }}
+            {{ $url := .url }}
             {{ with .comments.nodes }}
-            <div class="my-8">
-                {{ range . }}
-                    <div class="text-md py-4 px-1">
-                        <div class="mb-4 flex justify-between">
-                            <span class="font-bold">{{ .author.login }}</span>
-                            <span class="text-secondary">{{ .createdAt | time.Format "2006/01/02" }}</span>
+            <details>
+                <summary class="text-size-sm text-secondary cursor-pointer">博客的评论区已经被禁用，旧的数据已经导出，可以点击这行字查看。</summary>
+                <div class="my-4">
+                    {{ range . }}
+                        <div class="text-md py-4 px-1">
+                            <div class="mb-4 flex justify-between">
+                                <span class="font-bold">{{ .author.login }}</span>
+                                <span class="text-secondary">{{ .createdAt | time.Format "2006/01/02" }}</span>
+                            </div>
+                            <div>
+                                {{ .body | markdownify }}
+                            </div>
                         </div>
-                        <div>
-                            {{ .body | markdownify }}
-                        </div>
-                    </div>
+                    {{ end }}
+                </div>
+                {{ with $url }}
+                    <p><a href="{{ . }}" class="small-button" target="_blank">Full GitHub Discussion →</a></p>
                 {{ end }}
-            </div>
-            {{ end }}
-            {{ with .url }}
-                <p><a href="{{ . }}" class="small-button" target="_blank">Full GitHub Discussion →</a></p>
+                <hr />
+            </details>
             {{ end }}
         {{ end }}
     {{ end }}
diff --git a/layouts/_partials/posts/webmention-likes.html b/layouts/_partials/posts/webmention-likes.html
new file mode 100644
index 00000000..7169a655
--- /dev/null
+++ b/layouts/_partials/posts/webmention-likes.html
@@ -0,0 +1,20 @@
+{{ with . }}
+<section class="mb-6 flex gap-2 items-center">
+  <div class="flex gap-1 group">
+      <a data-tooltip title="互动" class="hover:no-underline cursor-pointer">
+          <div class="w-5 h-5 bg-neutral-200 dark:bg-neutral-600 flex justify-center items-center rd-full font-800">+</div>
+      </a>
+    {{ 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"
+              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>
+ <p class="text-secondary m-0 text-sm">{{ printf (T "webmention.likedBy") (len . ) }}</p>
+</section>
+{{ end }}
+
diff --git a/layouts/_partials/posts/webmention-mentions.html b/layouts/_partials/posts/webmention-mentions.html
new file mode 100644
index 00000000..2a133d0b
--- /dev/null
+++ b/layouts/_partials/posts/webmention-mentions.html
@@ -0,0 +1,14 @@
+{{ with . }}
+<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 }}
+</section>
+{{ end }}
diff --git a/layouts/_partials/posts/webmention-replies.html b/layouts/_partials/posts/webmention-replies.html
new file mode 100644
index 00000000..570a0e4d
--- /dev/null
+++ b/layouts/_partials/posts/webmention-replies.html
@@ -0,0 +1,23 @@
+{{ with . }}
+<section>
+{{ range . }}
+<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>
+  <div class="markdown-body leading-relaxed px-2">{{ .content.html | safeHTML }}</div>
+</div>
+{{ end }}
+</section>
+<hr />
+{{ end }}