diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-20 22:16:16 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-20 22:16:16 +0200 |
| commit | 0c913de7479f998c1c897bddb23e08689408de2a (patch) | |
| tree | 161c92779452a7979f47c2ad002b61726092c40c /themes/danix-xyz-hacker | |
| parent | a0e3cd5736cb04b516a09924fc7af388d046e835 (diff) | |
| download | danixxyz-0c913de7479f998c1c897bddb23e08689408de2a.tar.gz danixxyz-0c913de7479f998c1c897bddb23e08689408de2a.zip | |
feat: add back-to-top partial with Alpine.js and i18n
Diffstat (limited to 'themes/danix-xyz-hacker')
| -rw-r--r-- | themes/danix-xyz-hacker/i18n/en.yaml | 1 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/i18n/it.yaml | 1 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/partials/back-to-top.html | 23 |
3 files changed, 25 insertions, 0 deletions
diff --git a/themes/danix-xyz-hacker/i18n/en.yaml b/themes/danix-xyz-hacker/i18n/en.yaml index 7e8b71f..23b7b6b 100644 --- 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 43cb604..8606ffa 100644 --- 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 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> |