♿ date on all pages

app.py

@@ -1,4 +1,5 @@
 import os
+from datetime import datetime
 from flask import Flask, render_template, abort, jsonify, request
 from comics_data import COMICS, FULL_WIDTH_DEFAULT, PLAIN_DEFAULT
 
@@ -26,6 +27,18 @@ def is_plain(comic):
     return PLAIN_DEFAULT
 
 
+def format_comic_date(date_str):
+    """Format date string (YYYY-MM-DD) to 'Day name, Month name day, year'"""
+    try:
+        date_obj = datetime.strptime(date_str, '%Y-%m-%d')
+        # Use %d and strip leading zero for cross-platform compatibility
+        day = date_obj.strftime('%d').lstrip('0')
+        formatted = date_obj.strftime(f'%A, %B {day}, %Y')
+        return formatted
+    except:
+        return date_str
+
+
 def enrich_comic(comic):
     """Add computed properties to comic data"""
     if comic is None:
@@ -33,6 +46,7 @@ def enrich_comic(comic):
     enriched = comic.copy()
     enriched['full_width'] = is_full_width(comic)
     enriched['plain'] = is_plain(comic)
+    enriched['formatted_date'] = format_comic_date(comic['date'])
     return enriched
 
 

static/css/style.css

@@ -265,15 +265,13 @@ main {
     color: #999;
 }
 
-.comic-number {
+.comic-date-display {
-    padding: 0.4rem 0.8rem;
+    padding: 0 0.5rem;
-    background-color: #000;
+    color: #000;
-    color: #fff;
-    border: 2px solid #000;
     font-weight: bold;
     margin: 0 0.25rem;
-    font-size: 0.8rem;
+    font-size: 0.85rem;
-    text-transform: uppercase;
+    font-style: italic;
 }
 
 /* Comic Transcript */
@@ -363,9 +361,8 @@ main {
         font-size: 0.75rem;
     }
 
-    .comic-number {
+    .comic-date-display {
-        padding: 0.3rem 0.6rem;
+        font-size: 0.7rem;
-        font-size: 0.75rem;
     }
 
     .archive-grid {

static/js/comic-nav.js

@@ -92,7 +92,7 @@
         }
 
         // Update navigation buttons
-        updateNavButtons(comic.number);
+        updateNavButtons(comic.number, comic.formatted_date);
 
         // Update page title
         document.title = `${title} - Sunday Comics`;
@@ -126,7 +126,7 @@
     }
 
     // Update navigation button states
-    function updateNavButtons(currentNumber) {
+    function updateNavButtons(currentNumber, formattedDate) {
         const navButtons = document.querySelector('.nav-buttons');
 
         // First button
@@ -149,8 +149,10 @@
             prevBtn.onclick = null;
         }
 
-        // Comic number display
+        // Comic date display
-        navButtons.children[2].textContent = `Comic #${currentNumber}`;
+        if (formattedDate) {
+            navButtons.children[2].textContent = formattedDate;
+        }
 
         // Next button
         const nextBtn = navButtons.children[3];
@@ -187,7 +189,10 @@
         const currentNumber = parseInt(document.querySelector('.comic-container').dataset.comicNumber || 0);
 
         if (currentNumber && totalComics) {
-            updateNavButtons(currentNumber);
+            // Get the formatted date from the DOM (already rendered by server)
+            const dateDisplay = document.querySelector('.comic-date-display');
+            const formattedDate = dateDisplay ? dateDisplay.textContent : null;
+            updateNavButtons(currentNumber, formattedDate);
             updateComicImageLink(currentNumber);
         }
 

templates/comic.html

@@ -37,7 +37,7 @@
                 <span class="btn btn-nav btn-disabled">Previous</span>
             {% endif %}
 
-            <span class="comic-number">Comic #{{ comic.number }}</span>
+            <span class="comic-date-display">{{ comic.formatted_date }}</span>
 
             {% if comic.number < total_comics %}
                 <a href="{{ url_for('comic', comic_id=comic.number + 1) }}" class="btn btn-nav">Next</a>