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
|
**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
|
## Feature Specifications
|
||||||
|
|
||||||
### Export Options
|
### Export Options
|
||||||
|
|||||||
@@ -1,411 +0,0 @@
|
|||||||
# Long PDF Generation with Skills Sidebars
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
The long PDF generation feature creates a comprehensive CV that includes technical skills sidebars positioned on the left and right sides, while hiding UI elements for a clean, print-optimized output.
|
|
||||||
|
|
||||||
**Page counts**:
|
|
||||||
- **Long version** (9 pages) - Full-size fonts, comprehensive content
|
|
||||||
- **Short version with skills** (5 pages) - Compact sidebar fonts for reduced page count
|
|
||||||
|
|
||||||
## Key Features
|
|
||||||
|
|
||||||
- **9-page layout** with optimal content density
|
|
||||||
- **25% sidebars** for skills/competencies display
|
|
||||||
- **2-column approach** matching web layout (no wasted space)
|
|
||||||
- **Page breaks** between left and right sidebar sections
|
|
||||||
- **Hidden mobile UI elements** (accordion headers, navigation)
|
|
||||||
- **Print media CSS** for compact, professional typography
|
|
||||||
|
|
||||||
## Architecture
|
|
||||||
|
|
||||||
### PDF Generation Flow
|
|
||||||
|
|
||||||
```
|
|
||||||
User clicks "Long CV (9 pages)" in PDF Modal
|
|
||||||
↓
|
|
||||||
Frontend: `/export/pdf?lang=es&length=long&icons=show&version=with_skills`
|
|
||||||
↓
|
|
||||||
Backend: GenerateFromURLWithOptions(url, cookies, RenderModeScreen)
|
|
||||||
↓
|
|
||||||
Chromedp: Navigate to URL with cookies
|
|
||||||
↓
|
|
||||||
CSS Injection: Override print.css + Show sidebars + 2-column layout
|
|
||||||
↓
|
|
||||||
PDF Generation: PrintToPDF with A4 dimensions
|
|
||||||
↓
|
|
||||||
Output: 9-page PDF with sidebars (or 5 pages with compact fonts for short version)
|
|
||||||
```
|
|
||||||
|
|
||||||
### Critical Components
|
|
||||||
|
|
||||||
#### 1. PDF Generator (`internal/pdf/generator.go`)
|
|
||||||
|
|
||||||
**RenderMode**:
|
|
||||||
- `RenderModePrint` - Clean version (hides sidebars)
|
|
||||||
- `RenderModeScreen` - Long version (shows sidebars)
|
|
||||||
|
|
||||||
**CSS Injection Strategy**:
|
|
||||||
```javascript
|
|
||||||
// Override parent width constraints (full A4 width)
|
|
||||||
'.cv-page, .cv-paper, .cv-container { max-width: 100% !important; ... }'
|
|
||||||
|
|
||||||
// Show sidebars (override print.css hiding)
|
|
||||||
'.cv-sidebar, .cv-sidebar-left, .cv-sidebar-right { display: block !important; }'
|
|
||||||
|
|
||||||
// Hide mobile UI elements
|
|
||||||
'.sidebar-accordion-header { 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; }'
|
|
||||||
'.page-2 .page-content { grid-template-columns: 75% 25% !important; }'
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 2. HTML Structure (`templates/cv-content.html`)
|
|
||||||
|
|
||||||
**Page 1**: Left sidebar + Main content
|
|
||||||
```html
|
|
||||||
<div class="cv-page page-1">
|
|
||||||
<div class="page-content">
|
|
||||||
<aside class="cv-sidebar cv-sidebar-left">...</aside>
|
|
||||||
<main class="cv-main">...</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
**Page 2**: Main content + Right sidebar
|
|
||||||
```html
|
|
||||||
<div class="cv-page page-2">
|
|
||||||
<div class="page-content">
|
|
||||||
<main class="cv-main">...</main>
|
|
||||||
<aside class="cv-sidebar cv-sidebar-right">...</aside>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 3. Frontend Integration (`templates/partials/modals/pdf-modal.html`)
|
|
||||||
|
|
||||||
**PDF Modal Options**:
|
|
||||||
- Short CV (4 pages) - `version=clean`
|
|
||||||
- **Long CV (9 pages)** - `version=with_skills` ← This feature
|
|
||||||
- **Short CV with skills (5 pages)** - `length=short&version=with_skills` with compact fonts
|
|
||||||
- Current View - Uses localStorage settings
|
|
||||||
|
|
||||||
## Why 2-Column Layout?
|
|
||||||
|
|
||||||
### ❌ Previous Approach (3-column - WRONG)
|
|
||||||
```css
|
|
||||||
.page-1, .page-2: 25% | 50% | 25% /* Always 3 columns */
|
|
||||||
```
|
|
||||||
- Page 1 had empty right column (25% wasted)
|
|
||||||
- Page 2 had empty left column (25% wasted)
|
|
||||||
- Result: 10-19 pages
|
|
||||||
|
|
||||||
### ✅ 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 */
|
|
||||||
```
|
|
||||||
- No wasted space on either page
|
|
||||||
- Matches web's actual layout exactly
|
|
||||||
- Result: **9 pages**
|
|
||||||
|
|
||||||
## Configuration
|
|
||||||
|
|
||||||
### Sidebar Width Tuning
|
|
||||||
|
|
||||||
Sidebar width affects page count:
|
|
||||||
|
|
||||||
| Width | Layout | Pages | Notes |
|
|
||||||
|-------|--------|-------|-------|
|
|
||||||
| 18% | 18% \| 82% | 9 pages | Too narrow |
|
|
||||||
| 20% | 20% \| 80% | 8 pages | Minimal sidebars |
|
|
||||||
| **25%** | **25% \| 75%** | **9 pages** | ✅ **Current** (optimal balance) |
|
|
||||||
| 30% | 30% \| 70% | 10+ pages | Too wide |
|
|
||||||
|
|
||||||
**Current Setting**: 25% sidebars (`internal/pdf/generator.go:176,181`)
|
|
||||||
|
|
||||||
### Adjusting Sidebar Width
|
|
||||||
|
|
||||||
To change sidebar width, update two 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`
|
|
||||||
|
|
||||||
## Print Media CSS
|
|
||||||
|
|
||||||
The extended PDF uses `@media print` from `static/css/08-contexts/_print.css` for:
|
|
||||||
- Compact fonts and spacing
|
|
||||||
- Hiding UI chrome (navigation, buttons, footer)
|
|
||||||
- Professional typography
|
|
||||||
|
|
||||||
**Overridden in PDF**:
|
|
||||||
- Sidebar hiding (`.cv-sidebar { display: none }` → `display: block !important`)
|
|
||||||
- Accordion headers (`.sidebar-accordion-header { display: none !important }`)
|
|
||||||
|
|
||||||
## Testing
|
|
||||||
|
|
||||||
### Unit Tests
|
|
||||||
|
|
||||||
The long PDF feature has comprehensive test coverage in `internal/handlers/pdf_test.go`:
|
|
||||||
|
|
||||||
**Test Functions:**
|
|
||||||
1. `TestExportPDF_LongWithSkills` - Tests long PDF with multiple language/icon combinations
|
|
||||||
2. `TestPDFGenerator_RenderModes` - Tests both `RenderModePrint` and `RenderModeScreen`
|
|
||||||
3. `TestExportPDF_SkillsSidebarFeatures` - Tests specific skills sidebar features:
|
|
||||||
- Version parameter validation (`clean`, `with_skills`)
|
|
||||||
- PDF modal integration URLs
|
|
||||||
- Frontend button parameter correctness
|
|
||||||
4. `TestPDFGenerator_CompactSidebarFonts` - Tests compact font feature for short version
|
|
||||||
|
|
||||||
Run the tests:
|
|
||||||
```bash
|
|
||||||
go test ./internal/handlers -v -run TestExportPDF
|
|
||||||
```
|
|
||||||
|
|
||||||
### Integration Testing
|
|
||||||
|
|
||||||
Check page count and PDF generation:
|
|
||||||
```bash
|
|
||||||
# Download long PDF (9 pages with sidebars)
|
|
||||||
curl "http://localhost:1999/export/pdf?lang=es&length=long&icons=show&version=with_skills" -o test-long.pdf
|
|
||||||
|
|
||||||
# Download short PDF with skills (5 pages with compact fonts)
|
|
||||||
curl "http://localhost:1999/export/pdf?lang=es&length=short&icons=show&version=with_skills" -o test-short-skills.pdf
|
|
||||||
|
|
||||||
# Download short PDF clean (4 pages, no sidebars)
|
|
||||||
curl "http://localhost:1999/export/pdf?lang=es&length=short&icons=show&version=clean" -o test-short.pdf
|
|
||||||
|
|
||||||
# Verify page counts
|
|
||||||
pdfinfo test-long.pdf | grep Pages
|
|
||||||
# Expected: Pages: 9
|
|
||||||
|
|
||||||
pdfinfo test-short-skills.pdf | grep Pages
|
|
||||||
# Expected: Pages: 5
|
|
||||||
|
|
||||||
pdfinfo test-short.pdf | grep Pages
|
|
||||||
# Expected: Pages: 4
|
|
||||||
```
|
|
||||||
|
|
||||||
### Manual Verification
|
|
||||||
|
|
||||||
**Long CV (9 pages):**
|
|
||||||
1. Open http://localhost:1999 in browser
|
|
||||||
2. Click "Descargar PDF" button
|
|
||||||
3. Select "CV Largo (9 páginas)" / "Long CV (9 pages)"
|
|
||||||
4. Click "Descargar PDF"
|
|
||||||
5. Verify downloaded PDF has:
|
|
||||||
- 9 pages total
|
|
||||||
- 25% sidebars on left (page 1) and right (page 2+)
|
|
||||||
- Full-size fonts in sidebars
|
|
||||||
- No "Competencias Técnicas" accordion header visible
|
|
||||||
- Page break between page 1 and page 2
|
|
||||||
- Skills content displayed in sidebars
|
|
||||||
|
|
||||||
**Short CV with skills (5 pages with compact fonts):**
|
|
||||||
1. Toggle to short view and with_skills theme
|
|
||||||
2. Download PDF
|
|
||||||
3. Verify:
|
|
||||||
- 5 pages total
|
|
||||||
- Compact sidebar fonts (0.94-0.98em)
|
|
||||||
- All content fits naturally without overflow
|
|
||||||
- Maintained readability
|
|
||||||
|
|
||||||
## API Endpoint
|
|
||||||
|
|
||||||
**URL**: `/export/pdf`
|
|
||||||
|
|
||||||
**Query Parameters**:
|
|
||||||
- `lang` - Language (`es`, `en`)
|
|
||||||
- `length` - CV length (`short`, `long`)
|
|
||||||
- `icons` - Show icons (`show`, `hide`)
|
|
||||||
- `version` - Layout version (`clean`, `with_skills`)
|
|
||||||
|
|
||||||
**Examples**:
|
|
||||||
```bash
|
|
||||||
# Long CV with skills (9 pages, full-size fonts)
|
|
||||||
GET /export/pdf?lang=es&length=long&icons=show&version=with_skills
|
|
||||||
|
|
||||||
# Short CV with skills (5 pages, compact sidebar fonts)
|
|
||||||
GET /export/pdf?lang=es&length=short&icons=show&version=with_skills
|
|
||||||
|
|
||||||
# Short CV clean (4 pages, no sidebars)
|
|
||||||
GET /export/pdf?lang=es&length=short&icons=show&version=clean
|
|
||||||
```
|
|
||||||
|
|
||||||
## Troubleshooting
|
|
||||||
|
|
||||||
### Issue: Sidebars not showing
|
|
||||||
**Solution**: Check `RenderModeScreen` is being used (not `RenderModePrint`)
|
|
||||||
|
|
||||||
### Issue: Wrong page count
|
|
||||||
**Solution**:
|
|
||||||
1. Check sidebar width percentage (should be 25%)
|
|
||||||
2. Verify CSS injection is working
|
|
||||||
3. Check for browser console errors
|
|
||||||
|
|
||||||
### Issue: Accordion header visible
|
|
||||||
**Solution**: Ensure `.sidebar-accordion-header { display: none !important; }` in CSS injection
|
|
||||||
|
|
||||||
### Issue: No page break between pages
|
|
||||||
**Solution**: Verify `.page-2 { page-break-before: always !important; }` is applied
|
|
||||||
|
|
||||||
## Compact Sidebar Fonts Feature
|
|
||||||
|
|
||||||
### Overview
|
|
||||||
|
|
||||||
The compact sidebar fonts feature automatically reduces sidebar font sizes by 2-6% **only for short CVs with skills** (`length=short&version=with_skills`), reducing page count from 6 pages to 5 pages while maintaining excellent readability.
|
|
||||||
|
|
||||||
**Impact:**
|
|
||||||
- **Page count reduction**: 6 pages → 5 pages (16.7% reduction)
|
|
||||||
- **Font size reduction**: 2-6% (very subtle, 0.94-0.98em)
|
|
||||||
- **Readability**: Maintained - fonts remain professional and readable
|
|
||||||
- **Only for short version**: Long version uses full-size fonts
|
|
||||||
|
|
||||||
### When It Activates
|
|
||||||
|
|
||||||
The feature automatically activates when **both** conditions are met:
|
|
||||||
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
|
|
||||||
- Short clean version - no sidebars to compact
|
|
||||||
|
|
||||||
### Implementation
|
|
||||||
|
|
||||||
**Location**: `internal/pdf/generator.go` (lines 154-215)
|
|
||||||
|
|
||||||
**Cookie Detection**:
|
|
||||||
```go
|
|
||||||
// Check if this is a short version (to apply compact sidebar fonts)
|
|
||||||
// The length parameter is passed as a cookie, not in the URL
|
|
||||||
isShortVersion := cookies["cv-length"] == "short"
|
|
||||||
```
|
|
||||||
|
|
||||||
**CSS Injection** (only when `isShortVersion == true`):
|
|
||||||
```go
|
|
||||||
compactFontCSS := ""
|
|
||||||
if isShortVersion {
|
|
||||||
compactFontCSS = ` +
|
|
||||||
// Compact sidebar fonts (SHORT VERSION ONLY) - very subtle reduction
|
|
||||||
'.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% |
|
|
||||||
|
|
||||||
**Line height**: Consistent 1.4 for improved readability
|
|
||||||
|
|
||||||
### Design Philosophy
|
|
||||||
|
|
||||||
**Why subtle reduction?**
|
|
||||||
1. **Readability first**: 2-6% reduction is barely noticeable
|
|
||||||
2. **Professional appearance**: No "squeezed" or cramped feel
|
|
||||||
3. **Natural flow**: Content reflows organically, not forced
|
|
||||||
4. **Consistent UX**: Main content uses full-size fonts
|
|
||||||
|
|
||||||
**Why only short version?**
|
|
||||||
- Short CV has less content → compact fonts sufficient
|
|
||||||
- Long CV needs maximum readability for extensive content
|
|
||||||
- Consistent with "short = concise, long = comprehensive" semantics
|
|
||||||
|
|
||||||
### Testing
|
|
||||||
|
|
||||||
**Test function**: `TestPDFGenerator_CompactSidebarFonts` in `internal/handlers/pdf_test.go`
|
|
||||||
|
|
||||||
**Test coverage:**
|
|
||||||
1. Cookie-based detection (`cv-length=short` vs `cv-length=long`)
|
|
||||||
2. PDF generation with compact fonts
|
|
||||||
3. Version parameter validation (`with_skills` vs `clean`)
|
|
||||||
4. Page count verification (5 pages for short with skills)
|
|
||||||
|
|
||||||
**Run tests**:
|
|
||||||
```bash
|
|
||||||
go test ./internal/handlers -v -run TestPDFGenerator_CompactSidebarFonts
|
|
||||||
```
|
|
||||||
|
|
||||||
### Manual Verification
|
|
||||||
|
|
||||||
1. Navigate to http://localhost:1999
|
|
||||||
2. Toggle to **short view** (localStorage: `cv-length=short`)
|
|
||||||
3. Toggle to **with_skills theme** (localStorage: `cv-theme=default` or `with_skills`)
|
|
||||||
4. Download PDF
|
|
||||||
5. Verify:
|
|
||||||
- **5 pages total** (not 6)
|
|
||||||
- Sidebar fonts slightly smaller than main content
|
|
||||||
- Still professional and readable
|
|
||||||
- No content overflow or truncation
|
|
||||||
|
|
||||||
**Compare with long version:**
|
|
||||||
1. Toggle to **long view** (`cv-length=long`)
|
|
||||||
2. Download PDF
|
|
||||||
3. Verify:
|
|
||||||
- **9 pages total**
|
|
||||||
- Sidebar fonts same size as short version main content
|
|
||||||
- Full-size fonts throughout
|
|
||||||
|
|
||||||
### Troubleshooting
|
|
||||||
|
|
||||||
#### Issue: Short PDF still has 6 pages
|
|
||||||
**Solution**:
|
|
||||||
1. Verify `cv-length` cookie is set to `short` (check browser DevTools)
|
|
||||||
2. Ensure `isShortVersion` detection works in generator.go:156
|
|
||||||
3. Check CSS injection is applied (add debug logging)
|
|
||||||
|
|
||||||
#### Issue: Fonts too small or hard to read
|
|
||||||
**Solution**:
|
|
||||||
1. Adjust font size percentages in generator.go:206-214
|
|
||||||
2. Increase from 0.94em to 0.96em for paragraphs
|
|
||||||
3. Test with actual content to verify readability
|
|
||||||
|
|
||||||
#### Issue: Long version also has compact fonts
|
|
||||||
**Solution**:
|
|
||||||
1. Check cookie detection logic - must be `cookies["cv-length"] == "short"`
|
|
||||||
2. Verify compactFontCSS is only appended when `isShortVersion == true`
|
|
||||||
3. Ensure long version passes `cv-length=long` cookie
|
|
||||||
|
|
||||||
## Future Improvements
|
|
||||||
|
|
||||||
- [ ] Make sidebar width configurable via query parameter
|
|
||||||
- [ ] Add option to customize page break positioning
|
|
||||||
- [ ] Support for different paper sizes (Letter, Legal)
|
|
||||||
- [ ] Transparent background option
|
|
||||||
- [ ] Custom padding/margin configuration
|
|
||||||
|
|
||||||
## Related Files
|
|
||||||
|
|
||||||
- `internal/pdf/generator.go` - PDF generation logic
|
|
||||||
- `templates/cv-content.html` - HTML structure
|
|
||||||
- `templates/partials/modals/pdf-modal.html` - Frontend UI
|
|
||||||
- `static/css/08-contexts/_print.css` - Print media CSS
|
|
||||||
- `internal/handlers/pdf.go` - HTTP handler
|
|
||||||
- `tests/mjs/24-pdf-download-params.test.mjs` - Frontend tests
|
|
||||||
Reference in New Issue
Block a user