chore(release): 3.3.3

fix #821

.env.example

@@ -4,13 +4,15 @@ PUBLIC_URL=http://localhost
 PUBLIC_SERVER_URL=http://localhost/api
 PUBLIC_GOOGLE_CLIENT_ID=
 
+# Database
+POSTGRES_DB=postgres
+POSTGRES_USER=postgres
+POSTGRES_PASSWORD=postgres
+
 # Server
 SECRET_KEY=
 POSTGRES_HOST=postgres
 POSTGRES_PORT=5432
-POSTGRES_USER=postgres
-POSTGRES_PASSWORD=postgres
-POSTGRES_DATABASE=postgres
 POSTGRES_SSL_CERT=
 JWT_SECRET=
 JWT_EXPIRY_TIME=604800
@@ -21,6 +23,12 @@ SENDGRID_API_KEY=
 SENDGRID_FORGOT_PASSWORD_TEMPLATE_ID=
 SENDGRID_FROM_NAME=
 SENDGRID_FROM_EMAIL=
+STORAGE_BUCKET=
+STORAGE_REGION=
+STORAGE_ENDPOINT=
+STORAGE_URL_PREFIX=
+STORAGE_ACCESS_KEY=
+STORAGE_SECRET_KEY=
 
 # Flags
 PUBLIC_FLAG_DISABLE_SIGNUPS=false

.github/workflows/docker-build-push.yml

@@ -17,6 +17,12 @@ jobs:
         name: Get Version
         run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
 
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1.2.0
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1.6.0
+
       - name: Login to Docker
         uses: docker/login-action@v1.14.1
         with:
@@ -29,6 +35,7 @@ jobs:
           context: .
           push: true
           file: client/Dockerfile
+          platforms: linux/amd64,linux/arm64
           tags: |
             amruthpillai/reactive-resume:client-latest
             amruthpillai/reactive-resume:client-${{ steps.version.outputs.tag }}
@@ -45,6 +52,12 @@ jobs:
         name: Get Version
         run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
 
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1.2.0
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1.6.0
+
       - name: Login to Docker
         uses: docker/login-action@v1.14.1
         with:
@@ -57,6 +70,7 @@ jobs:
           context: .
           push: true
           file: server/Dockerfile
+          platforms: linux/amd64,linux/arm64
           tags: |
             amruthpillai/reactive-resume:server-latest
             amruthpillai/reactive-resume:server-${{ steps.version.outputs.tag }}
@@ -73,6 +87,12 @@ jobs:
         name: Get Version
         run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
 
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1.2.0
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1.6.0
+
       - name: Login to GitHub Container Registry
         uses: docker/login-action@v1.14.1
         with:
@@ -86,6 +106,7 @@ jobs:
           context: .
           push: true
           file: client/Dockerfile
+          platforms: linux/amd64,linux/arm64
           tags: |
             ghcr.io/amruthpillai/reactive-resume:client-latest
             ghcr.io/amruthpillai/reactive-resume:client-${{ steps.version.outputs.tag }}
@@ -102,6 +123,12 @@ jobs:
         name: Get Version
         run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
 
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1.2.0
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1.6.0
+
       - name: Login to GitHub Container Registry
         uses: docker/login-action@v1.14.1
         with:
@@ -115,6 +142,7 @@ jobs:
           context: .
           push: true
           file: server/Dockerfile
+          platforms: linux/amd64,linux/arm64
           tags: |
             ghcr.io/amruthpillai/reactive-resume:server-latest
             ghcr.io/amruthpillai/reactive-resume:server-${{ steps.version.outputs.tag }}

CHANGELOG.md

