feat: add back-to-top button

also replace comment with action menu (including collapsible comment section) in pages.

7 files changed, 85 insertions, 3 deletions

diff --git a/i18n/en.yml b/i18n/en.yml
index 8831e018..be920bc7 100644
--- a/i18n/en.yml
+++ b/i18n/en.yml
@@ -27,3 +27,4 @@ RSS: RSS
 statsTooltip: Insights
 library:
   viewAllThisYear: All Books This Year
+back2top: I'll take you up!
diff --git a/i18n/zh.yml b/i18n/zh.yml
index b5decd54..34e01821 100644
--- a/i18n/zh.yml
+++ b/i18n/zh.yml
@@ -28,3 +28,4 @@ RSS: 订阅
 statsTooltip: 洞察
 library:
   viewAllThisYear: 查看今年完整书单
+back2top: 我带你上去！
diff --git a/layouts/_partials/components/back-to-top.html b/layouts/_partials/components/back-to-top.html
new file mode 100644
index 00000000..43e0807e
--- /dev/null
+++ b/layouts/_partials/components/back-to-top.html
@@ -0,0 +1,72 @@
+<div id="back2top" class="fixed -top-25 left-0 right-0 z-30
+    flex justify-center items-center transition-all animate-head-shake
+    bg-linear-to-t  bg-gradient-from-transparent bg-gradient-to-zinc">
+    <button id="back2top-button"
+        class="block bg-transparent mt-5 flex flex-col items-center">
+        <img src="/img/bat.svg"
+            class="block w-8 h-8 dark:invert-100 drop-shadow-xl"
+        />
+        <p id="back2top-instruction"
+            class="text-size-xs bg-black/80 text-white px-2 py-1 border rounded">
+                {{ T "back2top" . }}
+        </p>
+    </button>
+</div>
+
+<script>
+
+const backToTop = document.getElementById("back2top")
+const backToTopButton = document.getElementById("back2top-button")
+const backToTopInstruction = document.getElementById("back2top-instruction")
+const seenAndUsedBat = localStorage.getItem("seenAndUsedBat")
+
+function hideInstruction() {
+  backToTopInstruction.remove()
+}
+if (seenAndUsedBat) hideInstruction()
+
+// listen to button click and scroll to top
+backToTopButton.addEventListener("click", () => {
+  window.scrollTo({ top: 0, behavior: "smooth" })
+  if (!seenAndUsedBat) {
+    localStorage.setItem("seenAndUsedBat", true);
+    hideInstruction();
+  }
+})
+
+// listen to scroll and toggle button visibility
+let lastOffset = window.scrollY
+
+window.addEventListener("scroll", () => {
+  const offset = window.scrollY
+  const batIsHidden = backToTop.classList.contains("-top-25")
+  const enoughHeight = offset >= 2000
+  const isScrollingUp = offset < lastOffset
+  const isScrollingDown = offset > lastOffset
+
+  function hide() {
+    backToTop.classList.remove("top-0")
+    backToTop.classList.add("-top-25")
+    backToTop.classList.remove("animate-head-shake")
+  }
+
+  function show() {
+    backToTop.classList.remove("-top-25")
+    backToTop.classList.add("top-0")
+    backToTop.classList.add("animate-head-shake")
+  }
+
+  if (enoughHeight && isScrollingUp && batIsHidden) {
+    // show only when scrolling up
+    show()
+  } else if (isScrollingDown && !batIsHidden) {
+    // hide as soon as user scrolls down again
+    hide()
+  }
+
+  // hide no matter what if too close to top
+  if (!enoughHeight) hide()
+
+  lastOffset = offset
+})
+</script>
diff --git a/layouts/fictions/page.html b/layouts/fictions/page.html
index dda4e884..03e9256f 100644
--- a/layouts/fictions/page.html
+++ b/layouts/fictions/page.html
@@ -21,7 +21,7 @@
         {{ .Content }}
       </div>
 
-      <!-- Comment -->
-      {{ partial "posts/comment.html" . }}
+      {{ partial "posts/action-menu.html" . }}
+      {{ partial "components/back-to-top.html" . }}
     </article>
 {{ end }}
diff --git a/layouts/library/page.html b/layouts/library/page.html
index 5e6a85be..f5a9df5b 100644
--- a/layouts/library/page.html
+++ b/layouts/library/page.html
@@ -35,6 +35,7 @@
             <p>{{ partial "components/tags" . }}</p>
         </div>
         {{ partial "components/backlinks" (dict "filename" .File.BaseFileName "type" "library" "context" .) }}
