Best

assets/templates/base.njk

@@ -19,10 +19,22 @@
    scripture; Bootstrap styles the chrome. #}
 <link rel="stylesheet" href="css/app.css">
 {# History entries are whole books, and htmx keeps its history cache in
-   localStorage -- a couple of them would blow the quota. Turned off: going
-   back re-requests the fragment, which the worker answers from its cache. #}
+   localStorage -- a couple of them would blow the quota. Turned off, so every
+   back or forward is a cache miss, and refreshOnHistoryMiss decides what a
+   miss does.
+
+   False on purpose. True makes htmx call location.reload(true) -- a forced
+   reload, which is exactly the kind of navigation a browser takes past the
+   service worker, so it reaches server.py and comes back as boot.html: the
+   spinner flashes by and then reloads into the real page. False makes htmx
+   fetch the page over XHR instead, which the worker answers itself, from its
+   own cache when offline. No navigation, no boot page, nothing to flash.
+
+   That request carries HX-History-Restore-Request, and the worker answers it
+   with a whole composed document; htmx lifts the element marked
+   hx-history-elt out of the response and puts it back in the page. #}
 <meta name="htmx-config"
-      content='{"historyCacheSize":0,"refreshOnHistoryMiss":true}'>
+      content='{"historyCacheSize":0,"refreshOnHistoryMiss":false}'>
 {# The bundle carries Popper, which the navbar collapse and the modal do not
    need -- but a dropdown or tooltip added later would, and this is one file
    in the precache either way. Deferred scripts run in order, so `bootstrap`
@@ -40,9 +52,15 @@
 <meta name="apple-mobile-web-app-title" content="Bible">
 </head>
 {# Boosted links swap only the fragment, so the navbar, the modal and the
-   scripts above survive navigation and never reload. #}
+   scripts above survive navigation and never reload.
+
+   No show: modifier, deliberately. htmx adds show:top itself for a boosted
+   link, but skips it when the href carries a fragment identifier and scrolls
+   to that anchor after the swap instead. Spelling show:top out here overrides
+   that decision for every link, which leaves a cross-reference like ISA#v61_6
+   sitting at the top of Isaiah. #}
 <body class="{% block body_class %}{% endblock %} bg-body-tertiary"
-      hx-boost="true" hx-target="#content" hx-swap="innerHTML show:top">
+      hx-boost="true" hx-target="#content" hx-swap="innerHTML">
 
 <nav class="site-header navbar navbar-expand-lg bg-dark sticky-top"
      data-bs-theme="dark">
@@ -68,7 +86,12 @@
    the full width of a desktop window. #}
 <main class="container-xl my-4">
   <div class="row justify-content-center">
+    {# The swap target. hx-target on <body> names this id, so every boosted
+       link lands here -- remove it and a click does nothing at all while a
+       full navigation still works. #}
+    <div id="content" class="col-12 col-xl-8" hx-history-elt>
 {% block content %}{% endblock %}
+    </div>
   </div>
 </main>