mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-07-25 01:15:26 +10:00
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:
@@ -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} />
|
||||
|
||||
@@ -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)">
|
||||
|
||||
@@ -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 });
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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} />;
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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} />;
|
||||
|
||||
@@ -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")
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user