✨ plain mode

static/js/comic-nav.js

@@ -27,6 +27,8 @@
 
     // Update the page with comic data
     function displayComic(comic) {
+        const title = comic.title || `#${comic.number}`;
+
         // Update container class for full-width option
         const container = document.querySelector('.comic-container');
         if (comic.full_width) {
@@ -35,12 +37,33 @@
             container.classList.remove('comic-container-fullwidth');
         }
 
-        // Update title
-        const title = comic.title || `#${comic.number}`;
-        document.querySelector('.comic-header h1').textContent = title;
+        // Update container class for plain mode
+        if (comic.plain) {
+            container.classList.add('comic-container-plain');
+        } else {
+            container.classList.remove('comic-container-plain');
+        }
 
-        // Update date
-        document.querySelector('.comic-date').textContent = comic.date;
+        // Show/hide header based on plain mode
+        const header = document.querySelector('.comic-header');
+        if (comic.plain) {
+            if (header) {
+                header.style.display = 'none';
+            }
+        } else {
+            if (header) {
+                header.style.display = 'block';
+            } else {
+                // Create header if it doesn't exist
+                const newHeader = document.createElement('div');
+                newHeader.className = 'comic-header';
+                newHeader.innerHTML = '<h1></h1><p class="comic-date"></p>';
+                container.insertBefore(newHeader, container.firstChild);
+            }
+            // Update title and date
+            document.querySelector('.comic-header h1').textContent = title;
+            document.querySelector('.comic-date').textContent = comic.date;
+        }
 
         // Update image and its link
         const comicImageDiv = document.querySelector('.comic-image');