geulah
81712044c2
- Implement new timeline template with left sidebar and vertical timeline design - Add support for headline and reference lines in personal editor - Update printable HTML builder to support timeline template styling - Include timeline template thumbnail and registry entry
307 lines
12 KiB
JavaScript
307 lines
12 KiB
JavaScript
// ESM module: shared printable HTML builder
|
|
// Note: callers must sanitize any HTML fields (e.g., summary) before passing.
|
|
|
|
function escapeText(str) {
|
|
if (str == null) return '';
|
|
return String(str)
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/\"/g, '"')
|
|
.replace(/'/g, ''');
|
|
}
|
|
|
|
export function buildPrintableHtml(cv, templateId) {
|
|
const { personal = {}, summary = '', work = [], education = [], skills = [], languages = [], certifications = [], templateId: cvTemplateId } = cv || {};
|
|
const tid = templateId || cvTemplateId || 'ats';
|
|
|
|
const baseStyles = `
|
|
@page { size: A4; margin: 20mm; }
|
|
body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans; color: #1f2937; }
|
|
.page { width: 210mm; min-height: 297mm; margin: 0 auto; background: white; }
|
|
h1 { font-size: 24px; margin: 0 0 6px 0; }
|
|
h2 { font-size: 16px; margin: 16px 0 8px 0; padding-bottom: 4px; border-bottom: 1px solid #e5e7eb; color: #374151; }
|
|
h3 { font-size: 14px; margin: 0; }
|
|
.header { border-bottom: 1px solid #e5e7eb; padding-bottom: 12px; margin-bottom: 16px; }
|
|
.meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: #6b7280; }
|
|
.section { margin-bottom: 16px; }
|
|
.job, .edu { margin-bottom: 12px; }
|
|
.row { display: flex; justify-content: space-between; align-items: flex-start; }
|
|
.small { font-size: 12px; color: #6b7280; }
|
|
ul { padding-left: 20px; }
|
|
li { margin: 4px 0; }
|
|
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.chip { background: #f3f4f6; color: #1f2937; padding: 2px 8px; border-radius: 12px; font-size: 12px; }
|
|
`;
|
|
|
|
const classicStyles = `
|
|
@page { size: A4; margin: 22mm; }
|
|
body { font-family: Georgia, Cambria, 'Times New Roman', Times, serif; color: #111827; }
|
|
h1 { font-size: 26px; }
|
|
h2 { font-size: 16px; margin: 18px 0 6px 0; padding-bottom: 0; border-bottom: none; color: #374151; letter-spacing: 0.2px; }
|
|
.header { border-bottom: none; padding-bottom: 0; margin-bottom: 10px; }
|
|
.chip { background: #f9fafb; color: #111827; }
|
|
`;
|
|
|
|
const modernStyles = `
|
|
@page { size: A4; margin: 18mm; }
|
|
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans; color: #0f172a; }
|
|
.accent { height: 6px; background: #0ea5e9; margin-bottom: 12px; }
|
|
h1 { font-weight: 700; letter-spacing: 0.3px; }
|
|
h2 { color: #0ea5e9; border-color: #bae6fd; }
|
|
.header { border-left: 6px solid #0ea5e9; padding-left: 12px; }
|
|
.chip { background: #e0f2fe; color: #0c4a6e; }
|
|
`;
|
|
|
|
const minimalStyles = `
|
|
@page { size: A4; margin: 25mm; }
|
|
body { font-family: 'Source Serif Pro', Georgia, Cambria, 'Times New Roman', Times, serif; color: #1f2937; }
|
|
h1 { font-size: 24px; font-weight: 600; }
|
|
h2 { font-size: 15px; margin: 22px 0 6px 0; border-bottom: none; color: #374151; }
|
|
.header { border-bottom: none; margin-bottom: 8px; }
|
|
.section { margin-bottom: 22px; }
|
|
.chip { background: #f3f4f6; color: #374151; }
|
|
`;
|
|
|
|
const timelineStyles = `
|
|
@page { size: A4; margin: 18mm; }
|
|
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans; color: #0f172a; }
|
|
.grid { display: grid; grid-template-columns: 1fr 2fr; gap: 18px; }
|
|
.sidebar h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: #111827; margin: 0; }
|
|
.divider { border-top: 1px solid #e5e7eb; margin: 4px 0 8px; }
|
|
.contact-list { font-size: 12px; color: #111827; }
|
|
.timeline { position: relative; }
|
|
.tl-row { display: grid; grid-template-columns: 24px 1fr; gap: 12px; margin-bottom: 16px; }
|
|
.tl-dot { width: 10px; height: 10px; background: #2563eb; border-radius: 50%; margin-top: 3px; }
|
|
.tl-line { position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: #e5e7eb; }
|
|
.small { font-size: 12px; color: #6b7280; }
|
|
`;
|
|
|
|
const stylesVariant = tid === 'classic' ? classicStyles : tid === 'modern' ? modernStyles : tid === 'minimal' ? minimalStyles : tid === 'timeline' ? timelineStyles : '';
|
|
const styles = `
|
|
<style>
|
|
${baseStyles}
|
|
${stylesVariant}
|
|
</style>
|
|
`;
|
|
|
|
const headerLinks = (personal.links || [])
|
|
.map(l => `<a href="${escapeText(l.url)}" target="_blank" rel="noopener noreferrer">${escapeText(l.label || l.url)}</a>`)
|
|
.join(' · ');
|
|
|
|
const safePhotoUrl = typeof personal.photoUrl === 'string' && /^(https?:\/\/)/i.test(personal.photoUrl) ? personal.photoUrl : '';
|
|
const headerPhoto = tid === 'modern' && safePhotoUrl ? `<img src="${escapeText(safePhotoUrl)}" alt="${escapeText((personal.firstName || '') + ' ' + (personal.lastName || ''))} photo" style="width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.7);margin-right:12px;" referrerpolicy="no-referrer" />` : '';
|
|
const headline = Array.isArray(personal.extras) && personal.extras.length ? personal.extras[0] : '';
|
|
const headerHtml = tid === 'timeline'
|
|
? `
|
|
<div class="header">
|
|
<h1>${escapeText(personal.firstName || '')} ${escapeText(personal.lastName || '')}</h1>
|
|
${headline ? `<div class="small" style="text-transform:uppercase;margin-top:4px;color:#374151;">${escapeText(headline)}</div>` : ''}
|
|
</div>
|
|
`
|
|
: `
|
|
<div class="header" style="display:flex;align-items:center;gap:12px;">
|
|
${headerPhoto}
|
|
<div>
|
|
<h1>${escapeText(personal.firstName || '')} ${escapeText(personal.lastName || '')}</h1>
|
|
<div class="meta">
|
|
${personal.email ? `<span>${escapeText(personal.email)}</span>` : ''}
|
|
${personal.phone ? `<span>${escapeText(personal.phone)}</span>` : ''}
|
|
${(personal.city || personal.country) ? `<span>${personal.city ? escapeText(personal.city) : ''}${personal.city && personal.country ? ', ' : ''}${personal.country ? escapeText(personal.country) : ''}</span>` : ''}
|
|
${headerLinks ? `<span>${headerLinks}</span>` : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
const summarySection = summary ? `
|
|
<div class="section">
|
|
<h2>Professional Summary</h2>
|
|
<div>${summary}</div>
|
|
</div>
|
|
` : '';
|
|
|
|
const workSection = (work && work.length) ? (
|
|
tid === 'timeline'
|
|
? `
|
|
<div class="section">
|
|
<h2>Work Experience</h2>
|
|
<div class="timeline">
|
|
<div class="tl-line"></div>
|
|
${work.map(job => `
|
|
<div class="tl-row">
|
|
<div class="tl-dot"></div>
|
|
<div>
|
|
<div class="row" style="justify-content:space-between;">
|
|
<div>
|
|
<h3>${escapeText(job.title)}</h3>
|
|
<div class="small">${escapeText(job.company)}</div>
|
|
</div>
|
|
<div class="small">
|
|
${escapeText(job.startDate || '')} - ${escapeText(job.endDate || 'Present')}
|
|
${job.location ? `<div>${escapeText(job.location)}</div>` : ''}
|
|
</div>
|
|
</div>
|
|
${(job.bullets && job.bullets.length) ? `
|
|
<ul>
|
|
${job.bullets.map(b => `<li>${escapeText(b)}</li>`).join('')}
|
|
</ul>
|
|
` : ''}
|
|
</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
`
|
|
: `
|
|
<div class="section">
|
|
<h2>Work Experience</h2>
|
|
${work.map(job => `
|
|
<div class="job">
|
|
<div class="row">
|
|
<div>
|
|
<h3>${escapeText(job.title)}</h3>
|
|
<div class="small">${escapeText(job.company)}</div>
|
|
</div>
|
|
<div class="small">
|
|
${escapeText(job.startDate || '')} - ${escapeText(job.endDate || 'Present')}
|
|
${job.location ? `<div>${escapeText(job.location)}</div>` : ''}
|
|
</div>
|
|
</div>
|
|
${(job.bullets && job.bullets.length) ? `
|
|
<ul>
|
|
${job.bullets.map(b => `<li>${escapeText(b)}</li>`).join('')}
|
|
</ul>
|
|
` : ''}
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`
|
|
) : '';
|
|
|
|
const eduSection = (education && education.length) ? `
|
|
<div class="section">
|
|
<h2>Education</h2>
|
|
${education.map(ed => `
|
|
<div class="edu">
|
|
<div class="row">
|
|
<div>
|
|
<h3>${escapeText(ed.degree)}</h3>
|
|
<div class="small">${escapeText(ed.school)}</div>
|
|
</div>
|
|
<div class="small">
|
|
${escapeText(ed.startDate || '')} - ${escapeText(ed.endDate || '')}
|
|
</div>
|
|
</div>
|
|
${ed.gpa ? `<div class="small">GPA: ${escapeText(ed.gpa)}</div>` : ''}
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
` : '';
|
|
|
|
const skillsSection = (skills && skills.length) ? `
|
|
<div class="section">
|
|
<h2>Skills</h2>
|
|
<div class="chips">
|
|
${skills.map(s => `<span class="chip">${escapeText(s.name)}${s.level ? ` — ${escapeText(s.level)}` : ''}</span>`).join('')}
|
|
</div>
|
|
</div>
|
|
` : '';
|
|
|
|
const languagesSection = (languages && languages.length) ? `
|
|
<div class="section">
|
|
<h2>Languages</h2>
|
|
<div class="chips">
|
|
${languages.map(l => `<span class="chip">${escapeText(l.name)}${l.level ? ` — ${escapeText(l.level)}` : ''}</span>`).join('')}
|
|
</div>
|
|
</div>
|
|
` : '';
|
|
|
|
const certsSection = (certifications && certifications.length) ? `
|
|
<div class="section">
|
|
<h2>Certifications</h2>
|
|
<ul>
|
|
${certifications.map(c => `<li>${escapeText(c.name)}${c.issuer ? ` - ${escapeText(c.issuer)}` : ''}${c.date ? ` (${escapeText(c.date)})` : ''}</li>`).join('')}
|
|
</ul>
|
|
</div>
|
|
` : '';
|
|
|
|
const accentTop = tid === 'modern' ? '<div class="accent"></div>' : '';
|
|
|
|
// Sidebar for timeline theme: contact + skills/languages + references
|
|
const referenceLines = (Array.isArray(personal.extras) ? personal.extras.slice(1) : []).filter(Boolean);
|
|
const sidebar = tid === 'timeline' ? `
|
|
<aside class="sidebar">
|
|
<section>
|
|
<h2>Contact</h2>
|
|
<div class="divider"></div>
|
|
<div class="contact-list">
|
|
${personal.phone ? `<div>${escapeText(personal.phone)}</div>` : ''}
|
|
${personal.email ? `<div>${escapeText(personal.email)}</div>` : ''}
|
|
${(personal.street || personal.city || personal.country || personal.postcode) ? `<div>${escapeText([personal.street, personal.city, personal.country, personal.postcode].filter(Boolean).join(', '))}</div>` : ''}
|
|
${headerLinks ? `<div>${headerLinks}</div>` : ''}
|
|
</div>
|
|
</section>
|
|
${(skills && skills.length) ? `
|
|
<section>
|
|
<h2>Skills</h2>
|
|
<div class="divider"></div>
|
|
<div class="chips">${skills.map(s => `<span class="chip">${escapeText(s.name)}${s.level ? ` — ${escapeText(s.level)}` : ''}</span>`).join('')}</div>
|
|
</section>
|
|
` : ''}
|
|
${(languages && languages.length) ? `
|
|
<section>
|
|
<h2>Languages</h2>
|
|
<div class="divider"></div>
|
|
<div class="chips">${languages.map(l => `<span class="chip">${escapeText(l.name)}${l.level ? ` — ${escapeText(l.level)}` : ''}</span>`).join('')}</div>
|
|
</section>
|
|
` : ''}
|
|
${(referenceLines && referenceLines.length) ? `
|
|
<section>
|
|
<h2>Reference</h2>
|
|
<div class="divider"></div>
|
|
<div class="small">${referenceLines.map(r => `<div>${escapeText(r)}</div>`).join('')}</div>
|
|
</section>
|
|
` : ''}
|
|
</aside>
|
|
` : '';
|
|
const bodyContent = tid === 'timeline'
|
|
? `
|
|
${accentTop}
|
|
${headerHtml}
|
|
<div class="grid">
|
|
${sidebar}
|
|
<main>
|
|
${summarySection}
|
|
${workSection}
|
|
${eduSection}
|
|
${certsSection}
|
|
</main>
|
|
</div>
|
|
`
|
|
: `
|
|
${accentTop}
|
|
${headerHtml}
|
|
${summarySection}
|
|
${workSection}
|
|
${eduSection}
|
|
${skillsSection}
|
|
${languagesSection}
|
|
${certsSection}
|
|
`;
|
|
|
|
return `<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Printable CV</title>
|
|
${styles}
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
${bodyContent}
|
|
</div>
|
|
</body>
|
|
</html>`;
|
|
} |