🎨 configurable social links

CLAUDE.md

@@ -258,9 +258,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_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.)
-- `SOCIAL_YOUTUBE`: YouTube URL (set to None to hide)
-- `SOCIAL_EMAIL`: Email mailto link (set to None to hide)
 
 ### Markdown Support
 
@@ -320,9 +318,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_links`: List of social media link dicts from `comics_data.py` (each with 'label', 'url', 'icon')
-- `social_youtube`: YouTube URL from `comics_data.py`
-- `social_email`: Email link from `comics_data.py`
 
 ## Static Assets
 

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_links': SOCIAL_LINKS,
-        'social_youtube': SOCIAL_YOUTUBE,
-        'social_email': SOCIAL_EMAIL,
         'api_spec_link': API_SPEC_LINK,
         'embed_enabled': EMBED_ENABLED,
         'permalink_enabled': PERMALINK_ENABLED,

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 media links - add/remove/reorder as needed
-SOCIAL_INSTAGRAM = None  # e.g., 'https://instagram.com/yourhandle'
+# Each link should have 'label', 'url', and optionally 'icon' (filename in static/images/icons/)
-SOCIAL_YOUTUBE = None    # e.g., 'https://youtube.com/@yourchannel'
+# Set to empty list [] to show no social links
-SOCIAL_EMAIL = None      # e.g., 'mailto:your@email.com'
+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

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 media links - add/remove/reorder as needed
-SOCIAL_INSTAGRAM = None  # e.g., 'https://instagram.com/yourhandle'
+# Each link should have 'label', 'url', and optionally 'icon' (filename in static/images/icons/)
-SOCIAL_YOUTUBE = None    # e.g., 'https://youtube.com/@yourchannel'
+# Set to empty list [] to show no social links
-SOCIAL_EMAIL = None      # e.g., 'mailto:your@email.com'
+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

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 %}
+                        {% for link in social_links %}
-                            <a href="{{ social_instagram }}" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
+                            <a href="{{ link.url }}" {% if link.url.startswith('http') %}target="_blank" rel="noopener noreferrer"{% endif %} aria-label="{{ link.label }}">
-                                {% if use_footer_social_icons %}
+                                {% if use_footer_social_icons and link.icon %}
-                                    <img src="{{ 'images/icons/instagram.png' | cdn_static }}" alt="" class="social-icon">
+                                    <img src="{{ ('images/icons/' + link.icon) | cdn_static }}" alt="" class="social-icon">
                                 {% else %}
-                                    Instagram
+                                    {{ link.label }}
                                 {% endif %}
                             </a>
-                        {% endif %}
+                        {% endfor %}
-                        {% 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 %}
                         <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">