diff --git a/README.md b/README.md index 1159960..bee9016 100644 --- 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