feat: add back-to-top partial with Alpine.js and i18n

diff --git a/themes/danix-xyz-hacker/i18n/en.yaml b/themes/danix-xyz-hacker/i18n/en.yaml
index 7e8b71fe65669c5ffbe3e69521ca758e1fc359a4..23b7b6b7113572c56dcc5cc4d07e020f0a4d1361 100644 (file)
--- a/themes/danix-xyz-hacker/i18n/en.yaml
+++ b/themes/danix-xyz-hacker/i18n/en.yaml
@@ -73,6 +73,7 @@ telegram: "Telegram"
 signal: "Signal"
 shareViaEmail: "Share via email"
 linkCopied: "Link copied!"
+back_to_top: "Back to top"
 
 # Forms
 name: "Name"

diff --git a/themes/danix-xyz-hacker/i18n/it.yaml b/themes/danix-xyz-hacker/i18n/it.yaml
index 43cb604a50f00fb397b85a34561029677e8c325d..8606ffae8f9b0e3ccccf3be3ff3b7184a9116d37 100644 (file)
--- a/themes/danix-xyz-hacker/i18n/it.yaml
+++ b/themes/danix-xyz-hacker/i18n/it.yaml
@@ -73,6 +73,7 @@ telegram: "Telegram"
 signal: "Signal"
 shareViaEmail: "Condividi via email"
 linkCopied: "Link copiato!"
+back_to_top: "Torna in cima"
 
 # Forms
 name: "Nome"

diff --git a/themes/danix-xyz-hacker/layouts/partials/back-to-top.html b/themes/danix-xyz-hacker/layouts/partials/back-to-top.html
new file mode 100644 (file)
index 0000000..75095e3
--- /dev/null
+++ b/themes/danix-xyz-hacker/layouts/partials/back-to-top.html
@@ -0,0 +1,23 @@
+<div
+  x-data="{ visible: false }"
+  @scroll.window="visible = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) >= 0.33"
+>
+  <button
+    x-show="visible"
+    x-cloak
+    x-transition:enter="transition ease-out duration-300"
+    x-transition:enter-start="opacity-0 translate-y-4"
+    x-transition:enter-end="opacity-100 translate-y-0"
+    x-transition:leave="transition ease-in duration-200"
+    x-transition:leave-start="opacity-100 translate-y-0"
+    x-transition:leave-end="opacity-0 translate-y-4"
+    class="back-to-top"
+    aria-label="{{ i18n "back_to_top" | default "Back to top" }}"
+    type="button"
+    @click="window.scrollTo({ top: 0, behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' })"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+      <polyline points="18 15 12 9 6 15"></polyline>
+    </svg>
+  </button>
+</div>