feat: implement back-to-top button in blog post page

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>

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;