feat: implement comic/manga metadata display on book detail page
Implement comprehensive comic metadata display features on the SSR book detail page, supporting all 8 metadata fields from ComicInfo.xml and other sources. ## Template Changes (book_detail.templ) ### Step 1: Reading Direction Badge - Display directional badge (RTL, LTR, VERTICAL) for manga/comics - Uses 📖 icon with uppercase direction text - Auto-hides when direction is "auto" (default) - Styled with accent color for visibility ### Step 2: Community Rating Display - Show pre-existing community rating from metadata (0.0-10.0 scale) - Distinct from user ratings with visual differentiation - Uses renderStars() helper for visual star display - Shows both stars and numeric score (e.g., "★★★★☆ 8.5 / 10") - Smaller, subtler styling than user rating ### Step 3: Comic-Specific Badges - Age Rating: Content maturity indicator - Black & White: Visual style badge - Story Arc: Narrative arc name with 📚 icon - Badges styled as pills with subtle borders - Only display when values are present ### Step 4: Universal Series Info - Series Count: Total items in series - Volume: Volume/omnibus number - Imprint: Publisher imprint (e.g., Vertigo) ### Step 5: Comic-Specific Metadata - Manga Type: Raw/Comic/Manga classification - Scan Information: Scanner group, resolution - Alternate Series: Different series numbering ### Step 6: Summary Section - Display ComicInfo.xml summary when present - Separate from description field - Sanitized HTML output with bluemonday - Scrollable container for long summaries ### Step 7: Metadata Notes - Technical notes from metadata files - Internal/useful information (scanner, source, etc.) - Card-style display with clear typography ### Step 8: Web URL Link - External link to info sources (Goodreads, ComicVine, etc.) - Opens in new tab with security attributes - Displays clean domain name ## Utils Changes (templates/utils.go) Added helper functions: - getAlternateSeries(): Extract alternate series from JSONB - getDomainName(): Extract clean domain for display - formatAlternateInfo(): Format readable alternate series string ## Implementation Plan Updated FRONTEND_IMPLEMENTATION_PLAN_COMIC_METADATA.md with: - Disabled markdownlint for MD013 (line length) - Added spacing for readability ## Technical Details - All fields use pgtype.Text/Int4/Bool for NULL handling - Template conditionals check Valid flag before accessing values - Consistent styling using CSS custom properties - HTML escaping for security (except summary with bluemonday) - Responsive design with mobile-friendly layouts Related: Database schema already supports all metadata fields
This commit is contained in:
@@ -1,3 +1,5 @@
|
||||
<!-- markdownlint-disable MD013 -->
|
||||
|
||||
# Frontend Implementation Plan: Add Comic Metadata Fields to Book Detail Page
|
||||
|
||||
**Status:** Planning Document (Not Implemented)
|
||||
@@ -13,6 +15,7 @@ This document outlines how to add the new ComicInfo.xml metadata fields to the b
|
||||
## New Fields to Display
|
||||
|
||||
### Universal Fields (apply to all formats: ebooks, audiobooks, comics)
|
||||
|
||||
- `series_count` - Total items in series
|
||||
- `volume` - Volume/omnibus number
|
||||
- `imprint` - Publisher imprint (e.g., Vertigo, HarperCollinsEpic)
|
||||
@@ -22,6 +25,7 @@ This document outlines how to add the new ComicInfo.xml metadata fields to the b
|
||||
- `community_rating` - Pre-existing community rating (0.0-10.0) - **distinct from user ratings**
|
||||
|
||||
### Comic-Specific Fields
|
||||
|
||||
- `manga_type` - Raw Manga field: unknown, no, yes, yes_and_right_to_left
|
||||
- `reading_direction` - Computed reading direction: auto, ltr, rtl, vertical
|
||||
- `story_arc` - Story arc name (e.g., "The Dark Phoenix Saga", "Civil War")
|
||||
@@ -36,7 +40,7 @@ This document outlines how to add the new ComicInfo.xml metadata fields to the b
|
||||
|
||||
**File:** `templates/book_detail.templ`
|
||||
|
||||
### Current Layout Sections:
|
||||
### Current Layout Sections
|
||||
|
||||
1. **Top Section** (lines 23-130)
|
||||
- Cover image (left)
|
||||
@@ -81,6 +85,7 @@ if book.ReadingDirection.Valid && book.ReadingDirection.String != "" && book.Rea
|
||||
```
|
||||
|
||||
**Styling Notes:**
|
||||
|
||||
- Use `var(--accent)` for consistency with series badge
|
||||
- Only show if not "auto" (i.e., explicitly set to ltr, rtl, or vertical)
|
||||
- Icon: 📖 for visual clarity
|
||||
@@ -111,6 +116,7 @@ if book.CommunityRating.Valid && book.CommunityRating.Float64 > 0 {
|
||||
```
|
||||
|
||||
**Styling Notes:**
|
||||
|
||||
- Smaller text than user rating (text-lg vs text-2xl)
|
||||
- Gray/subtle color to distinguish from user rating
|
||||
- Scale: Community rating is 0-10, user rating display is 0-5 stars
|
||||
@@ -160,6 +166,7 @@ if book.CommunityRating.Valid && book.CommunityRating.Float64 > 0 {
|
||||
```
|
||||
|
||||
**Styling Notes:**
|
||||
|
||||
- Use subtle styling (smaller, outlined) to differentiate from primary badges
|
||||
- Flex wrap for responsive layout
|
||||
- Icons: 📚 for story arc
|
||||
@@ -225,6 +232,7 @@ if book.AlternateInfo.Valid && len(book.AlternateInfo.Bytes) > 0 {
|
||||
```
|
||||
|
||||
**Note for AlternateInfo:** This is JSONB data stored as `[]byte`. You may want to:
|
||||
|
||||
1. Parse the JSON and display formatted
|
||||
2. Or create a helper function to extract specific fields
|
||||
|
||||
@@ -248,6 +256,7 @@ func getAlternateSeries(data pgtype.Bytes) string {
|
||||
```
|
||||
|
||||
Then in template:
|
||||
|
||||
```templ
|
||||
if altSeries := getAlternateSeries(book.AlternateInfo); altSeries != "" {
|
||||
<div>
|
||||
@@ -448,26 +457,34 @@ func formatAlternateInfo(data pgtype.Bytes) string {
|
||||
## Testing Scenarios
|
||||
|
||||
### Test Case 1: Japanese Manga
|
||||
|
||||
**Expected Display:**
|
||||
|
||||
- Reading Direction: "RTL" badge
|
||||
- Manga Type: "yes_and_right_to_left" in metadata grid
|
||||
- Community Rating: displayed alongside user rating
|
||||
|
||||
### Test Case 2: Western Comic
|
||||
|
||||
**Expected Display:**
|
||||
|
||||
- Reading Direction: "LTR" badge (or hidden if auto)
|
||||
- Age Rating: "Teen" or "Mature" badge
|
||||
- Story Arc: displayed if present
|
||||
- Publisher/Imprint: displayed in metadata grid
|
||||
|
||||
### Test Case 3: Webtoon/Manhwa
|
||||
|
||||
**Expected Display:**
|
||||
|
||||
- Reading Direction: "vertical" badge
|
||||
- Language: "ko" (Korean) in metadata grid
|
||||
- Format-specific metadata displayed
|
||||
|
||||
### Test Case 4: Regular Ebook
|
||||
|
||||
**Expected Display:**
|
||||
|
||||
- No reading direction badge (or "auto" hidden)
|
||||
- No comic-specific fields
|
||||
- Only universal fields (series count, volume, imprint, age rating) if present
|
||||
|
||||
Reference in New Issue
Block a user