✨ shareable banner

README.md

@@ -105,6 +105,7 @@ Don't have a server? No problem! Here are beginner-friendly options to get your
 - Markdown support for author notes and about page
 - Optional icon-based navigation (comic navigation, header, and social links)
 - Configurable logo and header/footer images
+- Shareable banner button with embeddable HTML code
 - Mobile-responsive with optional mobile-specific comic images
 - Full-width and plain (headerless) display modes
 - JSON API for programmatic access
@@ -290,6 +291,7 @@ LOGO_IMAGE = 'logo.png'                   # Path to logo (relative to static/ima
 LOGO_MODE = 'beside'                      # 'beside' or 'replace' title with logo
 HEADER_IMAGE = None                       # Optional header image path
 FOOTER_IMAGE = None                       # Optional footer image path
+BANNER_IMAGE = 'banner.jpg'               # Shareable banner for "Link to Me" section
 COMPACT_FOOTER = False                    # Display footer in compact mode
 ARCHIVE_FULL_WIDTH = True                 # Full-width archive with 4 columns
 USE_COMIC_NAV_ICONS = True                # Use icons for comic navigation buttons
@@ -500,6 +502,28 @@ SOCIAL_YOUTUBE = 'https://youtube.com/@yourchannel'
 SOCIAL_EMAIL = 'mailto:your@email.com'
 ```
 
+### Shareable Banner
+
+Sunday Comics includes an old-school shareable banner button in the footer that visitors can use to link back to your site. To enable it:
+
+1. Create a banner image (any size) and save it in `static/images/`
+2. Set the `BANNER_IMAGE` variable in `comics_data.py`:
+   ```python
+   BANNER_IMAGE = 'banner.jpg'  # Your banner filename
+   ```
+3. Set to `None` to hide the "Link to Me" section entirely:
+   ```python
+   BANNER_IMAGE = None  # Disables the shareable banner
+   ```
+
+When enabled, the banner appears in the footer with:
+- A preview of the banner image
+- A collapsible "Get code" section with copy-paste HTML
+- Fully keyboard accessible (Tab to navigate, Space/Enter to expand)
+- Automatic URL generation using your `SITE_URL` setting
+
+Visitors can click "Get code" to reveal embeddable HTML they can paste on their own websites, creating a link back to your comic. Perfect for webrings, link exchanges, and building community!
+
 ## Navigation
 
 Sunday Comics provides multiple ways for readers to navigate through your comic:

app.py

@@ -7,7 +7,7 @@ from datetime import datetime
 from flask import Flask, render_template, abort, jsonify, request
 from comics_data import (
     COMICS, COMIC_NAME, SITE_URL, FULL_WIDTH_DEFAULT, PLAIN_DEFAULT, LOGO_IMAGE, LOGO_MODE,
-    HEADER_IMAGE, FOOTER_IMAGE, COMPACT_FOOTER, ARCHIVE_FULL_WIDTH, SECTIONS_ENABLED,
+    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, SOCIAL_INSTAGRAM,
     SOCIAL_YOUTUBE, SOCIAL_EMAIL, API_SPEC_LINK
 )
@@ -29,6 +29,7 @@ def inject_global_settings():
         'logo_mode': LOGO_MODE,
         'header_image': HEADER_IMAGE,
         'footer_image': FOOTER_IMAGE,
+        'banner_image': BANNER_IMAGE,
         'compact_footer': COMPACT_FOOTER,
         'archive_full_width': ARCHIVE_FULL_WIDTH,
         'sections_enabled': SECTIONS_ENABLED,

comics_data.py

@@ -38,7 +38,12 @@ HEADER_IMAGE = None
 # Global setting: Path to footer image (relative to static/images/)
 # Set to None to disable footer image
 # Example: FOOTER_IMAGE = 'footer.jpg' will use static/images/footer.jpg
-FOOTER_IMAGE = None # 'footer.jpg'
+FOOTER_IMAGE = None
+
+# Global setting: Path to shareable banner image (relative to static/images/)
+# Set to None to disable "Link to Us" section in footer
+# Example: BANNER_IMAGE = 'banner.jpg' will use static/images/banner.jpg
+BANNER_IMAGE = 'banner.jpg'
 
 # Global setting: Set to True to display footer in compact mode
 # Compact mode: single line, no border, horizontal layout

static/css/style.css

@@ -837,6 +837,57 @@ footer {
     color: var(--color-text-muted);
 }
 
+.shareable-banner {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+
+.banner-image {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
+.banner-code {
+    font-size: var(--font-size-sm);
+}
+
+.banner-code summary {
+    cursor: pointer;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: var(--letter-spacing-tight);
+    padding: var(--space-xs) 0;
+}
+
+.banner-code summary:hover {
+    color: var(--color-text);
+}
+
+.banner-code summary:focus {
+    outline: 3px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+.banner-code textarea {
+    width: 100%;
+    font-family: var(--font-family);
+    font-size: var(--font-size-xs);
+    padding: var(--space-sm);
+    margin-top: var(--space-xs);
+    border: var(--border-width-thin) solid var(--border-color);
+    background-color: var(--color-background);
+    color: var(--color-text);
+    resize: vertical;
+    min-height: 60px;
+}
+
+.banner-code textarea:focus {
+    outline: 3px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
 .footer-bottom {
     text-align: center;
     padding-top: var(--space-lg);

templates/base.html

@@ -141,6 +141,21 @@
                     </form> -->
                     <p class="newsletter-placeholder">Newsletter coming soon!</p>
                 </div>
+
+                {% if banner_image %}
+                <div class="footer-section">
+                    <h3>Link to Me!</h3>
+                    <div class="shareable-banner">
+                        <a href="{{ site_url }}" target="_blank" rel="noopener noreferrer" aria-label="Link to {{ comic_name }} home page">
+                            <img src="{{ url_for('static', filename='images/' + banner_image) }}" alt="{{ comic_name }}" class="banner-image">
+                        </a>
+                        <details class="banner-code">
+                            <summary>Get code</summary>
+                            <textarea readonly onfocus="this.select()" onclick="this.select()" aria-label="HTML code for linking to {{ comic_name }}"><a href="{{ site_url }}"><img src="{{ site_url }}/static/images/{{ banner_image }}" alt="{{ comic_name }}"></a></textarea>
+                        </details>
+                    </div>
+                </div>
+                {% endif %}
             </div>
 
             <div class="footer-bottom">