embed support

This commit is contained in:
mi
2025-11-18 13:40:52 +10:00
parent d374df6b0b
commit 882eed90f9
5 changed files with 58 additions and 16 deletions

View File

@@ -214,7 +214,8 @@ Performance with caching (1000 comics):
Each comic YAML file contains:
- `number` (required): Sequential comic number
- `filename` (required): Image filename in `static/images/comics/` OR list of filenames for multi-image comics (webtoon style)
- `filename` (required unless using html_embed): Image filename in `static/images/comics/` OR list of filenames for multi-image comics (webtoon style)
- `html_embed` (optional): Custom HTML to embed instead of an image (e.g., video player, widget). Takes precedence over `filename`.
- `date` (required): Publication date in YYYY-MM-DD format
- `alt_text` (required): Accessibility text OR list of alt texts (one per image for multi-image comics)
- `title` (optional): Comic title (defaults to "#X" if absent)
@@ -224,6 +225,18 @@ Each comic YAML file contains:
- `plain` (optional): Override global PLAIN_DEFAULT setting (hides header/border)
- `section` (optional): Section/chapter title (e.g., "Chapter 1: Origins"). Add to first comic of a new section.
**HTML embeds in YAML:**
```yaml
html_embed: '<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen></iframe>'
alt_text: "Video description for accessibility"
```
- Use `html_embed` to display custom HTML content instead of an image
- Useful for embedding videos, interactive widgets, or special content
- When `html_embed` is present, it takes precedence over `filename` and `mobile_filename`
- The HTML is rendered as-is using the `| safe` filter in templates
- No click-through navigation on HTML embeds (use navigation buttons instead)
- Still provide `alt_text` for accessibility context
**Multi-image comics (webtoon style) in YAML:**
```yaml
filename:
@@ -289,7 +302,8 @@ Global configuration in `comics_data.py`:
Provides SPA-like navigation without page reloads:
- Fetches comics from `/api/comics/<id>`
- Updates DOM with `displayComic(comic)` function
- Handles navigation buttons and image click-through
- Handles navigation buttons and image click-through (disabled for HTML embeds and multi-image comics)
- Renders HTML embeds, multi-image comics, and single-image comics dynamically
- Uses History API to maintain proper URLs and browser back/forward
- Shows/hides header based on plain mode
- Adjusts container for full_width mode