Feature: Toggle Page Size between ISO A4 and US Letter

2025-11-12 15:52:56 +10:00 · 2022-10-15 00:54:59 +02:00
parent 136e143e12
commit f0f552a635
38 changed files with 903 additions and 783 deletions
--- a/client/components/build/Center/Page.module.scss
+++ b/client/components/build/Center/Page.module.scss
@ -15,7 +15,7 @@
  }

  &.break::after {
-    content: 'A4 Page Break';
+    content: 'Page Break';
    top: calc(297mm - 19px);

    @apply absolute w-full border-b border-dashed border-neutral-800/75;
@ -28,6 +28,15 @@
    }
  }

+  &.format-letter {
+    width: 216mm;
+    min-height: 279mm;
+
+    &.break::after {
+      top: calc(279mm - 19px);
+    }
+  }
+
  .markdown {
    ul {
      padding-left: 1.5em;
--- a/client/components/build/Center/Page.tsx
+++ b/client/components/build/Center/Page.tsx
@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { CustomCSS, Theme, Typography } from '@reactive-resume/schema';
+import { CustomCSS, PageConfig, ThemeConfig, Typography } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
@ -23,9 +23,10 @@ const Page: React.FC<Props> = ({ page, showPageNumbers = false }) => {
  const resume = useAppSelector((state) => state.resume.present);
  const breakLine: boolean = useAppSelector((state) => state.build.page.breakLine);

-  const theme: Theme = get(resume, 'metadata.theme');
+  const theme: ThemeConfig = get(resume, 'metadata.theme');
  const customCSS: CustomCSS = get(resume, 'metadata.css');
  const template: string = get(resume, 'metadata.template');
+  const pageConfig: PageConfig = get(resume, 'metadata.page');
  const typography: Typography = get(resume, 'metadata.typography');

  const themeCSS = useMemo(() => !isEmpty(theme) && generateThemeStyles(theme), [theme]);
@ -33,7 +34,7 @@ const Page: React.FC<Props> = ({ page, showPageNumbers = false }) => {
  const TemplatePage: React.FC<PageProps> | null = useMemo(() => templateMap[template].component, [template]);

  return (
-    <div data-page={page + 1} className={styles.container}>
+    <div data-page={page + 1} data-format={pageConfig.format || 'A4'} className={styles.container}>
      <div
        className={clsx({
          reset: true,
@ -42,6 +43,7 @@ const Page: React.FC<Props> = ({ page, showPageNumbers = false }) => {
          [css(themeCSS)]: true,
          [css(typographyCSS)]: true,
          [css(customCSS.value)]: customCSS.visible,
+          [styles['format-letter']]: pageConfig?.format === 'Letter',
        })}
      >
        {TemplatePage && <TemplatePage page={page} />}
--- a/client/components/build/RightSidebar/sections/Settings.tsx
+++ b/client/components/build/RightSidebar/sections/Settings.tsx
@ -10,7 +10,7 @@ import {
  Switch,
  TextField,
 } from '@mui/material';
-import { DateConfig, Resume } from '@reactive-resume/schema';
+import { DateConfig, PageConfig, Resume } from '@reactive-resume/schema';
 import dayjs from 'dayjs';
 import get from 'lodash/get';
 import { useRouter } from 'next/router';
@ -47,10 +47,11 @@ const Settings = () => {
  const id: number = useMemo(() => get(resume, 'id'), [resume]);
  const slug: string = useMemo(() => get(resume, 'slug'), [resume]);
  const username: string = useMemo(() => get(resume, 'user.username'), [resume]);
+  const pageConfig: PageConfig = useMemo(() => get(resume, 'metadata.page'), [resume]);
  const dateConfig: DateConfig = useMemo(() => get(resume, 'metadata.date'), [resume]);

  const isDarkMode = useMemo(() => theme === 'dark', [theme]);
-  const exampleString = useMemo(() => `Eg. ${dayjs().utc().format(dateConfig.format)}`, [dateConfig.format]);
+  const exampleDateString = useMemo(() => `Eg. ${dayjs().utc().format(dateConfig.format)}`, [dateConfig.format]);
  const themeString = useMemo(() => (isDarkMode ? 'Matte Black Everything' : 'As bright as your future'), [isDarkMode]);

  const { mutateAsync: loadSampleDataMutation } = useMutation<Resume, ServerError, LoadSampleDataParams>(
@ -60,6 +61,9 @@ const Settings = () => {

  const handleSetTheme = (value: boolean) => dispatch(setTheme({ theme: value ? 'dark' : 'light' }));

+  const handleChangePageFormat = (value: PageConfig['format'] | null) =>
+    dispatch(setResumeState({ path: 'metadata.page.format', value }));
+
  const handleChangeDateFormat = (value: string | null) =>
    dispatch(setResumeState({ path: 'metadata.date.format', value }));

@ -118,13 +122,13 @@ const Settings = () => {
              primary={t<string>('builder.rightSidebar.sections.settings.global.date.primary')}
              secondary={t<string>('builder.rightSidebar.sections.settings.global.date.secondary')}
            />
-            <Autocomplete<string, false, boolean, false>
+            <Autocomplete<string, false, true, false>
              disableClearable
              className="my-2 w-full"
              options={dateFormatOptions}
              value={dateConfig.format}
              onChange={(_, value) => handleChangeDateFormat(value)}
-              renderInput={(params) => <TextField {...params} helperText={exampleString} />}
+              renderInput={(params) => <TextField {...params} helperText={exampleDateString} />}
            />
          </ListItem>

@ -134,7 +138,7 @@ const Settings = () => {
              primary={t<string>('builder.rightSidebar.sections.settings.global.language.primary')}
              secondary={t<string>('builder.rightSidebar.sections.settings.global.language.secondary')}
            />
-            <Autocomplete<Language, false, boolean, false>
+            <Autocomplete<Language, false, true, false>
              disableClearable
              className="my-2 w-full"
              options={languages}
@ -159,6 +163,23 @@ const Settings = () => {
            {t<string>('builder.rightSidebar.sections.settings.page.heading')}
          </ListSubheader>

+          <ListItem className="flex-col">
+            <ListItemText
+              className="w-full"
+              primary={t<string>('builder.rightSidebar.sections.settings.page.format.primary')}
+              secondary={t<string>('builder.rightSidebar.sections.settings.page.format.secondary')}
+            />
+            <Autocomplete<PageConfig['format'], false, true, false>
+              disableClearable
+              defaultValue="A4"
+              className="my-2 w-full"
+              options={['A4', 'Letter']}
+              value={pageConfig?.format || 'A4'}
+              renderInput={(params) => <TextField {...params} />}
+              onChange={(_, value) => handleChangePageFormat(value)}
+            />
+          </ListItem>
+
          <ListItem>
            <ListItemText
              primary={t<string>('builder.rightSidebar.sections.settings.page.orientation.primary')}
--- a/client/components/build/RightSidebar/sections/Theme.tsx
+++ b/client/components/build/RightSidebar/sections/Theme.tsx
@ -1,4 +1,4 @@
-import { Theme as ThemeType } from '@reactive-resume/schema';
+import { ThemeConfig } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import { useTranslation } from 'next-i18next';

@ -16,7 +16,7 @@ const Theme = () => {

  const dispatch = useAppDispatch();

-  const { background, text, primary } = useAppSelector<ThemeType>((state) =>
+  const { background, text, primary } = useAppSelector<ThemeConfig>((state) =>
    get(state.resume.present, 'metadata.theme')
  );

--- a/client/package.json
+++ b/client/package.json
@ -13,22 +13,22 @@
    "@emotion/css": "^11.10.0",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
-    "@hello-pangea/dnd": "^16.0.0",
+    "@hello-pangea/dnd": "^16.0.1",
    "@hookform/resolvers": "2.9.8",
    "@monaco-editor/react": "^4.4.6",
-    "@mui/icons-material": "^5.10.6",
-    "@mui/lab": "^5.0.0-alpha.102",
-    "@mui/material": "^5.10.8",
-    "@mui/system": "^5.10.8",
+    "@mui/icons-material": "^5.10.9",
+    "@mui/lab": "^5.0.0-alpha.103",
+    "@mui/material": "^5.10.9",
+    "@mui/system": "^5.10.9",
    "@mui/x-date-pickers": "5.0.4",
    "@next/env": "^12.3.1",
    "@react-oauth/google": "^0.2.8",
-    "@reduxjs/toolkit": "^1.8.5",
-    "axios": "^1.1.0",
+    "@reduxjs/toolkit": "^1.8.6",
+    "axios": "^1.1.2",
    "clsx": "^1.2.1",
    "dayjs": "^1.11.5",
    "downloadjs": "^1.4.7",
-    "joi": "^17.6.2",
+    "joi": "^17.6.3",
    "lodash": "^4.17.21",
    "md5-hex": "^4.0.0",
    "monaco-editor": "^0.34.0",
@ -64,7 +64,7 @@
    "@tailwindcss/typography": "^0.5.7",
    "@types/downloadjs": "^1.4.3",
    "@types/lodash": "^4.14.186",
-    "@types/node": "^18.8.3",
+    "@types/node": "^18.8.5",
    "@types/react": "^18.0.21",
    "@types/react-dom": "^18.0.6",
    "@types/react-redux": "^7.1.24",
@ -75,8 +75,8 @@
    "csstype": "^3.1.1",
    "eslint-config-next": "^12.3.1",
    "eslint-plugin-tailwindcss": "^3.6.2",
-    "next-sitemap": "^3.1.23",
-    "postcss": "^8.4.17",
+    "next-sitemap": "^3.1.25",
+    "postcss": "^8.4.18",
    "sass": "^1.55.0",
    "tailwindcss": "^3.1.8",
    "typescript": "^4.8.4"
--- a/client/public/locales/cs/common.json
+++ b/client/public/locales/cs/common.json
@ -6,7 +6,7 @@
    }
  },
  "footer": {
-    "credit": "Vášnivý projekt <1>Amrutha Pillaie</1>",
+    "credit": "Vášnivý projekt <1>Amruth Pillai</1>",
    "license": "Od komunity, pro komunitu."
  },
  "markdown": {
--- a/client/public/locales/en/builder.json
+++ b/client/public/locales/en/builder.json
@ -290,6 +290,10 @@
        },
        "heading": "Settings",
        "page": {
+          "format": {
+            "primary": "Paper Size",
+            "secondary": "Determines the dimensions of your resume pages"
+          },
          "break-line": {
            "primary": "Break Line",
            "secondary": "Show a line on all pages to mark the height of an A4 page"
--- a/client/public/locales/hu/common.json
+++ b/client/public/locales/hu/common.json
@ -6,7 +6,7 @@
    }
  },
  "footer": {
-    "credit": "<1>Amruth Pillai szenvedélyes projektje</1>",
+    "credit": "<1>Amruth Pillai</1> szenvedélyes projektje",
    "license": "A közösség által, a közösségért."
  },
  "markdown": {
--- a/client/public/locales/km/common.json
+++ b/client/public/locales/km/common.json
@ -6,7 +6,7 @@
    }
  },
  "footer": {
-    "credit": "គម្រោងបង្កើតឡើងដោយលោក <1> Amruth Pillai</1>",
+    "credit": "គម្រោងបង្កើតឡើងដោយលោក <1>Amruth Pillai</1>",
    "license": "ដោយសហគមន៍ ដើម្បីសហគមន៍។"
  },
  "markdown": {
--- a/client/public/locales/ko/common.json
+++ b/client/public/locales/ko/common.json
@ -6,7 +6,7 @@
    }
  },
  "footer": {
-    "credit": "<1>Amruth Pillai의 열정 프로젝트</1>",
+    "credit": "<1>Amruth Pillai의</1> 열정 프로젝트",
    "license": "커뮤니티에 의한, 커뮤니티를 위한."
  },
  "markdown": {
--- a/client/public/locales/mr/common.json
+++ b/client/public/locales/mr/common.json
@ -6,7 +6,7 @@
    }
  },
  "footer": {
-    "credit": "<1>अमृत पिल्लई यांचा एक उत्कट प्रकल्प</1>",
+    "credit": "<1>अमृत पिल्लई</1> यांचा एक उत्कट प्रकल्प",
    "license": "समाजाने, समाजासाठी."
  },
  "markdown": {
--- a/client/public/locales/ne/common.json
+++ b/client/public/locales/ne/common.json
@ -6,7 +6,7 @@
    }
  },
  "footer": {
-    "credit": "<1> अमृत पिल्लै द्वारा एक जोश परियोजना</1>",
+    "credit": "<1>अमृत पिल्लै</1> द्वारा एक जोश परियोजना",
    "license": "समुदाय द्वारा, समुदाय को लागी।"
  },
  "markdown": {
--- a/client/public/locales/or/common.json
+++ b/client/public/locales/or/common.json
@ -6,7 +6,7 @@
    }
  },
  "footer": {
-    "credit": "<1> ଅମୃତ ପିଲ୍ଲାଇ</1> ଦ୍ୱାରା ଏକ ଉତ୍ସାହ ପ୍ରୋଜେକ୍ଟ ।",
+    "credit": "<1>ଅମୃତ ପିଲ୍ଲାଇ</1> ଦ୍ୱାରା ଏକ ଉତ୍ସାହ ପ୍ରୋଜେକ୍ଟ ।",
    "license": "ସମ୍ପ୍ରଦାୟ ଦ୍ୱାରା, ସମ୍ପ୍ରଦାୟ ପାଇଁ ।"
  },
  "markdown": {
--- a/client/public/locales/vi/common.json
+++ b/client/public/locales/vi/common.json
@ -6,7 +6,7 @@
    }
  },
  "footer": {
-    "credit": "Một dự án làm với đam mê của <1> Amruth Pillai</1>",
+    "credit": "Một dự án làm với đam mê của <1>Amruth Pillai</1>",
    "license": "Vì cộng đồng, cho cộng đồng."
  },
  "markdown": {
--- a/client/templates/Castform/Castform.tsx
+++ b/client/templates/Castform/Castform.tsx
@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { Theme } from '@reactive-resume/schema';
+import { ThemeConfig } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import get from 'lodash/get';
 import { useMemo } from 'react';
@ -17,7 +17,7 @@ const Castform: React.FC<PageProps> = ({ page }) => {
  const isFirstPage = useMemo(() => page === 0, [page]);

  const layout: string[][] = useAppSelector((state) => state.resume.present.metadata.layout[page]);
-  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
+  const theme: ThemeConfig = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));

  const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]);
  const color = useMemo(() => (contrast === 'dark' ? theme.text : theme.background), [theme, contrast]);
--- a/client/templates/Castform/widgets/Heading.tsx
+++ b/client/templates/Castform/widgets/Heading.tsx
@ -1,12 +1,12 @@
 import { darken } from '@mui/material';
-import { Theme } from '@reactive-resume/schema';
+import { ThemeConfig } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import { useMemo } from 'react';

 import { useAppSelector } from '@/store/hooks';

 const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
+  const theme: ThemeConfig = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
  const darkerPrimary = useMemo(() => darken(theme.primary, 0.2), [theme.primary]);

  return (
--- a/client/templates/Castform/widgets/Masthead.tsx
+++ b/client/templates/Castform/widgets/Masthead.tsx
@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { Cake, Email, Phone, Public, Room } from '@mui/icons-material';
-import { Theme } from '@reactive-resume/schema';
+import { ThemeConfig } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
@ -19,7 +19,7 @@ export const MastheadSidebar: React.FC = () => {
  const { name, headline, photo, email, phone, birthdate, website, location, profiles } = useAppSelector(
    (state) => state.resume.present.basics
  );
-  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
+  const theme: ThemeConfig = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
  const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]);
  const color = useMemo(() => (contrast === 'dark' ? theme.text : theme.background), [theme, contrast]);

--- a/client/templates/Gengar/Gengar.tsx
+++ b/client/templates/Gengar/Gengar.tsx
@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { alpha } from '@mui/material';
-import { Theme } from '@reactive-resume/schema';
+import { ThemeConfig } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import get from 'lodash/get';
 import { useMemo } from 'react';
@ -18,7 +18,7 @@ const Gengar: React.FC<PageProps> = ({ page }) => {
  const isFirstPage = useMemo(() => page === 0, [page]);

  const layout: string[][] = useAppSelector((state) => state.resume.present.metadata.layout[page]);
-  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
+  const theme: ThemeConfig = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
  const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]);
  const backgroundColor: string = useMemo(() => alpha(theme.primary, 0.15), [theme.primary]);
  const color = useMemo(() => (contrast === 'dark' ? theme.text : theme.background), [theme, contrast]);
--- a/client/templates/Gengar/widgets/Heading.tsx
+++ b/client/templates/Gengar/widgets/Heading.tsx
@ -1,10 +1,10 @@
-import { Theme } from '@reactive-resume/schema';
+import { ThemeConfig } from '@reactive-resume/schema';
 import get from 'lodash/get';

 import { useAppSelector } from '@/store/hooks';

 const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
+  const theme: ThemeConfig = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));

  return (
    <h3
--- a/client/templates/Gengar/widgets/Masthead.tsx
+++ b/client/templates/Gengar/widgets/Masthead.tsx
@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { Cake, Email, Phone, Public, Room } from '@mui/icons-material';
 import { alpha } from '@mui/material';
-import { Theme } from '@reactive-resume/schema';
+import { ThemeConfig } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
@ -20,7 +20,7 @@ export const MastheadSidebar: React.FC = () => {
  const { name, headline, photo, email, phone, birthdate, website, location, profiles } = useAppSelector(
    (state) => state.resume.present.basics
  );
-  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
+  const theme: ThemeConfig = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
  const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]);
  const iconColor = useMemo(() => (contrast === 'dark' ? theme.text : theme.background), [theme, contrast]);

--- a/client/templates/Glalie/widgets/BadgeDisplay.tsx
+++ b/client/templates/Glalie/widgets/BadgeDisplay.tsx
@ -1,5 +1,5 @@
 import { alpha } from '@mui/material';
-import { Theme } from '@reactive-resume/schema';
+import { ThemeConfig } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
@ -13,7 +13,7 @@ type Props = {
 };

 const BadgeDisplay: React.FC<Props> = ({ items }) => {
-  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
+  const theme: ThemeConfig = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
  const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]);

  if (!isArray(items) || isEmpty(items)) return null;
