Release version 2025.11.18

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
✨ embed support
2025-11-18 13:44:41 +10:00 · 2025-11-18 13:40:52 +10:00 · 2025-11-18 13:22:56 +10:00
12 changed files with 111 additions and 61 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,19 @@ and this project uses date-based versioning (YYYY.MM.DD).
 ### Fixed
 ### Security

+## [2025.11.18] - 2025-11-18
+
+### Added
+- HTML embed support for comics (`html_embed` field in YAML allows custom HTML instead of images)
+- Configurable social links in footer (`SOCIAL_LINKS` in `comics_data.py`)
+- Customizable newsletter section (`NEWSLETTER_ENABLED` and `NEWSLETTER_HTML` in `comics_data.py`)
+- CDN option for serving static assets
+- Upstream update workflow (`UPSTREAM.md`) for fork-friendly development
+- Automatic cache building, RSS feed, and sitemap generation in Docker container
+
+### Changed
+- Footer social links now fully customizable with any platform (Instagram, YouTube, Patreon, etc.)
+
 ## [2025.11.15] - 2025-11-15

 ### Added
@@ -25,5 +38,6 @@ and this project uses date-based versioning (YYYY.MM.DD).
 - This CHANGELOG.md file to track version history
 - Version bump script (`scripts/bump_version.py`) to automate releases

-[Unreleased]: https://git.puercito.net/mi/sunday/compare/v2025.11.15...HEAD
+[Unreleased]: https://git.puercito.net/mi/sunday/compare/v2025.11.18...HEAD
+[2025.11.18]: https://git.puercito.net/mi/sunday/compare/v2025.11.15...v2025.11.18
 [2025.11.15]: https://git.puercito.net/mi/sunday/releases/tag/v2025.11.15
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -214,7 +214,8 @@ Performance with caching (1000 comics):

 Each comic YAML file contains:
 - `number` (required): Sequential comic number
- `filename` (required): Image filename in `static/images/comics/` OR list of filenames for multi-image comics (webtoon style)
+- `filename` (required unless using html_embed): Image filename in `static/images/comics/` OR list of filenames for multi-image comics (webtoon style)
+- `html_embed` (optional): Custom HTML to embed instead of an image (e.g., video player, widget). Takes precedence over `filename`.
 - `date` (required): Publication date in YYYY-MM-DD format
 - `alt_text` (required): Accessibility text OR list of alt texts (one per image for multi-image comics)
 - `title` (optional): Comic title (defaults to "#X" if absent)
@@ -224,6 +225,18 @@ Each comic YAML file contains:
 - `plain` (optional): Override global PLAIN_DEFAULT setting (hides header/border)
 - `section` (optional): Section/chapter title (e.g., "Chapter 1: Origins"). Add to first comic of a new section.

