feat: card style of webmention replies

3 files changed, 29 insertions, 15 deletions

diff --git a/i18n/en.toml b/i18n/en.toml
index 87f5a81c..a152c3c7 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -7,6 +7,7 @@ statsTooltip = "Insights"
 back2top = "I'll take you up!"
 emailMe = "If you prefer one-on-one communication, or just want to say hello, feel free to email me at"
 rss_comment_link = "Come and leave a comment"
+viewExternalSource = "View External Source"
 
 [archivePage]
 postCountMonthly = "{{ . }} POSTS"
diff --git a/i18n/zh.toml b/i18n/zh.toml
index 2fffac0d..04fdbea5 100644
--- a/i18n/zh.toml
+++ b/i18n/zh.toml
@@ -8,6 +8,7 @@ statsTooltip = "洞察"
 back2top = "我带你上去！"
 emailMe = "如果你偏好一对一的沟通，或者只是想打个招呼，欢迎发邮件到"
 rss_comment_link = "读完啦？来坐坐吧"
+viewExternalSource = "查看外部来源和完整互动"
 
 [theme]
 auto = "自动"
diff --git a/layouts/_partials/posts/webmention-replies.html b/layouts/_partials/posts/webmention-replies.html
index 593dc369..62c76ee3 100644
--- a/layouts/_partials/posts/webmention-replies.html
+++ b/layouts/_partials/posts/webmention-replies.html
@@ -1,21 +1,33 @@
 {{ with . }}
-<section>
+<section class="flex flex-col gap-4 bg-[var(--background-color)]">
 {{ range sort . "received" }}
-<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">
-      <p class="font-bold m-0">
-        <a href="{{ or .url .author.url }}">
-          {{ replaceRE ":.*?:" "" .author.name }}
-        </a>
-      </p>
-      {{ $t := time.AsTime .received }}
-      <p class="m-0"><time>{{ time.Format "2006-1-2" $t}}</time></p>
-    </div>
-  </div>
+<div class="b-1 b-solid b-neutral-200 rd p-4 relative">
+    <header class="flex justify-between items-start">
+        <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">
+              <p class="font-bold m-0">
+                <a href="{{ or .author.url .url }}">
+                  {{ replaceRE ":.*?:" "" .author.name }}
+                </a>
+              </p>
+              {{ $t := time.AsTime .received }}
+              <p class="m-0"><time>{{ time.Format "2006-1-2" $t}}</time></p>
+            </div>
+        </div>
+        <div class="flex items-start">
+            <a href="{{ .source }}" target="_blank"
+                title="{{ T "viewExternalSource" }}"
+                data-tooltip>↗</a>
+        </div>
+    </header>
+
   <div class="markdown-body leading-relaxed px-2">{{ .content.html | safeHTML }}</div>
+
+  {{ if strings.Contains .source "https://brid.gy" }}
+  <p class="text-xs text-right text-secondary">通过 <a href="https://brid.gy/" target="_blank">Bridgy</a> 发送自联邦宇宙</p>
+  {{ end }}
 </div>
 {{ end }}
 </section>