From f8948413bc41c4dad9c0c235dcf7ed6919bd67fc Mon Sep 17 00:00:00 2001 From: juanatsap Date: Wed, 19 Nov 2025 10:56:01 +0000 Subject: [PATCH] docs: add comprehensive user-oriented PDF export guide Add detailed, user-friendly documentation for PDF export feature in CUSTOMIZATION.md to help template users understand and customize PDF generation. New Documentation: - Clear explanation of how PDF export works - All 4 parameters (lang, length, icons, version) with examples - Filename convention and patterns - Frontend integration examples (HTML, HTMX) - Tips for best PDF results - Troubleshooting common issues - Advanced customization guidance Audience: - Template users who want to customize their own CV - Non-technical users who need to understand PDF options - Developers who want to extend PDF functionality Examples include: - Complete URL patterns for all parameter combinations - Code snippets for frontend buttons - CSS customizations for print appearance - Common troubleshooting solutions --- doc/7-CUSTOMIZATION.md | 178 ++++++++++++++++++++++++++++++++++------- 1 file changed, 150 insertions(+), 28 deletions(-) diff --git a/doc/7-CUSTOMIZATION.md b/doc/7-CUSTOMIZATION.md index 56d2079..5ff6d29 100644 --- a/doc/7-CUSTOMIZATION.md +++ b/doc/7-CUSTOMIZATION.md @@ -1148,44 +1148,166 @@ func LoadCV(lang string) (*CV, error) { {{end}} ``` -### Custom PDF Styles +### PDF Export Customization -PDF generation uses same templates but renders with Chromium. Customize print styles: +The CV site includes a powerful PDF export feature with multiple customization options. Users can download their CV as a PDF with different configurations. + +#### How PDF Export Works + +When a user clicks "Download PDF", the server: +1. Takes a snapshot of the CV webpage using headless Chrome +2. Applies special print-optimized CSS styles (`@media print`) +3. Generates a professional PDF document +4. Downloads it with a descriptive filename + +#### PDF Export Parameters + +The PDF export endpoint accepts 4 parameters that let users customize their PDF: + +**1. Language (`lang`)** +- `en` - English version +- `es` - Spanish version +- Default: `en` +- Example: `/export/pdf?lang=es` + +**2. Length (`length`)** +- `short` - Concise version with summaries only +- `long` - Detailed version with full descriptions and bullet points +- Default: `short` +- Example: `/export/pdf?length=long` + +**3. Icons (`icons`)** +- `show` - Display all company logos, project icons, and visual elements +- `hide` - Text-only version without icons (more formal) +- Default: `show` +- Example: `/export/pdf?icons=hide` + +**4. Version (`version`)** +- `extended` - Full styling with colors and visual elements +- `clean` - Minimal, print-optimized design +- Default: `extended` +- Example: `/export/pdf?version=clean` + +#### Example URLs + +```bash +# Short, clean English CV (most compact) +http://localhost:1999/export/pdf?lang=en&length=short&version=clean + +# Long, detailed Spanish CV with all icons +http://localhost:1999/export/pdf?lang=es&length=long&icons=show&version=extended + +# Use defaults (English, short, with icons, extended) +http://localhost:1999/export/pdf +``` + +#### Filename Convention + +PDFs are automatically named following this pattern: +``` +CV-{Your-Name}-{lang}-{length}-{version}.pdf +``` + +Examples: +- `CV-Juan-Andrés-Moreno-Rubio-en-short-clean.pdf` +- `CV-Jane-Smith-es-long-extended.pdf` + +#### Customizing PDF Appearance + +PDF appearance is controlled by `@media print` CSS rules. The print styles are already optimized for A4 paper, but you can customize them: + +**Location**: `static/css/08-contexts/_print.css` (or your main CSS file) + +**Common customizations**: -**Add to `static/css/main.css`**: ```css @media print { - /* PDF-specific styles */ - body { - background: white; - } - - .cv-page { - box-shadow: none; - margin: 0; - } - - /* Custom PDF header/footer */ + /* Change paper size */ @page { - margin: 20mm; - - @top-center { - content: "Your Name - CV"; - } - - @bottom-right { - content: "Page " counter(page) " of " counter(pages); - } + size: Letter portrait; /* US Letter instead of A4 */ + margin: 10mm; /* Adjust margins */ } - /* Prevent orphans/widows */ - p, li { - orphans: 3; - widows: 3; + /* Customize colors */ + .section-title { + color: #000000 !important; /* Force black text */ + } + + /* Hide specific elements */ + .cv-footer { + display: none !important; + } + + /* Adjust font sizes */ + .cv-name { + font-size: 18pt !important; } } ``` +#### Frontend Integration + +Add a download button to your templates: + +```html + + + Download PDF + + + + + + + +``` + +#### Tips for Best PDF Results + +1. **Keep it concise**: Use `length=short` for 1-2 page CVs +2. **Professional look**: Use `version=clean&icons=hide` for formal applications +3. **Colorful**: Use `version=extended&icons=show` for creative industries +4. **Test before sharing**: Always preview the PDF before sending to employers +5. **File size**: Short versions ~1.5-2MB, Long versions ~2-2.5MB + +#### Troubleshooting PDF Export + +**Problem**: PDF generation times out +- **Solution**: Reduce content in your JSON files, or increase timeout in `internal/pdf/generator.go` + +**Problem**: Fonts look wrong in PDF +- **Solution**: Ensure fonts are loaded correctly in your HTML head section + +**Problem**: Images don't appear in PDF +- **Solution**: Check that image paths are absolute or relative to server root + +**Problem**: Colors are washed out +- **Solution**: Add `-webkit-print-color-adjust: exact !important;` to your print CSS + +#### Advanced: Customizing PDF Generation + +If you need more control over PDF generation, you can modify: + +**File**: `internal/handlers/cv.go` (ExportPDF function) +- Add new parameters +- Change cookie mappings +- Modify filename pattern + +**File**: `internal/pdf/generator.go` +- Adjust PDF settings (margins, paper size) +- Change timeout duration +- Modify chromedp options + +See [3-API.md](3-API.md) for complete API documentation. + ### Additional Export Formats #### Adding Word Export @@ -1494,7 +1616,7 @@ curl http://localhost:1999/download/pdf?lang=en --output my-cv.pdf **CSS changes**: ```css :root { - --accent-blue: #2c3e50; /* Conservative dark blue */ + --accent-blue: #013c77; /* Conservative dark blue */ --bg-gray: #f4f4f4; /* Light background */ }