@@ -2,6 +2,43 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [3.3.3](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.3.2...v3.3.3) (2022-04-09)
+
+
+### Features
+
+* **profile:** add XING profile icon ([1e59f73](https://github.com/AmruthPillai/Reactive-Resume/commit/1e59f73f79a91d0264c0d2108906ee89d4eb27f8)), closes [#821](https://github.com/AmruthPillai/Reactive-Resume/issues/821)
+* **s3:** implement non-ephemeral storage through S3/DO Spaces ([feb911a](https://github.com/AmruthPillai/Reactive-Resume/commit/feb911aea06bacf58ea933d2803a2a89fe36e57b))
+
+### [3.3.2](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.3.1...v3.3.2) (2022-04-08)
+
+
+### Bug Fixes
+
+* **types/react:** downgrade to <18 ([fc77b54](https://github.com/AmruthPillai/Reactive-Resume/commit/fc77b548d8d61530b2d158ff83f088bed12d5080))
+
+### [3.3.1](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.3.0...v3.3.1) (2022-04-08)
+
+## [3.3.0](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.2.11...v3.3.0) (2022-04-08)
+
+
+### Features
+
+* **upgrade:** changes to code to support new template ([1df7810](https://github.com/AmruthPillai/Reactive-Resume/commit/1df78100ca0667ce9b7834cf2c25384eb21c67c2))
+
+### What's Changed
+* New Crowdin updates by @AmruthPillai in https://github.com/AmruthPillai/Reactive-Resume/pull/791
+* Bump org.jetbrains.kotlin.android from 1.6.10 to 1.6.20 in /app by @dependabot in https://github.com/AmruthPillai/Reactive-Resume/pull/812
+* New Crowdin updates by @AmruthPillai in https://github.com/AmruthPillai/Reactive-Resume/pull/806
+* A new template - Leafish by @klejejs in https://github.com/AmruthPillai/Reactive-Resume/pull/811
+* Automatic multi-platform Docker image build by @schklom in https://github.com/AmruthPillai/Reactive-Resume/pull/817
+
+### New Contributors
+* @klejejs made their first contribution in https://github.com/AmruthPillai/Reactive-Resume/pull/811
+* @schklom made their first contribution in https://github.com/AmruthPillai/Reactive-Resume/pull/817
+
+### [3.2.11](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.2.10...v3.2.11) (2022-03-28)
+
 ### [3.2.10](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.2.9...v3.2.10) (2022-03-24)
 
 

SECURITY.md

@@ -0,0 +1,13 @@
+# Security Policy
+
+## Supported Versions
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 3.x.x   | :white_check_mark: |
+| 2.x.x   | :x:                |
+| 1.x.x   | :x:                |
+
+## Reporting a Vulnerability
+
+Create an issue on GitHub or send me an email through the contact form on my website at https://amruthpillai.com/

app/build.gradle

@@ -1,7 +1,7 @@
 plugins {
     id 'com.android.application' version '7.1.2' apply false
     id 'com.android.library' version '7.1.2' apply false
-    id 'org.jetbrains.kotlin.android' version '1.6.10' apply false
+    id 'org.jetbrains.kotlin.android' version '1.6.20' apply false
 }
 
 task clean(type: Delete) {

client/components/build/Center/ArtboardController.tsx

@@ -52,7 +52,7 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
     const url = getResumeUrl(resume, { withHost: true });
     await navigator.clipboard.writeText(url);
 
-    toast.success(t('common.toast.success.resume-link-copied'));
+    toast.success(t<string>('common.toast.success.resume-link-copied'));
   };
 
   const handleExportPDF = async () => {
@@ -75,19 +75,19 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
       })}
     >
       <div className={styles.controller}>
-        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.zoom-in') as string}>
+        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.zoom-in')}>
           <ButtonBase onClick={() => zoomIn(0.25)}>
             <ZoomIn fontSize="medium" />
           </ButtonBase>
         </Tooltip>
 
-        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.zoom-out') as string}>
+        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.zoom-out')}>
           <ButtonBase onClick={() => zoomOut(0.25)}>
             <ZoomOut fontSize="medium" />
           </ButtonBase>
         </Tooltip>
 
-        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.center-artboard') as string}>
+        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.center-artboard')}>
           <ButtonBase onClick={() => centerView(0.95)}>
             <FilterCenterFocus fontSize="medium" />
           </ButtonBase>
@@ -98,7 +98,7 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
         {isDesktop && (
           <>
             {pages.length > 1 && (
-              <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-orientation') as string}>
+              <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-orientation')}>
                 <ButtonBase onClick={handleTogglePageOrientation}>
                   {orientation === 'vertical' ? (
                     <AlignHorizontalCenter fontSize="medium" />
@@ -109,13 +109,13 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
               </Tooltip>
             )}
 
-            <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-page-break-line') as string}>
+            <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-page-break-line')}>
               <ButtonBase onClick={handleTogglePageBreakLine}>
                 <InsertPageBreak fontSize="medium" />
               </ButtonBase>
             </Tooltip>
 
-            <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-sidebars') as string}>
+            <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-sidebars')}>
               <ButtonBase onClick={handleToggleSidebar}>
                 <ViewSidebar fontSize="medium" />
               </ButtonBase>
@@ -125,13 +125,13 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
           </>
         )}
 
-        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.copy-link') as string}>
+        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.copy-link')}>
           <ButtonBase onClick={handleCopyLink}>
             <Link fontSize="medium" />
           </ButtonBase>
         </Tooltip>
 
-        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.export-pdf') as string}>
+        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.export-pdf')}>
           <ButtonBase onClick={handleExportPDF} disabled={isLoading}>
             <Download fontSize="medium" />
           </ButtonBase>

client/components/build/Center/Header.tsx

@@ -133,7 +133,7 @@ const Header = () => {
     const url = getResumeUrl(resume, { withHost: true });
     await navigator.clipboard.writeText(url);
 
-    toast.success(t('common.toast.success.resume-link-copied'));
+    toast.success(t<string>('common.toast.success.resume-link-copied'));
   };
 
   return (
@@ -166,14 +166,14 @@ const Header = () => {
               <ListItemIcon>
                 <DriveFileRenameOutline className="scale-90" />
               </ListItemIcon>
-              <ListItemText>{t('builder.header.menu.rename')}</ListItemText>
+              <ListItemText>{t<string>('builder.header.menu.rename')}</ListItemText>
             </MenuItem>
 
             <MenuItem onClick={handleDuplicate}>
               <ListItemIcon>
                 <CopyAll className="scale-90" />
               </ListItemIcon>
-              <ListItemText>{t('builder.header.menu.duplicate')}</ListItemText>
+              <ListItemText>{t<string>('builder.header.menu.duplicate')}</ListItemText>
             </MenuItem>
 
             {resume.public ? (
@@ -181,27 +181,27 @@ const Header = () => {
                 <ListItemIcon>
                   <LinkIcon className="scale-90" />
                 </ListItemIcon>
-                <ListItemText>{t('builder.header.menu.share-link')}</ListItemText>
+                <ListItemText>{t<string>('builder.header.menu.share-link')}</ListItemText>
               </MenuItem>
             ) : (
-              <Tooltip arrow placement="right" title={t('builder.header.menu.tooltips.share-link') as string}>
+              <Tooltip arrow placement="right" title={t<string>('builder.header.menu.tooltips.share-link')}>
                 <div>
                   <MenuItem>
                     <ListItemIcon>
                       <LinkIcon className="scale-90" />
                     </ListItemIcon>
-                    <ListItemText>{t('builder.header.menu.share-link')}</ListItemText>
+                    <ListItemText>{t<string>('builder.header.menu.share-link')}</ListItemText>
                   </MenuItem>
                 </div>
               </Tooltip>
             )}
 
-            <Tooltip arrow placement="right" title={t('builder.header.menu.tooltips.delete') as string}>
+            <Tooltip arrow placement="right" title={t<string>('builder.header.menu.tooltips.delete')}>
               <MenuItem onClick={handleDelete}>
                 <ListItemIcon>
                   <Delete className="scale-90" />
                 </ListItemIcon>
-                <ListItemText>{t('builder.header.menu.delete')}</ListItemText>
+                <ListItemText>{t<string>('builder.header.menu.delete')}</ListItemText>
               </MenuItem>
             </Tooltip>
           </Menu>

client/components/build/Center/Page.tsx

@@ -48,9 +48,7 @@ const Page: React.FC<Props> = ({ page, showPageNumbers = false }) => {
       </div>
 
       {showPageNumbers && (
-        <h4 className={styles.pageNumber}>
-          {t('builder.common.glossary.page')} {page + 1}
-        </h4>
+        <h4 className={styles.pageNumber}>{`${t<string>('builder.common.glossary.page')} {page + 1}`}</h4>
       )}
     </div>
   );

client/components/build/LeftSidebar/LeftSidebar.tsx

@@ -114,7 +114,9 @@ const LeftSidebar = () => {
 
           <div className="py-6 text-right">
             <Button fullWidth variant="outlined" startIcon={<Add />} onClick={handleAddSection}>
-              {t('builder.common.actions.add', { token: t('builder.leftSidebar.sections.section.heading') })}
+              {t<string>('builder.common.actions.add', {
+                token: t<string>('builder.leftSidebar.sections.section.heading'),
+              })}
             </Button>
           </div>
         </main>

client/components/build/LeftSidebar/sections/Basics.tsx

@@ -24,7 +24,7 @@ const Basics = () => {
 
   return (
     <>
-      <Heading path="sections.basics" name={t('builder.leftSidebar.sections.basics.heading')} />
+      <Heading path="sections.basics" name={t<string>('builder.leftSidebar.sections.basics.heading')} />
 
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <div className="grid items-center gap-4 sm:col-span-2 sm:grid-cols-3">
@@ -33,10 +33,10 @@ const Basics = () => {
           </div>
 
           <div className="grid gap-2 w-full sm:col-span-2">
-            <ResumeInput label={t('builder.leftSidebar.sections.basics.name.label')} path="basics.name" />
+            <ResumeInput label={t<string>('builder.leftSidebar.sections.basics.name.label')} path="basics.name" />
 
             <Button variant="outlined" startIcon={<PhotoFilter />} onClick={handleClick}>
-              {t('builder.leftSidebar.sections.basics.actions.photo-filters')}
+              {t<string>('builder.leftSidebar.sections.basics.actions.photo-filters')}
             </Button>
 
             <Popover
@@ -57,20 +57,24 @@ const Basics = () => {
           </div>
         </div>
 
-        <ResumeInput label={t('builder.common.form.email.label')} path="basics.email" className="sm:col-span-2" />
-        <ResumeInput label={t('builder.common.form.phone.label')} path="basics.phone" />
-        <ResumeInput label={t('builder.common.form.url.label')} path="basics.website" />
+        <ResumeInput
+          label={t<string>('builder.common.form.email.label')}
+          path="basics.email"
+          className="sm:col-span-2"
+        />
+        <ResumeInput label={t<string>('builder.common.form.phone.label')} path="basics.phone" />
+        <ResumeInput label={t<string>('builder.common.form.url.label')} path="basics.website" />
 
         <Divider className="sm:col-span-2" />
 
         <ResumeInput
-          label={t('builder.leftSidebar.sections.basics.headline.label')}
+          label={t<string>('builder.leftSidebar.sections.basics.headline.label')}
           path="basics.headline"
           className="sm:col-span-2"
         />
         <ResumeInput
           type="textarea"
-          label={t('builder.common.form.summary.label')}
+          label={t<string>('builder.common.form.summary.label')}
           path="basics.summary"
           className="sm:col-span-2"
           markdownSupported

client/components/build/LeftSidebar/sections/Location.tsx

@@ -8,19 +8,28 @@ const Location = () => {
 
   return (
     <>
-      <Heading path="sections.location" name={t('builder.leftSidebar.sections.location.heading')} />
+      <Heading path="sections.location" name={t<string>('builder.leftSidebar.sections.location.heading')} />
 
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <ResumeInput
-          label={t('builder.leftSidebar.sections.location.address.label')}
+          label={t<string>('builder.leftSidebar.sections.location.address.label')}
           path="basics.location.address"
           className="sm:col-span-2"
         />
-        <ResumeInput label={t('builder.leftSidebar.sections.location.city.label')} path="basics.location.city" />
-        <ResumeInput label={t('builder.leftSidebar.sections.location.region.label')} path="basics.location.region" />
-        <ResumeInput label={t('builder.leftSidebar.sections.location.country.label')} path="basics.location.country" />
         <ResumeInput
-          label={t('builder.leftSidebar.sections.location.postal-code.label')}
+          label={t<string>('builder.leftSidebar.sections.location.city.label')}
+          path="basics.location.city"
+        />
+        <ResumeInput
+          label={t<string>('builder.leftSidebar.sections.location.region.label')}
+          path="basics.location.region"
+        />
+        <ResumeInput
+          label={t<string>('builder.leftSidebar.sections.location.country.label')}
+          path="basics.location.country"
+        />
+        <ResumeInput
+          label={t<string>('builder.leftSidebar.sections.location.postal-code.label')}
           path="basics.location.postalCode"
         />
       </div>

client/components/build/LeftSidebar/sections/PhotoFilters.tsx

@@ -32,7 +32,7 @@ const PhotoFilters = () => {
   return (
     <div className="flex flex-col gap-2 p-5 dark:bg-neutral-800">
       <div>
-        <h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.size.heading')}</h4>
+        <h4 className="font-medium">{t<string>('builder.leftSidebar.sections.basics.photo-filters.size.heading')}</h4>
 
         <div className="mx-2">
           <Slider
@@ -54,18 +54,20 @@ const PhotoFilters = () => {
       <Divider />
 
       <div>
-        <h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.effects.heading')}</h4>
+        <h4 className="font-medium">
+          {t<string>('builder.leftSidebar.sections.basics.photo-filters.effects.heading')}
+        </h4>
 
         <div className="flex items-center">
           <FormControlLabel
-            label={t('builder.leftSidebar.sections.basics.photo-filters.effects.grayscale.label') as string}
+            label={t<string>('builder.leftSidebar.sections.basics.photo-filters.effects.grayscale.label')}
             control={
               <Checkbox color="secondary" checked={grayscale} onChange={(_, value) => handleSetGrayscale(value)} />
             }
           />
 
           <FormControlLabel
-            label={t('builder.leftSidebar.sections.basics.photo-filters.effects.border.label') as string}
+            label={t<string>('builder.leftSidebar.sections.basics.photo-filters.effects.border.label')}
             control={<Checkbox color="secondary" checked={border} onChange={(_, value) => handleSetBorder(value)} />}
           />
         </div>
@@ -74,7 +76,7 @@ const PhotoFilters = () => {
       <Divider />
 
       <div className="flex flex-col gap-2">
-        <h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.shape.heading')}</h4>
+        <h4 className="font-medium">{t<string>('builder.leftSidebar.sections.basics.photo-filters.shape.heading')}</h4>
 
         <ToggleButtonGroup exclusive value={shape} onChange={(_, value) => handleChangeShape(value)}>
           <ToggleButton size="small" value="square" className="w-14">

client/components/build/LeftSidebar/sections/PhotoUpload.tsx

@@ -49,7 +49,7 @@ const PhotoUpload: React.FC = () => {
       const file = event.target.files[0];
 
       if (file.size > FILE_UPLOAD_MAX_SIZE) {
-        toast.error(t('common.toast.error.upload-photo-size'));
+        toast.error(t<string>('common.toast.error.upload-photo-size'));
         return;
       }
 
@@ -67,8 +67,8 @@ const PhotoUpload: React.FC = () => {
         <Tooltip
           title={
             isEmpty(photo.url)
-              ? (t('builder.leftSidebar.sections.basics.photo-upload.tooltip.upload') as string)
-              : (t('builder.leftSidebar.sections.basics.photo-upload.tooltip.remove') as string)
+              ? (t<string>('builder.leftSidebar.sections.basics.photo-upload.tooltip.upload') as string)
+              : (t<string>('builder.leftSidebar.sections.basics.photo-upload.tooltip.remove') as string)
           }
         >
           <Avatar sx={{ width: 96, height: 96 }} src={photo.url} />

client/components/build/LeftSidebar/sections/Profiles.tsx

@@ -28,7 +28,7 @@ const Profiles = () => {
 
   return (
     <>
-      <Heading path="sections.profiles" name={t('builder.leftSidebar.sections.profiles.heading')} />
+      <Heading path="sections.profiles" name={t<string>('builder.leftSidebar.sections.profiles.heading')} />
 
       <List
         path="basics.profiles"
@@ -40,8 +40,8 @@ const Profiles = () => {
 
       <footer className="flex justify-end">
         <Button variant="outlined" startIcon={<Add />} onClick={handleAdd}>
-          {t('builder.common.actions.add', {
-            token: t('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
+          {t<string>('builder.common.actions.add', {
+            token: t<string>('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
           })}
         </Button>
       </footer>

client/components/build/LeftSidebar/sections/Section.tsx

@@ -74,7 +74,7 @@ const Section: React.FC<Props> = ({
         <SectionSettings path={path} />
 
         <Button variant="outlined" startIcon={<Add />} onClick={handleAdd}>
-          {t('builder.common.actions.add', { token: heading })}
+          {t<string>('builder.common.actions.add', { token: heading })}
         </Button>
       </footer>
     </>

client/components/build/LeftSidebar/sections/SectionSettings.tsx

@@ -32,7 +32,7 @@ const SectionSettings: React.FC<Props> = ({ path }) => {
 
   return (
     <div>
-      <Tooltip title={t('builder.common.columns.tooltip') as string}>
+      <Tooltip title={t<string>('builder.common.columns.tooltip')}>
         <ButtonBase onClick={handleClick} sx={{ padding: 1, borderRadius: 1 }} className="opacity-50 hover:opacity-75">
           <ViewWeek /> <span className="ml-1.5 text-xs">{columns}</span>
         </ButtonBase>
@@ -48,7 +48,7 @@ const SectionSettings: React.FC<Props> = ({ path }) => {
         }}
       >
         <div className="p-5 dark:bg-neutral-800">
-          <h4 className="mb-2 font-medium">{t('builder.common.columns.heading')}</h4>
+          <h4 className="mb-2 font-medium">{t<string>('builder.common.columns.heading')}</h4>
 
           <ToggleButtonGroup exclusive value={columns} onChange={(_, value: number) => handleSetColumns(value)}>
             {[1, 2, 3, 4].map((index) => (

client/components/build/RightSidebar/sections/CustomCSS.tsx

@@ -25,7 +25,7 @@ const CustomCSS = () => {
 
   return (
     <>
-      <Heading path="metadata.css" name={t('builder.rightSidebar.sections.css.heading')} isHideable />
+      <Heading path="metadata.css" name={t<string>('builder.rightSidebar.sections.css.heading')} isHideable />
 
       <Editor
         height="200px"

client/components/build/RightSidebar/sections/Export.tsx

@@ -19,12 +19,12 @@ const Export = () => {
 
   const pdfListItemText = {
     normal: {
-      primary: t('builder.rightSidebar.sections.export.pdf.normal.primary'),
-      secondary: t('builder.rightSidebar.sections.export.pdf.normal.secondary'),
+      primary: t<string>('builder.rightSidebar.sections.export.pdf.normal.primary'),
+      secondary: t<string>('builder.rightSidebar.sections.export.pdf.normal.secondary'),
     },
     loading: {
-      primary: t('builder.rightSidebar.sections.export.pdf.loading.primary'),
-      secondary: t('builder.rightSidebar.sections.export.pdf.loading.secondary'),
+      primary: t<string>('builder.rightSidebar.sections.export.pdf.loading.primary'),
+      secondary: t<string>('builder.rightSidebar.sections.export.pdf.loading.secondary'),
     },
   };
 
@@ -53,7 +53,7 @@ const Export = () => {
 
   return (
     <>
-      <Heading path="metadata.export" name={t('builder.rightSidebar.sections.export.heading')} />
+      <Heading path="metadata.export" name={t<string>('builder.rightSidebar.sections.export.heading')} />
 
       <List sx={{ padding: 0 }}>
         <ListItem sx={{ padding: 0 }}>
@@ -61,8 +61,8 @@ const Export = () => {
             <Schema />
 
             <ListItemText
-              primary={t('builder.rightSidebar.sections.export.json.primary')}
-              secondary={t('builder.rightSidebar.sections.export.json.secondary')}
+              primary={t<string>('builder.rightSidebar.sections.export.json.primary')}
+              secondary={t<string>('builder.rightSidebar.sections.export.json.secondary')}
             />
           </ListItemButton>
         </ListItem>

client/components/build/RightSidebar/sections/Layout.tsx

@@ -60,9 +60,9 @@ const Layout = () => {
     <>
       <Heading
         path="metadata.layout"
-        name={t('builder.rightSidebar.sections.layout.heading')}
+        name={t<string>('builder.rightSidebar.sections.layout.heading')}
         action={
-          <Tooltip title={t('builder.rightSidebar.sections.layout.tooltip.reset-layout') as string}>
+          <Tooltip title={t<string>('builder.rightSidebar.sections.layout.tooltip.reset-layout')}>
             <IconButton onClick={handleResetLayout}>
               <Restore />
             </IconButton>
@@ -76,12 +76,16 @@ const Layout = () => {
           <div key={pageIndex} className={styles.page}>
             <div className="flex items-center justify-between pr-3">
               <p className={styles.heading}>
-                {t('builder.common.glossary.page')} {pageIndex + 1}
+                {t<string>('builder.common.glossary.page')} {pageIndex + 1}
               </p>
 
               <div className={clsx(styles.delete, { hidden: pageIndex === 0 })}>
                 <Tooltip
-                  title={t('builder.common.actions.delete', { token: t('builder.common.glossary.page') }) as string}
+                  title={
+                    t<string>('builder.common.actions.delete', {
+                      token: t<string>('builder.common.glossary.page'),
+                    }) as string
+                  }
                 >
                   <IconButton size="small" onClick={() => handleDeletePage(pageIndex)}>
                     <Close fontSize="small" />
@@ -113,7 +117,7 @@ const Layout = () => {
                                     [styles.disabled]: !get(resumeSections, `${sectionId}.visible`, true),
                                   })}
                                 >
-                                  {get(resumeSections, `${sectionId}.name`)}
+                                  {get(resumeSections, `${sectionId}.name`, '')}
                                 </div>
                               </div>
                             )}
@@ -132,7 +136,7 @@ const Layout = () => {
 
         <div className="flex items-center justify-end">
           <Button variant="outlined" startIcon={<Add />} onClick={handleAddPage}>
-            {t('builder.common.actions.add', { token: t('builder.common.glossary.page') })}
+            {t<string>('builder.common.actions.add', { token: t<string>('builder.common.glossary.page') })}
           </Button>
         </div>
       </DragDropContext>

client/components/build/RightSidebar/sections/Links.tsx

@@ -12,39 +12,41 @@ const Links = () => {
 
   return (
     <>
-      <Heading path="metadata.links" name={t('builder.rightSidebar.sections.links.heading')} />
+      <Heading path="metadata.links" name={t<string>('builder.rightSidebar.sections.links.heading')} />
 
       <div className={styles.container}>
         <div className={styles.section}>
           <h2>
             <Savings fontSize="small" />
-            {t('builder.rightSidebar.sections.links.donate.heading')}
+            {t<string>('builder.rightSidebar.sections.links.donate.heading')}
           </h2>
 
-          <p>{t('builder.rightSidebar.sections.links.donate.body')}</p>
+          <p>{t<string>('builder.rightSidebar.sections.links.donate.body')}</p>
 
           <a href={DONATION_URL} target="_blank" rel="noreferrer">
-            <Button startIcon={<Coffee />}>{t('builder.rightSidebar.sections.links.donate.button')}</Button>
+            <Button startIcon={<Coffee />}>{t<string>('builder.rightSidebar.sections.links.donate.button')}</Button>
           </a>
         </div>
 
         <div className={styles.section}>
           <h2>
             <BugReport fontSize="small" />
-            {t('builder.rightSidebar.sections.links.bugs-features.heading')}
+            {t<string>('builder.rightSidebar.sections.links.bugs-features.heading')}
           </h2>
 
-          <p>{t('builder.rightSidebar.sections.links.bugs-features.body')}</p>
+          <p>{t<string>('builder.rightSidebar.sections.links.bugs-features.body')}</p>
 
           <a href={GITHUB_ISSUES_URL} target="_blank" rel="noreferrer">
-            <Button startIcon={<GitHub />}>{t('builder.rightSidebar.sections.links.bugs-features.button')}</Button>
+            <Button startIcon={<GitHub />}>
+              {t<string>('builder.rightSidebar.sections.links.bugs-features.button')}
+            </Button>
           </a>
         </div>
 
         <div>
           <a href={GITHUB_URL} target="_blank" rel="noreferrer">
             <Button variant="text" startIcon={<Link />}>
-              {t('builder.rightSidebar.sections.links.github')}
+              {t<string>('builder.rightSidebar.sections.links.github')}
             </Button>
           </a>
         </div>

client/components/build/RightSidebar/sections/Settings.tsx

@@ -85,13 +85,13 @@ const Settings = () => {
 
   return (
     <>
-      <Heading path="metadata.settings" name={t('builder.rightSidebar.sections.settings.heading')} />
+      <Heading path="metadata.settings" name={t<string>('builder.rightSidebar.sections.settings.heading')} />
 
       <List sx={{ padding: 0 }}>
         {/* Global Settings */}
         <>
           <ListSubheader className="rounded">
-            {t('builder.rightSidebar.sections.settings.global.heading')}
+            {t<string>('builder.rightSidebar.sections.settings.global.heading')}
           </ListSubheader>
 
           <ListItem>
@@ -99,7 +99,7 @@ const Settings = () => {
               <Palette />
             </ListItemIcon>
             <ListItemText
-              primary={t('builder.rightSidebar.sections.settings.global.theme.primary')}
+              primary={t<string>('builder.rightSidebar.sections.settings.global.theme.primary')}
               secondary={themeString}
             />
             <ThemeSwitch checked={isDarkMode} onChange={(_, value: boolean) => handleSetTheme(value)} />
@@ -108,8 +108,8 @@ const Settings = () => {
           <ListItem className="flex-col">
             <ListItemText
               className="w-full"
-              primary={t('builder.rightSidebar.sections.settings.global.date.primary')}
-              secondary={t('builder.rightSidebar.sections.settings.global.date.secondary')}
+              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>
               disableClearable
@@ -124,8 +124,8 @@ const Settings = () => {
           <ListItem className="flex-col">
             <ListItemText
               className="w-full"
-              primary={t('builder.rightSidebar.sections.settings.global.language.primary')}
-              secondary={t('builder.rightSidebar.sections.settings.global.language.secondary')}
+              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>
               disableClearable
@@ -148,15 +148,17 @@ const Settings = () => {
 
         {/* Page Settings */}
         <>
-          <ListSubheader className="rounded">{t('builder.rightSidebar.sections.settings.page.heading')}</ListSubheader>
+          <ListSubheader className="rounded">
+            {t<string>('builder.rightSidebar.sections.settings.page.heading')}
+          </ListSubheader>
 
           <ListItem>
             <ListItemText
-              primary={t('builder.rightSidebar.sections.settings.page.orientation.primary')}
+              primary={t<string>('builder.rightSidebar.sections.settings.page.orientation.primary')}
               secondary={
                 pages.length === 1
-                  ? t('builder.rightSidebar.sections.settings.page.orientation.disabled')
-                  : t('builder.rightSidebar.sections.settings.page.orientation.secondary')
+                  ? t<string>('builder.rightSidebar.sections.settings.page.orientation.disabled')
+                  : t<string>('builder.rightSidebar.sections.settings.page.orientation.secondary')
               }
             />
             <Switch
@@ -169,8 +171,8 @@ const Settings = () => {
 
           <ListItem>
             <ListItemText
-              primary={t('builder.rightSidebar.sections.settings.page.break-line.primary')}
-              secondary={t('builder.rightSidebar.sections.settings.page.break-line.secondary')}
+              primary={t<string>('builder.rightSidebar.sections.settings.page.break-line.primary')}
+              secondary={t<string>('builder.rightSidebar.sections.settings.page.break-line.secondary')}
             />
             <Switch color="secondary" checked={breakLine} onChange={() => dispatch(togglePageBreakLine())} />
           </ListItem>
@@ -179,7 +181,7 @@ const Settings = () => {
         {/* Resume Settings */}
         <>
           <ListSubheader className="rounded">
-            {t('builder.rightSidebar.sections.settings.resume.heading')}
+            {t<string>('builder.rightSidebar.sections.settings.resume.heading')}
           </ListSubheader>
 
           <ListItem>
@@ -188,8 +190,8 @@ const Settings = () => {
                 <Anchor />
               </ListItemIcon>
               <ListItemText
-                primary={t('builder.rightSidebar.sections.settings.resume.sample.primary')}
-                secondary={t('builder.rightSidebar.sections.settings.resume.sample.secondary')}
+                primary={t<string>('builder.rightSidebar.sections.settings.resume.sample.primary')}
+                secondary={t<string>('builder.rightSidebar.sections.settings.resume.sample.secondary')}
               />
             </ListItemButton>
           </ListItem>
@@ -200,8 +202,8 @@ const Settings = () => {
                 <DeleteForever />
               </ListItemIcon>
               <ListItemText
-                primary={t('builder.rightSidebar.sections.settings.resume.reset.primary')}
-                secondary={t('builder.rightSidebar.sections.settings.resume.reset.secondary')}
+                primary={t<string>('builder.rightSidebar.sections.settings.resume.reset.primary')}
+                secondary={t<string>('builder.rightSidebar.sections.settings.resume.reset.secondary')}
               />
             </ListItemButton>
           </ListItem>

client/components/build/RightSidebar/sections/Sharing.tsx

@@ -29,19 +29,19 @@ const Sharing = () => {
 
     await navigator.clipboard.writeText(text);
 
-    toast.success(t('common.toast.success.resume-link-copied'));
+    toast.success(t<string>('common.toast.success.resume-link-copied'));
   };
 
   return (
     <>
-      <Heading path="metadata.sharing" name={t('builder.rightSidebar.sections.sharing.heading')} />
+      <Heading path="metadata.sharing" name={t<string>('builder.rightSidebar.sections.sharing.heading')} />
 
       <List sx={{ padding: 0 }}>
         <ListItem className="flex flex-col" sx={{ padding: 0 }}>
           <div className="flex w-full items-center justify-between">
             <ListItemText
-              primary={t('builder.rightSidebar.sections.sharing.visibility.title')}
-              secondary={t('builder.rightSidebar.sections.sharing.visibility.subtitle')}
+              primary={t<string>('builder.rightSidebar.sections.sharing.visibility.title')}
+              secondary={t<string>('builder.rightSidebar.sections.sharing.visibility.subtitle')}
             />
             <Switch color="secondary" checked={isPublic} onChange={(_, value) => handleSetVisibility(value)} />
           </div>
@@ -63,7 +63,7 @@ const Sharing = () => {
 
           <div className="mt-1 flex w-full">
             <FormControlLabel
-              label={t('builder.rightSidebar.sections.sharing.short-url.label') as string}
+              label={t<string>('builder.rightSidebar.sections.sharing.short-url.label')}
               control={
                 <Checkbox className="mr-1" checked={showShortUrl} onChange={(_, value) => setShowShortUrl(value)} />
               }

client/components/build/RightSidebar/sections/Templates.tsx

@@ -24,7 +24,7 @@ const Templates = () => {
 
   return (
     <>
-      <Heading path="metadata.templates" name={t('builder.rightSidebar.sections.templates.heading')} />
+      <Heading path="metadata.templates" name={t<string>('builder.rightSidebar.sections.templates.heading')} />
 
       <div className={styles.container}>
         {Object.values(templateMap).map((template) => (

client/components/build/RightSidebar/sections/Theme.tsx

@@ -24,7 +24,7 @@ const Theme = () => {
 
   return (
     <>
-      <Heading path="metadata.theme" name={t('builder.rightSidebar.sections.theme.heading')} />
+      <Heading path="metadata.theme" name={t<string>('builder.rightSidebar.sections.theme.heading')} />
 
       <div className={styles.container}>
         <div className={styles.colorOptions}>
@@ -34,18 +34,18 @@ const Theme = () => {
         </div>
 
         <ColorPicker
-          label={t('builder.rightSidebar.sections.theme.form.primary.label')}
+          label={t<string>('builder.rightSidebar.sections.theme.form.primary.label')}
           color={primary}
           className="col-span-2"
           onChange={(color) => handleChange('primary', color)}
         />
         <ColorPicker
-          label={t('builder.rightSidebar.sections.theme.form.background.label')}
+          label={t<string>('builder.rightSidebar.sections.theme.form.background.label')}
           color={background}
           onChange={(color) => handleChange('background', color)}
         />
         <ColorPicker
-          label={t('builder.rightSidebar.sections.theme.form.text.label')}
+          label={t<string>('builder.rightSidebar.sections.theme.form.text.label')}
           color={text}
           onChange={(color) => handleChange('text', color)}
         />

client/components/build/RightSidebar/sections/Typography.tsx

@@ -64,7 +64,7 @@ const Widgets: React.FC<WidgetProps> = ({ label, category }) => {
             step={1}
             marks={[
               { value: 12, label: '12px' },
-              { value: 24, label: t('builder.rightSidebar.sections.typography.form.font-size.label') },
+              { value: 24, label: t<string>('builder.rightSidebar.sections.typography.form.font-size.label') },
               { value: 36, label: '36px' },
             ]}
             valueLabelDisplay="auto"
@@ -82,7 +82,10 @@ const Widgets: React.FC<WidgetProps> = ({ label, category }) => {
           value={fonts.find((font) => font.family === family[category])}
           onChange={(_, font: Font | null) => handleChange('family', font)}
           renderInput={(params) => (
-            <TextField {...params} label={t('builder.rightSidebar.sections.typography.form.font-family.label')} />
+            <TextField
+              {...params}
+              label={t<string>('builder.rightSidebar.sections.typography.form.font-family.label')}
+            />
           )}
         />
       </div>
@@ -95,10 +98,13 @@ const Typography = () => {
 
   return (
     <>
-      <Heading path="metadata.typography" name={t('builder.rightSidebar.sections.typography.heading')} />
+      <Heading path="metadata.typography" name={t<string>('builder.rightSidebar.sections.typography.heading')} />
 
-      <Widgets label={t('builder.rightSidebar.sections.typography.widgets.headings.label')} category="heading" />
-      <Widgets label={t('builder.rightSidebar.sections.typography.widgets.body.label')} category="body" />
+      <Widgets
+        label={t<string>('builder.rightSidebar.sections.typography.widgets.headings.label')}
+        category="heading"
+      />
+      <Widgets label={t<string>('builder.rightSidebar.sections.typography.widgets.body.label')} category="body" />
     </>
   );
 };

client/components/dashboard/ResumePreview.tsx

@@ -94,7 +94,7 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
     const url = getResumeUrl(resume, { withHost: true });
     await navigator.clipboard.writeText(url);
 
-    toast.success(t('common.toast.success.resume-link-copied'));
+    toast.success(t<string>('common.toast.success.resume-link-copied'));
   };
 
   const handleDelete = async () => {
@@ -124,7 +124,7 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
       <footer>
         <div className={styles.meta}>
           <p>{resume.name}</p>
-          <p>{t('dashboard.resume.timestamp', { timestamp: getRelativeTime(resume.updatedAt) })}</p>
+          <p>{t<string>('dashboard.resume.timestamp', { timestamp: getRelativeTime(resume.updatedAt) })}</p>
         </div>
 
         <ButtonBase className={styles.menu} onClick={handleOpenMenu}>
@@ -136,21 +136,21 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
             <ListItemIcon>
               <OpenInNew className="scale-90" />
             </ListItemIcon>
-            <ListItemText>{t('dashboard.resume.menu.open')}</ListItemText>
+            <ListItemText>{t<string>('dashboard.resume.menu.open')}</ListItemText>
           </MenuItem>
 
           <MenuItem onClick={handleRename}>
             <ListItemIcon>
               <DriveFileRenameOutline className="scale-90" />
             </ListItemIcon>
-            <ListItemText>{t('dashboard.resume.menu.rename')}</ListItemText>
+            <ListItemText>{t<string>('dashboard.resume.menu.rename')}</ListItemText>
           </MenuItem>
 
           <MenuItem onClick={handleDuplicate}>
             <ListItemIcon>
               <ContentCopy className="scale-90" />
             </ListItemIcon>
-            <ListItemText>{t('dashboard.resume.menu.duplicate')}</ListItemText>
+            <ListItemText>{t<string>('dashboard.resume.menu.duplicate')}</ListItemText>
           </MenuItem>
 
           {resume.public ? (
@@ -158,27 +158,27 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
               <ListItemIcon>
                 <LinkIcon className="scale-90" />
               </ListItemIcon>
-              <ListItemText>{t('dashboard.resume.menu.share-link')}</ListItemText>
+              <ListItemText>{t<string>('dashboard.resume.menu.share-link')}</ListItemText>
             </MenuItem>
           ) : (
-            <Tooltip arrow placement="right" title={t('dashboard.resume.menu.tooltips.share-link') as string}>
+            <Tooltip arrow placement="right" title={t<string>('dashboard.resume.menu.tooltips.share-link')}>
               <div>
                 <MenuItem>
                   <ListItemIcon>
                     <LinkIcon className="scale-90" />
                   </ListItemIcon>
-                  <ListItemText>{t('dashboard.resume.menu.share-link')}</ListItemText>
+                  <ListItemText>{t<string>('dashboard.resume.menu.share-link')}</ListItemText>
                 </MenuItem>
               </div>
             </Tooltip>
           )}
 
-          <Tooltip arrow placement="right" title={t('dashboard.resume.menu.tooltips.delete') as string}>
+          <Tooltip arrow placement="right" title={t<string>('dashboard.resume.menu.tooltips.delete')}>
             <MenuItem onClick={handleDelete}>
               <ListItemIcon>
                 <DeleteOutline className="scale-90" />
               </ListItemIcon>
-              <ListItemText>{t('dashboard.resume.menu.delete')}</ListItemText>
+              <ListItemText>{t<string>('dashboard.resume.menu.delete')}</ListItemText>
             </MenuItem>
           </Tooltip>
         </Menu>

client/components/shared/Avatar.tsx

@@ -56,12 +56,12 @@ const Avatar: React.FC<Props> = ({ size = 64 }) => {
       <Menu anchorEl={anchorEl} onClose={handleClose} open={Boolean(anchorEl)}>
         <MenuItem>
           <div>
-            <span className="text-xs opacity-50">{t('common.avatar.menu.greeting')}</span>
+            <span className="text-xs opacity-50">{t<string>('common.avatar.menu.greeting')}</span>
             <p>{user?.name}</p>
           </div>
         </MenuItem>
         <Divider />
-        <MenuItem onClick={handleLogout}>{t('common.avatar.menu.logout')}</MenuItem>
+        <MenuItem onClick={handleLogout}>{t<string>('common.avatar.menu.logout')}</MenuItem>
       </Menu>
     </>
   );

client/components/shared/BaseModal.module.scss

@@ -1,10 +1,16 @@
 .content {
-  @apply rounded p-6 text-sm shadow lg:w-1/2 xl:w-2/5;
+  @apply rounded px-6 text-sm shadow lg:w-1/2 xl:w-2/5;
   @apply absolute inset-4 sm:inset-x-4 sm:inset-y-auto lg:inset-auto;
   @apply overflow-scroll bg-neutral-50 dark:bg-neutral-900 lg:overflow-auto;
+  @apply max-h-[90vh] min-h-fit;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .header {
+  @apply sticky top-0 left-0 right-0 z-50 pt-6 bg-neutral-50 dark:bg-neutral-900;
   @apply flex items-center justify-between;
   @apply w-full border-b pb-5 dark:border-white/10;
 
@@ -27,6 +33,7 @@
 }
 
 .footer {
+  @apply sticky bottom-0 left-0 right-0 z-50 pb-6 bg-neutral-50 dark:bg-neutral-900;
   @apply flex items-center justify-end gap-x-4;
   @apply w-full border-t pt-5 dark:border-white/10;
 }

client/components/shared/Footer.tsx

@@ -10,7 +10,7 @@ const Footer: React.FC<Props> = ({ className }) => {
 
   return (
     <div className={clsx('text-xs', className)}>
-      <p>{t('common.footer.license')}</p>
+      <p>{t<string>('common.footer.license')}</p>
 
       <p>
         <Trans t={t} i18nKey="common.footer.credit">

client/components/shared/Heading.tsx

@@ -72,19 +72,19 @@ const Heading: React.FC<Props> = ({
         })}
       >
         {isEditable && (
-          <Tooltip title={t('builder.common.tooltip.rename-section') as string}>
+          <Tooltip title={t<string>('builder.common.tooltip.rename-section')}>
             <IconButton onClick={toggleEditMode}>{editMode ? <Check /> : <DriveFileRenameOutline />}</IconButton>
           </Tooltip>
         )}
 
         {isHideable && (
-          <Tooltip title={t('builder.common.tooltip.toggle-visibility') as string}>
+          <Tooltip title={t<string>('builder.common.tooltip.toggle-visibility')}>
             <IconButton onClick={toggleVisibility}>{visibility ? <Visibility /> : <VisibilityOff />}</IconButton>
           </Tooltip>
         )}
 
         {isDeletable && (
-          <Tooltip title={t('builder.common.tooltip.delete-section') as string}>
+          <Tooltip title={t<string>('builder.common.tooltip.delete-section')}>
             <IconButton onClick={handleDelete}>
               <Delete />
             </IconButton>

client/components/shared/List.tsx

@@ -66,7 +66,7 @@ const List: React.FC<Props> = ({
   return (
     <DndProvider backend={HTML5Backend}>
       <div className={clsx(styles.container, className)}>
-        {isEmpty(list) && <div className={styles.empty}>{t('builder.common.list.empty-text')}</div>}
+        {isEmpty(list) && <div className={styles.empty}>{t<string>('builder.common.list.empty-text')}</div>}
 
         {list.map((item, index) => {
           const title = get(item, titleKey, '');

client/components/shared/ListItem.tsx

@@ -125,25 +125,25 @@ const ListItem: React.FC<Props> = ({ item, index, title, subtitle, onMove, onEdi
             <ListItemIcon>
               <DriveFileRenameOutline className="scale-90" />
             </ListItemIcon>
-            <ListItemText>{t('builder.common.list.actions.edit')}</ListItemText>
+            <ListItemText>{t<string>('builder.common.list.actions.edit')}</ListItemText>
           </MenuItem>
 
           <MenuItem onClick={() => handleDuplicate(item)}>
             <ListItemIcon>
               <FileCopy className="scale-90" />
             </ListItemIcon>
-            <ListItemText>{t('builder.common.list.actions.duplicate')}</ListItemText>
+            <ListItemText>{t<string>('builder.common.list.actions.duplicate')}</ListItemText>
           </MenuItem>
 
           <Divider />
 
-          <Tooltip arrow placement="right" title={t('builder.common.tooltip.delete-item') as string}>
+          <Tooltip arrow placement="right" title={t<string>('builder.common.tooltip.delete-item')}>
             <div>
               <MenuItem onClick={() => handleDelete(item)}>
                 <ListItemIcon>
                   <DeleteOutline className="scale-90" />
                 </ListItemIcon>
-                <ListItemText>{t('builder.common.list.actions.delete')}</ListItemText>
+                <ListItemText>{t<string>('builder.common.list.actions.delete')}</ListItemText>
               </MenuItem>
             </div>
           </Tooltip>

client/modals/auth/ForgotPasswordModal.tsx

@@ -54,16 +54,16 @@ const ForgotPasswordModal: React.FC = () => {
       <BaseModal
         icon={<Password />}
         isOpen={isOpen}
-        heading={t('modals.auth.forgot-password.heading')}
+        heading={t<string>('modals.auth.forgot-password.heading')}
         handleClose={handleClose}
         footerChildren={
           <Button type="submit" disabled={isLoading} onClick={handleSubmit(onSubmit)}>
-            {t('modals.auth.forgot-password.actions.send-email')}
+            {t<string>('modals.auth.forgot-password.actions.send-email')}
           </Button>
         }
       >
         <div className="grid gap-4">
-          <p>{t('modals.auth.forgot-password.body')}</p>
+          <p>{t<string>('modals.auth.forgot-password.body')}</p>
 
           <form className="grid gap-4 xl:w-2/3">
             <Controller
@@ -72,7 +72,7 @@ const ForgotPasswordModal: React.FC = () => {
               render={({ field, fieldState }) => (
                 <TextField
                   autoFocus
-                  label={t('modals.auth.forgot-password.form.email.label')}
+                  label={t<string>('modals.auth.forgot-password.form.email.label')}
                   error={!!fieldState.error}
                   helperText={fieldState.error?.message}
                   {...field}
@@ -81,7 +81,7 @@ const ForgotPasswordModal: React.FC = () => {
             />
           </form>
 
-          <p className="text-xs">{t('modals.auth.forgot-password.help-text')}</p>
+          <p className="text-xs">{t<string>('modals.auth.forgot-password.help-text')}</p>
         </div>
       </BaseModal>
     </>

client/modals/auth/LoginModal.tsx

@@ -113,7 +113,7 @@ const LoginModal: React.FC = () => {
     <BaseModal
       icon={<Login />}
       isOpen={isOpen}
-      heading={t('modals.auth.login.heading')}
+      heading={t<string>('modals.auth.login.heading')}
       handleClose={handleClose}
       footerChildren={
         <div className="flex gap-4">
@@ -125,17 +125,17 @@ const LoginModal: React.FC = () => {
               startIcon={<Google />}
               onClick={handleLoginWithGoogle}
             >
-              {t('modals.auth.login.actions.google')}
+              {t<string>('modals.auth.login.actions.google')}
             </Button>
           )}
 
           <Button type="submit" onClick={handleSubmit(onSubmit)} disabled={isLoading}>
-            {t('modals.auth.login.actions.login')}
+            {t<string>('modals.auth.login.actions.login')}
           </Button>
         </div>
       }
     >
-      <p>{t('modals.auth.login.body')}</p>
+      <p>{t<string>('modals.auth.login.body')}</p>
 
       <form className="grid gap-4 xl:w-2/3">
         <Controller
@@ -144,9 +144,9 @@ const LoginModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               autoFocus
-              label={t('modals.auth.login.form.username.label')}
+              label={t<string>('modals.auth.login.form.username.label')}
               error={!!fieldState.error}
-              helperText={fieldState.error?.message || t('modals.auth.login.form.username.help-text')}
+              helperText={fieldState.error?.message || t<string>('modals.auth.login.form.username.help-text')}
               {...field}
             />
           )}
@@ -158,7 +158,7 @@ const LoginModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               type={showPassword ? 'text' : 'password'}
-              label={t('modals.auth.login.form.password.label')}
+              label={t<string>('modals.auth.login.form.password.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               InputProps={{ endAdornment: <PasswordVisibility /> }}

client/modals/auth/RegisterModal.tsx

@@ -95,7 +95,7 @@ const RegisterModal: React.FC = () => {
     <BaseModal
       icon={<HowToReg />}
       isOpen={isOpen}
-      heading={t('modals.auth.register.heading')}
+      heading={t<string>('modals.auth.register.heading')}
       handleClose={handleClose}
       footerChildren={
         <div className="flex gap-4">
@@ -107,17 +107,17 @@ const RegisterModal: React.FC = () => {
               startIcon={<Google />}
               onClick={handleLoginWithGoogle}
             >
-              {t('modals.auth.register.actions.google')}
+              {t<string>('modals.auth.register.actions.google')}
             </Button>
           )}
 
           <Button type="submit" onClick={handleSubmit(onSubmit)} disabled={isLoading}>
-            {t('modals.auth.register.actions.register')}
+            {t<string>('modals.auth.register.actions.register')}
           </Button>
         </div>
       }
     >
-      <p>{t('modals.auth.register.body')}</p>
+      <p>{t<string>('modals.auth.register.body')}</p>
 
       <form className="grid gap-4 md:grid-cols-2">
         <Controller
@@ -126,7 +126,7 @@ const RegisterModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               autoFocus
-              label={t('modals.auth.register.form.name.label')}
+              label={t<string>('modals.auth.register.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -139,7 +139,7 @@ const RegisterModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('modals.auth.register.form.username.label')}
+              label={t<string>('modals.auth.register.form.username.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -153,7 +153,7 @@ const RegisterModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               type="email"
-              label={t('modals.auth.register.form.email.label')}
+              label={t<string>('modals.auth.register.form.email.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
@@ -168,7 +168,7 @@ const RegisterModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               type="password"
-              label={t('modals.auth.register.form.password.label')}
+              label={t<string>('modals.auth.register.form.password.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -182,7 +182,7 @@ const RegisterModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               type="password"
-              label={t('modals.auth.register.form.confirm-password.label')}
+              label={t<string>('modals.auth.register.form.confirm-password.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}

client/modals/auth/ResetPasswordModal.tsx

@@ -65,15 +65,15 @@ const ResetPasswordModal: React.FC = () => {
     <BaseModal
       icon={<LockReset />}
       isOpen={isOpen}
-      heading={t('modals.auth.reset-password.heading')}
+      heading={t<string>('modals.auth.reset-password.heading')}
       handleClose={handleClose}
       footerChildren={
         <Button type="submit" disabled={isLoading} onClick={handleSubmit(onSubmit)}>
-          {t('modals.auth.reset-password.actions.set-password')}
+          {t<string>('modals.auth.reset-password.actions.set-password')}
         </Button>
       }
     >
-      <p>{t('modals.auth.reset-password.body')}</p>
+      <p>{t<string>('modals.auth.reset-password.body')}</p>
 
       <form className="grid gap-4 md:grid-cols-2">
         <Controller
@@ -83,7 +83,7 @@ const ResetPasswordModal: React.FC = () => {
             <TextField
               autoFocus
               type="password"
-              label={t('modals.auth.reset-password.form.password.label')}
+              label={t<string>('modals.auth.reset-password.form.password.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -97,7 +97,7 @@ const ResetPasswordModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               type="password"
-              label={t('modals.auth.reset-password.form.confirm-password.label')}
+              label={t<string>('modals.auth.reset-password.form.confirm-password.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}

client/modals/builder/sections/AwardModal.tsx

@@ -50,8 +50,8 @@ const AwardModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
+  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]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -101,7 +101,7 @@ const AwardModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t('builder.common.form.title.label')}
+              label={t<string>('builder.common.form.title.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -115,7 +115,7 @@ const AwardModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t('builder.leftSidebar.sections.awards.form.awarder.label')}
+              label={t<string>('builder.leftSidebar.sections.awards.form.awarder.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -130,7 +130,7 @@ const AwardModal: React.FC = () => {
             <DatePicker
               {...field}
               openTo="year"
-              label={t('builder.common.form.date.label')}
+              label={t<string>('builder.common.form.date.label')}
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
@@ -152,7 +152,7 @@ const AwardModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('builder.common.form.url.label')}
+              label={t<string>('builder.common.form.url.label')}
               placeholder="https://"
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
@@ -169,7 +169,7 @@ const AwardModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t('builder.common.form.summary.label')}
+              label={t<string>('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message || <MarkdownSupported />}

client/modals/builder/sections/CertificateModal.tsx

@@ -50,8 +50,8 @@ const CertificateModal: React.FC = () => {
 
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
+  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]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -101,7 +101,7 @@ const CertificateModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t('builder.common.form.name.label')}
+              label={t<string>('builder.common.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -115,7 +115,7 @@ const CertificateModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t('builder.leftSidebar.sections.certifications.form.issuer.label')}
+              label={t<string>('builder.leftSidebar.sections.certifications.form.issuer.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -130,7 +130,7 @@ const CertificateModal: React.FC = () => {
             <DatePicker
               {...field}
               openTo="year"
-              label={t('builder.common.form.date.label')}
+              label={t<string>('builder.common.form.date.label')}
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
@@ -152,7 +152,7 @@ const CertificateModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('builder.common.form.url.label')}
+              label={t<string>('builder.common.form.url.label')}
               placeholder="https://"
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
@@ -169,7 +169,7 @@ const CertificateModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t('builder.common.form.summary.label')}
+              label={t<string>('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message || <MarkdownSupported />}

client/modals/builder/sections/CustomModal.tsx

@@ -67,8 +67,8 @@ const CustomModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
+  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]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -118,7 +118,7 @@ const CustomModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t('builder.common.form.title.label')}
+              label={t<string>('builder.common.form.title.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -131,7 +131,7 @@ const CustomModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('builder.common.form.subtitle.label')}
+              label={t<string>('builder.common.form.subtitle.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -146,7 +146,7 @@ const CustomModal: React.FC = () => {
             <DatePicker
               {...field}
               openTo="year"
-              label={t('builder.common.form.start-date.label')}
+              label={t<string>('builder.common.form.start-date.label')}
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
@@ -170,7 +170,7 @@ const CustomModal: React.FC = () => {
             <DatePicker
               {...field}
               openTo="year"
-              label={t('builder.common.form.end-date.label')}
+              label={t<string>('builder.common.form.end-date.label')}
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
@@ -192,7 +192,7 @@ const CustomModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('builder.common.form.url.label')}
+              label={t<string>('builder.common.form.url.label')}
               placeholder="https://"
               className="col-span-2"
               error={!!fieldState.error}
@@ -207,7 +207,7 @@ const CustomModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('builder.common.form.level.label')}
+              label={t<string>('builder.common.form.level.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
@@ -221,7 +221,7 @@ const CustomModal: React.FC = () => {
           control={control}
           render={({ field }) => (
             <div className="col-span-2">
-              <h4 className="mb-3 font-semibold">{t('builder.common.form.levelNum.label')}</h4>
+              <h4 className="mb-3 font-semibold">{t<string>('builder.common.form.levelNum.label')}</h4>
 
               <div className="px-10">
                 <Slider
@@ -245,7 +245,7 @@ const CustomModal: React.FC = () => {
                   defaultValue={0}
                   color="secondary"
                   valueLabelDisplay="auto"
-                  aria-label={t('builder.common.form.levelNum.label')}
+                  aria-label={t<string>('builder.common.form.levelNum.label')}
                 />
               </div>
             </div>
@@ -260,7 +260,7 @@ const CustomModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t('builder.common.form.summary.label')}
+              label={t<string>('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message || <MarkdownSupported />}
@@ -274,7 +274,7 @@ const CustomModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <ArrayInput
-              label={t('builder.common.form.keywords.label')}
+              label={t<string>('builder.common.form.keywords.label')}
               value={field.value as string[]}
               onChange={field.onChange}
               errors={fieldState.error}

client/modals/builder/sections/EducationModal.tsx

@@ -63,8 +63,8 @@ const EducationModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
+  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]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -114,7 +114,7 @@ const EducationModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t('builder.leftSidebar.sections.education.form.institution.label')}
+              label={t<string>('builder.leftSidebar.sections.education.form.institution.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -128,7 +128,7 @@ const EducationModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t('builder.leftSidebar.sections.education.form.degree.label')}
+              label={t<string>('builder.leftSidebar.sections.education.form.degree.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -141,7 +141,7 @@ const EducationModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('builder.leftSidebar.sections.education.form.area-study.label')}
+              label={t<string>('builder.leftSidebar.sections.education.form.area-study.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -154,7 +154,7 @@ const EducationModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('builder.leftSidebar.sections.education.form.grade.label')}
+              label={t<string>('builder.leftSidebar.sections.education.form.grade.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -169,7 +169,7 @@ const EducationModal: React.FC = () => {
             <DatePicker
               {...field}
               openTo="year"
-              label={t('builder.common.form.start-date.label')}
+              label={t<string>('builder.common.form.start-date.label')}
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
@@ -193,7 +193,7 @@ const EducationModal: React.FC = () => {
             <DatePicker
               {...field}
               openTo="year"
-              label={t('builder.common.form.end-date.label')}
+              label={t<string>('builder.common.form.end-date.label')}
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
@@ -203,7 +203,7 @@ const EducationModal: React.FC = () => {
                 <TextField
                   {...params}
                   error={!!fieldState.error}
-                  helperText={fieldState.error?.message || t('builder.common.form.end-date.help-text')}
+                  helperText={fieldState.error?.message || t<string>('builder.common.form.end-date.help-text')}
                 />
               )}
             />
@@ -215,7 +215,7 @@ const EducationModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('builder.common.form.url.label')}
+              label={t<string>('builder.common.form.url.label')}
               placeholder="https://"
               className="col-span-2"
               error={!!fieldState.error}
@@ -233,7 +233,7 @@ const EducationModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t('builder.common.form.summary.label')}
+              label={t<string>('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message || <MarkdownSupported />}
@@ -247,7 +247,7 @@ const EducationModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <ArrayInput
-              label={t('builder.leftSidebar.sections.education.form.courses.label')}
+              label={t<string>('builder.leftSidebar.sections.education.form.courses.label')}
               value={field.value as string[]}
               onChange={field.onChange}
               errors={fieldState.error}

client/modals/builder/sections/InterestModal.tsx

@@ -41,8 +41,8 @@ const InterestModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
+  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]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -92,7 +92,7 @@ const InterestModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t('builder.common.form.name.label')}
+              label={t<string>('builder.common.form.name.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
@@ -106,7 +106,7 @@ const InterestModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <ArrayInput
-              label={t('builder.common.form.keywords.label')}
+              label={t<string>('builder.common.form.keywords.label')}
               value={field.value as string[]}
               onChange={field.onChange}
               errors={fieldState.error}

client/modals/builder/sections/LanguageModal.tsx

@@ -42,8 +42,8 @@ const LanguageModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
+  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]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -93,7 +93,7 @@ const LanguageModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t('builder.common.form.name.label')}
+              label={t<string>('builder.common.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -107,7 +107,7 @@ const LanguageModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t('builder.common.form.level.label')}
+              label={t<string>('builder.common.form.level.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -120,7 +120,7 @@ const LanguageModal: React.FC = () => {
           control={control}
           render={({ field }) => (
             <div className="col-span-2">
-              <h4 className="mb-3 font-semibold">{t('builder.common.form.levelNum.label')}</h4>
+              <h4 className="mb-3 font-semibold">{t<string>('builder.common.form.levelNum.label')}</h4>
 
               <div className="px-10">
                 <Slider
@@ -144,7 +144,7 @@ const LanguageModal: React.FC = () => {
                   defaultValue={0}
                   color="secondary"
                   valueLabelDisplay="auto"
-                  aria-label={t('builder.common.form.levelNum.label')}
+                  aria-label={t<string>('builder.common.form.levelNum.label')}
                 />
               </div>
             </div>

client/modals/builder/sections/ProfileModal.tsx

@@ -42,11 +42,11 @@ const ProfileModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = t('builder.common.actions.add', {
-    token: t('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
+  const addText = t<string>('builder.common.actions.add', {
+    token: t<string>('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
   });
-  const editText = t('builder.common.actions.edit', {
-    token: t('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
+  const editText = t<string>('builder.common.actions.edit', {
+    token: t<string>('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
   });
 
   const { reset, control, handleSubmit } = useForm<FormData>({
@@ -97,7 +97,7 @@ const ProfileModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t('builder.leftSidebar.sections.profiles.form.network.label')}
+              label={t<string>('builder.leftSidebar.sections.profiles.form.network.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -111,7 +111,7 @@ const ProfileModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t('builder.leftSidebar.sections.profiles.form.username.label')}
+              label={t<string>('builder.leftSidebar.sections.profiles.form.username.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               InputProps={{
@@ -127,7 +127,7 @@ const ProfileModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('builder.common.form.url.label')}
+              label={t<string>('builder.common.form.url.label')}
               className="col-span-2"
               placeholder="https://"
               error={!!fieldState.error}

client/modals/builder/sections/ProjectModal.tsx

@@ -59,8 +59,8 @@ const ProjectModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
+  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]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -110,7 +110,7 @@ const ProjectModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t('builder.common.form.name.label')}
+              label={t<string>('builder.common.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -124,7 +124,7 @@ const ProjectModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t('builder.common.form.description.label')}
+              label={t<string>('builder.common.form.description.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -139,7 +139,7 @@ const ProjectModal: React.FC = () => {
             <DatePicker
               {...field}
               openTo="year"
-              label={t('builder.common.form.start-date.label')}
+              label={t<string>('builder.common.form.start-date.label')}
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
@@ -163,7 +163,7 @@ const ProjectModal: React.FC = () => {
             <DatePicker
               {...field}
               openTo="year"
-              label={t('builder.common.form.end-date.label')}
+              label={t<string>('builder.common.form.end-date.label')}
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
@@ -185,7 +185,7 @@ const ProjectModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('builder.common.form.url.label')}
+              label={t<string>('builder.common.form.url.label')}
               placeholder="https://"
               className="col-span-2"
               error={!!fieldState.error}
@@ -203,7 +203,7 @@ const ProjectModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t('builder.common.form.summary.label')}
+              label={t<string>('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message || <MarkdownSupported />}
@@ -217,7 +217,7 @@ const ProjectModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <ArrayInput
-              label={t('builder.common.form.keywords.label')}
+              label={t<string>('builder.common.form.keywords.label')}
               value={field.value as string[]}
               onChange={field.onChange}
               errors={fieldState.error}

client/modals/builder/sections/PublicationModal.tsx

@@ -50,8 +50,8 @@ const PublicationModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
+  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]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -101,7 +101,7 @@ const PublicationModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t('builder.common.form.name.label')}
+              label={t<string>('builder.common.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -115,7 +115,7 @@ const PublicationModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t('builder.leftSidebar.sections.publications.form.publisher.label')}
+              label={t<string>('builder.leftSidebar.sections.publications.form.publisher.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -130,7 +130,7 @@ const PublicationModal: React.FC = () => {
             <DatePicker
               {...field}
               openTo="year"
-              label={t('builder.common.form.date.label')}
+              label={t<string>('builder.common.form.date.label')}
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
@@ -152,7 +152,7 @@ const PublicationModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('builder.common.form.url.label')}
+              label={t<string>('builder.common.form.url.label')}
               placeholder="https://"
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
@@ -169,7 +169,7 @@ const PublicationModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t('builder.common.form.summary.label')}
+              label={t<string>('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message || <MarkdownSupported />}

client/modals/builder/sections/ReferenceModal.tsx

@@ -47,8 +47,8 @@ const ReferenceModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
+  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]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -98,7 +98,7 @@ const ReferenceModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t('builder.common.form.name.label')}
+              label={t<string>('builder.common.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -112,7 +112,7 @@ const ReferenceModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t('builder.leftSidebar.sections.references.form.relationship.label')}
+              label={t<string>('builder.leftSidebar.sections.references.form.relationship.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -125,7 +125,7 @@ const ReferenceModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('builder.common.form.phone.label')}
+              label={t<string>('builder.common.form.phone.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -138,7 +138,7 @@ const ReferenceModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('builder.common.form.email.label')}
+              label={t<string>('builder.common.form.email.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -154,7 +154,7 @@ const ReferenceModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t('builder.common.form.summary.label')}
+              label={t<string>('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message || <MarkdownSupported />}

client/modals/builder/sections/SkillModal.tsx

@@ -45,8 +45,8 @@ const SkillModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
+  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]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -96,7 +96,7 @@ const SkillModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t('builder.common.form.name.label')}
+              label={t<string>('builder.common.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -109,7 +109,7 @@ const SkillModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('builder.common.form.level.label')}
+              label={t<string>('builder.common.form.level.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -122,7 +122,7 @@ const SkillModal: React.FC = () => {
           control={control}
           render={({ field }) => (
             <div className="col-span-2">
-              <h4 className="mb-3 font-semibold">{t('builder.common.form.levelNum.label')}</h4>
+              <h4 className="mb-3 font-semibold">{t<string>('builder.common.form.levelNum.label')}</h4>
 
               <div className="px-3">
                 <Slider
@@ -146,7 +146,7 @@ const SkillModal: React.FC = () => {
                   defaultValue={0}
                   color="secondary"
                   valueLabelDisplay="auto"
-                  aria-label={t('builder.common.form.levelNum.label')}
+                  aria-label={t<string>('builder.common.form.levelNum.label')}
                 />
               </div>
             </div>
@@ -158,7 +158,7 @@ const SkillModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <ArrayInput
-              label={t('builder.common.form.keywords.label')}
+              label={t<string>('builder.common.form.keywords.label')}
               value={field.value}
               onChange={field.onChange}
               errors={fieldState.error}

client/modals/builder/sections/VolunteerModal.tsx

@@ -56,8 +56,8 @@ const VolunteerModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
+  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]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -107,7 +107,7 @@ const VolunteerModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t('builder.leftSidebar.sections.volunteer.form.organization.label')}
+              label={t<string>('builder.leftSidebar.sections.volunteer.form.organization.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -121,7 +121,7 @@ const VolunteerModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t('builder.common.form.position.label')}
+              label={t<string>('builder.common.form.position.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -136,7 +136,7 @@ const VolunteerModal: React.FC = () => {
             <DatePicker
               {...field}
               openTo="year"
-              label={t('builder.common.form.start-date.label')}
+              label={t<string>('builder.common.form.start-date.label')}
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
@@ -160,7 +160,7 @@ const VolunteerModal: React.FC = () => {
             <DatePicker
               {...field}
               openTo="year"
-              label={t('builder.common.form.end-date.label')}
+              label={t<string>('builder.common.form.end-date.label')}
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
@@ -182,7 +182,7 @@ const VolunteerModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('builder.common.form.url.label')}
+              label={t<string>('builder.common.form.url.label')}
               placeholder="https://"
               className="col-span-2"
               error={!!fieldState.error}
@@ -200,7 +200,7 @@ const VolunteerModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t('builder.common.form.summary.label')}
+              label={t<string>('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message || <MarkdownSupported />}

client/modals/builder/sections/WorkModal.tsx

@@ -56,8 +56,8 @@ const WorkModal: React.FC = () => {
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
+  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]);
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -107,7 +107,7 @@ const WorkModal: React.FC = () => {
             <TextField
               required
               autoFocus
-              label={t('builder.common.form.name.label')}
+              label={t<string>('builder.common.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -121,7 +121,7 @@ const WorkModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               required
-              label={t('builder.common.form.position.label')}
+              label={t<string>('builder.common.form.position.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -136,7 +136,7 @@ const WorkModal: React.FC = () => {
             <DatePicker
               {...field}
               openTo="year"
-              label={t('builder.common.form.start-date.label')}
+              label={t<string>('builder.common.form.start-date.label')}
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
@@ -160,7 +160,7 @@ const WorkModal: React.FC = () => {
             <DatePicker
               {...field}
               openTo="year"
-              label={t('builder.common.form.end-date.label')}
+              label={t<string>('builder.common.form.end-date.label')}
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
@@ -170,7 +170,7 @@ const WorkModal: React.FC = () => {
                 <TextField
                   {...params}
                   error={!!fieldState.error}
-                  helperText={fieldState.error?.message || t('builder.common.form.end-date.help-text')}
+                  helperText={fieldState.error?.message || t<string>('builder.common.form.end-date.help-text')}
                 />
               )}
             />
@@ -182,7 +182,7 @@ const WorkModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('builder.common.form.url.label')}
+              label={t<string>('builder.common.form.url.label')}
               placeholder="https://"
               className="col-span-2"
               error={!!fieldState.error}
@@ -200,7 +200,7 @@ const WorkModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t('builder.common.form.summary.label')}
+              label={t<string>('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
               helperText={fieldState.error?.message || <MarkdownSupported />}

client/modals/dashboard/CreateResumeModal.tsx

@@ -85,15 +85,15 @@ const CreateResumeModal: React.FC = () => {
     <BaseModal
       isOpen={isOpen}
       icon={<Add />}
-      heading={t('modals.dashboard.create-resume.heading')}
+      heading={t<string>('modals.dashboard.create-resume.heading')}
       handleClose={handleClose}
       footerChildren={
         <Button type="submit" disabled={isLoading} onClick={handleSubmit(onSubmit)}>
-          {t('modals.dashboard.create-resume.actions.create-resume')}
+          {t<string>('modals.dashboard.create-resume.actions.create-resume')}
         </Button>
       }
     >
-      <p>{t('modals.dashboard.create-resume.body')}</p>
+      <p>{t<string>('modals.dashboard.create-resume.body')}</p>
 
       <form className="grid gap-4">
         <Controller
@@ -102,7 +102,7 @@ const CreateResumeModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               autoFocus
-              label={t('modals.dashboard.create-resume.form.name.label')}
+              label={t<string>('modals.dashboard.create-resume.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -115,7 +115,7 @@ const CreateResumeModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('modals.dashboard.create-resume.form.slug.label')}
+              label={t<string>('modals.dashboard.create-resume.form.slug.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -125,7 +125,7 @@ const CreateResumeModal: React.FC = () => {
 
         <FormGroup>
           <FormControlLabel
-            label={t('modals.dashboard.create-resume.form.public.label') as string}
+            label={t<string>('modals.dashboard.create-resume.form.public.label')}
             control={
               <Controller
                 name="isPublic"

client/modals/dashboard/ImportExternalModal.tsx

@@ -63,7 +63,7 @@ const ImportExternalModal: React.FC = () => {
       const file = event.target.files[0];
 
       if (file.size > FILE_UPLOAD_MAX_SIZE) {
-        toast.error(t('common.toast.error.upload-file-size'));
+        toast.error(t<string>('common.toast.error.upload-file-size'));
         return;
       }
 
@@ -78,13 +78,13 @@ const ImportExternalModal: React.FC = () => {
     <BaseModal
       isOpen={isOpen}
       icon={<ImportExport />}
-      heading={t('modals.dashboard.import-external.heading')}
+      heading={t<string>('modals.dashboard.import-external.heading')}
       handleClose={handleClose}
     >
       <div className="grid gap-5">
         <h2 className="inline-flex items-center gap-2 text-lg font-medium">
           <LinkedIn />
-          {t('modals.dashboard.import-external.linkedin.heading')}
+          {t<string>('modals.dashboard.import-external.linkedin.heading')}
         </h2>
 
         <p className="mb-2">
@@ -110,7 +110,7 @@ const ImportExternalModal: React.FC = () => {
             startIcon={<UploadFile />}
             onClick={() => handleClick('linkedin')}
           >
-            {t('modals.dashboard.import-external.linkedin.actions.upload-archive')}
+            {t<string>('modals.dashboard.import-external.linkedin.actions.upload-archive')}
           </Button>
 
           <input
@@ -128,7 +128,7 @@ const ImportExternalModal: React.FC = () => {
       <div className="grid gap-5">
         <h2 className="inline-flex items-center gap-2 text-lg font-medium">
           <Code />
-          {t('modals.dashboard.import-external.json-resume.heading')}
+          {t<string>('modals.dashboard.import-external.json-resume.heading')}
         </h2>
 
         <p className="mb-2">
@@ -154,7 +154,7 @@ const ImportExternalModal: React.FC = () => {
             startIcon={<UploadFile />}
             onClick={() => handleClick('json-resume')}
           >
-            {t('modals.dashboard.import-external.json-resume.actions.upload-json')}
+            {t<string>('modals.dashboard.import-external.json-resume.actions.upload-json')}
           </Button>
 
           <input
@@ -172,10 +172,10 @@ const ImportExternalModal: React.FC = () => {
       <div className="grid gap-5">
         <h2 className="inline-flex items-center gap-2 text-lg font-medium">
           <TrackChanges />
-          {t('modals.dashboard.import-external.reactive-resume.heading')}
+          {t<string>('modals.dashboard.import-external.reactive-resume.heading')}
         </h2>
 
-        <p className="mb-2">{t('modals.dashboard.import-external.reactive-resume.body')}</p>
+        <p className="mb-2">{t<string>('modals.dashboard.import-external.reactive-resume.body')}</p>
 
         <div className="flex gap-4">
           <Button
@@ -184,7 +184,7 @@ const ImportExternalModal: React.FC = () => {
             startIcon={<UploadFile />}
             onClick={() => handleClick('reactive-resume')}
           >
-            {t('modals.dashboard.import-external.reactive-resume.actions.upload-json')}
+            {t<string>('modals.dashboard.import-external.reactive-resume.actions.upload-json')}
           </Button>
 
           <Button
@@ -193,7 +193,7 @@ const ImportExternalModal: React.FC = () => {
             startIcon={<UploadFile />}
             onClick={() => handleClick('reactive-resume-v2')}
           >
-            {t('modals.dashboard.import-external.reactive-resume.actions.upload-json-v2')}
+            {t<string>('modals.dashboard.import-external.reactive-resume.actions.upload-json-v2')}
           </Button>
 
           <input

client/modals/dashboard/RenameResumeModal.tsx

@@ -92,11 +92,11 @@ const RenameResumeModal: React.FC = () => {
     <BaseModal
       icon={<DriveFileRenameOutline />}
       isOpen={isOpen}
-      heading={t('modals.dashboard.rename-resume.heading')}
+      heading={t<string>('modals.dashboard.rename-resume.heading')}
       handleClose={handleClose}
       footerChildren={
         <Button type="submit" disabled={isLoading} onClick={handleSubmit(onSubmit)}>
-          {t('modals.dashboard.rename-resume.actions.rename-resume')}
+          {t<string>('modals.dashboard.rename-resume.actions.rename-resume')}
         </Button>
       }
     >
@@ -107,7 +107,7 @@ const RenameResumeModal: React.FC = () => {
           render={({ field, fieldState }) => (
             <TextField
               autoFocus
-              label={t('modals.dashboard.rename-resume.form.name.label')}
+              label={t<string>('modals.dashboard.rename-resume.form.name.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}
@@ -120,7 +120,7 @@ const RenameResumeModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <TextField
-              label={t('modals.dashboard.rename-resume.form.slug.label')}
+              label={t<string>('modals.dashboard.rename-resume.form.slug.label')}
               error={!!fieldState.error}
               helperText={fieldState.error?.message}
               {...field}

client/next.config.js

@@ -12,7 +12,7 @@ const nextConfig = {
   },
 
   images: {
-    domains: ['www.gravatar.com'],
+    domains: ['cdn.rxresu.me', 'www.gravatar.com'],
   },
 
   async rewrites() {

client/package.json

@@ -9,15 +9,15 @@
   },
   "dependencies": {
     "@beam-australia/react-env": "^3.1.1",
-    "@emotion/css": "^11.7.1",
-    "@emotion/react": "^11.8.2",
+    "@emotion/css": "^11.9.0",
+    "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@hookform/resolvers": "2.8.8",
-    "@monaco-editor/react": "^4.3.1",
-    "@mui/icons-material": "^5.5.1",
-    "@mui/lab": "^5.0.0-alpha.74",
-    "@mui/material": "^5.5.2",
-    "@reduxjs/toolkit": "^1.8.0",
+    "@monaco-editor/react": "^4.4.1",
+    "@mui/icons-material": "^5.6.0",
+    "@mui/lab": "^5.0.0-alpha.76",
+    "@mui/material": "^5.6.0",
+    "@reduxjs/toolkit": "^1.8.1",
     "axios": "^0.26.1",
     "clsx": "^1.1.1",
     "dayjs": "^1.11.0",
@@ -26,23 +26,23 @@
     "lodash": "^4.17.21",
     "md5-hex": "^4.0.0",
     "monaco-editor": "^0.33.0",
-    "nanoid": "^3.3.1",
-    "next": "12.1.0",
-    "next-i18next": "^10.5.0",
-    "react": ">=17",
+    "nanoid": "^3.3.2",
+    "next": "12.1.4",
+    "next-i18next": "^11.0.0",
+    "react": "<18",
     "react-beautiful-dnd": "^13.1.0",
     "react-colorful": "^5.5.1",
-    "react-dnd": "^15.1.1",
+    "react-dnd": "^15.1.2",
     "react-dnd-html5-backend": "^15.1.2",
-    "react-dom": ">=17",
+    "react-dom": "<18",
     "react-google-login": "^5.2.2",
-    "react-hook-form": "^7.28.1",
+    "react-hook-form": "^7.29.0",
     "react-hot-toast": "2.2.0",
     "react-hotkeys-hook": "^3.4.4",
     "react-icons": "^4.3.1",
-    "react-markdown": "^8.0.1",
-    "react-query": "^3.34.16",
-    "react-redux": "^7.2.6",
+    "react-markdown": "^8.0.2",
+    "react-query": "^3.34.19",
+    "react-redux": "^7.2.8",
     "react-zoom-pan-pinch": "^2.1.3",
     "redux": "^4.1.2",
     "redux-persist": "^6.0.0",
@@ -53,25 +53,26 @@
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.8",
+    "@babel/core": "^7.17.9",
     "@reactive-resume/schema": "workspace:*",
     "@tailwindcss/typography": "^0.5.2",
     "@types/downloadjs": "^1.4.3",
-    "@types/lodash": "^4.14.180",
+    "@types/lodash": "^4.14.181",
     "@types/node": "17.0.23",
-    "@types/react": "17.0.42",
+    "@types/react": "<18",
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-redux": "^7.1.23",
-    "@types/tailwindcss": "^3.0.9",
+    "@types/tailwindcss": "^3.0.10",
     "@types/uuid": "^8.3.4",
     "@types/webfontloader": "^1.6.34",
     "autoprefixer": "^10.4.4",
-    "eslint": "^8.11.0",
-    "eslint-config-next": "12.1.0",
-    "next-sitemap": "^2.5.13",
+    "csstype": "^3.0.11",
+    "eslint": "^8.12.0",
+    "eslint-config-next": "12.1.4",
+    "next-sitemap": "^2.5.19",
     "postcss": "^8.4.12",
-    "prettier": "^2.6.0",
-    "sass": "^1.49.9",
+    "prettier": "^2.6.2",
+    "sass": "^1.50.0",
     "tailwindcss": "^3.0.23",
     "typescript": "<4.6.0"
   }

client/pages/[username]/[slug]/build.tsx

@@ -62,7 +62,7 @@ const Build: NextPage<Props> = ({ username, slug }) => {
     <div className={styles.container}>
       <Head>
         <title>
-          {resume.name} | {t('common.title')}
+          {resume.name} | {t<string>('common.title')}
         </title>
       </Head>
 

client/pages/dashboard.tsx

@@ -33,7 +33,7 @@ const Dashboard: NextPage = () => {
     <div className={styles.container}>
       <Head>
         <title>
-          {t('dashboard.title')} | {t('common.title')}
+          {t<string>('dashboard.title')} | {t<string>('common.title')}
         </title>
       </Head>
 
@@ -51,15 +51,15 @@ const Dashboard: NextPage = () => {
         <ResumeCard
           modal="dashboard.create-resume"
           icon={Add}
-          title={t('dashboard.create-resume.title')}
-          subtitle={t('dashboard.create-resume.subtitle')}
+          title={t<string>('dashboard.create-resume.title')}
+          subtitle={t<string>('dashboard.create-resume.subtitle')}
         />
 
         <ResumeCard
           modal="dashboard.import-external"
           icon={ImportExport}
-          title={t('dashboard.import-external.title')}
-          subtitle={t('dashboard.import-external.subtitle')}
+          title={t<string>('dashboard.import-external.title')}
+          subtitle={t<string>('dashboard.import-external.subtitle')}
         />
 
         {data.map((resume) => (

client/pages/index.tsx

@@ -55,28 +55,28 @@ const Home: NextPage = () => {
         </div>
 
         <div className={styles.main}>
-          <h1>{t('common.title')}</h1>
+          <h1>{t<string>('common.title')}</h1>
 
-          <h2>{t('common.subtitle')}</h2>
+          <h2>{t<string>('common.subtitle')}</h2>
 
           <NoSSR>
             <div className={styles.buttonWrapper}>
               {isLoggedIn ? (
                 <>
                   <Link href="/dashboard" passHref>
-                    <Button>{t('landing.actions.app')}</Button>
+                    <Button>{t<string>('landing.actions.app')}</Button>
                   </Link>
 
                   <Button variant="outlined" onClick={handleLogout}>
-                    {t('landing.actions.logout')}
+                    {t<string>('landing.actions.logout')}
                   </Button>
                 </>
               ) : (
                 <>
-                  <Button onClick={handleLogin}>{t('landing.actions.login')}</Button>
+                  <Button onClick={handleLogin}>{t<string>('landing.actions.login')}</Button>
 
                   <Button variant="outlined" onClick={handleRegister} disabled={FLAG_DISABLE_SIGNUPS}>
-                    {t('landing.actions.register')}
+                    {t<string>('landing.actions.register')}
                   </Button>
                 </>
               )}
@@ -86,21 +86,21 @@ const Home: NextPage = () => {
       </div>
 
       <section className={styles.section}>
-        <h6>{t('landing.summary.heading')}</h6>
+        <h6>{t<string>('landing.summary.heading')}</h6>
 
-        <p>{t('landing.summary.body')}</p>
+        <p>{t<string>('landing.summary.body')}</p>
       </section>
 
       <section className={styles.section}>
-        <h6>{t('landing.features.heading')}</h6>
+        <h6>{t<string>('landing.features.heading')}</h6>
 
         <ul className="list-inside list-disc leading-loose">
-          <li>{t('landing.features.list.free')}</li>
-          <li>{t('landing.features.list.ads')}</li>
-          <li>{t('landing.features.list.tracking')}</li>
-          <li>{t('landing.features.list.languages')}</li>
-          <li>{t('landing.features.list.import')}</li>
-          <li>{t('landing.features.list.export')}</li>
+          <li>{t<string>('landing.features.list.free')}</li>
+          <li>{t<string>('landing.features.list.ads')}</li>
+          <li>{t<string>('landing.features.list.tracking')}</li>
+          <li>{t<string>('landing.features.list.languages')}</li>
+          <li>{t<string>('landing.features.list.import')}</li>
+          <li>{t<string>('landing.features.list.export')}</li>
           <li>
             <Trans t={t} i18nKey="landing.features.list.more">
               And a lot of exciting features,
@@ -113,7 +113,7 @@ const Home: NextPage = () => {
       </section>
 
       <section className={styles.section}>
-        <h6>{t('landing.screenshots.heading')}</h6>
+        <h6>{t<string>('landing.screenshots.heading')}</h6>
 
         <div className={styles.screenshots}>
           {screenshots.map(({ src, alt }) => (
@@ -125,7 +125,7 @@ const Home: NextPage = () => {
       </section>
 
       <section className={styles.section}>
-        <h6>{t('landing.testimonials.heading')}</h6>
+        <h6>{t<string>('landing.testimonials.heading')}</h6>
 
         <p className="my-3">
           <Trans t={t} i18nKey="landing.testimonials.body">
@@ -150,30 +150,30 @@ const Home: NextPage = () => {
       </section>
 
       <section className={styles.section}>
-        <h6>{t('landing.links.heading')}</h6>
+        <h6>{t<string>('landing.links.heading')}</h6>
 
         <div>
           <Link href="/meta/privacy" passHref>
             <Button variant="text" startIcon={<LinkIcon />}>
-              {t('landing.links.links.privacy')}
+              {t<string>('landing.links.links.privacy')}
             </Button>
           </Link>
 
           <Link href="/meta/service" passHref>
             <Button variant="text" startIcon={<LinkIcon />}>
-              {t('landing.links.links.service')}
+              {t<string>('landing.links.links.service')}
             </Button>
           </Link>
 
           <a href={GITHUB_URL} target="_blank" rel="noreferrer">
             <Button variant="text" startIcon={<LinkIcon />}>
-              {t('landing.links.links.github')}
+              {t<string>('landing.links.links.github')}
             </Button>
           </a>
 
           <a href={DONATION_URL} target="_blank" rel="noreferrer">
             <Button variant="text" startIcon={<LinkIcon />}>
-              {t('landing.links.links.donate')}
+              {t<string>('landing.links.links.donate')}
             </Button>
           </a>
         </div>

client/public/locales/pt/common.json

@@ -10,10 +10,10 @@
     "license": "Pela comunidade, para a comunidade."
   },
   "markdown": {
-    "help-text": "Esta secção suporta formatação <1>markdown</1>."
+    "help-text": "Esta seção suporta formatação <1>markdown</1>."
   },
   "date": {
-    "present": "Presente"
+    "present": "presente"
   },
   "subtitle": "Gerador de currículos gratuito e de código aberto.",
   "title": "Reactive Resume",

client/public/locales/pt/landing.json

@@ -1,9 +1,9 @@
 {
   "actions": {
-    "app": "Ir para o App",
+    "app": "Rodar aplicativo",
     "login": "Entrar",
-    "logout": "Sair",
-    "register": "Registrar-se"
+    "logout": "Encerrar",
+    "register": "Inscrição"
   },
   "features": {
     "heading": "Características",
@@ -12,30 +12,30 @@
       "export": "Exporte seu currículo para o formato JSON ou PDF",
       "free": "Gratuito, para sempre",
       "import": "Importe dados do LinkedIn, ou de um currículo em JSON",
-      "languages": "Acessível em vários idiomas",
-      "more": "E muito mais recursos interessantes, <1>leia tudo sobre isso aqui</1>",
+      "languages": "Disponível em vários idiomas",
+      "more": "E outros recursos interessantes, <1>veja todos aqui</1>",
       "tracking": "Sem rastreamento de usuários"
     }
   },
   "links": {
     "heading": "Links",
     "links": {
-      "donate": "Doar",
+      "donate": "Fazer doação",
       "github": "Código Fonte",
       "privacy": "Política de privacidade",
       "service": "Termos de serviço"
     }
   },
   "screenshots": {
-    "heading": "Capturas de tela"
+    "heading": "Imagens"
   },
   "testimonials": {
     "heading": "Depoimentos",
-    "body": "Boa ou ruim, eu adoraria saber sua opinião sobre o Reactive Resume e como tem sido a experiência para você.<br/>Aqui estão algumas das mensagens enviadas por usuários em todo o mundo.",
-    "contact": "Você pode entrar em contato comigo pelo <1>meu e-mail</1> ou por meio do formulário de contato no <3>meu site</3>."
+    "body": "Considero importante a sua opinião, positiva ou negativa, a respeito do Reactive Resume, bem como a sua experiência ao usá-lo.<br/>Confira algumas das mensagens enviadas por pessoas de todo o mundo.",
+    "contact": "Envie a sua mensagem por <1>e-mail</1> ou pelo formulário disponível <3>aqui</3>."
   },
   "summary": {
-    "body": "O Reactive Resume é um construtor de currículos gratuito e de código aberto criado para tornar as tarefas mundanas de criar, atualizar e compartilhar seu currículo tão fáceis quanto 1, 2, 3. Com este aplicativo, você pode criar vários currículos, compartilhá-los com recrutadores ou amigos através de um link exclusivo e imprimi-los como PDF, tudo de graça, sem anúncios, sem rastreamento, sem perder a integridade e privacidade dos seus dados.",
+    "body": "O Reactive Resume é um gerador de currículos, gratuito e de código aberto, desenvolvido para facilitar as tarefas tediosas de criação, atualização e divulgação de seu currículo. Este aplicativo possibilita a criação de múltiplos currículos, que podem ser compartilhados com recrutadores ou amigos com um link exclusivo ou impressos como PDF. Tudo isso de graça, sem anúncios, sem rastreamento, mantendo a integridade e privacidade dos seus dados.",
     "heading": "Resumo"
   }
 }

client/public/sitemap-0.xml

@@ -1,23 +1,43 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://rxresu.me</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/meta/privacy</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/meta/service</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/bn/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/de/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/es/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/fr/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/hi/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/it/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/kn/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/ta/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/bn</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/de</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/es</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/fr</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/hi</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/it</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/kn</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
-<url><loc>https://rxresu.me/ta</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-03-14T08:00:09.072Z</lastmod></url>
+<url><loc>https://rxresu.me</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.972Z</lastmod></url>
+<url><loc>https://rxresu.me/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.972Z</lastmod></url>
+<url><loc>https://rxresu.me/meta/privacy</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.972Z</lastmod></url>
+<url><loc>https://rxresu.me/meta/service</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.972Z</lastmod></url>
+<url><loc>https://rxresu.me/ar/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.972Z</lastmod></url>
+<url><loc>https://rxresu.me/bn/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.972Z</lastmod></url>
+<url><loc>https://rxresu.me/da/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.972Z</lastmod></url>
+<url><loc>https://rxresu.me/de/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.972Z</lastmod></url>
+<url><loc>https://rxresu.me/es/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.972Z</lastmod></url>
+<url><loc>https://rxresu.me/fr/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.972Z</lastmod></url>
+<url><loc>https://rxresu.me/hi/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.972Z</lastmod></url>
+<url><loc>https://rxresu.me/it/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.972Z</lastmod></url>
+<url><loc>https://rxresu.me/kn/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.972Z</lastmod></url>
+<url><loc>https://rxresu.me/ml/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/nl/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/pl/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/pt/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/ru/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/ta/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/tr/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/vi/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/zh/dashboard</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/ar</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/bn</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/da</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/de</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/es</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/fr</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/hi</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/it</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/kn</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/ml</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/nl</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/pl</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/pt</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/ru</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/ta</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/tr</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/vi</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
+<url><loc>https://rxresu.me/zh</loc><changefreq>monthly</changefreq><priority>0.7</priority><lastmod>2022-04-08T08:32:21.973Z</lastmod></url>
 </urlset>

client/templates/Leafish/Leafish.module.scss

@@ -0,0 +1,9 @@
+.page {}
+
+.container {
+  @apply grid grid-cols-2 gap-8 px-6 py-4;
+
+  .column {
+    @apply col-span-1 flex flex-col;
+  }
+}

client/templates/Leafish/Leafish.tsx

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+
+import { useAppSelector } from '@/store/hooks';
+import { PageProps } from '@/utils/template';
+
+import { getSectionById } from '../sectionMap';
+import styles from './Leafish.module.scss';
+import Masthead from './widgets/Masthead';
+import Section from './widgets/Section';
+
+const Leafish: React.FC<PageProps> = ({ page }) => {
+  const isFirstPage = useMemo(() => page === 0, [page]);
+
+  const layout: string[][] = useAppSelector((state) => state.resume.metadata.layout[page]);
+
+  return (
+    <div className={styles.page}>
+      {isFirstPage && <Masthead />}
+
+      <div className={styles.container}>
+        <div className={styles.column}>{layout[0].map((key) => getSectionById(key, Section))}</div>
+        <div className={styles.column}>{layout[1].map((key) => getSectionById(key, Section))}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Leafish;

client/templates/Leafish/widgets/Heading.tsx

@@ -0,0 +1,19 @@
+import { Theme } from '@reactive-resume/schema';
+import get from 'lodash/get';
+
+import { useAppSelector } from '@/store/hooks';
+
+const Heading: React.FC = ({ children }) => {
+  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+
+  return (
+    <h2
+      className="pb-1 mb-2 font-bold uppercase opacity-75"
+      style={{ borderBottomWidth: '3px', borderColor: theme.primary, color: theme.primary, display: 'inline-block' }}
+    >
+      {children}
+    </h2>
+  );
+};
+
+export default Heading;

client/templates/Leafish/widgets/Masthead.tsx

@@ -0,0 +1,75 @@
+import { Email, Phone, Public, Room } from '@mui/icons-material';
+import { alpha } from '@mui/material';
+import { Theme } from '@reactive-resume/schema';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+
+import { useAppSelector } from '@/store/hooks';
+import DataDisplay from '@/templates/shared/DataDisplay';
+import getProfileIcon from '@/utils/getProfileIcon';
+import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
+
+const Masthead: React.FC = () => {
+  const { name, photo, headline, summary, email, phone, website, location, profiles } = useAppSelector(
+    (state) => state.resume.basics
+  );
+  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+
+  return (
+    <div>
+      <div
+        className="flex items-center gap-4 p-6"
+        id="Masterhead_main"
+        style={{ backgroundColor: alpha(theme.primary, 0.2) }}
+      >
+        <div className="grid flex-1 gap-1">
+          <h1 id="Masterhead_name">{name}</h1>
+          <p style={{ color: theme.primary }} id="Masterhead_headline">
+            {headline}
+          </p>
+          <p className="opacity-75" id="Masterhead_summary">
+            {summary}
+          </p>
+        </div>
+
+        {photo.visible && !isEmpty(photo.url) && (
+          <img
+            alt={name}
+            src={photo.url}
+            width={photo.filters.size}
+            height={photo.filters.size}
+            className={getPhotoClassNames(photo.filters)}
+            id="Masterhead_photo"
+          />
+        )}
+      </div>
+      <div
+        className="grid gap-y-2 px-8 py-4"
+        id="Masterhead_data"
+        style={{ backgroundColor: alpha(theme.primary, 0.4), gridTemplateColumns: `repeat(2, minmax(0, 1fr))` }}
+      >
+        <DataDisplay icon={<Email />} link={`mailto:${email}`}>
+          {email}
+        </DataDisplay>
+
+        <DataDisplay icon={<Phone />} link={`tel:${phone}`}>
+          {phone}
+        </DataDisplay>
+
+        <DataDisplay icon={<Public />} link={addHttp(website)}>
+          {website}
+        </DataDisplay>
+
+        <DataDisplay icon={<Room />}>{formatLocation(location)}</DataDisplay>
+
+        {profiles.map(({ id, username, network, url }) => (
+          <DataDisplay key={id} icon={getProfileIcon(network)} link={url && addHttp(url)}>
+            {username}
+          </DataDisplay>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Masthead;

client/templates/Leafish/widgets/Section.tsx

@@ -0,0 +1,127 @@
+import { Email, Link, Phone } from '@mui/icons-material';
+import { ListItem, Section as SectionType } from '@reactive-resume/schema';
+import get from 'lodash/get';
+import isArray from 'lodash/isArray';
+import isEmpty from 'lodash/isEmpty';
+
+import Markdown from '@/components/shared/Markdown';
+import { useAppSelector } from '@/store/hooks';
+import { SectionProps } from '@/templates/sectionMap';
+import DataDisplay from '@/templates/shared/DataDisplay';
+import { formatDateString } from '@/utils/date';
+import { parseListItemPath } from '@/utils/template';
+
+import Heading from './Heading';
+
+const Section: React.FC<SectionProps> = ({
+  path,
+  titlePath = 'title',
+  subtitlePath = 'subtitle',
+  headlinePath = 'headline',
+  keywordsPath = 'keywords',
+}) => {
+  const section: SectionType = useAppSelector((state) => get(state.resume, path, {}));
+  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
+  const primaryColor: string = useAppSelector((state) => get(state.resume, 'metadata.theme.primary'));
+
+  if (!section.visible) return null;
+
+  if (isArray(section.items) && isEmpty(section.items)) return null;
+
+  return (
+    <section className="mb-4">
+      <Heading>{section.name}</Heading>
+
+      <div
+        className="grid items-start gap-4"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, minmax(0, 1fr))` }}
+        id={`Section_${section.id}`}
+      >
+        {section.items.map((item: ListItem) => {
+          const id = item.id,
+            title = parseListItemPath(item, titlePath),
+            subtitle = parseListItemPath(item, subtitlePath),
+            headline = parseListItemPath(item, headlinePath),
+            keywords: string[] = get(item, keywordsPath),
+            url: string = get(item, 'url'),
+            summary: string = get(item, 'summary'),
+            level: string = get(item, 'level'),
+            levelNum: number = get(item, 'levelNum'),
+            phone: string = get(item, 'phone'),
+            email: string = get(item, 'email'),
+            date = formatDateString(get(item, 'date'), dateFormat);
+
+          return (
+            <div key={id} id={id} className={`grid gap-1 mb-2 Section_${section.id}_inner`}>
+              <div>
+                {title && <div className="font-bold Section_title">{title}</div>}
+                {subtitle && <div className="Section_subtitle">{subtitle}</div>}
+                {date && (
+                  <div className="italic text-xs Section_date" style={{ color: primaryColor }}>
+                    ({date})
+                  </div>
+                )}
+                {headline && <div className="opacity-50 Section_headline">{headline}</div>}
+              </div>
+
+              {(level || levelNum > 0) && (
+                <div className="grid gap-1">
+                  {level && <span className="opacity-75">{level}</span>}
+                  {levelNum > 0 && (
+                    <div className="flex">
+                      {Array.from(Array(5).keys()).map((_, index) => (
+                        <div
+                          key={index}
+                          className="mr-1 h-3 w-3 rounded-full border-2"
+                          style={{
+                            borderColor: primaryColor,
+                            backgroundColor: levelNum / (10 / 5) > index ? primaryColor : '',
+                          }}
+                        />
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {summary && (
+                <div>
+                  <div className="italic text-xs" style={{ color: primaryColor }}>
+                    Overview
+                  </div>
+                  <Markdown className={`marker:text-[${primaryColor}]`}>{summary}</Markdown>
+                </div>
+              )}
+
+              {url && (
+                <DataDisplay icon={<Link />} link={url} className="text-xs">
+                  {url}
+                </DataDisplay>
+              )}
+
+              {keywords && <div>{keywords.join(', ')}</div>}
+
+              {(phone || email) && (
+                <div className="grid gap-1">
+                  {phone && (
+                    <DataDisplay icon={<Phone />} link={`tel:${phone}`}>
+                      {phone}
+                    </DataDisplay>
+                  )}
+
+                  {email && (
+                    <DataDisplay icon={<Email />} link={`mailto:${email}`}>
+                      {email}
+                    </DataDisplay>
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+};
+
+export default Section;

client/templates/templateMap.tsx

@@ -4,6 +4,7 @@ import Castform from './Castform/Castform';
 import Gengar from './Gengar/Gengar';
 import Glalie from './Glalie/Glalie';
 import Kakuna from './Kakuna/Kakuna';
+import Leafish from './Leafish/Leafish';
 import Onyx from './Onyx/Onyx';
 import Pikachu from './Pikachu/Pikachu';
 
@@ -51,6 +52,12 @@ const templateMap: Record<string, TemplateMeta> = {
     preview: '/images/templates/glalie.jpg',
     component: Glalie,
   },
+  leafish: {
+    id: 'leafish',
+    name: 'Leafish',
+    preview: '/images/templates/leafish.jpg',
+    component: Leafish,
+  },
 };
 
 export default templateMap;

client/utils/date.ts

@@ -22,7 +22,7 @@ export const dateFormatOptions: string[] = [
 export const getRelativeTime = (timestamp: dayjs.ConfigType): string => dayjs(timestamp).toNow(true);
 
 export const formatDateString = (date: string | DateRange, formatStr: string): string | null => {
-  const presentString = i18n?.t('common.date.present') ?? '';
+  const presentString = i18n?.t<string>('common.date.present') ?? '';
 
   if (isEmpty(date)) return null;
 

client/utils/getProfileIcon.tsx

@@ -13,6 +13,7 @@ import {
   FaStackOverflow,
   FaTelegram,
   FaTwitter,
+  FaXing,
   FaYoutube,
 } from 'react-icons/fa';
 
@@ -29,6 +30,7 @@ const profileIconMap: Record<string, JSX.Element> = {
   gitlab: <FaGitlab />,
   telegram: <FaTelegram />,
   skype: <FaSkype />,
+  xing: <FaXing />,
   youtube: <FaYoutube />,
 };
 

docker-compose.yml

@@ -7,14 +7,17 @@ x-env-shared: &env-shared
     - PUBLIC_SERVER_URL=http://localhost/api
     - PUBLIC_GOOGLE_CLIENT_ID=
 
+x-env-database: &env-database
+  environment:
+    - POSTGRES_DB=postgres
+    - POSTGRES_USER=postgres
+    - POSTGRES_PASSWORD=postgres
+
 x-env-server: &env-server
   environment:
     - SECRET_KEY=
     - POSTGRES_HOST=postgres
     - POSTGRES_PORT=5432
-    - POSTGRES_USER=postgres
-    - POSTGRES_PASSWORD=postgres
-    - POSTGRES_DATABASE=postgres
     - POSTGRES_SSL_CERT=
     - JWT_SECRET=
     - JWT_EXPIRY_TIME=604800
@@ -25,6 +28,12 @@ x-env-server: &env-server
     - SENDGRID_FORGOT_PASSWORD_TEMPLATE_ID=
     - SENDGRID_FROM_NAME=
     - SENDGRID_FROM_EMAIL=
+    - STORAGE_BUCKET=
+    - STORAGE_REGION=
+    - STORAGE_ENDPOINT=
+    - STORAGE_URL_PREFIX=
+    - STORAGE_ACCESS_KEY=
+    - STORAGE_SECRET_KEY=
 
 x-env-flags: &env-flags
   environment:
@@ -34,6 +43,9 @@ services:
   postgres:
     image: postgres:14.2-alpine
     container_name: postgres
+    <<: *env-database
+    ports:
+      - 5432:5432
     volumes:
       - pgdata:/var/lib/postgresql/data
     healthcheck:
@@ -60,7 +72,8 @@ services:
     image: amruthpillai/reactive-resume:server-latest
     container_name: server
     <<: *env-shared
-    <<: *env-server 
+    <<: *env-server
+    <<: *env-database
     depends_on:
       - traefik
       - postgres

docs/docs/source-code/env-vars.mdx

@@ -65,6 +65,12 @@ This URL is used when export PDF functionality is used within the app and has to
 **Default Value:** `5432`  
 **Description:** Port of the PostgreSQL Server
 
+### `POSTGRES_DB`
+
+**Required**: `yes`  
+**Default Value:** `postgres`  
+**Description:** Name of the Database in PostgreSQL Server
+
 ### `POSTGRES_USER`
 
 **Required**: `yes`  
@@ -77,12 +83,6 @@ This URL is used when export PDF functionality is used within the app and has to
 **Default Value:** `postgres`  
 **Description:** Password of the PostgreSQL Server
 
-### `POSTGRES_DATABASE`
-
-**Required**: `yes`  
-**Default Value:** `reactive_resume`  
-**Description:** Name of the Database in PostgreSQL Server
-
 ### `POSTGRES_SSL_CERT`
 
 **Required**: `no`  
@@ -161,3 +161,31 @@ You can get your own key here: https://docs.sendgrid.com/ui/account-and-settings
 
 **Required**: `no`  
 **Description:** Sender's Email Address
+
+## Storage
+
+You can either use S3 or any S3-compliant service such as DigitalOcean Spaces to store profile pictures uploaded by users of the platform.
+
+### `STORAGE_BUCKET`
+
+**Required**: `yes`
+
+### `STORAGE_REGION`
+
+**Required**: `yes`
+
+### `STORAGE_ENDPOINT`
+
+**Required**: `yes`
+
+### `STORAGE_URL_PREFIX`
+
+**Required**: `yes`
+
+### `STORAGE_ACCESS_KEY`
+
+**Required**: `yes`
+
+### `STORAGE_SECRET_KEY`
+
+**Required**: `yes`

docs/package.json

@@ -15,13 +15,13 @@
   },
   "dependencies": {
     "@algolia/client-search": "^4.13.0",
-    "@docusaurus/core": "2.0.0-beta.17",
-    "@docusaurus/preset-classic": "2.0.0-beta.17",
-    "@mdx-js/react": "^1.6.22",
+    "@docusaurus/core": "2.0.0-beta.18",
+    "@docusaurus/preset-classic": "2.0.0-beta.18",
+    "@mdx-js/react": "^2.1.1",
     "clsx": "^1.1.1",
     "prism-react-renderer": "^1.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "<18",
+    "react-dom": "<18"
   },
   "browserslist": {
     "production": [
@@ -36,6 +36,6 @@
     ]
   },
   "devDependencies": {
-    "@types/react": "17.0.42"
+    "@types/react": "<18"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactive-resume",
-  "version": "3.2.10",
+  "version": "3.3.3",
   "private": true,
   "workspaces": [
     "schema",
@@ -34,22 +34,22 @@
     "start": "env-cmd --silent concurrently --kill-others \"pnpm run start:*\""
   },
   "dependencies": {
-    "concurrently": "^7.0.0",
+    "concurrently": "^7.1.0",
     "env-cmd": "^10.1.0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.16.0",
-    "@typescript-eslint/parser": "^5.16.0",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.11.0",
+    "eslint": "^8.12.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "husky": "^7.0.4",
-    "prettier": "^2.6.0",
+    "prettier": "^2.6.2",
     "standard-version": "^9.3.2",
-    "typescript": "^4.5.5"
+    "typescript": "<4.6.0"
   }
 }

schema/package.json

@@ -9,7 +9,7 @@
     "lint": "eslint --fix --ext .ts ./src"
   },
   "devDependencies": {
-    "eslint": "^8.11.0",
+    "eslint": "^8.12.0",
     "typescript": "<4.6.0"
   }
 }

scripts/database/initialize.sql

@@ -1,2 +0,0 @@
-create database reactive_resume;
-grant all privileges on database reactive_resume to postgres;

server/package.json

@@ -10,61 +10,62 @@
     "lint": "eslint --fix --ext .ts ./src"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.67.0",
     "@nestjs/axios": "^0.0.7",
-    "@nestjs/common": "^8.4.2",
+    "@nestjs/common": "^8.4.4",
     "@nestjs/config": "^2.0.0",
-    "@nestjs/core": "^8.4.2",
+    "@nestjs/core": "^8.4.4",
     "@nestjs/jwt": "^8.0.0",
     "@nestjs/mapped-types": "^1.0.1",
     "@nestjs/passport": "^8.2.1",
-    "@nestjs/platform-express": "^8.4.2",
-    "@nestjs/schedule": "^1.0.2",
+    "@nestjs/platform-express": "^8.4.4",
+    "@nestjs/schedule": "^1.1.0",
     "@nestjs/serve-static": "^2.2.2",
     "@nestjs/terminus": "^8.0.6",
     "@nestjs/typeorm": "^8.0.3",
     "@sendgrid/mail": "^7.6.2",
     "@types/passport": "^1.0.7",
     "bcrypt": "^5.0.1",
-    "cache-manager": "^3.6.0",
+    "cache-manager": "^3.6.1",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.13.2",
     "cookie-parser": "^1.4.6",
     "csvtojson": "^2.0.10",
     "dayjs": "^1.11.0",
-    "googleapis": "^98.0.0",
+    "googleapis": "^100.0.0",
     "joi": "^17.6.0",
     "lodash": "^4.17.21",
     "multer": "^1.4.4",
-    "nanoid": "^3.3.1",
+    "nanoid": "^3.3.2",
     "node-stream-zip": "^1.15.0",
     "passport": "^0.5.2",
     "passport-jwt": "^4.0.0",
     "passport-local": "^1.0.0",
     "pdf-lib": "^1.17.1",
     "pg": "^8.7.3",
-    "playwright-chromium": "^1.20.1",
+    "playwright-chromium": "^1.20.2",
     "reflect-metadata": "^0.1.13",
     "rimraf": "^3.0.2",
     "rxjs": "^7.5.5",
-    "typeorm": "^0.2.45",
+    "typeorm": "^0.2.34",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "@nestjs/cli": "^8.2.4",
-    "@nestjs/schematics": "^8.0.8",
+    "@nestjs/cli": "^8.2.5",
+    "@nestjs/schematics": "^8.0.10",
     "@reactive-resume/schema": "workspace:*",
     "@types/bcrypt": "^5.0.0",
     "@types/cookie-parser": "^1.4.2",
     "@types/express": "^4.17.13",
     "@types/multer": "^1.4.7",
     "@types/node": "^17.0.23",
-    "eslint": "^8.11.0",
-    "prettier": "^2.6.0",
+    "eslint": "^8.12.0",
+    "prettier": "^2.6.2",
     "source-map-support": "^0.5.21",
     "ts-loader": "^9.2.8",
     "ts-node": "^10.7.0",
     "tsconfig-paths": "^3.14.1",
     "typescript": "<4.6.0",
-    "webpack": "^5.70.0"
+    "webpack": "^5.72.0"
   }
 }

server/src/config/config.module.ts

@@ -7,6 +7,7 @@ import authConfig from './auth.config';
 import databaseConfig from './database.config';
 import googleConfig from './google.config';
 import sendgridConfig from './sendgrid.config';
+import storageConfig from './storage.config';
 
 const validationSchema = Joi.object({
   // App
@@ -21,9 +22,9 @@ const validationSchema = Joi.object({
   // Database
   POSTGRES_HOST: Joi.string().required(),
   POSTGRES_PORT: Joi.number().default(5432),
+  POSTGRES_DB: Joi.string().required(),
   POSTGRES_USER: Joi.string().required(),
   POSTGRES_PASSWORD: Joi.string().required(),
-  POSTGRES_DATABASE: Joi.string().required(),
   POSTGRES_SSL_CERT: Joi.string().allow(''),
 
   // Auth
@@ -40,12 +41,20 @@ const validationSchema = Joi.object({
   SENDGRID_FORGOT_PASSWORD_TEMPLATE_ID: Joi.string().allow(''),
   SENDGRID_FROM_NAME: Joi.string().allow(''),
   SENDGRID_FROM_EMAIL: Joi.string().allow(''),
+
+  // Storage
+  STORAGE_BUCKET: Joi.string().allow(''),
+  STORAGE_REGION: Joi.string().allow(''),
+  STORAGE_ENDPOINT: Joi.string().allow(''),
+  STORAGE_URL_PREFIX: Joi.string().allow(''),
+  STORAGE_ACCESS_KEY: Joi.string().allow(''),
+  STORAGE_SECRET_KEY: Joi.string().allow(''),
 });
 
 @Module({
   imports: [
     NestConfigModule.forRoot({
-      load: [appConfig, authConfig, databaseConfig, googleConfig, sendgridConfig],
+      load: [appConfig, authConfig, databaseConfig, googleConfig, sendgridConfig, storageConfig],
       validationSchema: validationSchema,
     }),
   ],

server/src/config/database.config.ts

@@ -3,8 +3,8 @@ import { registerAs } from '@nestjs/config';
 export default registerAs('postgres', () => ({
   host: process.env.POSTGRES_HOST,
   port: parseInt(process.env.POSTGRES_PORT, 10) || 5432,
+  database: process.env.POSTGRES_DB,
   username: process.env.POSTGRES_USER,
   password: process.env.POSTGRES_PASSWORD,
-  database: process.env.POSTGRES_DATABASE,
   certificate: process.env.POSTGRES_SSL_CERT,
 }));

server/src/config/storage.config.ts

@@ -0,0 +1,10 @@
+import { registerAs } from '@nestjs/config';
+
+export default registerAs('storage', () => ({
+  bucket: process.env.STORAGE_BUCKET,
+  region: process.env.STORAGE_REGION,
+  endpoint: process.env.STORAGE_ENDPOINT,
+  urlPrefix: process.env.STORAGE_URL_PREFIX,
+  accessKey: process.env.STORAGE_ACCESS_KEY,
+  secretKey: process.env.STORAGE_SECRET_KEY,
+}));

server/src/resume/resume.controller.ts

@@ -99,7 +99,7 @@ export class ResumeController {
   @Put(':id/photo')
   @UseInterceptors(FileInterceptor('file'))
   async uploadPhoto(@Param('id') id: string, @User('id') userId: number, @UploadedFile() file: Express.Multer.File) {
-    return this.resumeService.uploadPhoto(+id, userId, file.filename);
+    return this.resumeService.uploadPhoto(+id, userId, file);
   }
 
   @UseGuards(JwtAuthGuard)

server/src/resume/resume.module.ts

@@ -2,12 +2,9 @@ import { Module } from '@nestjs/common';
 import { ConfigModule } from '@nestjs/config';
 import { MulterModule } from '@nestjs/platform-express';
 import { TypeOrmModule } from '@nestjs/typeorm';
-import { mkdir } from 'fs/promises';
-import { diskStorage } from 'multer';
-import { extname, join } from 'path';
+import { memoryStorage } from 'multer';
 
 import { AuthModule } from '@/auth/auth.module';
-import { User } from '@/users/entities/user.entity';
 import { UsersModule } from '@/users/users.module';
 
 import { Resume } from './entities/resume.entity';
@@ -18,24 +15,7 @@ import { ResumeService } from './resume.service';
   imports: [
     ConfigModule,
     TypeOrmModule.forFeature([Resume]),
-    MulterModule.register({
-      storage: diskStorage({
-        destination: async (req, _, cb) => {
-          const userId = (req.user as User).id;
-          const resumeId = +req.params.id;
-          const destination = join(__dirname, '..', `assets/uploads/${userId}/${resumeId}`);
-
-          await mkdir(destination, { recursive: true });
-
-          cb(null, destination);
-        },
-        filename: (_, file, cb) => {
-          const filename = new Date().getTime() + extname(file.originalname);
-
-          cb(null, filename);
-        },
-      }),
-    }),
+    MulterModule.register({ storage: memoryStorage() }),
     AuthModule,
     UsersModule,
   ],

server/src/resume/resume.service.ts

@@ -1,11 +1,11 @@
+import { DeleteObjectCommand, PutObjectCommand, S3, S3Client } from '@aws-sdk/client-s3';
 import { HttpException, HttpStatus, Injectable } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Resume as ResumeSchema } from '@reactive-resume/schema';
-import { unlink } from 'fs/promises';
 import { pick, sample, set } from 'lodash';
 import { nanoid } from 'nanoid';
-import { join } from 'path';
+import { extname } from 'path';
 import { Repository } from 'typeorm';
 
 import { PostgresErrorCode } from '@/database/errorCodes.enum';
@@ -22,11 +22,22 @@ export const SHORT_ID_LENGTH = 8;
 
 @Injectable()
 export class ResumeService {
+  private s3Client: S3Client;
+
   constructor(
     @InjectRepository(Resume) private resumeRepository: Repository<Resume>,
     private configService: ConfigService,
     private usersService: UsersService
-  ) {}
+  ) {
+    this.s3Client = new S3({
+      endpoint: configService.get<string>('storage.endpoint'),
+      region: configService.get<string>('storage.region'),
+      credentials: {
+        accessKeyId: configService.get<string>('storage.accessKey'),
+        secretAccessKey: configService.get<string>('storage.secretKey'),
+      },
+    });
+  }
 
   async create(createResumeDto: CreateResumeDto, userId: number) {
     try {
@@ -216,22 +227,44 @@ export class ResumeService {
     return this.resumeRepository.update(id, nextResume);
   }
 
-  async uploadPhoto(id: number, userId: number, filename: string) {
+  async uploadPhoto(id: number, userId: number, file: Express.Multer.File) {
     const resume = await this.findOne(id, userId);
 
-    const url = `/api/assets/uploads/${userId}/${id}/${filename}`;
-    const updatedResume = set(resume, 'basics.photo.url', url);
+    const urlPrefix = this.configService.get<string>('storage.urlPrefix');
+    const filename = new Date().getTime() + extname(file.originalname);
+    const key = `uploads/${userId}/${id}/${filename}`;
+
+    await this.s3Client.send(
+      new PutObjectCommand({
+        Bucket: this.configService.get<string>('storage.bucket'),
+        Key: key,
+        Body: file.buffer,
+        ACL: 'public-read',
+      })
+    );
+
+    const publicUrl = urlPrefix + key;
+
+    const updatedResume = set(resume, 'basics.photo.url', publicUrl);
 
     return this.resumeRepository.save<Resume>(updatedResume);
   }
 
   async deletePhoto(id: number, userId: number) {
     const resume = await this.findOne(id, userId);
-    const filepath = new URL(resume.basics.photo.url).pathname;
-    const photoPath = join(__dirname, '..', `assets/${filepath}`);
-    const updatedResume = set(resume, 'basics.photo.url', '');
 
-    await unlink(photoPath);
+    const urlPrefix = this.configService.get<string>('storage.urlPrefix');
+    const publicUrl = resume.basics.photo.url;
+    const key = publicUrl.replace(urlPrefix, '');
+
+    await this.s3Client.send(
+      new DeleteObjectCommand({
+        Bucket: this.configService.get<string>('storage.bucket'),
+        Key: key,
+      })
+    );
+
+    const updatedResume = set(resume, 'basics.photo.url', '');
 
     return this.resumeRepository.save<Resume>(updatedResume);
   }