diff --git a/docs/guides/json-resume-schema.mdx b/docs/guides/json-resume-schema.mdx
index 382090516..96c2d0a91 100644
--- a/docs/guides/json-resume-schema.mdx
+++ b/docs/guides/json-resume-schema.mdx
@@ -4415,6 +4415,14 @@ The full JSON Schema for Reactive Resume follows. You can also fetch the latest
"minimum": 10,
"maximum": 50
},
+ "sidebarSide": {
+ "description": "Which side of the page the sidebar column sits on in two-column templates. When unset, each template uses its own side (and right-to-left resumes mirror it).",
+ "type": "string",
+ "enum": [
+ "left",
+ "right"
+ ]
+ },
"pages": {
"type": "array",
"items": {
diff --git a/docs/spec.json b/docs/spec.json
index 475efd9ca..af774fdfe 100644
--- a/docs/spec.json
+++ b/docs/spec.json
@@ -23527,6 +23527,14 @@
"maximum": 50,
"description": "The width of the sidebar column, defined as a percentage of the page width."
},
+ "sidebarSide": {
+ "enum": [
+ "left",
+ "right"
+ ],
+ "type": "string",
+ "description": "Which side of the page the sidebar column sits on in two-column templates. When unset, each template uses its own side (and right-to-left resumes mirror it)."
+ },
"pages": {
"type": "array",
"items": {
@@ -27886,6 +27894,14 @@
"maximum": 50,
"description": "The width of the sidebar column, defined as a percentage of the page width."
},
+ "sidebarSide": {
+ "enum": [
+ "left",
+ "right"
+ ],
+ "type": "string",
+ "description": "Which side of the page the sidebar column sits on in two-column templates. When unset, each template uses its own side (and right-to-left resumes mirror it)."
+ },
"pages": {
"type": "array",
"items": {
@@ -32380,6 +32396,14 @@
"maximum": 50,
"description": "The width of the sidebar column, defined as a percentage of the page width."
},
+ "sidebarSide": {
+ "enum": [
+ "left",
+ "right"
+ ],
+ "type": "string",
+ "description": "Which side of the page the sidebar column sits on in two-column templates. When unset, each template uses its own side (and right-to-left resumes mirror it)."
+ },
"pages": {
"type": "array",
"items": {
@@ -36845,6 +36869,14 @@
"maximum": 50,
"description": "The width of the sidebar column, defined as a percentage of the page width."
},
+ "sidebarSide": {
+ "enum": [
+ "left",
+ "right"
+ ],
+ "type": "string",
+ "description": "Which side of the page the sidebar column sits on in two-column templates. When unset, each template uses its own side (and right-to-left resumes mirror it)."
+ },
"pages": {
"type": "array",
"items": {
@@ -41798,6 +41830,14 @@
"maximum": 50,
"description": "The width of the sidebar column, defined as a percentage of the page width."
},
+ "sidebarSide": {
+ "enum": [
+ "left",
+ "right"
+ ],
+ "type": "string",
+ "description": "Which side of the page the sidebar column sits on in two-column templates. When unset, each template uses its own side (and right-to-left resumes mirror it)."
+ },
"pages": {
"type": "array",
"items": {
@@ -46255,6 +46295,14 @@
"maximum": 50,
"description": "The width of the sidebar column, defined as a percentage of the page width."
},
+ "sidebarSide": {
+ "enum": [
+ "left",
+ "right"
+ ],
+ "type": "string",
+ "description": "Which side of the page the sidebar column sits on in two-column templates. When unset, each template uses its own side (and right-to-left resumes mirror it)."
+ },
"pages": {
"type": "array",
"items": {
@@ -51054,6 +51102,14 @@
"minimum": 10,
"maximum": 50
},
+ "sidebarSide": {
+ "description": "Which side of the page the sidebar column sits on in two-column templates. When unset, each template uses its own side (and right-to-left resumes mirror it).",
+ "type": "string",
+ "enum": [
+ "left",
+ "right"
+ ]
+ },
"pages": {
"type": "array",
"items": {
diff --git a/packages/docx/src/builder.ts b/packages/docx/src/builder.ts
index bb392c3c4..738dd32a5 100644
--- a/packages/docx/src/builder.ts
+++ b/packages/docx/src/builder.ts
@@ -453,7 +453,8 @@ export function buildDocument(data: ResumeData, resolveTitle?: SectionTitleResol
sidebarParagraphs,
sidebarWidth,
gapXTwips,
- templateConfig.sidebarSide,
+ // The side chosen in Design, else the template's own.
+ data.metadata.layout.sidebarSide ?? templateConfig.sidebarSide,
sidebarShadingHex,
),
);
diff --git a/packages/pdf/src/context.tsx b/packages/pdf/src/context.tsx
index 83b4ebb9b..2753b2553 100644
--- a/packages/pdf/src/context.tsx
+++ b/packages/pdf/src/context.tsx
@@ -1,7 +1,9 @@
import type { ResumeData } from "@reactive-resume/schema/resume/data";
+import type { Template } from "@reactive-resume/schema/templates";
import type { ReactNode } from "react";
import type { SectionTitleResolver } from "./section-title";
import { createContext, use, useMemo } from "react";
+import { templateLayouts } from "@reactive-resume/schema/templates";
import { isRTL } from "@reactive-resume/utils/locale";
export type ResumeRenderOptions = {
@@ -12,6 +14,11 @@ type RenderContextValue = ResumeData & {
resolveSectionTitle?: SectionTitleResolver | undefined;
renderOptions: ResumeRenderOptions;
rtl: boolean;
+ /**
+ * Whether a two-column template lays its columns out from the right: its sidebar goes to the other side from
+ * where the template draws it. That's the side chosen in Design, or, without a choice, a right-to-left page.
+ */
+ columnsReversed: boolean;
};
const RenderContext = createContext(null);
@@ -21,6 +28,7 @@ type RenderProviderProps = {
data: ResumeData;
resolveSectionTitle?: SectionTitleResolver | undefined;
renderOptions?: ResumeRenderOptions | undefined;
+ template?: Template | undefined;
children: ReactNode;
};
@@ -28,12 +36,16 @@ export const RenderProvider = ({
data,
resolveSectionTitle,
renderOptions = defaultRenderOptions,
+ template,
children,
}: RenderProviderProps) => {
const rtl = isRTL(data.metadata.page.locale);
+ const chosenSide = data.metadata.layout.sidebarSide;
+ const ownSide = template ? templateLayouts[template].sidebarSide : null;
+ const columnsReversed = chosenSide && ownSide ? chosenSide !== ownSide : rtl;
const contextValue = useMemo(
- () => ({ ...data, resolveSectionTitle, renderOptions, rtl }),
- [data, resolveSectionTitle, renderOptions, rtl],
+ () => ({ ...data, resolveSectionTitle, renderOptions, rtl, columnsReversed }),
+ [data, resolveSectionTitle, renderOptions, rtl, columnsReversed],
);
return {children};
diff --git a/packages/pdf/src/document.tsx b/packages/pdf/src/document.tsx
index d5410e156..132bfb462 100644
--- a/packages/pdf/src/document.tsx
+++ b/packages/pdf/src/document.tsx
@@ -78,7 +78,12 @@ export const ResumeDocument = ({
sourceTree={runtime.sourceTree}
renderTree={runtime.renderTree}
>
-
+
{
color: primary,
},
contentRow: {
- flexDirection: r.row,
+ flexDirection: r.columns,
},
sidebarColumn: {},
mainColumn: {
@@ -264,5 +264,6 @@ const useAzurillTemplate = (): AzurillTemplate => {
metrics.gapY,
foreground,
background,
+ r.columns,
]);
};
diff --git a/packages/pdf/src/templates/chikorita/ChikoritaPage.tsx b/packages/pdf/src/templates/chikorita/ChikoritaPage.tsx
index 498aec098..30d2de162 100644
--- a/packages/pdf/src/templates/chikorita/ChikoritaPage.tsx
+++ b/packages/pdf/src/templates/chikorita/ChikoritaPage.tsx
@@ -61,6 +61,7 @@ export const ChikoritaPage = ({ page, pageSize, pageMinHeightStyle, showHeader,
const { metadata, picture } = data;
const { colors, styles } = useChikoritaTemplate();
const metrics = getTemplateMetrics(metadata.page);
+ const { r } = useTemplateBase();
const hasPicture = hasTemplatePicture(picture);
const sidebarSections = useRenderedSectionIds(pageNodeKey, filterSections(page.sidebar, data));
const mainSections = useRenderedSectionIds(pageNodeKey, filterSections(page.main, data));
@@ -90,8 +91,10 @@ export const ChikoritaPage = ({ page, pageSize, pageMinHeightStyle, showHeader,
style={composeStyles(styles.mainColumn, {
marginTop: -metrics.page.paddingVertical,
paddingTop: metrics.page.paddingVertical,
- paddingRight: page.fullWidth ? metrics.page.paddingHorizontal : metrics.columnGap,
- paddingLeft: metrics.page.paddingHorizontal,
+ ...r.columnInset(
+ metrics.page.paddingHorizontal,
+ page.fullWidth ? metrics.page.paddingHorizontal : metrics.columnGap,
+ ),
rowGap: metrics.sectionGap,
})}
>
@@ -112,8 +115,7 @@ export const ChikoritaPage = ({ page, pageSize, pageMinHeightStyle, showHeader,
showHeader && hasPicture
? metrics.page.paddingVertical + picture.size + metrics.itemGapY * 3
: metrics.page.paddingVertical,
- paddingRight: metrics.page.paddingHorizontal,
- paddingLeft: metrics.columnGap,
+ ...r.columnInset(metrics.columnGap, metrics.page.paddingHorizontal),
rowGap: metrics.sectionGap,
})}
>
@@ -178,7 +180,7 @@ const useChikoritaTemplate = (): ChikoritaTemplate => {
inline: { ...base.inline, columnGap: metrics.gapX(0.25) },
page: {
...base.page,
- flexDirection: r.row,
+ flexDirection: r.columns,
},
section: {
flexDirection: "column",
@@ -282,5 +284,5 @@ const useChikoritaTemplate = (): ChikoritaTemplate => {
icon: createIconSlot({ metadata, accentFor }),
} satisfies ChikoritaStyles,
};
- }, [metadata, r.row, r.headerIdentity, metrics.gapX, primary, foreground, base, metrics.gapY, background]);
+ }, [metadata, r.row, r.headerIdentity, metrics.gapX, primary, foreground, base, metrics.gapY, background, r.columns]);
};
diff --git a/packages/pdf/src/templates/ditgar/DitgarPage.tsx b/packages/pdf/src/templates/ditgar/DitgarPage.tsx
index c3ccd9dba..227c3c090 100644
--- a/packages/pdf/src/templates/ditgar/DitgarPage.tsx
+++ b/packages/pdf/src/templates/ditgar/DitgarPage.tsx
@@ -218,7 +218,7 @@ const useDitgarTemplate = (): DitgarTemplate => {
...base,
page: {
...base.page,
- flexDirection: r.row,
+ flexDirection: r.columns,
},
section: {
flexDirection: "column",
@@ -356,5 +356,6 @@ const useDitgarTemplate = (): DitgarTemplate => {
metrics.page.paddingHorizontal,
foreground,
background,
+ r.columns,
]);
};
diff --git a/packages/pdf/src/templates/ditto/DittoPage.tsx b/packages/pdf/src/templates/ditto/DittoPage.tsx
index 2c948c12d..c32a6d108 100644
--- a/packages/pdf/src/templates/ditto/DittoPage.tsx
+++ b/packages/pdf/src/templates/ditto/DittoPage.tsx
@@ -65,6 +65,7 @@ export const DittoPage = ({ page, pageSize, pageMinHeightStyle, showHeader, page
const { metadata, picture } = data;
const { colors, styles } = useDittoTemplate();
const metrics = getTemplateMetrics(metadata.page);
+ const { r } = useTemplateBase();
const hasPicture = hasTemplatePicture(picture);
const sidebarSections = useRenderedSectionIds(pageNodeKey, filterSections(page.sidebar, data));
const mainSections = useRenderedSectionIds(pageNodeKey, filterSections(page.main, data));
@@ -89,7 +90,7 @@ export const DittoPage = ({ page, pageSize, pageMinHeightStyle, showHeader, page
style={composeStyles(styles.sidebarColumn, {
display: page.fullWidth ? "none" : "flex",
width: `${metadata.layout.sidebarWidth}%`,
- paddingLeft: metrics.page.paddingHorizontal,
+ ...r.columnInset(metrics.page.paddingHorizontal, 0),
paddingTop: showHeader && hasPicture ? metrics.page.paddingVertical : 0,
rowGap: metrics.sectionGap,
})}
@@ -104,8 +105,7 @@ export const DittoPage = ({ page, pageSize, pageMinHeightStyle, showHeader, page
@@ -201,7 +201,7 @@ const useDittoTemplate = (): DittoTemplate => {
headerBand: {
backgroundColor: primary,
color: background,
- flexDirection: r.row,
+ flexDirection: r.columns,
...(hasPicture ? { minHeight: picture.size * 0.6 } : {}),
},
pictureAnchor: {
@@ -232,7 +232,7 @@ const useDittoTemplate = (): DittoTemplate => {
color: background,
},
contactRow: {
- flexDirection: r.row,
+ flexDirection: r.columns,
alignItems: "flex-start",
},
contactOffset: {
@@ -256,7 +256,7 @@ const useDittoTemplate = (): DittoTemplate => {
columnGap: metrics.gapX(1 / 6),
},
contentRow: {
- flexDirection: r.row,
+ flexDirection: r.columns,
},
sidebarColumn: {
flexShrink: 0,
@@ -308,5 +308,6 @@ const useDittoTemplate = (): DittoTemplate => {
base,
metrics.gapY,
background,
+ r.columns,
]);
};
diff --git a/packages/pdf/src/templates/gengar/GengarPage.tsx b/packages/pdf/src/templates/gengar/GengarPage.tsx
index 60ec33cce..982821e0e 100644
--- a/packages/pdf/src/templates/gengar/GengarPage.tsx
+++ b/packages/pdf/src/templates/gengar/GengarPage.tsx
@@ -199,7 +199,7 @@ const useGengarTemplate = (): GengarTemplate => {
...base,
page: {
...base.page,
- flexDirection: r.row,
+ flexDirection: r.columns,
},
section: {
flexDirection: "column",
@@ -333,5 +333,6 @@ const useGengarTemplate = (): GengarTemplate => {
metrics.page.paddingHorizontal,
foreground,
background,
+ r.columns,
]);
};
diff --git a/packages/pdf/src/templates/glalie/GlaliePage.tsx b/packages/pdf/src/templates/glalie/GlaliePage.tsx
index d2280f6a3..92349a289 100644
--- a/packages/pdf/src/templates/glalie/GlaliePage.tsx
+++ b/packages/pdf/src/templates/glalie/GlaliePage.tsx
@@ -168,12 +168,12 @@ const useGlalieTemplate = (): GlalieTemplate => {
position: "absolute",
top: 0,
bottom: 0,
- ...r.anchorToStart(0),
+ ...r.anchorToColumnStart(0),
width: `${metadata.layout.sidebarWidth}%`,
backgroundColor: primaryTint,
},
layout: {
- flexDirection: r.row,
+ flexDirection: r.columns,
minHeight: "100%",
},
sidebarColumn: {
@@ -247,7 +247,6 @@ const useGlalieTemplate = (): GlalieTemplate => {
}, [
metadata,
r.row,
- r.anchorToStart,
primary,
metrics.sectionGap,
metrics.gapY,
@@ -257,5 +256,7 @@ const useGlalieTemplate = (): GlalieTemplate => {
metrics.page.paddingHorizontal,
foreground,
background,
+ r.columns,
+ r.anchorToColumnStart,
]);
};
diff --git a/packages/pdf/src/templates/leafish/LeafishPage.tsx b/packages/pdf/src/templates/leafish/LeafishPage.tsx
index bbc2db901..31f2d1976 100644
--- a/packages/pdf/src/templates/leafish/LeafishPage.tsx
+++ b/packages/pdf/src/templates/leafish/LeafishPage.tsx
@@ -219,7 +219,7 @@ const useLeafishTemplate = (): LeafishTemplate => {
columnGap: metrics.gapX(1 / 6),
},
body: {
- flexDirection: r.row,
+ flexDirection: r.columns,
columnGap: metrics.columnGap,
paddingHorizontal: metrics.page.paddingHorizontal,
paddingTop: metrics.page.paddingVertical,
@@ -257,5 +257,6 @@ const useLeafishTemplate = (): LeafishTemplate => {
metrics.columnGap,
foreground,
background,
+ r.columns,
]);
};
diff --git a/packages/pdf/src/templates/pikachu/PikachuPage.tsx b/packages/pdf/src/templates/pikachu/PikachuPage.tsx
index caed24ee1..2d7cf004f 100644
--- a/packages/pdf/src/templates/pikachu/PikachuPage.tsx
+++ b/packages/pdf/src/templates/pikachu/PikachuPage.tsx
@@ -210,7 +210,7 @@ const usePikachuTemplate = (): PikachuTemplate => {
backgroundColor: primary,
},
layout: {
- flexDirection: r.row,
+ flexDirection: r.columns,
columnGap: metrics.columnGap,
},
sidebarColumn: {
@@ -302,5 +302,6 @@ const usePikachuTemplate = (): PikachuTemplate => {
base,
metrics.gapX,
background,
+ r.columns,
]);
};
diff --git a/packages/pdf/src/templates/shared/rtl.ts b/packages/pdf/src/templates/shared/rtl.ts
index 901d49ecd..25b746a6d 100644
--- a/packages/pdf/src/templates/shared/rtl.ts
+++ b/packages/pdf/src/templates/shared/rtl.ts
@@ -13,10 +13,20 @@ type RtlStyleHelpers = {
contactSeparator: (color: string, gap: number) => Style;
contactSeparatorClear: Style;
anchorToStart: (offset?: number | string) => Style;
+ /** The flex direction of the row that holds a two-column template's columns. */
+ columns: "row" | "row-reverse";
+ /** Like `anchorToStart`, for the side the template's own sidebar starts from. */
+ anchorToColumnStart: (offset?: number | string) => Style;
+ /** Left and right padding for a column, given as the template draws it: `start` on its own left. */
+ columnInset: (start: number, end: number) => Pick;
};
-export function createRtlStyleHelpers(rtl: boolean): RtlStyleHelpers {
+export function createRtlStyleHelpers(rtl: boolean, columnsReversed = rtl): RtlStyleHelpers {
return {
+ columns: columnsReversed ? "row-reverse" : "row",
+ anchorToColumnStart: (offset = 0) => (columnsReversed ? { right: offset } : { left: offset }),
+ columnInset: (start, end) =>
+ columnsReversed ? { paddingLeft: end, paddingRight: start } : { paddingLeft: start, paddingRight: end },
rtl,
pageDirection: rtl ? "rtl" : "ltr",
row: rtl ? "row-reverse" : "row",
diff --git a/packages/pdf/src/templates/shared/sidebar-background.tsx b/packages/pdf/src/templates/shared/sidebar-background.tsx
index 35df11141..6c0fa075e 100644
--- a/packages/pdf/src/templates/shared/sidebar-background.tsx
+++ b/packages/pdf/src/templates/shared/sidebar-background.tsx
@@ -14,7 +14,7 @@ type SidebarBackgroundProps = {
* continues on a later page still reads as one band. Render it as a direct child of the page.
*/
export const SidebarBackground = ({ color, width, end = false }: SidebarBackgroundProps) => {
- const { rtl } = useRender();
- const side = end !== rtl ? "right" : "left";
+ const { columnsReversed } = useRender();
+ const side = end !== columnsReversed ? "right" : "left";
return ;
};
diff --git a/packages/pdf/src/templates/shared/sidebar-side.test.tsx b/packages/pdf/src/templates/shared/sidebar-side.test.tsx
new file mode 100644
index 000000000..be7521bcb
--- /dev/null
+++ b/packages/pdf/src/templates/shared/sidebar-side.test.tsx
@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+import * as forme from "@formepdf/core";
+import { parseResumeData } from "@reactive-resume/schema/resume/data";
+import { sampleResumeData } from "@reactive-resume/schema/resume/sample";
+import { templateLayouts, templateSchema } from "@reactive-resume/schema/templates";
+import { renderResume } from "../../forme/render";
+
+const twoColumn = templateSchema.options.filter((template) => templateLayouts[template].columns === 2);
+
+/** Where the first page's sidebar and main sections sit, by their left edges. */
+const columnEdges = async (template: (typeof twoColumn)[number], sidebarSide?: "left" | "right", locale = "en-US") => {
+ const data = parseResumeData({
+ ...sampleResumeData,
+ picture: { ...sampleResumeData.picture, hidden: true },
+ metadata: {
+ ...sampleResumeData.metadata,
+ template,
+ page: { ...sampleResumeData.metadata.page, locale },
+ layout: { ...sampleResumeData.metadata.layout, sidebarSide },
+ },
+ });
+ const { pageMap } = await renderResume(forme, { data, template });
+ const firstPage = data.metadata.layout.pages[0];
+ const x = (column: "main" | "sidebar") =>
+ Math.min(
+ ...pageMap.nodes
+ // Some templates print the summary across the page, in the header.
+ .filter(
+ (node) =>
+ node.page === 0 &&
+ node.kind === "section" &&
+ node.sectionId !== "summary" &&
+ firstPage?.[column].includes(node.sectionId),
+ )
+ .map((node) => node.x),
+ );
+ return { sidebar: x("sidebar"), main: x("main") };
+};
+
+describe("sidebar side", () => {
+ it.each(twoColumn)("puts %s's sidebar on the side chosen", { timeout: 60_000 }, async (template) => {
+ const left = await columnEdges(template, "left");
+ const right = await columnEdges(template, "right");
+
+ expect(left.sidebar).toBeLessThan(left.main);
+ expect(right.sidebar).toBeGreaterThan(right.main);
+ });
+
+ it("keeps a chosen side on a right-to-left page, and mirrors the template's own side without a choice", async () => {
+ const chosen = await columnEdges("azurill", "left", "ar-SA");
+ const own = await columnEdges("azurill", undefined, "ar-SA");
+
+ expect(chosen.sidebar).toBeLessThan(chosen.main);
+ expect(own.sidebar).toBeGreaterThan(own.main);
+ });
+});
diff --git a/packages/pdf/src/templates/shared/template-base.tsx b/packages/pdf/src/templates/shared/template-base.tsx
index 65d6b49d4..57c3fdfa8 100644
--- a/packages/pdf/src/templates/shared/template-base.tsx
+++ b/packages/pdf/src/templates/shared/template-base.tsx
@@ -19,10 +19,10 @@ import { Heading, SemanticContactListView, SemanticHeaderPicture, SemanticHeader
import { createRtlStyleHelpers } from "./rtl";
export const useTemplateBase = () => {
- const { picture, metadata, rtl } = useRender();
+ const { picture, metadata, rtl, columnsReversed } = useRender();
return useMemo(() => {
- const r = createRtlStyleHelpers(rtl);
+ const r = createRtlStyleHelpers(rtl, columnsReversed);
const foreground = rgbaStringToHex(metadata.design.colors.text);
const background = rgbaStringToHex(metadata.design.colors.background);
const primary = rgbaStringToHex(metadata.design.colors.primary);
@@ -30,7 +30,7 @@ export const useTemplateBase = () => {
const base = createBaseTemplateStyles({ metadata, foreground, background, r, metrics, picture });
return { picture, metadata, rtl, r, foreground, background, primary, metrics, base };
- }, [picture, metadata, rtl]);
+ }, [picture, metadata, rtl, columnsReversed]);
};
export const createIconSlot = ({
diff --git a/packages/schema/src/resume/data.ts b/packages/schema/src/resume/data.ts
index 041bf2e8d..16e880f7c 100644
--- a/packages/schema/src/resume/data.ts
+++ b/packages/schema/src/resume/data.ts
@@ -525,6 +525,13 @@ export const layoutSchema = z.object({
.max(50)
.catch(35)
.describe("The width of the sidebar column, defined as a percentage of the page width."),
+ sidebarSide: z
+ .enum(["left", "right"])
+ .optional()
+ .catch(undefined)
+ .describe(
+ "Which side of the page the sidebar column sits on in two-column templates. When unset, each template uses its own side (and right-to-left resumes mirror it).",
+ ),
pages: z.array(pageLayoutSchema).describe("The pages to display in the layout."),
});
diff --git a/skills/resume-builder/references/schema.md b/skills/resume-builder/references/schema.md
index 73721f536..afb3a9142 100644
--- a/skills/resume-builder/references/schema.md
+++ b/skills/resume-builder/references/schema.md
@@ -835,6 +835,7 @@ Choose one coherent shape for each union value. Required fields are local to tha
| `metadata.template` | `string` | yes | enum: ["azurill","bronzor","chikorita","ditgar","ditto","gengar","glalie","kakuna","lapras","leafish","meowth","onyx","pikachu","rhyhorn","scizor"]; default: "onyx" | The template to use for the resume. Determines the overall design and appearance of the resume. |
| `metadata.layout` | `object` | yes | — | The layout of the resume. Determines the structure and arrangement of the sections on the resume. |
| `metadata.layout.sidebarWidth` | `number` | yes | minimum: 10; maximum: 50; default: 35 | The width of the sidebar column, defined as a percentage of the page width. |
+| `metadata.layout.sidebarSide` | `string` | no | enum: ["left","right"] | Which side of the page the sidebar column sits on in two-column templates. When unset, each template uses its own side (and right-to-left resumes mirror it). |
| `metadata.layout.pages` | `array` | yes | — | The pages to display in the layout. |
| `metadata.layout.pages[]` | `object` | — | — | — |
| `metadata.layout.pages[].fullWidth` | `boolean` | yes | — | Whether the layout of the page should be full width. If true, the main column will span the entire width of the page. This means that there should be no items in the sidebar column. |