📝 update all the things

2025-11-14 15:17:15 +10:00
parent 0e42cc3f33
commit 103c283c61
1 changed files with 78 additions and 9 deletions
--- a/README.md
+++ b/README.md
@@ -8,18 +8,21 @@ A Flask-based webcomic website with server-side rendering using Jinja2 templates
 - Client-side navigation using JSON API (no page reloads)
 - Archive page with thumbnail grid
 - RSS feed support
+- Markdown support for author notes and about page
+- Optional icon-based navigation (comic navigation, header, and social links)
+- Configurable logo and header/footer images
+- Mobile-responsive with optional mobile-specific comic images
+- Full-width and plain (headerless) display modes
 - JSON API for programmatic access
 - Open Graph and Twitter Card metadata for social sharing
- Responsive design
 - Server-side rendering with Jinja2
- Clean, comic-focused layout

 ## Project Structure

 ```
 sunday/
 ├── app.py                    # Main Flask application
-├── comics_data.py            # Comic data (edit this to add comics)
+├── comics_data.py            # Comic data and configuration
 ├── requirements.txt          # Python dependencies
 ├── Dockerfile                # Production Docker image
 ├── docker-compose.yml        # Docker Compose configuration
@@ -27,12 +30,15 @@ sunday/
 ├── scripts/                  # Utility scripts
 │   ├── add_comic.py         # Script to add new comic entries
 │   └── generate_rss.py      # Script to generate RSS feed
+├── content/                  # Markdown content
+│   ├── about.md             # About page content
+│   └── author_notes/        # Author notes for comics (by date)
 ├── templates/                # Jinja2 templates
 │   ├── base.html            # Base template with navigation
 │   ├── index.html           # Latest comic page
 │   ├── comic.html           # Individual comic viewer
 │   ├── archive.html         # Archive grid
-│   ├── about.html           # About page
+│   ├── page.html            # Generic markdown page template
 │   └── 404.html             # Error page
 └── static/                  # Static files
    ├── css/
@@ -41,7 +47,8 @@ sunday/
    │   └── comic-nav.js     # Client-side navigation
    ├── images/              # Image directory
    │   ├── comics/          # Comic images
-    │   └── thumbs/          # Thumbnail images for archive
+    │   ├── thumbs/          # Thumbnail images for archive
+    │   └── icons/           # Navigation and social icons (optional)
    └── feed.rss             # RSS feed (generated)
 ```

@@ -80,6 +87,32 @@ export PORT=3000
 python app.py
 ```

+## Configuration
+
+The `comics_data.py` file contains both comic data and global configuration options:
+
+### Global Settings
+
+```python
+COMIC_NAME = 'Sunday Comics'              # Your comic/website name
+SITE_URL = 'http://localhost:3000'        # Your domain (update for production)
+FULL_WIDTH_DEFAULT = False                # Make all comics full-width by default
+PLAIN_DEFAULT = False                     # Hide header/remove borders by default
+LOGO_IMAGE = 'logo.png'                   # Path to logo (relative to static/images/)
+LOGO_MODE = 'beside'                      # 'beside' or 'replace' title with logo
+HEADER_IMAGE = None                       # Optional header image path
+FOOTER_IMAGE = None                       # Optional footer image path
+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
+USE_HEADER_NAV_ICONS = True               # Show icons in main header navigation
+USE_FOOTER_SOCIAL_ICONS = True            # Use icons for social links
+SOCIAL_INSTAGRAM = None                   # Instagram URL (or None)
+SOCIAL_YOUTUBE = None                     # YouTube URL (or None)
+SOCIAL_EMAIL = None                       # Email mailto link (or None)
+API_SPEC_LINK = None                      # API documentation link (or None)
+```
+
 ## Adding Comics

 Comics are stored in the `COMICS` list in `comics_data.py`. Each comic entry:
@@ -88,10 +121,13 @@ Comics are stored in the `COMICS` list in `comics_data.py`. Each comic entry:
 {
    'number': 1,                           # Comic number (required, sequential)
    'filename': 'comic-001.png',           # Image filename (required)
+    'mobile_filename': 'comic-001-mobile.png',  # Optional mobile version
    'date': '2025-01-01',                  # Publication date (required)
    'alt_text': 'Alt text for comic',      # Accessibility text (required)
    'title': 'Comic Title',                # Title (optional, shows #X if absent)
-    'author_note': 'Optional note'         # Author note (optional)
+    'author_note': 'Optional note',        # Author note (optional, plain text)
+    'full_width': True,                    # Optional: override FULL_WIDTH_DEFAULT
+    'plain': True                          # Optional: override PLAIN_DEFAULT
 }
 ```

@@ -120,6 +156,22 @@ python scripts/generate_rss.py
 ```
 This creates/updates `static/feed.rss`

+### Markdown Support
+
+**Author Notes:**
+Create markdown files in `content/author_notes/{date}.md` (e.g., `2025-01-01.md`) for rich-formatted author notes. Markdown author notes take precedence over the `author_note` field in `comics_data.py` and render as HTML.
+
+Example:
+```bash
+# Create author note for a specific comic
+echo "# My First Comic\n\nThis is **bold** text!" > content/author_notes/2025-01-01.md
+```
+
+**About Page:**
+The `/about` route renders `content/about.md` as HTML. Edit this file to customize your about page with markdown formatting.
+
+**Note:** Client-side navigation displays author notes as plain text. Markdown author notes only render properly on initial page load (server-side rendering). For full markdown rendering, users need to refresh the page or navigate directly to the comic URL.
+
 ## Production Deployment

 For production, you should **NOT** use Flask's built-in development server. Choose one of the following deployment methods:
@@ -217,15 +269,32 @@ For larger comic archives, consider replacing the `COMICS` list with a database:
 ## Customization

 ### Branding
- Update "Sunday Comics" references in `templates/base.html`
- Update site title and footer text
+- Update `COMIC_NAME` in `comics_data.py` to change your comic's name
+- Update `SITE_URL` in `comics_data.py` for production deployment
+- Customize logo by setting `LOGO_IMAGE` and `LOGO_MODE`

 ### Styling
 - Modify `static/css/style.css` to change colors, fonts, and layout
 - Current color scheme uses blue (#3498db) and dark blue-gray (#2c3e50)

 ### About Page
- Edit `templates/about.html` to add your bio and comic information
+- Edit `content/about.md` to add your bio and comic information (supports markdown)
+
+### Icon Navigation
+To use icon navigation:
+1. Set `USE_COMIC_NAV_ICONS = True` in `comics_data.py`
+2. Add icons to `static/images/icons/`:
+   - Comic navigation: `first.png`, `previous.png`, `next.png`, `latest.png`
+   - Header navigation: `alert.png`, `archive.png`, `info.png`
+   - Social links: `instagram.png`, `youtube.png`, `mail.png`
+
+### Social Links
+Configure social media links in `comics_data.py`:
+```python
+SOCIAL_INSTAGRAM = 'https://instagram.com/yourhandle'
+SOCIAL_YOUTUBE = 'https://youtube.com/@yourchannel'
+SOCIAL_EMAIL = 'mailto:your@email.com'
+```

 ## Pages