New Feature: Free-Form Page Formats for PDFs (#2595)

src/components/resume/hooks/use-css-variables.tsx

@@ -1,18 +1,8 @@
 import { useMemo } from "react";
 import type z from "zod";
+import { pageDimensionsAsMillimeters } from "@/schema/page";
 import type { resumeDataSchema } from "@/schema/resume/data";
 
-const pageDimensions = {
-	a4: {
-		width: "210mm",
-		height: "297mm",
-	},
-	letter: {
-		width: "216mm",
-		height: "279mm",
-	},
-} as const;
-
 type UseCssVariablesProps = Pick<z.infer<typeof resumeDataSchema>, "picture" | "metadata">;
 
 export const useCSSVariables = ({ picture, metadata }: UseCssVariablesProps) => {
@@ -28,8 +18,8 @@ export const useCSSVariables = ({ picture, metadata }: UseCssVariablesProps) =>
 
 	return {
 		"--picture-border-radius": `${picture.borderRadius}pt`,
-		"--page-width": pageDimensions[metadata.page.format].width,
-		"--page-height": pageDimensions[metadata.page.format].height,
+		"--page-width": pageDimensionsAsMillimeters[metadata.page.format].width,
+		"--page-height": pageDimensionsAsMillimeters[metadata.page.format].height,
 		"--page-sidebar-width": `${metadata.layout.sidebarWidth}%`,
 		"--page-text-color": metadata.design.colors.text,
 		"--page-primary-color": metadata.design.colors.primary,

src/components/resume/preview.tsx

@@ -160,7 +160,7 @@ function PageContainer({ pageIndex, pageLayout, pageClassName, showPageNumbers =
 				<TemplateComponent pageIndex={pageIndex} pageLayout={pageLayout} />
 			</div>
 
-			{pageHeight > maxPageHeight && (
+			{metadata.page.format !== "free-form" && pageHeight > maxPageHeight && (
 				<div className="absolute start-0 top-full mt-4 print:hidden">
 					<a
 						rel="noopener"