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
This commit is contained in:
juanatsap
+150
-28
@@ -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
|
||||
<!-- Simple link -->
|
||||
<a href="/export/pdf?lang=en&length=short&version=clean" download>
|
||||
Download PDF
|
||||
</a>
|
||||
|
||||
<!-- HTMX button (recommended) -->
|
||||
<button
|
||||
hx-get="/export/pdf?lang=en&length=short&version=clean"
|
||||
hx-trigger="click">
|
||||
📥 Download Clean PDF
|
||||
</button>
|
||||
|
||||
<!-- Dynamic button with user's current language -->
|
||||
<button
|
||||
hx-get="/export/pdf?lang={{.Lang}}&length=short&version=clean"
|
||||
hx-trigger="click">
|
||||
Download PDF
|
||||
</button>
|
||||
```
|
||||
|
||||
#### 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 */
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user