🎨 configurable social links

2025-11-18 13:22:56 +10:00
parent 9c566bcc3c
commit d374df6b0b
5 changed files with 36 additions and 42 deletions
--- a/CLAUDE.md
+++ b/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_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

@@ -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_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/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/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">