--- a/client/templates/Glalie/widgets/Heading.tsx
+++ b/client/templates/Glalie/widgets/Heading.tsx
@ -1,10 +1,10 @@
-import { Theme } from '@reactive-resume/schema';
+import { ThemeConfig } from '@reactive-resume/schema';
 import get from 'lodash/get';

 import { useAppSelector } from '@/store/hooks';

 const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
+  const theme: ThemeConfig = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));

  return (
    <h3
--- a/client/templates/Kakuna/widgets/BadgeDisplay.tsx
+++ b/client/templates/Kakuna/widgets/BadgeDisplay.tsx
@ -1,4 +1,4 @@
-import { Theme } from '@reactive-resume/schema';
+import { ThemeConfig } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
@ -12,7 +12,7 @@ type Props = {
 };

 const BadgeDisplay: React.FC<Props> = ({ items }) => {
-  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
+  const theme: ThemeConfig = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
  const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]);

  if (!isArray(items) || isEmpty(items)) return null;
--- a/client/templates/Leafish/widgets/Heading.tsx
+++ b/client/templates/Leafish/widgets/Heading.tsx
@ -1,10 +1,10 @@
-import { Theme } from '@reactive-resume/schema';
+import { ThemeConfig } from '@reactive-resume/schema';
 import get from 'lodash/get';

 import { useAppSelector } from '@/store/hooks';

 const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
