Add chapter headers

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;

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>

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