wehub-resource-sync
76 lines
1.8 KiB
Markdown
76 lines
1.8 KiB
Markdown
# Adding Resume Templates
|
|
|
|
> Guide for adding new resume template layouts.
|
|
|
|
## Quick Start
|
|
|
|
1. Create `components/resume/resume-{name}.tsx`
|
|
2. Export from `components/resume/index.ts`
|
|
3. Add to `FormattingControls` template selector
|
|
4. Create thumbnail image
|
|
|
|
## Template Component
|
|
|
|
```tsx
|
|
interface TemplateProps {
|
|
resumeData: ResumeData;
|
|
settings: TemplateSettings;
|
|
}
|
|
|
|
export function ResumeNewTemplate({ resumeData, settings }: TemplateProps) {
|
|
return (
|
|
<div className="resume-print">
|
|
{/* Header */}
|
|
<header className="resume-section">
|
|
<h1>{resumeData.personalInfo?.name}</h1>
|
|
</header>
|
|
|
|
{/* Sections */}
|
|
{getSortedSections(resumeData).map(section => (
|
|
<section key={section.id} className="resume-section">
|
|
<h3 className="resume-section-title">{section.displayName}</h3>
|
|
<div className="resume-items">
|
|
{/* Items */}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
## CSS Classes Required
|
|
|
|
```css
|
|
.resume-print /* Root container (Playwright waits for this) */
|
|
.resume-section /* Section wrapper */
|
|
.resume-section-title /* Section heading */
|
|
.resume-items /* Items container */
|
|
.resume-item /* Individual entry (won't page-break) */
|
|
```
|
|
|
|
## Export Template
|
|
|
|
```typescript
|
|
// components/resume/index.ts
|
|
export { ResumeNewTemplate } from './resume-new-template';
|
|
```
|
|
|
|
## Add to Selector
|
|
|
|
```typescript
|
|
// components/builder/formatting-controls.tsx
|
|
const TEMPLATES = [
|
|
{ id: 'swiss-single', name: 'Single Column' },
|
|
{ id: 'swiss-two-column', name: 'Two Column' },
|
|
{ id: 'new-template', name: 'New Template' }, // Add here
|
|
];
|
|
```
|
|
|
|
## Testing
|
|
|
|
1. Load builder with new template
|
|
2. Check all sections render
|
|
3. Verify PDF generation works
|
|
4. Test with 2+ page content
|