refactor: separate fediverse form and webmention form into partials

1 files changed, 36 insertions, 0 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>