+  const theme: ThemeConfig = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));

  return (
    <h2
--- a/client/templates/Leafish/widgets/Masthead.tsx
+++ b/client/templates/Leafish/widgets/Masthead.tsx
@ -1,6 +1,6 @@
 import { Cake, Email, Phone, Public, Room } from '@mui/icons-material';
 import { alpha } from '@mui/material';
-import { Theme } from '@reactive-resume/schema';
+import { ThemeConfig } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';

@ -16,7 +16,7 @@ const Masthead: React.FC = () => {
  const { name, photo, headline, summary, email, phone, birthdate, website, location, profiles } = useAppSelector(
    (state) => state.resume.present.basics
  );
-  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
+  const theme: ThemeConfig = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));

  return (
    <div>
--- a/client/templates/Onyx/widgets/Heading.tsx
+++ b/client/templates/Onyx/widgets/Heading.tsx
@ -1,10 +1,10 @@
-import { Theme } from '@reactive-resume/schema';
+import { ThemeConfig } from '@reactive-resume/schema';
 import get from 'lodash/get';

 import { useAppSelector } from '@/store/hooks';

 const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
+  const theme: ThemeConfig = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));

  return (
    <h4 className="mb-2 font-bold uppercase" style={{ color: theme.primary }}>
--- a/client/templates/Pikachu/widgets/Heading.tsx
+++ b/client/templates/Pikachu/widgets/Heading.tsx
@ -1,10 +1,10 @@
-import { Theme } from '@reactive-resume/schema';
+import { ThemeConfig } from '@reactive-resume/schema';
 import get from 'lodash/get';

 import { useAppSelector } from '@/store/hooks';

 const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
+  const theme: ThemeConfig = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));

  return (
    <h3
--- a/client/templates/Pikachu/widgets/Masthead.tsx
+++ b/client/templates/Pikachu/widgets/Masthead.tsx
@ -1,5 +1,5 @@
 import { Cake, Email, Phone, Public, Room } from '@mui/icons-material';
-import { Theme } from '@reactive-resume/schema';
+import { ThemeConfig } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import { useMemo } from 'react';
@ -62,7 +62,7 @@ export const MastheadSidebar: React.FC = () => {
 };

 export const MastheadMain: React.FC = () => {
-  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
+  const theme: ThemeConfig = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
  const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]);

  const { name, summary, headline } = useAppSelector((state) => state.resume.present.basics);
