Update .env.example with clearer instructions for PRINTER_APP_URL, remove pdf-lib dependency from package.json, and adjust translations for alignment and zoom features across multiple locales. Improve template layout consistency in various components.

This commit is contained in:
Amruth Pillai
2026-01-24 10:43:12 +01:00
parent 4e73a81d4b
commit c875cc858d
79 changed files with 1399 additions and 1142 deletions
+1 -1
View File
@@ -8,7 +8,7 @@ type Props = z.infer<typeof levelDesignSchema> & React.ComponentProps<"div"> & {
export function LevelDisplay({ icon, type, level, className, ...props }: Props) {
if (level === 0) return null;
if (type === "hidden") return null;
if (type === "hidden" || icon === "") return null;
return (
<div
@@ -163,7 +163,7 @@ export function getSectionComponent(
return (
<section className={cn(`page-section page-section-custom page-section-${id}`, sectionClassName)}>
<h6 className="mb-1 text-(--page-primary-color)">{customSection.title}</h6>
<h6 className="mb-1.5 text-(--page-primary-color)">{customSection.title}</h6>
<div
className="section-content grid gap-x-(--page-gap-x) gap-y-(--page-gap-y)"
@@ -19,7 +19,7 @@ export function PageSection<T extends SectionType>({ type, className, children }
return (
<section className={cn(`page-section page-section-${type}`, className)}>
<h6 className="mb-2 text-(--page-primary-color)">{section.title || getSectionTitle(type)}</h6>
<h6 className="mb-1.5 text-(--page-primary-color)">{section.title || getSectionTitle(type)}</h6>
<div
className="section-content grid gap-x-(--page-gap-x) gap-y-(--page-gap-y)"
@@ -19,7 +19,7 @@ export function PageSummary({ className }: PageSummaryProps) {
className,
)}
>
<h6 className="mb-2 text-(--page-primary-color)">{section.title || getSectionTitle("summary")}</h6>
<h6 className="mb-1.5 text-(--page-primary-color)">{section.title || getSectionTitle("summary")}</h6>
<div className="section-content">
<TiptapContent style={{ columnCount: section.columns }} content={section.content} />
+1 -1
View File
@@ -61,7 +61,7 @@ export function AzurillTemplate({ pageIndex, pageLayout }: TemplateProps) {
const { main, sidebar, fullWidth } = pageLayout;
return (
<div className="template-azurill page-content space-y-(--page-gap-y) px-(--page-margin-x) py-(--page-margin-y) print:p-0">
<div className="template-azurill page-content space-y-(--page-gap-y) px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
{isFirstPage && <Header />}
<div className="flex gap-x-(--page-gap-x)">
+1 -1
View File
@@ -23,7 +23,7 @@ export function BronzorTemplate({ pageIndex, pageLayout }: TemplateProps) {
const { main, sidebar, fullWidth } = pageLayout;
return (
<div className="template-bronzor page-content space-y-(--page-gap-y) px-(--page-margin-x) py-(--page-margin-y) print:p-0">
<div className="template-bronzor page-content space-y-(--page-gap-y) px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
{isFirstPage && <Header />}
<div className="space-y-(--page-gap-y)">
@@ -46,7 +46,7 @@ export function ChikoritaTemplate({ pageIndex, pageLayout }: TemplateProps) {
<div className="flex">
<main
data-layout="main"
className="group page-main z-10 flex-1 space-y-4 px-(--page-margin-x) py-(--page-margin-y)"
className="group page-main z-10 flex-1 space-y-4 px-(--page-margin-x) pt-(--page-margin-y)"
>
{main.map((section) => {
const Component = getSectionComponent(section, { sectionClassName });
@@ -57,7 +57,7 @@ export function ChikoritaTemplate({ pageIndex, pageLayout }: TemplateProps) {
{!fullWidth && (
<aside
data-layout="sidebar"
className="group page-sidebar z-10 w-(--page-sidebar-width) shrink-0 space-y-4 overflow-x-hidden px-(--page-margin-x) py-(--page-margin-y) text-(--page-background-color)"
className="group page-sidebar z-10 w-(--page-sidebar-width) shrink-0 space-y-4 overflow-x-hidden px-(--page-margin-x) pt-(--page-margin-y) text-(--page-background-color)"
>
{sidebar.map((section) => {
const Component = getSectionComponent(section, { sectionClassName });
+2 -2
View File
@@ -44,7 +44,7 @@ export function DitgarTemplate({ pageIndex, pageLayout }: TemplateProps) {
<aside data-layout="sidebar" className="sidebar group z-10 flex w-(--page-sidebar-width) shrink-0 flex-col">
{isFirstPage && <Header />}
<div className="flex-1 space-y-4 px-(--page-margin-x) py-(--page-margin-y)">
<div className="flex-1 space-y-4 px-(--page-margin-x) pt-(--page-margin-y)">
{sidebar.map((section) => {
const Component = getSectionComponent(section, { sectionClassName });
return <Component key={section} id={section} />;
@@ -55,7 +55,7 @@ export function DitgarTemplate({ pageIndex, pageLayout }: TemplateProps) {
<main data-layout="main" className={cn("main group z-10", !fullWidth ? "col-span-2" : "col-span-3")}>
{isFirstPage && <SummaryComponent id="summary" />}
<div className="space-y-4 px-(--page-margin-x) py-(--page-margin-y)">
<div className="space-y-4 px-(--page-margin-x) pt-(--page-margin-y)">
{main
.filter((section) => section !== "summary")
.map((section) => {
+1 -1
View File
@@ -24,7 +24,7 @@ export function DittoTemplate({ pageIndex, pageLayout }: TemplateProps) {
<div className="template-ditto page-content">
{isFirstPage && <Header />}
<div className="flex py-(--page-margin-y)">
<div className="flex pt-(--page-margin-y)">
{!fullWidth && (
<aside
data-layout="sidebar"
+2 -2
View File
@@ -39,7 +39,7 @@ export function GengarTemplate({ pageIndex, pageLayout }: TemplateProps) {
{isFirstPage && <Header />}
{!fullWidth && (
<div className="shrink-0 space-y-4 overflow-x-hidden px-(--page-margin-x) pt-4 pb-(--page-margin-y)">
<div className="shrink-0 space-y-4 overflow-x-hidden px-(--page-margin-x) pt-(--page-margin-y)">
{sidebar
.filter((section) => section !== "summary")
.map((section) => {
@@ -61,7 +61,7 @@ export function GengarTemplate({ pageIndex, pageLayout }: TemplateProps) {
/>
)}
<div className="space-y-4 px-(--page-margin-x) pt-4 pb-(--page-margin-y)">
<div className="space-y-4 px-(--page-margin-x) pt-(--page-margin-y)">
{main
.filter((section) => section !== "summary")
.map((section) => {
+2 -2
View File
@@ -33,7 +33,7 @@ export function GlalieTemplate({ pageIndex, pageLayout }: TemplateProps) {
<div className="flex">
<aside
data-layout="sidebar"
className="group page-sidebar flex w-(--page-sidebar-width) shrink-0 flex-col space-y-4 px-(--page-margin-x) py-(--page-margin-y)"
className="group page-sidebar flex w-(--page-sidebar-width) shrink-0 flex-col space-y-4 px-(--page-margin-x) pt-(--page-margin-y)"
>
{isFirstPage && <Header />}
@@ -48,7 +48,7 @@ export function GlalieTemplate({ pageIndex, pageLayout }: TemplateProps) {
</aside>
<main data-layout="main" className="group page-main">
<div className="space-y-4 px-(--page-margin-x) py-(--page-margin-y)">
<div className="space-y-4 px-(--page-margin-x) pt-(--page-margin-y)">
{main.map((section) => {
const Component = getSectionComponent(section, { sectionClassName });
return <Component key={section} id={section} />;
+1 -1
View File
@@ -20,7 +20,7 @@ export function KakunaTemplate({ pageIndex, pageLayout }: TemplateProps) {
const { main, sidebar, fullWidth } = pageLayout;
return (
<div className="template-kakuna page-content space-y-4 px-(--page-margin-x) py-(--page-margin-y) print:p-0">
<div className="template-kakuna page-content space-y-4 px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
{isFirstPage && <Header />}
<main data-layout="main" className="group page-main space-y-4">
+4 -4
View File
@@ -12,7 +12,7 @@ const sectionClassName = cn(
"rounded-(--container-border-radius) border border-(--page-text-color)/10 bg-(--page-background-color) p-4",
// Section Heading
"[&>h6]:-mt-(--heading-negative-margin) [&>h6]:max-w-fit [&>h6]:bg-(--page-background-color) [&>h6]:px-4 [&>h6]:pb-0.5",
"[&>h6]:-mt-(--heading-negative-margin) [&>h6]:max-w-fit [&>h6]:bg-(--page-background-color) [&>h6]:px-4",
);
/**
@@ -33,11 +33,11 @@ export function LaprasTemplate({ pageIndex, pageLayout }: TemplateProps) {
"--heading-negative-margin": `${headingNegativeMargin}pt`,
} as React.CSSProperties
}
className="template-lapras page-content space-y-7 px-(--page-margin-x) py-(--page-margin-y) print:p-0"
className="template-lapras page-content space-y-6 px-(--page-margin-x) pt-(--page-margin-y) print:p-0"
>
{isFirstPage && <Header />}
<main data-layout="main" className="group page-main space-y-7">
<main data-layout="main" className="group page-main space-y-6">
{main.map((section) => {
const Component = getSectionComponent(section, { sectionClassName });
return <Component key={section} id={section} />;
@@ -45,7 +45,7 @@ export function LaprasTemplate({ pageIndex, pageLayout }: TemplateProps) {
</main>
{!fullWidth && (
<aside data-layout="sidebar" className="group page-sidebar space-y-7">
<aside data-layout="sidebar" className="group page-sidebar space-y-6">
{sidebar.map((section) => {
const Component = getSectionComponent(section, { sectionClassName });
return <Component key={section} id={section} />;
+1 -1
View File
@@ -24,7 +24,7 @@ export function LeafishTemplate({ pageIndex, pageLayout }: TemplateProps) {
<div className="template-leafish page-content space-y-4">
{isFirstPage && <Header />}
<div className="flex gap-x-(--page-margin-x) px-(--page-margin-x) pb-(--page-margin-y)">
<div className="flex gap-x-(--page-margin-x) px-(--page-margin-x) pt-(--page-margin-y)">
<main data-layout="main" className="group page-main space-y-4">
{main
.filter((section) => section !== "summary")
+2 -2
View File
@@ -17,7 +17,7 @@ export function OnyxTemplate({ pageIndex, pageLayout }: TemplateProps) {
const { main, sidebar, fullWidth } = pageLayout;
return (
<div className="template-onyx page-content space-y-(--page-gap-y) px-(--page-margin-x) py-(--page-margin-y) print:p-0">
<div className="template-onyx page-content space-y-(--page-gap-y) px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
{isFirstPage && <Header />}
<main data-layout="main" className="group page-main space-y-(--page-gap-y)">
@@ -43,7 +43,7 @@ function Header() {
const basics = useResumeStore((state) => state.resume.data.basics);
return (
<div className="page-header flex items-center gap-x-4 border-(--page-primary-color) border-b pb-(--page-gap-y)">
<div className="page-header flex items-center gap-x-4 border-(--page-primary-color) border-b pb-(--page-margin-y)">
<PagePicture />
<div className="page-basics space-y-2">
+26 -28
View File
@@ -24,39 +24,37 @@ export function PikachuTemplate({ pageIndex, pageLayout }: TemplateProps) {
const { main, sidebar, fullWidth } = pageLayout;
return (
<div className="template-pikachu page-content px-(--page-margin-x) py-(--page-margin-y) print:p-0">
<div className="flex gap-x-(--page-margin-x)">
<aside
data-layout="sidebar"
className="group page-sidebar flex w-(--page-sidebar-width) shrink-0 flex-col space-y-3"
>
{isFirstPage && (
<div className="flex items-center justify-center">
<PagePicture />
</div>
)}
<div className="template-pikachu page-content flex gap-x-(--page-margin-x) px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
<aside
data-layout="sidebar"
className="group page-sidebar flex w-(--page-sidebar-width) shrink-0 flex-col space-y-(--page-gap-y)"
>
{isFirstPage && (
<div className="flex max-w-(--page-sidebar-width) items-center justify-start">
<PagePicture />
</div>
)}
{!fullWidth && (
<div className="shrink-0 space-y-4 overflow-x-hidden">
{sidebar.map((section) => {
const Component = getSectionComponent(section, { sectionClassName });
return <Component key={section} id={section} />;
})}
</div>
)}
</aside>
<main data-layout="main" className="group page-main flex-1 space-y-3">
{isFirstPage && <Header />}
<div className="space-y-4 pb-(--page-margin-y)">
{main.map((section) => {
{!fullWidth && (
<div className="shrink-0 space-y-(--page-gap-y) overflow-x-hidden">
{sidebar.map((section) => {
const Component = getSectionComponent(section, { sectionClassName });
return <Component key={section} id={section} />;
})}
</div>
</main>
</div>
)}
</aside>
<main data-layout="main" className="group page-main flex-1 space-y-(--page-margin-y)">
{isFirstPage && <Header />}
<div className="space-y-(--page-gap-y)">
{main.map((section) => {
const Component = getSectionComponent(section, { sectionClassName });
return <Component key={section} id={section} />;
})}
</div>
</main>
</div>
);
}
+1 -1
View File
@@ -20,7 +20,7 @@ export function RhyhornTemplate({ pageIndex, pageLayout }: TemplateProps) {
const { main, sidebar, fullWidth } = pageLayout;
return (
<div className="template-rhyhorn page-content space-y-4 px-(--page-margin-x) py-(--page-margin-y) print:p-0">
<div className="template-rhyhorn page-content space-y-4 px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
{isFirstPage && <Header />}
<main data-layout="main" className="group page-main space-y-4">