refactor: separate fediverse form and webmention form into partials

3 files changed, 45 insertions, 42 deletions

diff --git a/layouts/_partials/posts/fediverse-form.html b/layouts/_partials/posts/fediverse-form.html
new file mode 100644
index 00000000..76072cf5
--- /dev/null
+++ b/layouts/_partials/posts/fediverse-form.html
@@ -0,0 +1,36 @@
+<div class="flex flex-col gap-2">
+    <h4 class="text-sm font-semibold m-0">Fediverse</h4>
+    {{ with .Params.toot }}
+    <input type="text" id="fediverse-instance" placeholder="your.instance.com" class="text-sm px-2 py-1 border border-neutral-300 dark:border-neutral-600 rounded bg-transparent">
+    <button onclick="openInFediverse()" class="text-xs px-2 py-1 bg-neutral-200 dark:bg-neutral-600 rounded hover:bg-neutral-300 dark:hover:bg-neutral-500 transition-colors">Open Toot</button>
+    {{ else }}
+    <p class="text-xs text-neutral-500 m-0">No toot available</p>
+    <input type="text" id="fediverse-instance" placeholder="your.instance.com" class="text-sm px-2 py-1 border border-neutral-300 dark:border-neutral-600 rounded bg-transparent opacity-50" disabled>
+    <button disabled class="text-xs px-2 py-1 bg-neutral-200 dark:bg-neutral-600 rounded opacity-50 cursor-not-allowed">Open Toot</button>
+    {{ end }}
+</div>
+
+<script>
+function openInFediverse() {
+    const instance = document.getElementById('fediverse-instance').value.trim();
+    {{ with .Params.toot }}
+    const tootUrl = '{{ . }}';
+    {{ else }}
+    const tootUrl = '';
+    {{ end }}
+
+    if (!instance) {
+        alert('Please enter your Fediverse instance URL');
+        return;
+    }
+
+    if (!tootUrl) {
+        alert('No toot available for this post');
+        return;
+    }
+
+    // Open the toot interaction page on the user's instance
+    const url = 'https://' + instance + '/authorize_interaction?uri=' + encodeURIComponent(tootUrl);
+    window.open(url, '_blank');
+}
+</script>
diff --git a/layouts/_partials/posts/webmention-form.html b/layouts/_partials/posts/webmention-form.html
new file mode 100644
index 00000000..d55e8d58
--- /dev/null
+++ b/layouts/_partials/posts/webmention-form.html
@@ -0,0 +1,6 @@
+<form action="https://webmention.io/www.geedea.pro/webmention" method="POST" class="flex flex-col gap-2">
+    <h4 class="text-sm font-semibold m-0">Webmention</h4>
+    <input type="url" name="source" placeholder="Your post URL" class="text-sm px-2 py-1 border border-neutral-300 dark:border-neutral-600 rounded bg-transparent">
+    <input type="hidden" name="target" value="{{ .Permalink }}">
+    <button type="submit" class="text-xs px-2 py-1 bg-neutral-200 dark:bg-neutral-600 rounded hover:bg-neutral-300 dark:hover:bg-neutral-500 transition-colors">Send</button>
+</form>
diff --git a/layouts/_partials/posts/webmention-likes.html b/layouts/_partials/posts/webmention-likes.html
index 4621ab47..e77b3253 100644
--- a/layouts/_partials/posts/webmention-likes.html
+++ b/layouts/_partials/posts/webmention-likes.html
@@ -7,27 +7,10 @@
           <div class="w-5 h-5 bg-neutral-200 dark:bg-neutral-600 flex justify-center items-center rd-full font-800">+</div>
       </a>
       <!-- 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 rounded-lg shadow-lg p-4 w-80">
+      <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">
-              <!-- Column 1: Fediverse Instance -->
-              <div class="flex flex-col gap-2">
-                  <h4 class="text-sm font-semibold m-0">Fediverse</h4>
-                  {{ with $page.Params.toot }}
-                  <input type="text" id="fediverse-instance" placeholder="your.instance.com" class="text-sm px-2 py-1 border border-neutral-300 dark:border-neutral-600 rounded bg-transparent">
-                  <button onclick="openInFediverse()" class="text-xs px-2 py-1 bg-neutral-200 dark:bg-neutral-600 rounded hover:bg-neutral-300 dark:hover:bg-neutral-500 transition-colors">Open Toot</button>
-                  {{ else }}
-                  <p class="text-xs text-neutral-500 m-0">No toot available</p>
-                  <input type="text" id="fediverse-instance" placeholder="your.instance.com" class="text-sm px-2 py-1 border border-neutral-300 dark:border-neutral-600 rounded bg-transparent opacity-50" disabled>
-                  <button disabled class="text-xs px-2 py-1 bg-neutral-200 dark:bg-neutral-600 rounded opacity-50 cursor-not-allowed">Open Toot</button>
-                  {{ end }}
-              </div>
-               <!-- Column 2: Webmention -->
-               <form action="https://webmention.io/www.geedea.pro/webmention" method="POST" class="flex flex-col gap-2">
-                   <h4 class="text-sm font-semibold m-0">Webmention</h4>
-                   <input type="url" name="source" placeholder="Your post URL" class="text-sm px-2 py-1 border border-neutral-300 dark:border-neutral-600 rounded bg-transparent">
-                   <input type="hidden" name="target" value="{{ $page.Permalink }}">
-                   <button type="submit" class="text-xs px-2 py-1 bg-neutral-200 dark:bg-neutral-600 rounded hover:bg-neutral-300 dark:hover:bg-neutral-500 transition-colors">Send</button>
-               </form>
+            {{ partial "posts/fediverse-form" $page }}
+            {{ partial "posts/webmention-form" $page }}
           </div>
       </div>
       {{ range $likes }}
@@ -49,28 +32,6 @@ function toggleActionArea() {
     actionArea.classList.toggle('hidden');
 }
 
-function openInFediverse() {
-    const instance = document.getElementById('fediverse-instance').value.trim();
-    {{ with $page.Params.toot }}
-    const tootUrl = '{{ . }}';
-    {{ else }}
-    const tootUrl = '';
-    {{ end }}
-
-    if (!instance) {
-        alert('Please enter your Fediverse instance URL');
-        return;
-    }
-
-    if (!tootUrl) {
-        alert('No toot available for this post');
-        return;
-    }
-
-    // Open the toot interaction page on the user's instance
-    const url = 'https://' + instance + '/authorize_interaction?uri=' + encodeURIComponent(tootUrl);
-    window.open(url, '_blank');
-}
 
 // Close action area when clicking outside
 document.addEventListener('click', function(event) {