Add UI element to go back to current blog's page from inside a post

Author: conradolandia

src/lib/blocks/Blog.svelte

@@ -79,7 +79,7 @@
               >
                 <a
                   class="post-link"
-                  href="{base}/blog/{post.path}"
+                  href="{base}/blog/{post.path}?from={pageNum === 1 ? 'blog' : `blog/${pageNum}`}"
                   title={post.meta.title}
                 >
                   {post.meta.title}
@@ -112,7 +112,7 @@
               </p>
               <a
                 class="block text-right mt-4"
-                href="{base}/blog/{post.path}"
+                href="{base}/blog/{post.path}?from={pageNum === 1 ? 'blog' : `blog/${pageNum}`}"
                 title={post.meta.title}
               >
                 {$_("config.blog.readMore")}&hellip;

src/lib/blocks/Post.svelte

@@ -1,20 +1,91 @@
 <script>
+  import { browser } from "$app/environment";
+  import { fetchAuthorsMetadata, formattedPubDate } from "$lib/utils";
   import { onMount } from "svelte";
-  import { formattedPubDate, fetchAuthorsMetadata } from "$lib/utils";
+  import { Icon } from "svelte-icons-pack";
+  import { BsChevronLeft } from "svelte-icons-pack/bs";
 
   export let data, title, pub_date, author;
   export const form = data;
 
   let authorsMetadata = [];
+  let backToBlogUrl = "/blog";
 
   onMount(async () => {
     const postAuthors = author || [];
     authorsMetadata = await fetchAuthorsMetadata(postAuthors);
+
+    // Determine the correct "back to blog" URL
+    if (browser) {
+      // Method 1: Check URL parameters first (most reliable)
+      const urlParams = new URLSearchParams(window.location.search);
+      const fromPage = urlParams.get('from');
+            
+      if (fromPage) {
+        // Validate that it's a valid blog page
+        if (fromPage === 'blog' || /^blog\/\d+$/.test(fromPage)) {
+          backToBlogUrl = `/${fromPage}`;
+        }
+      } else {
+        // Method 2: Check referrer
+        const referrer = document.referrer;
+        
+        if (referrer) {
+          try {
+            const referrerUrl = new URL(referrer);
+            const referrerPath = referrerUrl.pathname;
+            
+            // Check if referrer is from a blog page
+            if (referrerPath.startsWith('/blog')) {
+              // If it's a paginated blog page (e.g., /blog/2, /blog/3)
+              const blogPageMatch = referrerPath.match(/^\/blog\/(\d+)$/);
+              if (blogPageMatch) {
+                const pageNum = parseInt(blogPageMatch[1]);
+                if (pageNum > 1) {
+                  backToBlogUrl = `/blog/${pageNum}`;
+                } else {
+                  backToBlogUrl = "/blog";
+                }
+              } else if (referrerPath === "/blog") {
+                backToBlogUrl = "/blog";
+              }
+            }
+          } catch (error) {
+            console.warn("Error parsing referrer URL:", error);
+          }
+        }
+      }
+    }
   });
+
+  // Function to handle back button click
+  function handleBackClick(event) {
+    if (browser) {
+      // If we have a specific back URL, use it
+      if (backToBlogUrl !== "/blog") {
+        // Let the normal link behavior work
+        return;
+      }
+      
+      // Otherwise, try to go back in history
+      if (window.history.length > 1) {
+        window.history.back();
+        event.preventDefault();
+      }
+    }
+  }
 </script>
 
 <article class="container">
-  <div class="my-20 xl:mt-32 xl:mb-20">
+  <div class="my-20 xl:mt-32 xl:mb-20 mx-auto max-w-6xl">
+    <a 
+      href={backToBlogUrl} 
+      on:click={handleBackClick}
+      class="flex items-center justify-center gap-1 button py-1 text-red-berry-900 dark:text-spring-wood-400"
+    >
+      <Icon src={BsChevronLeft} />
+      Back to blog
+    </a>
     <h1
       class="text-2xl
       md:text-4xl