updates to dependencies, merging to production

src/components/builder/center/Artboard.js

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from '../../../contexts/ResumeContext';
@@ -13,14 +13,9 @@ import styles from './Artboard.module.css';
 const Artboard = () => {
   const state = useSelector();
   const { t } = useTranslation();
-  const [width, setWidth] = useState(0);
   const { id, name, metadata } = state;
   const { template } = metadata;
 
-  useEffect(() => {
-    setWidth(typeof window !== `undefined` && window && window.innerWidth);
-  }, [typeof window !== `undefined` && window && window.innerWidth]);
-
   return (
     <>
       <Helmet>
@@ -30,14 +25,7 @@ const Artboard = () => {
         <link rel="canonical" href={`https://rxresu.me/app/builder/${id}`} />
       </Helmet>
 
-      <div
-        id="page"
-        className={styles.container}
-        style={{
-          transform: `scale(${width / 1680})`,
-          transformOrigin: `${width / 1680 > 1.0 ? `top left` : ``}`,
-        }}
-      >
+      <div id="page" className={styles.container}>
         {template === 'onyx' && <Onyx data={state} />}
         {template === 'pikachu' && <Pikachu data={state} />}
         {template === 'gengar' && <Gengar data={state} />}

src/components/builder/center/Artboard.module.css

@@ -1,10 +1,11 @@
 @media screen {
   .container {
     width: 210mm;
-    min-height: 297mm;
+    height: 297mm;
     overflow: scroll;
+    margin: 2rem auto;
     box-shadow: var(--shadow);
 
-    @apply my-16 bg-white rounded;
+    @apply bg-white rounded;
   }
 }

src/pages/app/builder.module.css

@@ -10,7 +10,9 @@
 }
 
 .center {
-  @apply relative z-0 h-screen overflow-scroll;
+  width: calc(100vw / 2);
+
+  @apply relative z-0 h-screen overflow-scroll flex flex-col justify-items-center;
 }
 
 .right {

src/pages/r/view.js

@@ -52,6 +52,7 @@ const ResumeViewer = ({ id }) => {
         </Helmet>
 
         <div
+          id="page"
           className={styles.page}
           style={{ backgroundColor: resume.metadata.colors.background }}
         >

src/templates/Castform.js

@@ -12,7 +12,7 @@ import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';
 import WorkA from './blocks/Work/WorkA';
-import BirthDateA from './blocks/BirthDate/BirthDateA'
+import BirthDateA from './blocks/BirthDate/BirthDateA';
 
 const Blocks = {
   objective: ObjectiveA,
@@ -55,7 +55,6 @@ const Castform = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingD }}>
       <div
-        id="page"
         className="rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/Celebi.js

@@ -14,7 +14,7 @@ import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';
 import WorkA from './blocks/Work/WorkA';
-import BirthDateA from './blocks/BirthDate/BirthDateA'
+import BirthDateA from './blocks/BirthDate/BirthDateA';
 
 const Blocks = {
   objective: ObjectiveA,
@@ -86,7 +86,6 @@ const Celebi = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingE }}>
       <div
-        id="page"
         className="relative rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/Gengar.js

@@ -59,7 +59,6 @@ const Gengar = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingC }}>
       <div
-        id="page"
         className="rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/Glalie.js

@@ -13,7 +13,7 @@ import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';
 import WorkA from './blocks/Work/WorkA';
-import BirthDateA from './blocks/BirthDate/BirthDateA'
+import BirthDateA from './blocks/BirthDate/BirthDateA';
 
 const Blocks = {
   objective: ObjectiveA,
@@ -54,7 +54,6 @@ const Glalie = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingB }}>
       <div
-        id="page"
         className="rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/Onyx.js

@@ -12,7 +12,7 @@ import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';
 import WorkA from './blocks/Work/WorkA';
-import BirthDateB from './blocks/BirthDate/BirthDateB'
+import BirthDateB from './blocks/BirthDate/BirthDateB';
 
 const Blocks = {
   objective: ObjectiveA,
@@ -33,7 +33,6 @@ const Onyx = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingA }}>
       <div
-        id="page"
         className="p-8 rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/Pikachu.js

@@ -12,7 +12,7 @@ import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';
 import WorkA from './blocks/Work/WorkA';
-import BirthDateB from './blocks/BirthDate/BirthDateB'
+import BirthDateB from './blocks/BirthDate/BirthDateB';
 
 const Blocks = {
   work: WorkA,
@@ -32,7 +32,6 @@ const Pikachu = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: HeadingB }}>
       <div