+**HTML embeds in YAML:**
+```yaml
+html_embed: '<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen></iframe>'
+alt_text: "Video description for accessibility"
+```
+- Use `html_embed` to display custom HTML content instead of an image
+- Useful for embedding videos, interactive widgets, or special content
+- When `html_embed` is present, it takes precedence over `filename` and `mobile_filename`
+- The HTML is rendered as-is using the `| safe` filter in templates
+- No click-through navigation on HTML embeds (use navigation buttons instead)
+- Still provide `alt_text` for accessibility context
+
 **Multi-image comics (webtoon style) in YAML:**
 ```yaml
 filename:
@@ -258,9 +271,7 @@ Global configuration in `comics_data.py`:
 - `USE_FOOTER_SOCIAL_ICONS`: Set to True to use icons instead of text for footer social links (uses instagram.png, youtube.png, mail.png, alert.png)
 - `NEWSLETTER_ENABLED`: Set to True to show newsletter section in footer
 - `NEWSLETTER_HTML`: Custom HTML for newsletter form (user pastes their service's form code here)
- `SOCIAL_INSTAGRAM`: Instagram URL (set to None to hide)
- `SOCIAL_YOUTUBE`: YouTube URL (set to None to hide)
- `SOCIAL_EMAIL`: Email mailto link (set to None to hide)
+- `SOCIAL_LINKS`: List of dicts for social media links. Each dict has 'label', 'url', and optional 'icon' (filename in static/images/icons/). Users can add any platform (Instagram, YouTube, Bluesky, Patreon, etc.)

 ### Markdown Support

@@ -291,7 +302,8 @@ Global configuration in `comics_data.py`:
 Provides SPA-like navigation without page reloads:
 - Fetches comics from `/api/comics/<id>`
 - Updates DOM with `displayComic(comic)` function
- Handles navigation buttons and image click-through
+- Handles navigation buttons and image click-through (disabled for HTML embeds and multi-image comics)
+- Renders HTML embeds, multi-image comics, and single-image comics dynamically
 - Uses History API to maintain proper URLs and browser back/forward
 - Shows/hides header based on plain mode
 - Adjusts container for full_width mode
@@ -320,9 +332,7 @@ Global context variables injected into all templates:
 - `use_footer_social_icons`: Boolean for footer social link icons from `comics_data.py`
 - `newsletter_enabled`: Boolean to show/hide newsletter section from `comics_data.py`
 - `newsletter_html`: Custom HTML for newsletter form from `comics_data.py` (rendered with `| safe` filter)
- `social_instagram`: Instagram URL from `comics_data.py`
- `social_youtube`: YouTube URL from `comics_data.py`
- `social_email`: Email link from `comics_data.py`
+- `social_links`: List of social media link dicts from `comics_data.py` (each with 'label', 'url', 'icon')

 ## Static Assets

--- a/2
+++ b/2
@@ -1 +1 @@
-2025.11.15
+2025.11.18
--- a/app.py
+++ b/app.py
@@ -11,7 +11,7 @@ from comics_data import (
    HEADER_IMAGE, FOOTER_IMAGE, BANNER_IMAGE, COMPACT_FOOTER, ARCHIVE_FULL_WIDTH, SECTIONS_ENABLED,
    USE_COMIC_NAV_ICONS, USE_HEADER_NAV_ICONS, USE_FOOTER_SOCIAL_ICONS, USE_SHARE_ICONS,
    NEWSLETTER_ENABLED, NEWSLETTER_HTML,
-    SOCIAL_INSTAGRAM, SOCIAL_YOUTUBE, SOCIAL_EMAIL, API_SPEC_LINK, EMBED_ENABLED, PERMALINK_ENABLED
+    SOCIAL_LINKS, API_SPEC_LINK, EMBED_ENABLED, PERMALINK_ENABLED
 )
 import markdown
 from version import __version__
@@ -74,9 +74,7 @@ def inject_global_settings():
        'use_share_icons': USE_SHARE_ICONS,
        'newsletter_enabled': NEWSLETTER_ENABLED,
        'newsletter_html': NEWSLETTER_HTML,
-        'social_instagram': SOCIAL_INSTAGRAM,
-        'social_youtube': SOCIAL_YOUTUBE,
-        'social_email': SOCIAL_EMAIL,
+        'social_links': SOCIAL_LINKS,
        'api_spec_link': API_SPEC_LINK,
        'embed_enabled': EMBED_ENABLED,
        'permalink_enabled': PERMALINK_ENABLED,
--- a/comics_data.py
+++ b/comics_data.py
@@ -97,10 +97,19 @@ NEWSLETTER_ENABLED = False
 # '''
 NEWSLETTER_HTML = '<p class="newsletter-placeholder">Newsletter coming soon!</p>'

-# Social media links - set to None to hide the link
-SOCIAL_INSTAGRAM = None  # e.g., 'https://instagram.com/yourhandle'
-SOCIAL_YOUTUBE = None    # e.g., 'https://youtube.com/@yourchannel'
-SOCIAL_EMAIL = None      # e.g., 'mailto:your@email.com'
+# Social media links - add/remove/reorder as needed
+# Each link should have 'label', 'url', and optionally 'icon' (filename in static/images/icons/)
+# Set to empty list [] to show no social links
+SOCIAL_LINKS = [
+    # Example links (uncomment and customize):
+    # {'label': 'Instagram', 'url': 'https://instagram.com/yourhandle', 'icon': 'instagram.png'},
+    # {'label': 'YouTube', 'url': 'https://youtube.com/@yourchannel', 'icon': 'youtube.png'},
+    # {'label': 'Email', 'url': 'mailto:your@email.com', 'icon': 'mail.png'},
+    # {'label': 'Bluesky', 'url': 'https://bsky.app/profile/yourhandle', 'icon': 'bluesky.png'},
+    # {'label': 'Patreon', 'url': 'https://patreon.com/yourname', 'icon': 'patreon.png'},
+    # {'label': 'Ko-fi', 'url': 'https://ko-fi.com/yourname', 'icon': 'kofi.png'},
+    # {'label': 'Mastodon', 'url': 'https://mastodon.social/@yourhandle', 'icon': 'mastodon.png'},
+]

 # API documentation link - set to None to hide the link
 # Path is relative to static/ directory
--- a/comics_data.py.example
+++ b/comics_data.py.example
@@ -97,10 +97,19 @@ NEWSLETTER_ENABLED = False
 # '''
 NEWSLETTER_HTML = '<p class="newsletter-placeholder">Newsletter coming soon!</p>'

-# Social media links - set to None to hide the link
-SOCIAL_INSTAGRAM = None  # e.g., 'https://instagram.com/yourhandle'
-SOCIAL_YOUTUBE = None    # e.g., 'https://youtube.com/@yourchannel'
-SOCIAL_EMAIL = None      # e.g., 'mailto:your@email.com'
+# Social media links - add/remove/reorder as needed
+# Each link should have 'label', 'url', and optionally 'icon' (filename in static/images/icons/)
+# Set to empty list [] to show no social links
+SOCIAL_LINKS = [
+    # Example links (uncomment and customize):
+    # {'label': 'Instagram', 'url': 'https://instagram.com/yourhandle', 'icon': 'instagram.png'},
+    # {'label': 'YouTube', 'url': 'https://youtube.com/@yourchannel', 'icon': 'youtube.png'},
+    # {'label': 'Email', 'url': 'mailto:your@email.com', 'icon': 'mail.png'},
+    # {'label': 'Bluesky', 'url': 'https://bsky.app/profile/yourhandle', 'icon': 'bluesky.png'},
+    # {'label': 'Patreon', 'url': 'https://patreon.com/yourname', 'icon': 'patreon.png'},
+    # {'label': 'Ko-fi', 'url': 'https://ko-fi.com/yourname', 'icon': 'kofi.png'},
+    # {'label': 'Mastodon', 'url': 'https://mastodon.social/@yourhandle', 'icon': 'mastodon.png'},
+]

 # API documentation link - set to None to hide the link
 # Path is relative to static/ directory
--- a/data/comics/TEMPLATE.yaml
+++ b/data/comics/TEMPLATE.yaml
@@ -6,7 +6,7 @@
 # REQUIRED: Sequential comic number
 number: 999

-# REQUIRED: Image filename(s) in static/images/comics/
+# REQUIRED (unless using html_embed): Image filename(s) in static/images/comics/
 # Single image:
 filename: comic-999.jpg
 # OR multi-image (webtoon style):
@@ -18,6 +18,12 @@ filename: comic-999.jpg
 # Optional: Mobile-optimized version of the comic
 # mobile_filename: comic-999-mobile.jpg

+# Optional: HTML embed instead of image
+# Use this to embed videos, widgets, or other HTML content
+# When set, this takes precedence over filename/mobile_filename
+# Example: '<iframe src="https://www.youtube.com/embed/..." width="560" height="315"></iframe>'
+# html_embed: '<div>Your custom HTML here</div>'
+
 # REQUIRED: Publication date (YYYY-MM-DD format)
 date: "2025-01-01"

--- a/static/js/comic-nav.js
+++ b/static/js/comic-nav.js
@@ -80,8 +80,8 @@
        const comicImageDiv = document.querySelector('.comic-image');
        updateComicImage(comicImageDiv, comic, title);

-        // Update or create/remove the link wrapper (only for single-image comics)
-        if (!comic.is_multi_image) {
+        // Update or create/remove the link wrapper (only for single-image comics, not HTML embeds)
+        if (!comic.is_multi_image && !comic.html_embed) {
            updateComicImageLink(comic.number);
        }

@@ -181,15 +181,26 @@
        // Clear all existing content
        comicImageDiv.innerHTML = '';

-        // Update container class for multi-image
-        if (comic.is_multi_image) {
+        // Update container classes
+        if (comic.html_embed) {
+            comicImageDiv.classList.add('comic-image-embed');
+            comicImageDiv.classList.remove('comic-image-multi');
+        } else if (comic.is_multi_image) {
            comicImageDiv.classList.add('comic-image-multi');
+            comicImageDiv.classList.remove('comic-image-embed');
        } else {
            comicImageDiv.classList.remove('comic-image-multi');
+            comicImageDiv.classList.remove('comic-image-embed');
        }

-        // Create new image element(s)
-        if (comic.is_multi_image) {
+        // Create new content
+        if (comic.html_embed) {
+            // HTML embed (video, widget, etc.)
+            const embedWrapper = document.createElement('div');
+            embedWrapper.className = 'comic-embed-wrapper';
+            embedWrapper.innerHTML = comic.html_embed;
+            comicImageDiv.appendChild(embedWrapper);
+        } else if (comic.is_multi_image) {
            // Multi-image comic (webtoon style)
            comic.filenames.forEach((filename, index) => {
                const img = document.createElement('img');
@@ -447,13 +458,14 @@
            const formattedDate = dateDisplay ? dateDisplay.textContent : null;
            updateNavButtons(currentNumber, formattedDate);

-            // Check if current comic is multi-image
+            // Check if current comic is multi-image or HTML embed
            const comicImageDiv = document.querySelector('.comic-image');
            const isMultiImage = comicImageDiv && comicImageDiv.classList.contains('comic-image-multi');
+            const isHtmlEmbed = comicImageDiv && comicImageDiv.classList.contains('comic-image-embed');

-            if (!isMultiImage) {
+            if (!isMultiImage && !isHtmlEmbed) {
                updateComicImageLink(currentNumber);
-            } else {
+            } else if (isMultiImage) {
                // Initialize lazy loading for multi-image comics on page load
                initLazyLoad();
            }
--- a/templates/base.html
+++ b/templates/base.html
@@ -103,33 +103,15 @@
                <div class="footer-section">
                    <h3>Follow</h3>
                    <div class="social-links{% if use_footer_social_icons %} social-links-icons{% endif %}">
-                        {% if social_instagram %}
-                            <a href="{{ social_instagram }}" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
-                                {% if use_footer_social_icons %}
-                                    <img src="{{ 'images/icons/instagram.png' | cdn_static }}" alt="" class="social-icon">
+                        {% for link in social_links %}
+                            <a href="{{ link.url }}" {% if link.url.startswith('http') %}target="_blank" rel="noopener noreferrer"{% endif %} aria-label="{{ link.label }}">
+                                {% if use_footer_social_icons and link.icon %}
+                                    <img src="{{ ('images/icons/' + link.icon) | cdn_static }}" alt="" class="social-icon">
                                {% else %}
-                                    Instagram
+                                    {{ link.label }}
                                {% endif %}
                            </a>
-                        {% endif %}
-                        {% if social_youtube %}
-                            <a href="{{ social_youtube }}" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
-                                {% if use_footer_social_icons %}
-                                    <img src="{{ 'images/icons/youtube.png' | cdn_static }}" alt="" class="social-icon">
-                                {% else %}
-                                    YouTube
-                                {% endif %}
-                            </a>
-                        {% endif %}
-                        {% if social_email %}
-                            <a href="{{ social_email }}" aria-label="Email">
-                                {% if use_footer_social_icons %}
-                                    <img src="{{ 'images/icons/mail .png' | cdn_static }}" alt="" class="social-icon">
-                                {% else %}
-                                    Email
-                                {% endif %}
-                            </a>
-                        {% endif %}
+                        {% endfor %}
                        <a href="{{ 'feed.rss' | cdn_static }}" aria-label="RSS Feed">
                            {% if use_footer_social_icons %}
                                <img src="{{ 'images/icons/rss.png' | cdn_static }}" alt="" class="social-icon">
--- a/templates/comic.html
+++ b/templates/comic.html
@@ -37,8 +37,13 @@
    </div>
    {% endif %}

-    <div class="comic-image{% if comic.is_multi_image %} comic-image-multi{% endif %}" id="comic-image-focus" tabindex="-1">
-        {% if comic.is_multi_image %}
+    <div class="comic-image{% if comic.is_multi_image %} comic-image-multi{% endif %}{% if comic.html_embed %} comic-image-embed{% endif %}" id="comic-image-focus" tabindex="-1">
+        {% if comic.html_embed %}
+            {# HTML embed (video, widget, etc.) #}
+            <div class="comic-embed-wrapper">
+                {{ comic.html_embed | safe }}
+            </div>
+        {% elif comic.is_multi_image %}
            {# Multi-image layout (webtoon style) - no click-through on individual images #}
            {% for i in range(comic.filenames|length) %}
            <img src="{% if loop.first %}{{ ('images/comics/' + comic.filenames[i]) | cdn_static }}{% endif %}"
--- a/templates/index.html
+++ b/templates/index.html
@@ -16,8 +16,13 @@
        <p class="comic-date">{{ comic.date }}</p>
    </div>

-    <div class="comic-image{% if comic.is_multi_image %} comic-image-multi{% endif %}" id="comic-image-focus" tabindex="-1">
-        {% if comic.is_multi_image %}
+    <div class="comic-image{% if comic.is_multi_image %} comic-image-multi{% endif %}{% if comic.html_embed %} comic-image-embed{% endif %}" id="comic-image-focus" tabindex="-1">
+        {% if comic.html_embed %}
+            {# HTML embed (video, widget, etc.) #}
+            <div class="comic-embed-wrapper">
+                {{ comic.html_embed | safe }}
+            </div>
+        {% elif comic.is_multi_image %}
            {# Multi-image layout (webtoon style) - no click-through on individual images #}
            {% for i in range(comic.filenames|length) %}
            <img src="{% if loop.first %}{{ ('images/comics/' + comic.filenames[i]) | cdn_static }}{% endif %}"
--- a/version.py
+++ b/version.py
@@ -2,4 +2,4 @@
 # This file contains the version number for the project
 # Format: YYYY.MM.DD (date-based versioning)

-__version__ = "2025.11.15"
+__version__ = "2025.11.18"
Author	SHA1	Message	Date
mi	2b8f30ef82	Release version 2025.11.18 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-11-18 13:44:41 +10:00
mi	882eed90f9	✨ embed support	2025-11-18 13:40:52 +10:00
mi	d374df6b0b	🎨 configurable social links	2025-11-18 13:22:56 +10:00
@@ -1 +1 @@
 .11.15
 .11.18