Back Button Fix

Problem Description

The back button on the website was not functioning correctly. Instead of navigating back in the browser history when appropriate, it always redirected to the blog section, regardless of the user's navigation path.

Root Cause Analysis

The issue was that the back button was implemented as a link to the section index (e.g., /blog for blog posts), with JavaScript to conditionally use history.back() only when the referrer was from the same site and met certain conditions. However, this led to inconsistent behavior where the button often fell back to the section index instead of navigating back in history.

Solution Implementation

1. Modified the Back Link Macro

Overrode the theme's macro to set the href to # instead of the section path:

{% macro back_link(path) %}
<header>
  <nav>
    <a id="back-link" href="#">← {{ config.extra.back_link_text }}</a>
  </nav>
</header>
{% endmacro %}

2. Updated the enableBackLink Function

Changed the function to always prevent the default link behavior and use history.back():

function enableBackLink() {
  const backLink = document.querySelector('#back-link');
  if (!backLink) return;
  backLink.addEventListener('click', (e) => {
    e.preventDefault();
    history.back();
  });
}

3. Template Override

Created /templates/macros/prose.html to override the theme's macro, ensuring the change applies to all pages using the back link.

Key Features of the Fix

• Consistent Navigation: Always uses browser history for back navigation
• Fallback Handling: If there's no history to go back to, the button does nothing (graceful degradation)
• No Breaking Changes: Maintains the visual appearance and accessibility
• Performance: Lightweight implementation with minimal overhead

Testing

The fix has been applied to ensure the back button now consistently navigates back in browser history across all pages, providing a more intuitive user experience.

Quick Test Script

1. Navigate from the homepage to a blog post via a tag or search result.
2. Click the back button: expect to return to the referring list/search page.
3. Open a post directly in a new tab: back button should do nothing (no history), not dump you at /blog.
4. Repeat on mobile to verify tap targets and preventDefault behavior.