--- a/client/utils/string.ts
+++ b/client/utils/string.ts
@ -0,0 +1,3 @@
+export const capitalize = (str: string) => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
--- a/client/utils/styles.ts
+++ b/client/utils/styles.ts
@ -1,4 +1,4 @@
-import { Theme, Typography } from '@reactive-resume/schema';
+import { ThemeConfig, Typography } from '@reactive-resume/schema';
 import { RgbColor } from 'react-colorful';

 import { hexColorPattern } from '@/config/colors';
@ -27,7 +27,7 @@ export const generateTypographyStyles = ({ family, size }: Typography): string =
  h6 { font-size: ${size.heading / 3.5}px; line-height: ${size.heading / 3.5}px; }
 `;

-export const generateThemeStyles = ({ text, background, primary }: Theme): string => `
+export const generateThemeStyles = ({ text, background, primary }: ThemeConfig): string => `
  color: ${text};
  background-color: ${background};
  --primary-color: ${primary};
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "reactive-resume",
-  "version": "3.6.7",
+  "version": "3.6.8",
  "private": true,
  "scripts": {
    "dev": "env-cmd --silent turbo run dev",
@ -17,12 +17,12 @@
  ],
  "dependencies": {
    "env-cmd": "^10.1.0",
-    "turbo": "^1.5.5"
+    "turbo": "^1.5.6"
  },
  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.39.0",
-    "@typescript-eslint/parser": "^5.39.0",
-    "eslint": "^8.24.0",
+    "@typescript-eslint/eslint-plugin": "^5.40.0",
+    "@typescript-eslint/parser": "^5.40.0",
+    "eslint": "^8.25.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-simple-import-sort": "^8.0.0",
    "prettier": "^2.7.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/schema/package.json
+++ b/schema/package.json
@ -9,7 +9,7 @@
    "build": "tsc"
  },
  "devDependencies": {
-    "eslint": "^8.24.0",
+    "eslint": "^8.25.0",
    "typescript": "^4.8.4"
  }
 }
--- a/schema/src/metadata.ts
+++ b/schema/src/metadata.ts
@ -3,7 +3,11 @@ export type CustomCSS = {
  visible: boolean;
 };

-export type Theme = {
+export type PageConfig = {
+  format: 'A4' | 'Letter';
+};
+
+export type ThemeConfig = {
  text: string;
  background: string;
  primary: string;
@ -27,6 +31,7 @@ export type Metadata = {
  date: DateConfig;
  layout: string[][][]; // page.column.section
  template: string;
-  theme: Theme;
+  theme: ThemeConfig;
+  page?: PageConfig;
  typography: Typography;
 };
--- a/server/package.json
+++ b/server/package.json
@ -8,7 +8,7 @@
    "start": "node dist/main"
  },
  "dependencies": {
-    "@aws-sdk/client-s3": "^3.186.0",
+    "@aws-sdk/client-s3": "^3.188.0",
    "@nestjs/axios": "^0.1.0",
    "@nestjs/common": "^9.1.4",
    "@nestjs/config": "^2.2.0",
@ -23,14 +23,14 @@
    "@nestjs/typeorm": "^9.0.1",
    "@types/passport": "^1.0.11",
    "bcryptjs": "^2.4.3",
-    "cache-manager": "^5.0.0",
+    "cache-manager": "^5.0.1",
    "class-transformer": "^0.5.1",
    "class-validator": "^0.13.2",
    "cookie-parser": "^1.4.6",
    "csvtojson": "^2.0.10",
    "dayjs": "^1.11.5",
    "google-auth-library": "^8.5.2",
-    "joi": "^17.6.2",
+    "joi": "^17.6.3",
    "lodash": "^4.17.21",
    "multer": "^1.4.4",
    "nanoid": "^3.3.4",
@ -41,7 +41,7 @@
    "passport-local": "^1.0.0",
    "pdf-lib": "^1.17.1",
    "pg": "^8.8.0",
-    "playwright-chromium": "^1.26.1",
+    "playwright-chromium": "^1.27.1",
    "reflect-metadata": "^0.1.13",
    "rimraf": "^3.0.2",
    "rxjs": "^7.5.7",
@ -57,7 +57,7 @@
    "@types/express": "^4.17.14",
    "@types/lodash": "^4.14.186",
    "@types/multer": "^1.4.7",
-    "@types/node": "^18.8.3",
+    "@types/node": "^18.8.5",
    "@types/nodemailer": "^6.4.6",
    "@types/passport-jwt": "^3.0.7",
    "@types/passport-local": "^1.0.34",
--- a/server/src/integrations/integrations.service.ts
+++ b/server/src/integrations/integrations.service.ts
@ -932,6 +932,9 @@ export class IntegrationsService {
              body: get(jsonResume, 'metadata.fontSize'),
            },
          },
+          page: {
+            format: 'A4',
+          },
          theme: {
            background: get(jsonResume, 'metadata.colors.background'),
            primary: get(jsonResume, 'metadata.colors.primary'),
--- a/server/src/printer/printer.service.ts
+++ b/server/src/printer/printer.service.ts
@ -1,6 +1,7 @@
 import { Injectable, OnModuleDestroy, OnModuleInit } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { SchedulerRegistry } from '@nestjs/schedule';
+import { PageConfig } from '@reactive-resume/schema';
 import { mkdir, unlink, writeFile } from 'fs/promises';
 import { nanoid } from 'nanoid';
 import { join } from 'path';
@ -35,13 +36,18 @@ export class PrinterService implements OnModuleInit, OnModuleDestroy {
    await page.goto(`${url}/${username}/${slug}/printer?secretKey=${secretKey}`);
    await page.waitForSelector('html.wf-active');

-    const resumePages = await page.$$eval('[data-page]', (pages) => {
-      return pages.map((page, index) => ({
+    const pageFormat: PageConfig['format'] = await page.$$eval(
+      '[data-page]',
+      (pages) => pages[0].getAttribute('data-format') as PageConfig['format']
+    );
+
+    const resumePages = await page.$$eval('[data-page]', (pages) =>
+      pages.map((page, index) => ({
        pageNumber: index + 1,
        innerHTML: page.innerHTML,
        height: page.clientHeight,
-      }));
-    });
+      }))
+    );

    const pdf = await PDFDocument.create();
    const directory = join(__dirname, '..', 'assets/exports');
@ -52,9 +58,9 @@ export class PrinterService implements OnModuleInit, OnModuleDestroy {
      await page.evaluate((page) => (document.body.innerHTML = page.innerHTML), resumePages[index]);

      const buffer = await page.pdf({
-        width: '210mm',
        printBackground: true,
        height: resumePages[index].height,
+        width: pageFormat === 'A4' ? '210mm' : '216mm',
      });

      const pageDoc = await PDFDocument.load(buffer);
--- a/server/src/resume/data/defaultState.ts
+++ b/server/src/resume/data/defaultState.ts
@ -138,6 +138,9 @@ const defaultState: Partial<Resume> = {
    date: {
      format: 'MMMM DD, YYYY',
    },
+    page: {
+      format: 'A4',
+    },
    layout: [
      [
        ['work', 'education', 'projects', 'volunteer', 'references'],