-        {{ partial "posts/comment.html" . }}
+        {{ partial "posts/action-menu.html" . }}
+        {{ partial "components/back-to-top.html" . }}
     </article>
 {{ end }}
diff --git a/layouts/posts/page.html b/layouts/posts/page.html
index 470a00c1..545be626 100644
--- a/layouts/posts/page.html
+++ b/layouts/posts/page.html
@@ -49,5 +49,6 @@
 
       {{ partial "posts/action-menu.html" . }}
       {{ partial "posts/now-read-this.html" . }}
+      {{ partial "components/back-to-top.html" . }}
     </article>
 {{ end }}
diff --git a/static/img/bat.svg b/static/img/bat.svg
new file mode 100644
index 00000000..0ca422e1
--- /dev/null
+++ b/static/img/bat.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->

+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">

+<title>batwings</title>

+<path d="M31.19 2.61c-5.261 1.114-9.712 5.432-11.847 10.719 3.106 2.48 2.088 6.827-0.967 8.402-0.66-0.435-1.451-0.688-2.3-0.688s-1.64 0.254-2.301 0.688c-3.054-1.575-4.073-5.922-0.967-8.402-2.135-5.286-6.587-9.605-11.847-10.719 2.604 2.659 3.284 8.028 0.84 10.906 3.982 0.67 4.724 3.825 4.021 8.579 2.088-1.303 4.657-0.762 6.245 1.913-0.118 0.387-0.182 0.798-0.182 1.224 0 2.314 1.876 4.191 4.191 4.191s4.191-1.876 4.191-4.191c0-0.426-0.064-0.837-0.182-1.225 1.588-2.675 4.157-3.216 6.245-1.913-0.702-4.754 0.039-7.909 4.021-8.579-2.444-2.879-1.765-8.247 0.84-10.906zM17.329 26.543c-1.352 0-2.448-1.096-2.448-2.448s1.096-2.448 2.448-2.448c0.311 0 0.609 0.059 0.882 0.165 0 0 0 0-0 0 0.114 0.044 0.224 0.096 0.329 0.156 0.001 0.001 0.002 0.001 0.003 0.002 0.103 0.059 0.201 0.125 0.293 0.197 0.003 0.003 0.007 0.005 0.011 0.008 0.022 0.017 0.043 0.035 0.064 0.052 0.001 0.001 0.003 0.002 0.004 0.004 0.064 0.054 0.124 0.112 0.182 0.172 0.006 0.006 0.012 0.012 0.018 0.019 0.016 0.017 0.032 0.035 0.048 0.052 0.007 0.008 0.013 0.015 0.020 0.023 0.048 0.056 0.093 0.113 0.136 0.173 0.008 0.011 0.016 0.023 0.024 0.034 0.011 0.016 0.022 0.032 0.033 0.049 0.009 0.013 0.017 0.027 0.026 0.040 0.010 0.016 0.020 0.031 0.029 0.047 0.011 0.018 0.021 0.035 0.031 0.053 0.012 0.021 0.024 0.043 0.035 0.064 0.010 0.020 0.021 0.039 0.030 0.059 0.007 0.014 0.014 0.029 0.020 0.043 0.009 0.019 0.017 0.037 0.025 0.056 0.006 0.014 0.012 0.028 0.018 0.042 0.009 0.022 0.018 0.045 0.027 0.068 0.004 0.011 0.008 0.021 0.012 0.032 0.012 0.032 0.023 0.065 0.033 0.098 0.004 0.012 0.007 0.023 0.010 0.035 0.007 0.024 0.014 0.047 0.020 0.072 0.003 0.013 0.007 0.026 0.010 0.039 0.006 0.025 0.012 0.051 0.018 0.076 0.002 0.011 0.005 0.021 0.007 0.032 0.007 0.036 0.014 0.071 0.019 0.108 0.001 0.008 0.002 0.015 0.003 0.023 0.004 0.029 0.008 0.059 0.011 0.089 0.001 0.012 0.002 0.024 0.004 0.036 0.003 0.027 0.005 0.054 0.006 0.081 0.001 0.012 0.002 0.023 0.002 0.035 0.002 0.038 0.003 0.076 0.003 0.114 0 0.033-0.001 0.065-0.002 0.098-0.001 0.018-0.002 0.035-0.003 0.053-0.078 1.281-1.142 2.297-2.443 2.297z"></path>

+</svg>
\ No newline at end of file