-        id="page"
         className="p-8 rounded"
         style={{
           fontFamily: data.metadata.font,

src/templates/blocks/BirthDate/BirthDateA.js

@@ -14,13 +14,19 @@ const BirthDateA = () => {
           {t('builder.profile.birthDate')}
         </h6>
         <div>
-          <span>{formatDate({ date: data.profile.birthDate, language: data.metadata.language, includeDay: true })}</span>
+          <span>
+            {formatDate({
+              date: data.profile.birthDate,
+              language: data.metadata.language,
+              includeDay: true,
+            })}
+          </span>
         </div>
       </div>
     );
   }
 
   return null;
-}
+};
 
-export default memo(BirthDateA);
+export default memo(BirthDateA);

src/templates/blocks/BirthDate/BirthDateB.js

@@ -1,12 +1,12 @@
 import React, { memo, useContext } from 'react';
-import PageContext from '../../../contexts/PageContext';
 import { get } from 'lodash';
+import PageContext from '../../../contexts/PageContext';
 import Icons from '../Icons';
 import { formatDate } from '../../../utils';
 
 const BirthDateB = () => {
   const { data } = useContext(PageContext);
-  const Icon = get(Icons, "birthdaycake");
+  const Icon = get(Icons, 'birthdaycake');
 
   if (data.profile.birthDate) {
     return (
@@ -16,12 +16,18 @@ const BirthDateB = () => {
           className="mr-2"
           style={{ color: data.metadata.colors.primary }}
         />
-        <span className="font-medium break-all">{formatDate({ date: data.profile.birthDate, language: data.metadata.language, includeDay: true })}</span>
+        <span className="font-medium break-all">
+          {formatDate({
+            date: data.profile.birthDate,
+            language: data.metadata.language,
+            includeDay: true,
+          })}
+        </span>
       </div>
     );
   }
 
   return null;
-}
+};
 
-export default memo(BirthDateB);
+export default memo(BirthDateB);

src/templates/blocks/BirthDate/BirthDateC.js

@@ -1,12 +1,12 @@
 import React, { memo, useContext } from 'react';
-import PageContext from '../../../contexts/PageContext';
 import { get } from 'lodash';
+import PageContext from '../../../contexts/PageContext';
 import Icons from '../Icons';
 import { formatDate } from '../../../utils';
 
 const BirthDateC = () => {
   const { data } = useContext(PageContext);
-  const Icon = get(Icons, "birthdaycake");
+  const Icon = get(Icons, 'birthdaycake');
 
   if (data.profile.birthDate) {
     return (
@@ -16,12 +16,18 @@ const BirthDateC = () => {
           className="mr-2"
           style={{ color: data.metadata.colors.background }}
         />
-        <span className="font-medium break-all">{formatDate({ date: data.profile.birthDate, language: data.metadata.language, includeDay: true })}</span>
+        <span className="font-medium break-all">
+          {formatDate({
+            date: data.profile.birthDate,
+            language: data.metadata.language,
+            includeDay: true,
+          })}
+        </span>
       </div>
     );
   }
 
   return null;
-}
+};
 
-export default memo(BirthDateC);
+export default memo(BirthDateC);

src/templates/blocks/Icons.js

@@ -9,7 +9,7 @@ import {
   FaStackOverflow,
   FaBehance,
   FaGitlab,
-  FaBirthdayCake
+  FaBirthdayCake,
 } from 'react-icons/fa';
 import { MdPhone, MdEmail } from 'react-icons/md';
 
@@ -26,7 +26,7 @@ const Icons = {
   stackoverflow: FaStackOverflow,
   behance: FaBehance,
   gitlab: FaGitlab,
-  birthdaycake: FaBirthdayCake
+  birthdaycake: FaBirthdayCake,
 };
 
 export default Icons;

src/templates/blocks/Projects/ProjectsA.js

@@ -18,22 +18,25 @@ const ProjectItem = ({ item, language }) => {
           )}
         </div>
         {item.date && (
-            <h6 className="text-xs font-medium text-right">
-              (
-              {formatDateRange(
-                {
-                  startDate: item.date,
-                  endDate: item.endDate,
-                  language,
-                },
-                t,
-              )}
-              )
-            </h6>
-          )}
+          <h6 className="text-xs font-medium text-right">
+            (
+            {formatDateRange(
+              {
+                startDate: item.date,
+                endDate: item.endDate,
+                language,
+              },
+              t,
+            )}
+            )
+          </h6>
+        )}
       </div>
       {item.summary && (
-        <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
+        <ReactMarkdown
+          className="markdown mt-2 text-sm"
+          source={item.summary}
+        />
       )}
     </div>
   );

src/utils/index.js

@@ -21,8 +21,7 @@ export const isFileImage = (file) => {
 };
 
 export const formatDate = ({ date, language = 'en', includeDay = false }) => {
-  const monthYearTemplate = 'MMMM YYYY';
-  const template = includeDay ? 'DD ' + monthYearTemplate : monthYearTemplate;
+  const template = includeDay ? 'DD MMMM YYYY' : 'MMMM YYYY';
 
   return dayjs(date).locale(language.substr(0, 2)).format(template);
 };