💄 share icons

app.py

@@ -8,7 +8,7 @@ from flask import Flask, render_template, abort, jsonify, request
 from comics_data import (
     COMICS, COMIC_NAME, COPYRIGHT_NAME, SITE_URL, FULL_WIDTH_DEFAULT, PLAIN_DEFAULT, LOGO_IMAGE, LOGO_MODE,
     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, NEWSLETTER_ENABLED,
+    USE_COMIC_NAV_ICONS, USE_HEADER_NAV_ICONS, USE_FOOTER_SOCIAL_ICONS, USE_SHARE_ICONS, NEWSLETTER_ENABLED,
     SOCIAL_INSTAGRAM, SOCIAL_YOUTUBE, SOCIAL_EMAIL, API_SPEC_LINK, EMBED_ENABLED, PERMALINK_ENABLED
 )
 import markdown
@@ -45,6 +45,7 @@ def inject_global_settings():
         'use_comic_nav_icons': USE_COMIC_NAV_ICONS,
         'use_header_nav_icons': USE_HEADER_NAV_ICONS,
         'use_footer_social_icons': USE_FOOTER_SOCIAL_ICONS,
+        'use_share_icons': USE_SHARE_ICONS,
         'newsletter_enabled': NEWSLETTER_ENABLED,
         'social_instagram': SOCIAL_INSTAGRAM,
         'social_youtube': SOCIAL_YOUTUBE,

comics_data.py

@@ -73,6 +73,10 @@ USE_HEADER_NAV_ICONS = True
 # Uses instagram.png, youtube.png, and mail.png from static/images/icons/
 USE_FOOTER_SOCIAL_ICONS = True
 
+# Global setting: Set to True to show icons in share buttons (permalink and embed)
+# Uses link.png for permalink and embed.png for embed from static/images/icons/
+USE_SHARE_ICONS = True
+
 # Global setting: Set to True to show newsletter section in footer
 NEWSLETTER_ENABLED = False
 
@@ -87,11 +91,11 @@ API_SPEC_LINK = None  # Set to 'openapi.yml' to enable
 
 # Global setting: Set to True to enable comic embed functionality
 # When enabled, users can get embed codes to display comics on other websites
-EMBED_ENABLED = False
+EMBED_ENABLED = True
 
 # Global setting: Set to True to enable permalink copy button
 # When enabled, users can easily copy a direct link to the current comic
-PERMALINK_ENABLED = False
+PERMALINK_ENABLED = True
 
 COMICS = [
     {

static/css/style.css

@@ -1134,6 +1134,23 @@ footer.compact-footer .footer-section:not(:last-child)::after {
     outline-offset: 2px;
 }
 
+/* Share button icons */
+.btn-with-icon {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+.btn-with-icon .btn-icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+}
+
+.btn-permalink.copied .btn-icon {
+    filter: invert(1);
+}
+
 /* Modal overlay */
 .modal {
     display: none; /* Hidden by default */

templates/comic.html

@@ -134,10 +134,14 @@
     {% if embed_enabled or permalink_enabled %}
     <div class="comic-share-section">
         {% if permalink_enabled %}
-        <button class="btn-permalink" id="permalink-button" data-comic-number="{{ comic.number }}" aria-label="Copy permalink to this comic">Copy Permalink</button>
+        <button class="btn-permalink{% if use_share_icons %} btn-with-icon{% endif %}" id="permalink-button" data-comic-number="{{ comic.number }}" aria-label="Copy permalink to this comic">
+            {% if use_share_icons %}<img src="{{ url_for('static', filename='images/icons/link.png') }}" alt="" class="btn-icon" aria-hidden="true">{% endif %}Copy Permalink
+        </button>
         {% endif %}
         {% if embed_enabled %}
-        <button class="btn-embed" id="embed-button" data-comic-number="{{ comic.number }}" aria-label="Get embed code for this comic">Share/Embed</button>
+        <button class="btn-embed{% if use_share_icons %} btn-with-icon{% endif %}" id="embed-button" data-comic-number="{{ comic.number }}" aria-label="Get embed code for this comic">
+            {% if use_share_icons %}<img src="{{ url_for('static', filename='images/icons/embed.png') }}" alt="" class="btn-icon" aria-hidden="true">{% endif %}Share/Embed
+        </button>
         {% endif %}
     </div>
     {% endif %}

templates/index.html

@@ -94,10 +94,14 @@
     {% if embed_enabled or permalink_enabled %}
     <div class="comic-share-section">
         {% if permalink_enabled %}
-        <button class="btn-permalink" id="permalink-button" data-comic-number="{{ comic.number }}" aria-label="Copy permalink to this comic">Copy Permalink</button>
+        <button class="btn-permalink{% if use_share_icons %} btn-with-icon{% endif %}" id="permalink-button" data-comic-number="{{ comic.number }}" aria-label="Copy permalink to this comic">
+            {% if use_share_icons %}<img src="{{ url_for('static', filename='images/icons/link.png') }}" alt="" class="btn-icon" aria-hidden="true">{% endif %}Copy Permalink
+        </button>
         {% endif %}
         {% if embed_enabled %}
-        <button class="btn-embed" id="embed-button" data-comic-number="{{ comic.number }}" aria-label="Get embed code for this comic">Share/Embed</button>
+        <button class="btn-embed{% if use_share_icons %} btn-with-icon{% endif %}" id="embed-button" data-comic-number="{{ comic.number }}" aria-label="Get embed code for this comic">
+            {% if use_share_icons %}<img src="{{ url_for('static', filename='images/icons/embed.png') }}" alt="" class="btn-icon" aria-hidden="true">{% endif %}Share/Embed
+        </button>
         {% endif %}
     </div>
     {% endif %}