✨ markdown support for author notes

app.py

@@ -2,6 +2,7 @@ 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, HEADER_IMAGE, COMPACT_FOOTER
+import markdown
 
 app = Flask(__name__)
 
@@ -48,6 +49,17 @@ def format_comic_date(date_str):
         return date_str
 
 
+def get_author_note(date_str):
+    """Load author note from markdown file if it exists, using date as filename"""
+    note_path = os.path.join(os.path.dirname(__file__), 'content', 'author_notes', f'{date_str}.md')
+    try:
+        with open(note_path, 'r', encoding='utf-8') as f:
+            content = f.read()
+        return markdown.markdown(content)
+    except FileNotFoundError:
+        return None
+
+
 def enrich_comic(comic):
     """Add computed properties to comic data"""
     if comic is None:
@@ -56,6 +68,16 @@ def enrich_comic(comic):
     enriched['full_width'] = is_full_width(comic)
     enriched['plain'] = is_plain(comic)
     enriched['formatted_date'] = format_comic_date(comic['date'])
+
+    # Check for markdown author note, fall back to data field if not found
+    markdown_note = get_author_note(comic['date'])
+    if markdown_note:
+        enriched['author_note'] = markdown_note
+        enriched['author_note_is_html'] = True
+    else:
+        # No markdown file, use plain text from comic data if it exists
+        enriched['author_note_is_html'] = False
+
     return enriched
 
 
@@ -107,7 +129,15 @@ def archive():
 @app.route('/about')
 def about():
     """About page"""
-    return render_template('about.html', title='About')
+    # Read and render the markdown file
+    about_path = os.path.join(os.path.dirname(__file__), 'content', 'about.md')
+    try:
+        with open(about_path, 'r', encoding='utf-8') as f:
+            content = f.read()
+        html_content = markdown.markdown(content)
+    except FileNotFoundError:
+        html_content = '<p>About content not found.</p>'
+    return render_template('page.html', title='About', content=html_content)
 
 
 @app.route('/api/comics')

content/about.md

@@ -0,0 +1,19 @@
+# About Sunday Comics
+
+Welcome to Sunday Comics, a webcomic about life, humor, and everything in between.
+
+## About the Comic
+
+Sunday Comics is updated regularly with new strips. Each comic tells a story, shares a laugh, or offers a unique perspective on everyday situations.
+
+## About the Author
+
+Sunday Comics is created by [Your Name]. [Add your bio here]
+
+## Updates
+
+New comics are posted [specify your schedule, e.g., "every Monday and Thursday" or "weekly"].
+
+## Support
+
+If you enjoy Sunday Comics, consider sharing it with friends or supporting the comic through [Patreon/Ko-fi/etc.].

content/author_notes/2025-01-01.md

@@ -0,0 +1,7 @@
+This is where your comic journey begins!
+
+You can use **markdown** for author notes with support for:
+
+- **Bold** and *italic* text
+- [Links](https://example.com)
+- Lists and more!

requirements.txt

@@ -1 +1,2 @@
 Flask==3.0.0
+markdown==3.5.1

static/css/style.css

@@ -324,6 +324,19 @@ main {
     font-size: 0.9rem;
 }
 
+.comic-transcript ul,
+.comic-transcript ol {
+    margin-left: 1.5rem;
+    margin-bottom: 1rem;
+    color: #000;
+    line-height: 1.6;
+    font-size: 0.9rem;
+}
+
+.comic-transcript li {
+    margin-bottom: 0.3rem;
+}
+
 /* Archive Content */
 .archive-content {
     margin-top: 1rem;

templates/about.html

@@ -1,23 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-<div class="page-header">
-    <h1>About Sunday Comics</h1>
-</div>
-
-<section class="about-content">
-    <p>Welcome to Sunday Comics, a webcomic about life, humor, and everything in between.</p>
-
-    <h2>About the Comic</h2>
-    <p>Sunday Comics is updated regularly with new strips. Each comic tells a story, shares a laugh, or offers a unique perspective on everyday situations.</p>
-
-    <h2>About the Author</h2>
-    <p>Sunday Comics is created by [Your Name]. [Add your bio here]</p>
-
-    <h2>Updates</h2>
-    <p>New comics are posted [specify your schedule, e.g., "every Monday and Thursday" or "weekly"].</p>
-
-    <h2>Support</h2>
-    <p>If you enjoy Sunday Comics, consider sharing it with friends or supporting the comic through [Patreon/Ko-fi/etc.].</p>
-</section>
-{% endblock %}

templates/comic.html

@@ -52,7 +52,11 @@
     {% if comic.author_note %}
     <div class="comic-transcript">
         <h3>Author Note</h3>
+        {% if comic.author_note_is_html == True %}
+        <div>{{ comic.author_note|safe }}</div>
+        {% else %}
         <p>{{ comic.author_note }}</p>
+        {% endif %}
     </div>
     {% endif %}
 </div>

templates/index.html

@@ -29,7 +29,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>
@@ -44,7 +44,11 @@
     {% if comic.author_note %}
     <div class="comic-transcript">
         <h3>Author Note</h3>
+        {% if comic.author_note_is_html == True %}
+        <div>{{ comic.author_note|safe }}</div>
+        {% else %}
         <p>{{ comic.author_note }}</p>
+        {% endif %}
     </div>
     {% endif %}
 </div>

templates/page.html

@@ -0,0 +1,7 @@
+{% extends "base.html" %}
+
+{% block content %}
+<section class="about-content">
+    {{ content|safe }}
+</section>
+{% endblock %}