feat: new template (scizor)

This commit is contained in:
Amruth Pillai
2026-05-13 09:26:38 +02:00
parent 014ceee31f
commit 5f63dc876b
15 changed files with 40 additions and 15 deletions
+1
View File
@@ -53,6 +53,7 @@ body:
- Onyx
- Pikachu
- Rhyhorn
- Scizor
validations:
required: false
+1 -1
View File
@@ -147,7 +147,7 @@ When changing resume data shape, propagate in this order (per `AGENTS.md`):
1. **`packages/schema/src/resume/*.ts`** — Zod schemas and types (entry point).
2. **`packages/api/src/dto/*.ts`** — API DTOs that re-use those schemas.
3. **`packages/import/src/*.tsx`** — importers (`json-resume`, `reactive-resume-json`, `reactive-resume-v4-json`).
4. **`packages/pdf/src/templates/**`** — PDF rendering for every template (`azurill`, `bronzor`, `chikorita`, `ditgar`, `ditto`, `gengar`, `glalie`, `kakuna`, `lapras`, `leafish`, `meowth`, `onyx`, `pikachu`, `rhyhorn`). Shared filtering: `packages/pdf/src/templates/shared/filtering.ts`.
4. **`packages/pdf/src/templates/**`** — PDF rendering for every template (`azurill`, `bronzor`, `chikorita`, `ditgar`, `ditto`, `gengar`, `glalie`, `kakuna`, `lapras`, `leafish`, `meowth`, `onyx`, `pikachu`, `rhyhorn`, `scizor`). Shared filtering: `packages/pdf/src/templates/shared/filtering.ts`.
5. **`apps/web/src/`** — builder forms and any consumer hooks.
Adding/renaming a template requires changes in `packages/schema/src/templates.ts`, `packages/pdf/src/templates/index.ts`, the template directory `packages/pdf/src/templates/<name>/`, and static previews under `apps/web/public/templates/{jpg,pdf}/`.
+1 -1
View File
@@ -176,7 +176,7 @@ reactive-resume/
**`packages/pdf/`:**
- Purpose: React PDF rendering — the same code paths used by the browser preview and the server-side PDF download.
- Key paths: `packages/pdf/src/document.tsx`, `packages/pdf/src/context.tsx`, `packages/pdf/src/section-title.ts`, `packages/pdf/src/hooks/use-register-fonts.ts`, `packages/pdf/src/templates/index.ts`, `packages/pdf/src/templates/<name>/<Name>Page.tsx` (14 templates: `azurill`, `bronzor`, `chikorita`, `ditgar`, `ditto`, `gengar`, `glalie`, `kakuna`, `lapras`, `leafish`, `meowth`, `onyx`, `pikachu`, `rhyhorn`), shared primitives under `packages/pdf/src/templates/shared/` (`filtering.ts`, `rich-text.tsx`, `sections.tsx`, `primitives.tsx`, `picture.ts`, `page-size.ts`, `columns.ts`, `metrics.ts`, `meta-line.tsx`, `contact.ts`, `contact-item.tsx`, `level-display.tsx`, `section-links.ts`, `rich-text-html.ts`, `rich-text-spacing.ts`, `styles.ts`, `types.ts`, `context.tsx`).
- Key paths: `packages/pdf/src/document.tsx`, `packages/pdf/src/context.tsx`, `packages/pdf/src/section-title.ts`, `packages/pdf/src/hooks/use-register-fonts.ts`, `packages/pdf/src/templates/index.ts`, `packages/pdf/src/templates/<name>/<Name>Page.tsx` (14 templates: `azurill`, `bronzor`, `chikorita`, `ditgar`, `ditto`, `gengar`, `glalie`, `kakuna`, `lapras`, `leafish`, `meowth`, `onyx`, `pikachu`, `rhyhorn`, `scizor`), shared primitives under `packages/pdf/src/templates/shared/` (`filtering.ts`, `rich-text.tsx`, `sections.tsx`, `primitives.tsx`, `picture.ts`, `page-size.ts`, `columns.ts`, `metrics.ts`, `meta-line.tsx`, `contact.ts`, `contact-item.tsx`, `level-display.tsx`, `section-links.ts`, `rich-text-html.ts`, `rich-text-spacing.ts`, `styles.ts`, `types.ts`, `context.tsx`).
**`packages/runtime-externals/`:**
- Purpose: Vendors `bcrypt`, `sharp`, `@aws-sdk/client-s3` so they stay runtime-only (Vite externalizes them in `apps/web/vite.config.ts:55`).
+4
View File
@@ -130,6 +130,10 @@ Built with privacy as a core principle, Reactive Resume gives you complete owner
<img src="apps/web/public/templates/jpg/meowth.jpg" alt="Meowth" width="150" />
<br /><sub><b>Meowth</b></sub>
</td>
<td align="center">
<img src="apps/web/public/templates/jpg/scizor.jpg" alt="Scizor" width="150" />
<br /><sub><b>Scizor</b></sub>
</td>
</tr>
</table>
+1 -1
View File
@@ -89,7 +89,7 @@ rss: true
## Highlights
- **PDF generation moved fully client-side.** `@react-pdf/renderer` now produces the exported PDF directly in your browser, and the in-builder live preview is rendered with `pdfjs`, so what you see in the preview is exactly what you'll download.
- **All resume templates re-ported.** Azurill, Bronzor, Chikorita, Ditgar, Ditto, Gengar, Glalie, Kakuna, Lapras, Leafish, Meowth, Onyx, Pikachu, and Rhyhorn have all been re-implemented on the new renderer with section-by-section parity.
- **All resume templates re-ported.** Azurill, Bronzor, Chikorita, Ditgar, Ditto, Gengar, Glalie, Kakuna, Lapras, Leafish, Meowth, Onyx, Pikachu, Rhyhorn, and Scizor have all been re-implemented on the new renderer with section-by-section parity.
## Resume Builder
+1 -1
View File
@@ -40,7 +40,7 @@ description: "Welcome to the documentation for Reactive Resume, a free and open-
<Accordion title="Multiple Templates" icon="grid-2">
Choose from a variety of professionally designed templates including Azurill, Bronzor, Chikorita, Ditgar, Ditto,
Gengar, Glalie, Kakuna, Lapras, Leafish, Meowth, Onyx, Pikachu, and Rhyhorn - each with unique layouts and styles.
Gengar, Glalie, Kakuna, Lapras, Leafish, Meowth, Onyx, Pikachu, Rhyhorn, and Scizor - each with unique layouts and styles.
</Accordion>
<Accordion title="Rich Text Editor" icon="text">
+4
View File
@@ -147,6 +147,10 @@ Reactive Resume includes a variety of professionally designed templates. Each te
<Frame caption="Rhyhorn">
<img src="/images/templates/rhyhorn.webp" alt="Rhyhorn template preview" style={{ aspectRatio: "210/297" }} />
</Frame>
<Frame caption="Scizor">
<img src="/images/templates/scizor.webp" alt="Scizor template preview" style={{ aspectRatio: "210/297" }} />
</Frame>
</div>
---
+3 -1
View File
@@ -931,6 +931,7 @@ The exported JSON follows the Reactive Resume schema. Here's a high-level overvi
"azurill",
"bronzor",
"chikorita",
"ditgar",
"ditto",
"gengar",
"glalie",
@@ -940,7 +941,8 @@ The exported JSON follows the Reactive Resume schema. Here's a high-level overvi
"meowth",
"onyx",
"pikachu",
"rhyhorn"
"rhyhorn",
"scizor"
]
},
"layout": {
+2 -1
View File
@@ -1758,7 +1758,8 @@ Below is the complete JSON Schema for Reactive Resume. You can also fetch the la
"meowth",
"onyx",
"pikachu",
"rhyhorn"
"rhyhorn",
"scizor"
]
},
"layout": {
Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

+2 -1
View File
@@ -1533,7 +1533,8 @@
"meowth",
"onyx",
"pikachu",
"rhyhorn"
"rhyhorn",
"scizor"
],
"type": "string",
"description": "The template to use for the resume. Determines the overall design and appearance of the resume."
+2 -1
View File
@@ -1620,7 +1620,8 @@
"meowth",
"onyx",
"pikachu",
"rhyhorn"
"rhyhorn",
"scizor"
]
},
"layout": {
+16 -5
View File
@@ -1,4 +1,5 @@
import type { ResumeData, SectionType } from "@reactive-resume/schema/resume/data";
import type { Template } from "@reactive-resume/schema/templates";
import {
BorderStyle,
convertMillimetersToTwip,
@@ -76,14 +77,14 @@ const NO_BORDERS = {
interface TemplateConfig {
/** Which side the sidebar appears on */
sidebarSide: "left" | "right";
sidebarSide: "left" | "right" | "none";
/** Sidebar background: "solid" = full primary color, "tint" = 20% opacity, "none" = no background */
sidebarBackground: "solid" | "tint" | "none";
/** Where the header is rendered */
headerPosition: "full-width" | "main-only" | "sidebar-only";
}
const TEMPLATE_CONFIGS: Record<string, TemplateConfig> = {
const TEMPLATE_CONFIGS: Record<Template, TemplateConfig> = {
azurill: { sidebarSide: "left", sidebarBackground: "none", headerPosition: "full-width" },
bronzor: { sidebarSide: "right", sidebarBackground: "none", headerPosition: "full-width" },
chikorita: { sidebarSide: "right", sidebarBackground: "solid", headerPosition: "main-only" },
@@ -94,9 +95,11 @@ const TEMPLATE_CONFIGS: Record<string, TemplateConfig> = {
kakuna: { sidebarSide: "right", sidebarBackground: "none", headerPosition: "full-width" },
lapras: { sidebarSide: "right", sidebarBackground: "none", headerPosition: "full-width" },
leafish: { sidebarSide: "right", sidebarBackground: "none", headerPosition: "full-width" },
meowth: { sidebarSide: "left", sidebarBackground: "none", headerPosition: "full-width" },
onyx: { sidebarSide: "right", sidebarBackground: "none", headerPosition: "full-width" },
pikachu: { sidebarSide: "left", sidebarBackground: "none", headerPosition: "main-only" },
rhyhorn: { sidebarSide: "right", sidebarBackground: "none", headerPosition: "full-width" },
scizor: { sidebarSide: "left", sidebarBackground: "none", headerPosition: "full-width" },
};
const DEFAULT_TEMPLATE_CONFIG: TemplateConfig = {
@@ -301,7 +304,7 @@ function buildTwoColumnTable(
sidebarParagraphs: Paragraph[],
sidebarWidthPct: number,
gapXTwips: number,
sidebarSide: "left" | "right",
sidebarSide: "left" | "right" | "none",
sidebarShadingHex?: string,
): Table {
const mainWidthPct = 100 - sidebarWidthPct;
@@ -314,10 +317,18 @@ function buildTwoColumnTable(
? { fill: sidebarShadingHex, type: ShadingType.CLEAR, color: "auto" }
: undefined;
const margins: { right?: number; left?: number } = {};
if (sidebarSide === "left") {
margins.right = gapXTwips;
} else if (sidebarSide === "right") {
margins.left = gapXTwips;
}
const sidebarCell = new TableCell({
width: { size: sidebarWidthPct, type: WidthType.PERCENTAGE },
borders: NO_BORDERS,
margins: sidebarSide === "left" ? { right: gapXTwips } : { left: gapXTwips },
margins,
children: sidebarChildren,
...(sidebarShading ? { shading: sidebarShading } : {}),
});
@@ -325,7 +336,7 @@ function buildTwoColumnTable(
const mainCell = new TableCell({
width: { size: mainWidthPct, type: WidthType.PERCENTAGE },
borders: NO_BORDERS,
margins: sidebarSide === "left" ? { left: gapXTwips } : { right: gapXTwips },
margins,
children: mainChildren,
});
+1 -1
View File
@@ -45,7 +45,7 @@ For each section the user wants to include, gather specific details. Never inven
Ask about preferences:
- Template preference (13 available: azurill, bronzor, chikorita, ditto, ditgar, gengar, glalie, kakuna, lapras, leafish, onyx, pikachu, rhyhorn)
- Template preference (15 available: azurill, bronzor, chikorita, ditto, ditgar, gengar, glalie, kakuna, lapras, leafish, meowth, onyx, pikachu, rhyhorn, scizor)
- Page format: A4 or Letter
- Which sections to include and their order
+1 -1
View File
@@ -248,7 +248,7 @@ Icons use @phosphor-icons/web names. Common icons: `linkedin-logo`, `github-logo
### Template Options
Available templates: `azurill`, `bronzor`, `chikorita`, `ditto`, `ditgar`, `gengar`, `glalie`, `kakuna`, `lapras`, `leafish`, `onyx`, `pikachu`, `rhyhorn`
Available templates: `azurill`, `bronzor`, `chikorita`, `ditto`, `ditgar`, `gengar`, `glalie`, `kakuna`, `lapras`, `leafish`, `meowth`, `onyx`, `pikachu`, `rhyhorn`, `scizor`
### Layout Configuration