From c526157118b69ff68e3a653eee68428a791a7d9f Mon Sep 17 00:00:00 2001
From: satnaing <satnaingdev@gmail.com>
Date: Thu, 14 Dec 2023 11:20:03 +0630
Subject: [PATCH] feat: implement back-to-top button in blog post page

Implement back-to-top button under tags in PostDetails page. Update html scroll-behavior to smooth.

Closes: #156
---
 src/layouts/PostDetails.astro | 27 +++++++++++++++++++++++----
 src/styles/base.css           |  3 +++
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
index 314046869..02de1cc08 100644
--- a/src/layouts/PostDetails.astro
+++ b/src/layouts/PostDetails.astro
@@ -52,9 +52,22 @@ const ogUrl = new URL(
       <Content />
     </article>
 
-    <ul class="tags-container">
+    <ul class="my-8">
       {tags.map(tag => <Tag name={slugifyStr(tag)} />)}
     </ul>
+    <div class="flex justify-end">
+      <button
+        id="back-to-top"
+        class="focus-outline whitespace-nowrap hover:opacity-75"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="rotate-90">
+          <path
+            d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"
+          ></path>
+        </svg>
+        <span>Back to Top</span>
+      </button>
+    </div>
   </main>
   <Footer />
 </Layout>
@@ -66,7 +79,13 @@ const ogUrl = new URL(
   .post-title {
     @apply text-2xl font-semibold text-skin-accent;
   }
-  .tags-container {
-    @apply my-8;
-  }
 </style>
+
+<script is:inline>
+  /* When the user clicks on the "Back to Top" button,
+   * scroll to the top of the document */
+  document.querySelector("#back-to-top")?.addEventListener("click", () => {
+    document.body.scrollTop = 0; // For Safari
+    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+  });
+</script>
diff --git a/src/styles/base.css b/src/styles/base.css
index e78776856..c0105b010 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -20,6 +20,9 @@
     --color-card-muted: 138, 51, 2;
     --color-border: 171, 75, 8;
   }
+  html {
+    scroll-behavior: smooth;
+  }
   #sun-svg,
   html[data-theme="dark"] #moon-svg {
     display: none;