From e087ba9933a56d48f7193836eac4122f32c8b84d Mon Sep 17 00:00:00 2001
From: Mark Wissink <markcwissink@gmail.com>
Date: Mon, 28 Sep 2026 22:39:57 -0400
Subject: [PATCH] Add chapter headers

---
 assets/css/app.css        | 18 ++++++++++++++++--
 assets/templates/base.njk |  9 ++++-----
 utils/compile_bible.py    | 15 +++++++++++----
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index fc6b3ed..e184f98 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -3,17 +3,31 @@
                          "Times New Roman", serif;
 }
 
+/* Both of these are links to their own id. They keep the text colour they
+   had as plain numbers, since an underlined blue verse number in the middle
+   of a sentence reads as part of the text. */
+.v,
+.chapter-number a {
+  color: var(--bs-secondary-color);
+  text-decoration: none;
+}
+
+.v:hover,
+.chapter-number a:hover {
+  color: var(--bs-emphasis-color);
+}
+
 .v {
   font-size: .7em;
   font-weight: 700;
   vertical-align: super;
   line-height: 0;
   margin-right: .15em;
-  color: var(--bs-secondary-color);
   user-select: none;
 }
 
-.v:focus-visible {
+.v:focus-visible,
+.chapter-number a:focus-visible {
   outline: 2px solid var(--bs-primary);
   outline-offset: 2px;
   border-radius: 2px;
diff --git a/assets/templates/base.njk b/assets/templates/base.njk
index 6db066d..92beeb9 100644
--- a/assets/templates/base.njk
+++ b/assets/templates/base.njk
@@ -46,15 +46,14 @@
 
 <main class="container-xl my-4">
   <div class="row justify-content-center">
+    {# A verse number is a link to itself, so the browser handles the jump and
+       the address bar; this only adds the dialog on top. Enter comes free
+       with the link, which is why there is no key handler here. #}
     <div id="content" class="col-12 col-xl-8" hx-history-elt
          hx-on:click="var verse = event.target.closest('.v[id]');
                       if (verse) htmx.ajax('GET', 'api/verse?at=' + verse.id,
                                            { target: '#verse-dialog .modal-content',
-                                             swap: 'innerHTML' });"
-         hx-on:keydown="if (event.key !== 'Enter' &amp;&amp; event.key !== ' ') return;
-                        if (!event.target.matches('.v[id]')) return;
-                        event.preventDefault();
-                        event.target.click();">
+                                             swap: 'innerHTML' });">
 {% block content %}{% endblock %}
     </div>
   </div>
diff --git a/utils/compile_bible.py b/utils/compile_bible.py
index 03abfab..c01d11e 100644
--- a/utils/compile_bible.py
+++ b/utils/compile_bible.py
@@ -460,11 +460,16 @@ def render_inline(nodes, book, chapter, out):
             out.append(esc(node["v"]))
         elif kind == "verse":
             label = esc(node["label"])
-            out.append('<span class="v" id="%s" role="button" tabindex="0" '
+            vid = verse_id(chapter, node["label"])
+            # A link to itself: the click both puts the verse in the address
+            # bar, which is what the options dialog offers to copy, and opens
+            # that dialog. Being a real link is also what gives it the
+            # keyboard and context menu a reader expects.
+            out.append('<a class="v" id="%s" href="#%s" '
                        # A non-breaking space keeps the number on the same
                        # line as the word it introduces, as the source does.
-                       'aria-label="Verse %s, options">%s</span>&#160;'
-                       % (verse_id(chapter, node["label"]), label, label))
+                       'aria-label="Verse %s, options">%s</a>&#160;'
+                       % (vid, vid, label, label))
         elif kind == "noteref":
             n = node["id"].replace("FN", "")
             out.append('<a class="noteref" id="fnref%s_%s" href="#fn%s_%s">'
@@ -531,7 +536,9 @@ def render_chapter(chapter, book, out):
     num = chapter["number"]
     out.append('    <section class="chapter" id="ch%d" data-chapter="%d">\n'
                % (num, num))
-    out.append('      <h2 class="chapter-number">%d</h2>\n' % num)
+    out.append('      <h2 class="chapter-number">'
+               '<a href="#ch%d" aria-label="Chapter %d">%d</a></h2>\n'
+               % (num, num, num))
 
     group = None