From 0fb120c54fab1e163d3b28a8674b5c0314ca1683 Mon Sep 17 00:00:00 2001
From: mi <hola@puercito.net>
Date: Fri, 14 Nov 2025 15:07:04 +1000
Subject: [PATCH] :bug: fix content loading for comic nav

---
 app.py                 |  4 +++-
 static/js/comic-nav.js | 12 +++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app.py b/app.py
index 75b3f94..916a9cc 100644
--- a/app.py
+++ b/app.py
@@ -131,7 +131,9 @@ def comic(comic_id):
     comic = get_comic_by_number(comic_id)
     if not comic:
         abort(404)
-    return render_template('comic.html', title=f"Comic #{comic_id}",
+    # Use comic title if present, otherwise use #X format (matching client-side behavior)
+    page_title = comic.get('title', f"#{comic_id}")
+    return render_template('comic.html', title=page_title,
                          comic=comic, total_comics=len(COMICS))
 
 
diff --git a/static/js/comic-nav.js b/static/js/comic-nav.js
index c823976..2284d5b 100644
--- a/static/js/comic-nav.js
+++ b/static/js/comic-nav.js
@@ -46,7 +46,7 @@
         }
 
         // Show/hide header based on plain mode
-        const header = document.querySelector('.comic-header');
+        let header = document.querySelector('.comic-header');
         if (comic.plain) {
             if (header) {
                 header.style.display = 'none';
@@ -60,10 +60,11 @@
                 newHeader.className = 'comic-header';
                 newHeader.innerHTML = '<h1></h1><p class="comic-date"></p>';
                 container.insertBefore(newHeader, container.firstChild);
+                header = newHeader; // Update reference to the newly created element
             }
-            // Update title and date
-            document.querySelector('.comic-header h1').textContent = title;
-            document.querySelector('.comic-date').textContent = comic.date;
+            // Update title and date using the header reference
+            header.querySelector('h1').textContent = title;
+            header.querySelector('.comic-date').textContent = comic.date;
         }
 
         // Update image and its link
@@ -74,7 +75,7 @@
         updateComicImageLink(comic.number);
 
         // Update author note
-        const transcriptDiv = document.querySelector('.comic-transcript');
+        let transcriptDiv = document.querySelector('.comic-transcript');
         if (comic.author_note) {
             if (!transcriptDiv) {
                 const container = document.querySelector('.comic-container');
@@ -82,6 +83,7 @@
                 newDiv.className = 'comic-transcript';
                 newDiv.innerHTML = '<h3>Author Note</h3>';
                 container.appendChild(newDiv);
+                transcriptDiv = newDiv; // Update reference to the newly created element
             }
 
             // Clear existing content after the h3