feat: add webmention form and better style

Former-commit-id: 9d4b513887b7028ce3627348b0fbc737bab48497

6 files changed, 43 insertions, 7 deletions

diff --git a/i18n/en.yml b/i18n/en.yml
index f22eabc5..ca8231e5 100644
--- a/i18n/en.yml
+++ b/i18n/en.yml
@@ -56,6 +56,10 @@ actionMenu:
   comment: Comment
   like: Sacrifice your heart
   liked: You've already made your sacrifice
+  webmention: Webmention
 rss_comment_link: "Come and leave a comment"
 webmention:
   fetching: Fetching Webmention...
+  formDesc: You can write an article to respond to this post, or post something on social media, then submit the link of the related page here to send me Webmention.
+  formPlaceholder: URL of your post
+  submit: Ping me!
diff --git a/i18n/zh.yml b/i18n/zh.yml
index 991798ac..ee980cc7 100644
--- a/i18n/zh.yml
+++ b/i18n/zh.yml
@@ -55,6 +55,10 @@ actionMenu:
   comment: 评论
   like: 为这篇文章献上心脏
   liked: 你已经献上心脏了
+  webmention: Webmention
 rss_comment_link: "读完啦？来坐坐吧"
 webmention:
   fetching: 正在获取 Webmention...
+  formDesc: 你可以撰写一篇文章回应此文，或者在社交媒体上发帖，然后在这里提交相关页面的链接，即可向我发送 Webmention。
+  formPlaceholder: 你的文章的 URL
+  submit: 提交
diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html
index cc5aca46..7d4f18c0 100644
--- a/layouts/_partials/posts/action-menu.html
+++ b/layouts/_partials/posts/action-menu.html
@@ -9,6 +9,8 @@
     {{ partial "posts/action-menu/info-links" . }}
   </div>
   <!-- Like Count Display -->
-  {{ partial "posts/action-menu/comment-section" . }}
-  {{ partial "posts/action-menu/webmention-section" . }}
+  <div class="my-4">
+      {{ partial "posts/action-menu/comment-section" . }}
+      {{ partial "posts/action-menu/webmention-section" . }}
+  </div>
 </div>
diff --git a/layouts/_partials/posts/action-menu/comment-section.html b/layouts/_partials/posts/action-menu/comment-section.html
index be99487a..b4566619 100644
--- a/layouts/_partials/posts/action-menu/comment-section.html
+++ b/layouts/_partials/posts/action-menu/comment-section.html
@@ -1,7 +1,7 @@
 <!-- Comment Count Display -->
 <div id="organ-farm" class="flex flex-wrap gap-4 hidden animate-duration-200"></div>
 <!-- Comment Section -->
-<div class="overflow-hidden my-4">
+<div class="overflow-hidden">
     <div class="mt-4 hidden animate-duration-200" id="comments-section">
       {{ partial "posts/comment.html" . }}
     </div>
diff --git a/layouts/_partials/posts/action-menu/webmention-button.html b/layouts/_partials/posts/action-menu/webmention-button.html
index b447090a..c9d3ffc7 100644
--- a/layouts/_partials/posts/action-menu/webmention-button.html
+++ b/layouts/_partials/posts/action-menu/webmention-button.html
@@ -1,13 +1,13 @@
 {{ partial "components/toggle-button.html" (dict
   "id" "webmention"
-  "title" (T "actionMenu.comment")
+  "title" (T "actionMenu.webmention")
   "icon" "/img/mention.svg"
   "countId" "mention-count"
 ) }}
 
 <script>
 document.addEventListener('DOMContentLoaded', () => {
-    fetch("https://webmention.io/api/count?target={{.Permalink}}")
+    fetch("https://webmention.io/api/count?target={{ .Permalink }}")
         .then(response => response.json())
         .then(responseJson => {
             document.getElementById("mention-count").textContent = responseJson.count;
diff --git a/layouts/_partials/posts/action-menu/webmention-section.html b/layouts/_partials/posts/action-menu/webmention-section.html
index 5d726aff..481ff3ad 100644
--- a/layouts/_partials/posts/action-menu/webmention-section.html
+++ b/layouts/_partials/posts/action-menu/webmention-section.html
@@ -1,8 +1,34 @@
 <!-- Comment Section -->
-<div class="overflow-hidden my-4">
+<div class="overflow-hidden">
     <div class="mt-4 hidden animate-duration-200" id="webmention-section">
         <div id="webmentions">
-            <p class="no-webmention"></p>
+            <p class="no-webmention">{{ T "webmention.fetching" }}</p>
+        </div>
+        <div>
+            <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="" />
+            </form>
         </div>
     </div>
 </div>