docs: Merge LONG-PDF-GENERATION.md into comprehensive PDF documentation
## Merged Content - Merged LONG-PDF-GENERATION.md technical details into doc/11-PDF-EXPORT.md - Removed duplicate documentation file - Single source of truth for all PDF export documentation ## Added Technical Details - PDF generation flow diagram - 2-column vs 3-column layout architecture decision - Sidebar width configuration guide (18%-30% analysis) - Detailed CSS injection strategy with code examples - HTML structure examples for page layouts - Expanded compact sidebar fonts implementation details - Font size breakdown table (2-6% reduction) ## Result - Comprehensive PDF documentation: 966 lines (was 793) - Added 173 lines of technical implementation details - Removed 411-line duplicate file - Better organized, single reference for developers and users Benefits: - Single source of truth for PDF features - No duplication between docs - Easier maintenance - Complete technical and user-facing documentation in one place
This commit is contained in:
juanatsap
@@ -43,6 +43,179 @@ The CV application provides a comprehensive PDF export system with three predefi
|
||||
|
||||
**See**: `internal/pdf/generator.go` lines 146-165 for implementation
|
||||
|
||||
### PDF Generation Flow
|
||||
|
||||
```
|
||||
User selects PDF option in modal
|
||||
↓
|
||||
Frontend: /export/pdf?lang={lang}&length={length}&icons={icons}&version={version}
|
||||
↓
|
||||
Backend: GenerateFromURLWithOptions(url, cookies, RenderMode)
|
||||
↓
|
||||
Chromedp: Navigate to URL with cookies
|
||||
↓
|
||||
CSS Injection: Override print.css + Show/hide sidebars + Layout adjustments
|
||||
↓
|
||||
PDF Generation: PrintToPDF with A4 dimensions
|
||||
↓
|
||||
Output: PDF file (4, 5, 7, or 9 pages depending on configuration)
|
||||
```
|
||||
|
||||
### 2-Column vs 3-Column Layout Decision
|
||||
|
||||
**Critical Architecture Decision** for long CV with sidebars:
|
||||
|
||||
#### ❌ Previous Approach (3-column - WRONG)
|
||||
```css
|
||||
.page-1, .page-2: 25% | 50% | 25% /* Always 3 columns */
|
||||
```
|
||||
**Problems:**
|
||||
- Page 1 had empty right column (25% wasted space)
|
||||
- Page 2 had empty left column (25% wasted space)
|
||||
- Result: 10-19 pages (excessive)
|
||||
|
||||
#### ✅ Current Approach (2-column - CORRECT)
|
||||
```css
|
||||
.page-1: 25% | 75% /* Left sidebar + Main, NO right space */
|
||||
.page-2: 75% | 25% /* Main + Right sidebar, NO left space */
|
||||
```
|
||||
**Benefits:**
|
||||
- No wasted space on either page
|
||||
- Matches web's actual layout exactly
|
||||
- Result: **9 pages** (optimal)
|
||||
|
||||
### Sidebar Width Configuration
|
||||
|
||||
Sidebar width affects page count and readability:
|
||||
|
||||
| Width | Layout | Pages | Notes |
|
||||
|-------|--------|-------|-------|
|
||||
| 18% | 18% \| 82% | 9 pages | Too narrow, cramped |
|
||||
| 20% | 20% \| 80% | 8 pages | Minimal sidebars |
|
||||
| **25%** | **25% \| 75%** | **9 pages** | ✅ **Current** (optimal balance) |
|
||||
| 30% | 30% \| 70% | 10+ pages | Too wide, excessive |
|
||||
|
||||
**Current Setting**: 25% sidebars (configured in `internal/pdf/generator.go:176,181`)
|
||||
|
||||
**To adjust sidebar width**, update these lines in `internal/pdf/generator.go`:
|
||||
```go
|
||||
// Page 1: Left sidebar (XX%) + Main (YY%) - NO right space
|
||||
'.page-1 .page-content { grid-template-columns: XX% YY% !important; }' +
|
||||
|
||||
// Page 2: Main (YY%) + Right sidebar (XX%) - NO left space
|
||||
'.page-2 .page-content { grid-template-columns: YY% XX% !important; }'
|
||||
|
||||
// Where XX + YY = 100
|
||||
```
|
||||
|
||||
### Detailed CSS Injection Strategy
|
||||
|
||||
For `RenderModeScreen` (long CV with sidebars), the following CSS is injected:
|
||||
|
||||
```javascript
|
||||
// Override parent width constraints (full A4 width)
|
||||
'.cv-page, .cv-paper, .cv-container { max-width: 100% !important; width: 100% !important; }'
|
||||
|
||||
// Show sidebars (override print.css hiding)
|
||||
'.cv-sidebar, .cv-sidebar-left, .cv-sidebar-right { display: block !important; }'
|
||||
|
||||
// Hide mobile UI elements (accordion headers, navigation, etc.)
|
||||
'.sidebar-accordion-header { display: none !important; }'
|
||||
'.no-print, .action-bar, .navigation-menu, .hamburger-btn { display: none !important; }'
|
||||
'footer, .back-to-top, .info-button, .info-modal { display: none !important; }'
|
||||
|
||||
// Force page break before page 2
|
||||
'.page-2 { page-break-before: always !important; break-before: page !important; }'
|
||||
|
||||
// 2-column layouts (no wasted space)
|
||||
'.page-1 .page-content { grid-template-columns: 25% 75% !important; }' // Left + Main
|
||||
'.page-2 .page-content { grid-template-columns: 75% 25% !important; }' // Main + Right
|
||||
```
|
||||
|
||||
### HTML Structure
|
||||
|
||||
**Page 1** - Left sidebar + Main content:
|
||||
```html
|
||||
<div class="cv-page page-1">
|
||||
<div class="page-content">
|
||||
<aside class="cv-sidebar cv-sidebar-left">
|
||||
<!-- Skills, languages, etc. -->
|
||||
</aside>
|
||||
<main class="cv-main">
|
||||
<!-- Work experience, education -->
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Page 2** - Main content + Right sidebar:
|
||||
```html
|
||||
<div class="cv-page page-2">
|
||||
<div class="page-content">
|
||||
<main class="cv-main">
|
||||
<!-- Continued work experience -->
|
||||
</main>
|
||||
<aside class="cv-sidebar cv-sidebar-right">
|
||||
<!-- Additional skills, references -->
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Compact Sidebar Fonts Feature
|
||||
|
||||
**Overview:**
|
||||
Automatically reduces sidebar font sizes by 2-6% **only for short CVs with skills** (`length=short&version=with_skills`), reducing page count from 6 to 5 pages while maintaining readability.
|
||||
|
||||
**Impact:**
|
||||
- Page count reduction: 6 → 5 pages (16.7% reduction)
|
||||
- Font size reduction: 2-6% (very subtle, 0.94-0.98em)
|
||||
- Readability: Maintained - fonts remain professional
|
||||
- **Only for short version** - Long version uses full-size fonts
|
||||
|
||||
**Activation Conditions:**
|
||||
1. `length=short` (detected via `cv-length` cookie)
|
||||
2. `version=with_skills` (RenderModeScreen with sidebars)
|
||||
|
||||
**Does NOT activate for:**
|
||||
- Long CVs (`length=long`) - always use full-size fonts
|
||||
- Clean version (`version=clean`) - no sidebars shown
|
||||
|
||||
**Implementation** (`internal/pdf/generator.go` lines 154-215):
|
||||
```go
|
||||
// Check if this is a short version (to apply compact sidebar fonts)
|
||||
isShortVersion := cookies["cv-length"] == "short"
|
||||
|
||||
compactFontCSS := ""
|
||||
if isShortVersion {
|
||||
compactFontCSS = `
|
||||
/* Compact sidebar fonts (SHORT VERSION ONLY) */
|
||||
.cv-sidebar * { font-size: 0.96em !important; line-height: 1.4 !important; }
|
||||
.cv-sidebar h3 { font-size: 0.98em !important; margin: 0.4em 0 !important; }
|
||||
.cv-sidebar h4 { font-size: 0.96em !important; margin: 0.35em 0 !important; }
|
||||
.cv-sidebar p, .cv-sidebar li { font-size: 0.94em !important; line-height: 1.4 !important; }
|
||||
.cv-sidebar ul, .cv-sidebar ol { margin: 0.4em 0 0.4em 1.2em !important; }
|
||||
.cv-sidebar li { margin-bottom: 0.25em !important; }
|
||||
.cv-sidebar section { margin-bottom: 0.8em !important; }
|
||||
`
|
||||
}
|
||||
```
|
||||
|
||||
**Font Size Breakdown:**
|
||||
|
||||
| Element | Full-Size (Long) | Compact (Short) | Reduction |
|
||||
|---------|------------------|-----------------|-----------|
|
||||
| General text | 1.0em | 0.96em | 4% |
|
||||
| H3 headings | 1.0em | 0.98em | 2% |
|
||||
| H4 headings | 1.0em | 0.96em | 4% |
|
||||
| Paragraphs & lists | 1.0em | 0.94em | 6% |
|
||||
|
||||
**Design Philosophy:**
|
||||
- **Readability first**: 2-6% reduction is barely noticeable
|
||||
- **Professional appearance**: No "squeezed" or cramped feel
|
||||
- **Natural flow**: Content reflows organically, not forced
|
||||
- **Consistent UX**: Main content uses full-size fonts
|
||||
|
||||
## Feature Specifications
|
||||
|
||||
### Export Options
|
||||
|
||||
Reference in New Issue
Block a user