CV-Engine/shared-printable/buildPrintableHtml.js

// 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, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/\"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

export function buildPrintableHtml(cv) {
  const { personal = {}, summary = '', work = [], education = [], skills = [], languages = [], certifications = [] } = cv || {};
  const styles = `
    <style>
      @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; }
    </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 headerHtml = `
    <div class="header">
      <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>
  `;

  const summarySection = summary ? `
    <div class="section">
      <h2>Professional Summary</h2>
      <div>${summary}</div>
    </div>
  ` : '';

  const workSection = (work && work.length) ? `
    <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>
  ` : '';

  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">
        ${headerHtml}
        ${summarySection}
        ${workSection}
        ${eduSection}
        ${skillsSection}
        ${languagesSection}
        ${certsSection}
      </div>
    </body>
  </html>`;
}