feat: update back button logic

Instead of saving back url in the param, save the
back url info inside session.

Author: satnaing

src/components/BackButton.astro

@@ -19,15 +19,19 @@ import { SITE } from "@/config";
   )
 }
 
-<script is:inline data-astro-rerun>
+<script>
   /* Update Search Praam */
   function updateGoBackUrl() {
-    const backButton = document.querySelector("#back-button");
-    const params = new URL(document.location.toString()).searchParams;
+    const backButton: HTMLAnchorElement | null =
+      document.querySelector("#back-button");
 
-    if (params.has("from")) {
-      backButton.href = params.get("from");
+    const backUrl = sessionStorage.getItem("backUrl");
+
+    if (backUrl && backButton) {
+      backButton.href = backUrl;
     }
   }
+
+  document.addEventListener("astro:page-load", updateGoBackUrl);
   updateGoBackUrl();
 </script>

src/layouts/Main.astro

@@ -1,5 +1,6 @@
 ---
 import Breadcrumb from "@/components/Breadcrumb.astro";
+import { SITE } from "@/config";
 
 interface StringTitleProp {
   pageTitle: string;
@@ -15,10 +16,16 @@ interface ArrayTitleProp {
 export type Props = StringTitleProp | ArrayTitleProp;
 
 const { props } = Astro;
+
+const backUrl = SITE.showBackButton ? Astro.url.pathname : "/";
 ---
 
 <Breadcrumb />
-<main id="main-content" class="mx-auto w-full max-w-3xl px-4 pb-4">
+<main
+  data-backUrl={backUrl}
+  id="main-content"
+  class="mx-auto w-full max-w-3xl px-4 pb-4"
+>
   {
     "titleTransition" in props ? (
       <h1 class="text-2xl font-semibold sm:text-3xl">
@@ -34,3 +41,14 @@ const { props } = Astro;
   <p class="mt-2 mb-6 italic">{props.pageDesc}</p>
   <slot />
 </main>
+
+<script>
+  document.addEventListener("astro:page-load", () => {
+    const mainContent: HTMLElement | null =
+      document.querySelector("#main-content");
+    const backUrl = mainContent?.dataset?.backurl;
+    if (backUrl) {
+      sessionStorage.setItem("backUrl", backUrl);
+    }
+  });
+</script>

src/pages/archives/index.astro

@@ -29,8 +29,6 @@ const months = [
   "November",
   "December",
 ];
-
-const backUrl = SITE.showBackButton ? `?from=${Astro.url.pathname}` : "/";
 ---
 
 <Layout title={`Archives | ${SITE.title}`}>
@@ -72,10 +70,7 @@ const backUrl = SITE.showBackButton ? `?from=${Astro.url.pathname}` : "/";
                           )
                       )
                       .map(({ data, id }) => (
-                        <Card
-                          href={`/posts/${id}${backUrl}`}
-                          frontmatter={data}
-                        />
+                        <Card href={`/posts/${id}`} frontmatter={data} />
                       ))}
                   </ul>
                 </div>
@@ -84,6 +79,5 @@ const backUrl = SITE.showBackButton ? `?from=${Astro.url.pathname}` : "/";
         ))
     }
   </Main>
-
   <Footer />
 </Layout>

src/pages/index.astro

@@ -22,7 +22,7 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
 
 <Layout>
   <Header />
-  <main id="main-content">
+  <main id="main-content" data-layout="index">
     <section id="hero" class="pt-8 pb-6">
       <h1 class="my-4 inline-block text-4xl font-bold sm:my-8 sm:text-5xl">
         Mingalaba
@@ -119,3 +119,13 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
   </main>
   <Footer />
 </Layout>
+
+<script>
+  document.addEventListener("astro:page-load", () => {
+    const indexLayout = (document.querySelector("#main-content") as HTMLElement)
+      ?.dataset?.layout;
+    if (indexLayout) {
+      sessionStorage.setItem("backUrl", "/");
+    }
+  });
+</script>