release: v3.6.9

AmruthPillai · Nov 13, 2022 · 8026241 · 8026241
1 parent 89b3539
commit 8026241
Show file tree

Hide file tree

Showing 59 changed files with 1,574 additions and 1,501 deletions.
diff --git a/client/Dockerfile b/client/Dockerfile
@@ -46,6 +46,6 @@ EXPOSE 3000
 ENV PORT 3000
 
 HEALTHCHECK --interval=30s --timeout=20s --retries=3 --start-period=15s \
-    CMD curl -fSs 127.0.0.1:3000 || exit 1
+    CMD curl -fSs localhost:3000 || exit 1
 
 CMD [ "pnpm", "run", "start", "--filter", "client" ]
diff --git a/client/components/build/Center/Page.tsx b/client/components/build/Center/Page.tsx
@@ -26,8 +26,8 @@ const Page: React.FC<Props> = ({ page, showPageNumbers = false }) => {
   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 pageConfig: PageConfig = get(resume, 'metadata.page', {} as PageConfig);
 
   const themeCSS = useMemo(() => !isEmpty(theme) && generateThemeStyles(theme), [theme]);
   const typographyCSS = useMemo(() => !isEmpty(typography) && generateTypographyStyles(typography), [typography]);

diff --git a/client/components/build/LeftSidebar/LeftSidebar.tsx b/client/components/build/LeftSidebar/LeftSidebar.tsx
@@ -111,9 +111,7 @@ const LeftSidebar = () => {
         <nav className="overflow-y-scroll">
           <div>
             <Link href="/dashboard">
-              <a className="inline-flex">
-                <Logo size={40} />
-              </a>
+              <Logo size={40} />
             </Link>
             <Divider />
           </div>
@@ -132,7 +130,7 @@ const LeftSidebar = () => {
 
             {customSections.map(({ id }) => (
               <Tooltip key={id} title={get(sections, `${id}.name`, '') as string} placement="right" arrow>
-                <IconButton onClick={() => handleClick(id)}>
+                <IconButton onClick={() => id && handleClick(id)}>
                   <Star />
                 </IconButton>
               </Tooltip>

diff --git a/client/components/build/LeftSidebar/sections/Section.tsx b/client/components/build/LeftSidebar/sections/Section.tsx
@@ -79,7 +79,7 @@ const Section: React.FC<Props> = ({
       visible: true,
       columns: 2,
       items: [],
-      isDuplicated: true
+      isDuplicated: true,
     };
 
     dispatch(duplicateSection({ value: newSection, type }));

diff --git a/client/components/build/RightSidebar/sections/CustomCSS.tsx b/client/components/build/RightSidebar/sections/CustomCSS.tsx
@@ -17,7 +17,9 @@ const CustomCSS = () => {
 
   const dispatch = useAppDispatch();
 
-  const customCSS: CustomCSSType = useAppSelector((state) => get(state.resume.present, 'metadata.css', {}));
+  const customCSS: CustomCSSType = useAppSelector((state) =>
+    get(state.resume.present, 'metadata.css', {} as CustomCSSType)
+  );
 
   const handleChange = (value: string | undefined) => {
     dispatch(setResumeState({ path: 'metadata.css.value', value }));

diff --git a/client/components/build/RightSidebar/sections/Settings.tsx b/client/components/build/RightSidebar/sections/Settings.tsx
@@ -47,8 +47,8 @@ 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 pageConfig: PageConfig | undefined = useMemo(() => get(resume, 'metadata.page'), [resume]);
 
   const isDarkMode = useMemo(() => theme === 'dark', [theme]);
   const exampleDateString = useMemo(() => `Eg. ${dayjs().utc().format(dateConfig.format)}`, [dateConfig.format]);
@@ -98,7 +98,7 @@ const Settings = () => {
     <>
       <Heading path="metadata.settings" name={t<string>('builder.rightSidebar.sections.settings.heading')} />
 
-      <List sx={{ padding: 0 }}>
+      <List disablePadding>
         {/* Global Settings */}
         <>
           <ListSubheader disableSticky className="rounded">
@@ -212,7 +212,7 @@ const Settings = () => {
             {t<string>('builder.rightSidebar.sections.settings.resume.heading')}
           </ListSubheader>
 
-          <ListItem>
+          <ListItem disableGutters>
             <ListItemButton onClick={handleLoadSampleData}>
               <ListItemIcon>
                 <Anchor />
@@ -224,7 +224,7 @@ const Settings = () => {
             </ListItemButton>
           </ListItem>
 
-          <ListItem>
+          <ListItem disableGutters>
             <ListItemButton onClick={handleResetResume}>
               <ListItemIcon>
                 <DeleteForever />

diff --git a/client/components/build/RightSidebar/sections/Templates.tsx b/client/components/build/RightSidebar/sections/Templates.tsx
@@ -31,7 +31,14 @@ const Templates = () => {
           <div key={template.id} className={styles.template}>
             <div className={clsx(styles.preview, { [styles.selected]: template.id === currentTemplate })}>
               <ButtonBase onClick={() => handleChange(template)}>
-                <Image src={template.preview} alt={template.name} className="rounded-sm" layout="fill" priority />
+                <Image
+                  fill
+                  priority
+                  alt={template.name}
+                  src={template.preview}
+                  className="rounded-sm"
+                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                />
               </ButtonBase>
             </div>
 

diff --git a/client/components/dashboard/ResumeCard.tsx b/client/components/dashboard/ResumeCard.tsx
@@ -16,9 +16,7 @@ type Props = {
 const ResumeCard: React.FC<Props> = ({ modal, icon: Icon, title, subtitle }) => {
   const dispatch = useAppDispatch();
 
-  const handleClick = () => {
-    dispatch(setModalState({ modal, state: { open: true } }));
-  };
+  const handleClick = () => dispatch(setModalState({ modal, state: { open: true } }));
 
   return (
     <section className={styles.resume}>

diff --git a/client/components/dashboard/ResumePreview.tsx b/client/components/dashboard/ResumePreview.tsx
@@ -115,9 +115,7 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
         }}
       >
         <ButtonBase className={styles.preview}>
-          {resume.image ? (
-            <Image src={resume.image} alt={resume.name} objectFit="cover" layout="fill" priority />
-          ) : null}
+          {resume.image ? <Image src={resume.image} alt={resume.name} priority width={400} height={0} /> : null}
         </ButtonBase>
       </Link>
 

diff --git a/client/components/shared/Avatar.tsx b/client/components/shared/Avatar.tsx
@@ -47,9 +47,9 @@ const Avatar: React.FC<Props> = ({ size = 64 }) => {
         <Image
           width={size}
           height={size}
-          alt={user?.name}
           className={styles.avatar}
           src={getGravatarUrl(email, size)}
+          alt={user?.name ?? 'User Avatar'}
         />
       </IconButton>
 

diff --git a/client/components/shared/Logo.tsx b/client/components/shared/Logo.tsx
@@ -4,8 +4,8 @@ type Props = {
   size?: 256 | 64 | 48 | 40 | 32;
 };
 
-const Logo: React.FC<Props> = ({ size = 64 }) => {
-  return <Image alt="Reactive Resume" src="/images/logos/logo.svg" className="rounded" width={size} height={size} />;
-};
+const Logo: React.FC<Props> = ({ size = 64 }) => (
+  <Image alt="Reactive Resume" src="/images/logos/logo.svg" className="rounded" width={size} height={size} priority />
+);
 
 export default Logo;
diff --git a/client/config/sections.tsx b/client/config/sections.tsx
@@ -75,54 +75,121 @@ export const left: SidebarSection[] = [
   {
     id: 'education',
     icon: <School />,
-    component: <Section type={"education"} path="sections.education" titleKey="institution" subtitleKey="area" isEditable isHideable />,
+    component: (
+      <Section
+        type={'education'}
+        path="sections.education"
+        titleKey="institution"
+        subtitleKey="area"
+        isEditable
+        isHideable
+      />
+    ),
   },
   {
     id: 'awards',
     icon: <EmojiEvents />,
-    component: <Section type={"awards"} path="sections.awards" titleKey="title" subtitleKey="awarder" isEditable isHideable />,
+    component: (
+      <Section type={'awards'} path="sections.awards" titleKey="title" subtitleKey="awarder" isEditable isHideable />
+    ),
   },
   {
     id: 'certifications',
     icon: <CardGiftcard />,
-    component: <Section type={"certifications"} path="sections.certifications" titleKey="name" subtitleKey="issuer" isEditable isHideable />,
+    component: (
+      <Section
+        type={'certifications'}
+        path="sections.certifications"
+        titleKey="name"
+        subtitleKey="issuer"
+        isEditable
+        isHideable
+      />
+    ),
   },
   {
     id: 'publications',
     icon: <MenuBook />,
-    component: <Section type={"publications"} path="sections.publications" titleKey="name" subtitleKey="publisher" isEditable isHideable />,
+    component: (
+      <Section
+        type={'publications'}
+        path="sections.publications"
+        titleKey="name"
+        subtitleKey="publisher"
+        isEditable
+        isHideable
+      />
+    ),
   },
   {
     id: 'skills',
     icon: <Architecture />,
-    component: <Section type={"skills"} path="sections.skills" titleKey="name" subtitleKey="level" isEditable isHideable />,
+    component: (
+      <Section type={'skills'} path="sections.skills" titleKey="name" subtitleKey="level" isEditable isHideable />
+    ),
   },
   {
     id: 'languages',
     icon: <Language />,
-    component: <Section type={"languages"} path="sections.languages" titleKey="name" subtitleKey="level" isEditable isHideable />,
+    component: (
+      <Section type={'languages'} path="sections.languages" titleKey="name" subtitleKey="level" isEditable isHideable />
+    ),
   },
   {
     id: 'interests',
     icon: <Sailing />,
-    component: <Section type={"interests"} path="sections.interests" titleKey="name" subtitleKey="keywords" isEditable isHideable />,
+    component: (
+      <Section
+        type={'interests'}
+        path="sections.interests"
+        titleKey="name"
+        subtitleKey="keywords"
+        isEditable
+        isHideable
+      />
+    ),
   },
   {
     id: 'volunteer',
     icon: <VolunteerActivism />,
     component: (
-      <Section type={"volunteer"} path="sections.volunteer" titleKey="organization" subtitleKey="position" isEditable isHideable />
+      <Section
+        type={'volunteer'}
+        path="sections.volunteer"
+        titleKey="organization"
+        subtitleKey="position"
+        isEditable
+        isHideable
+      />
     ),
   },
   {
     id: 'projects',
     icon: <Coffee />,
-    component: <Section type={"projects"} path="sections.projects" titleKey="name" subtitleKey="description" isEditable isHideable />,
+    component: (
+      <Section
+        type={'projects'}
+        path="sections.projects"
+        titleKey="name"
+        subtitleKey="description"
+        isEditable
+        isHideable
+      />
+    ),
   },
   {
     id: 'references',
     icon: <Groups />,
-    component: <Section type={"references"} path="sections.references" titleKey="name" subtitleKey="relationship" isEditable isHideable />,
+    component: (
+      <Section
+        type={'references'}
+        path="sections.references"
+        titleKey="name"
+        subtitleKey="relationship"
+        isEditable
+        isHideable
+      />
+    ),
   },
 ];
 
@@ -174,10 +241,7 @@ export const right: SidebarSection[] = [
   },
 ];
 
-export const getSectionsByType = (
-  sections: Record<string, SectionRecord>,
-  type: SectionType
-): Array<Required<SectionRecord>> => {
+export const getSectionsByType = (sections: Record<string, SectionRecord>, type: SectionType): SectionRecord[] => {
   if (isEmpty(sections)) return [];
 
   return Object.entries(sections).reduce((acc, [id, section]) => {
@@ -186,10 +250,10 @@ export const getSectionsByType = (
     }
 
     return acc;
-  }, [] as Array<Required<SectionRecord>>);
+  }, [] as SectionRecord[]);
 };
 
-export const getCustomSections = (sections: Record<string, SectionRecord>): Array<Required<SectionRecord>> => {
+export const getCustomSections = (sections: Record<string, SectionRecord>): SectionRecord[] => {
   if (isEmpty(sections)) return [];
 
   return Object.entries(sections).reduce((acc, [id, section]) => {
@@ -198,7 +262,7 @@ export const getCustomSections = (sections: Record<string, SectionRecord>): Arra
     }
 
     return acc;
-  }, [] as Array<Required<SectionRecord>>);
+  }, [] as SectionRecord[]);
 };
 
 const sections = [...left, ...right];

diff --git a/client/modals/builder/sections/CustomModal.tsx b/client/modals/builder/sections/CustomModal.tsx
@@ -60,13 +60,14 @@ const CustomModal: React.FC = () => {
 
   const dispatch = useAppDispatch();
 
-  const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`));
   const { open: isOpen, payload } = useAppSelector((state) => state.modal['builder.sections.custom']);
 
-  const path: string = get(payload, 'path', '');
+  const path: string = get(payload, 'path', 'sections.custom');
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
+  const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`));
+
   const addText = useMemo(() => t<string>('builder.common.actions.add', { token: heading }), [t, heading]);
   const editText = useMemo(() => t<string>('builder.common.actions.edit', { token: heading }), [t, heading]);
 
@@ -260,9 +261,9 @@ const CustomModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t<string>('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
+              label={t<string>('builder.common.form.summary.label')}
               helperText={fieldState.error?.message || <MarkdownSupported />}
               {...field}
             />

diff --git a/client/modals/builder/sections/WorkModal.tsx b/client/modals/builder/sections/WorkModal.tsx
@@ -48,12 +48,12 @@ const WorkModal: React.FC = () => {
 
   const dispatch = useAppDispatch();
 
-  const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`));
-
   const { open: isOpen, payload } = useAppSelector((state) => state.modal['builder.sections.work']);
   const path: string = get(payload, 'path', 'sections.work');
   const item: FormData = get(payload, 'item', null);
 
+  const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`));
+
   const isEditMode = useMemo(() => !!item, [item]);
 
   const addText = useMemo(() => t<string>('builder.common.actions.add', { token: heading }), [t, heading]);