chore(release): 3.3.4

New Crowdin updates

.devcontainer/Dockerfile

@@ -0,0 +1,5 @@
+ARG VARIANT="16-bullseye"
+
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+
+RUN curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm

.devcontainer/devcontainer.json

@@ -0,0 +1,27 @@
+{
+  "name": "Node.js",
+
+  "build": {
+    "dockerfile": "Dockerfile",
+    "args": { "VARIANT": "16-bullseye" }
+  },
+
+  // Set *default* container specific settings.json values on container create.
+  "settings": {},
+
+  // Add the IDs of extensions you want installed when the container is created.
+  "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "lokalise.i18n-ally"],
+
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  "forwardPorts": [80, 5432],
+
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "pnpm install",
+
+  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  "remoteUser": "node",
+
+  "features": {
+    "docker-from-docker": "latest"
+  }
+}

.env.example

@@ -1,33 +1,33 @@
-# App
+# Server + Client
 TZ=UTC
-SECRET_KEY=
+PUBLIC_URL=http://localhost:3000
+PUBLIC_SERVER_URL=http://localhost:3000/api
+PUBLIC_GOOGLE_CLIENT_ID=
 
-# URLs
-PUBLIC_URL=http://<SERVER-IP>
-PUBLIC_SERVER_URL=http://<SERVER-IP>/api
-
-# Database
-POSTGRES_HOST=localhost
-POSTGRES_PORT=5432
-POSTGRES_USERNAME=postgres
+# Server + Database
+POSTGRES_DB=postgres
+POSTGRES_USER=postgres
 POSTGRES_PASSWORD=postgres
-POSTGRES_DATABASE=postgres
-POSTGRES_SSL_CERT=
 
-# Auth
+# Server
+SECRET_KEY=
+POSTGRES_HOST=postgres
+POSTGRES_PORT=5432
+POSTGRES_SSL_CERT=
 JWT_SECRET=
 JWT_EXPIRY_TIME=604800
-
-# Google
-PUBLIC_GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 GOOGLE_API_KEY=
-
-# SendGrid (Optional)
 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 (Optional)
+# Flags (Client)
 PUBLIC_FLAG_DISABLE_SIGNUPS=false

.github/ISSUE_TEMPLATE/bug-report.md

@@ -8,29 +8,29 @@ assignees: ''
 ---
 
 **Describe the bug**
-A clear and concise description of what the bug is.
+<!-- A clear and concise description of what the bug is. -->
 
 **Product Flavor**
 - [ ] Managed (https://rxresu.me)
 - [ ] Self Hosted
 
 **To Reproduce**
-Steps to reproduce the behavior:
+<!-- Steps to reproduce the behavior: -->
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
 
 **Expected behavior**
-A clear and concise description of what you expected to happen.
+<!-- A clear and concise description of what you expected to happen. -->
 
 **Screenshots**
-If applicable, add screenshots to help explain your problem.
+<!-- If applicable, add screenshots to help explain your problem. -->
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+ - OS: <!--[e.g. iOS]-->
+ - Browser <!--[e.g. chrome, safari]-->
+ - Version <!--[e.g. 22]-->
 
 **Additional context**
-Add any other context about the problem here.
+<!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/feature-request.md

@@ -8,13 +8,13 @@ assignees: ''
 ---
 
 **Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
 
 **Describe the solution you'd like**
-A clear and concise description of what you want to happen.
+<!-- A clear and concise description of what you want to happen. -->
 
 **Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
 
 **Additional context**
-Add any other context or screenshots about the feature request here.
+<!-- Add any other context or screenshots about the feature request here. -->

.github/dependabot.yml

@@ -0,0 +1,22 @@
+version: 2
+
+updates:
+  - package-ecosystem: 'docker'
+    directory: '/server'
+    schedule:
+      interval: 'weekly'
+
+  - package-ecosystem: 'docker'
+    directory: '/client'
+    schedule:
+      interval: 'weekly'
+
+  - package-ecosystem: 'gradle'
+    directory: '/app'
+    schedule:
+      interval: 'weekly'
+
+  - package-ecosystem: 'github-actions'
+    directory: '/'
+    schedule:
+      interval: 'weekly'

.github/workflows/digitalocean-deploy.yml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Install DigitalOcean CLI
-        uses: digitalocean/action-doctl@v2.1.0
+        uses: digitalocean/action-doctl@v2.1.1
         with:
           token: ${{ secrets.DIGITALOCEAN_TOKEN }}
 

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

@@ -5,8 +5,8 @@ on:
     types: [published]
 
 jobs:
-  docker_client:
-    name: Docker (Client)
+  client:
+    name: Client
     runs-on: ubuntu-latest
 
     steps:
@@ -17,24 +17,40 @@ 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:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v1.14.1
+        with:
+          registry: ghcr.io
+          username: $GITHUB_REPOSITORY_OWNER
+          password: ${{ secrets.GH_TOKEN }}
+
       - name: Build and Push Client Image
-        uses: docker/build-push-action@v2.9.0
+        uses: docker/build-push-action@v2.10.0
         with:
           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 }}
+            ghcr.io/amruthpillai/reactive-resume:client-latest
+            ghcr.io/amruthpillai/reactive-resume:client-${{ steps.version.outputs.tag }}
 
-  docker_server:
-    name: Docker (Server)
+  server:
+    name: Server
     runs-on: ubuntu-latest
 
     steps:
@@ -45,76 +61,34 @@ 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:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v1.14.1
+        with:
+          registry: ghcr.io
+          username: $GITHUB_REPOSITORY_OWNER
+          password: ${{ secrets.GH_TOKEN }}
+
       - name: Build and Push Server Image
-        uses: docker/build-push-action@v2.9.0
+        uses: docker/build-push-action@v2.10.0
         with:
           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 }}
-
-  github_client:
-    name: GitHub (Client)
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v3.0.0
-
-      - id: version
-        name: Get Version
-        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v1.14.1
-        with:
-          registry: ghcr.io
-          username: $GITHUB_REPOSITORY_OWNER
-          password: ${{ secrets.GH_TOKEN }}
-
-      - name: Build and Push Client Image
-        uses: docker/build-push-action@v2.9.0
-        with:
-          context: .
-          push: true
-          file: client/Dockerfile
-          tags: |
-            ghcr.io/amruthpillai/reactive-resume:client-latest
-            ghcr.io/amruthpillai/reactive-resume:client-${{ steps.version.outputs.tag }}
-
-  github_server:
-    name: GitHub (Server)
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v3.0.0
-
-      - id: version
-        name: Get Version
-        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v1.14.1
-        with:
-          registry: ghcr.io
-          username: $GITHUB_REPOSITORY_OWNER
-          password: ${{ secrets.GH_TOKEN }}
-
-      - name: Build and Push Server Image
-        uses: docker/build-push-action@v2.9.0
-        with:
-          context: .
-          push: true
-          file: server/Dockerfile
-          tags: |
             ghcr.io/amruthpillai/reactive-resume:server-latest
             ghcr.io/amruthpillai/reactive-resume:server-${{ steps.version.outputs.tag }}

CHANGELOG.md

@@ -2,6 +2,59 @@
 
 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.4](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.3.3...v3.3.4) (2022-04-09)
+
+### [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)
+
+
+### Features
+
+* **i18n:** add portuguese (pt) language to i18n locales ([7f1c82c](https://github.com/AmruthPillai/Reactive-Resume/commit/7f1c82cd9185ebb44486a16132eb44d5c2fb747a))
+
+### [3.2.9](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.2.8...v3.2.9) (2022-03-21)
+
+
+### Features
+
+* **i18n:** add nl and ru i18n locales to app ([03cbf22](https://github.com/AmruthPillai/Reactive-Resume/commit/03cbf22c9bee96cac8f228830b67b44529b7ecee))
+
 ### [3.2.8](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.2.7...v3.2.8) (2022-03-18)
 
 

README.md

@@ -1,11 +1,12 @@
-<img src="https://i.imgur.com/pc8Ingg.png" alt="Reactive Resume" width="256px" height="256px" />
+<img src="https://github.com/AmruthPillai/Reactive-Resume/blob/main/docs/static/logo.svg" alt="Reactive Resume" width="256px" height="256px" />
 
 # Reactive Resume
 
-![Project Version](https://img.shields.io/github/package-json/v/AmruthPillai/Reactive-Resume?style=flat-square)
-![Project License](https://img.shields.io/github/license/AmruthPillai/Reactive-Resume?style=flat-square)
+[![Project Version](https://img.shields.io/github/package-json/v/AmruthPillai/Reactive-Resume?style=flat-square)](https://github.com/AmruthPillai/Reactive-Resume/releases)
+[![Project License](https://img.shields.io/github/license/AmruthPillai/Reactive-Resume?style=flat-square)](https://github.com/AmruthPillai/Reactive-Resume/blob/main/LICENSE)
 [![Crowdin](https://badges.crowdin.net/reactive-resume/localized.svg)](https://translate.rxresu.me)
 [![Docker Pulls](https://img.shields.io/docker/pulls/amruthpillai/reactive-resume?style=flat-square)](https://hub.docker.com/r/amruthpillai/reactive-resume)
+![GitHub Workflow Status](https://img.shields.io/github/workflow/status/AmruthPillai/Reactive-Resume/Build%20and%20Push%20Docker%20Image?label=docker%20build&style=flat-square)
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FAmruthPillai%2FReactive-Resume.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FAmruthPillai%2FReactive-Resume?ref=badge_shield)
 
 ## [Go to App](https://rxresu.me) | [Docs](https://docs.rxresu.me)
@@ -40,6 +41,7 @@ You have complete control over what goes into your resume, how it looks, what co
 - Bengali (বাংলা)
 - Chinese (中文)
 - Danish (Dansk)
+- Dutch (Nederlands)
 - English
 - French (Français)
 - German (Deutsch)
@@ -48,6 +50,8 @@ You have complete control over what goes into your resume, how it looks, what co
 - Kannada (ಕನ್ನಡ)
 - Malayalam (മലയാളം)
 - Polish (Polski)
+- Portuguese (Português)
+- Russian (русский)
 - Spanish (Español)
 - Tamil (தமிழ்)
 - Turkish (Türkçe)

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/.eslintrc.json

@@ -3,6 +3,7 @@
   "ignorePatterns": [".next", "__ENV.js"],
   "rules": {
     "@next/next/no-img-element": "off",
-    "@next/next/no-sync-scripts": "off"
+    "@next/next/no-sync-scripts": "off",
+    "@next/next/no-html-link-for-pages": [2, "client/pages"]
   }
 }

client/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16-alpine as dependencies
+FROM node:17-alpine as dependencies
 
 RUN apk add --no-cache curl g++ make python3 \
   && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
@@ -11,7 +11,7 @@ COPY ./client/package.json ./client/package.json
 
 RUN pnpm install --frozen-lockfile
 
-FROM node:16-alpine as builder
+FROM node:17-alpine as builder
 
 RUN apk add --no-cache curl g++ make python3 \
   && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
@@ -27,7 +27,7 @@ COPY --from=dependencies /app/client/node_modules ./client/node_modules
 RUN pnpm run build:schema
 RUN pnpm run build:client
 
-FROM node:16-alpine as production
+FROM node:17-alpine as production
 
 WORKDIR /app
 
@@ -49,4 +49,7 @@ EXPOSE 3000
 
 ENV PORT 3000
 
+HEALTHCHECK --interval=30s --timeout=20s --retries=3 --start-period=15s \
+    CMD curl -fSs 127.0.0.1:3000 || exit 1
+
 CMD [ "pnpm", "run", "start:client" ]

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/config/languages.ts

@@ -16,7 +16,10 @@ export const languages: Language[] = [
   { code: 'it', name: 'Italian', localName: 'Italiano' },
   { code: 'kn', name: 'Kannada', localName: 'ಕನ್ನಡ' },
   { code: 'ml', name: 'Malayalam', localName: 'മലയാളം' },
+  { code: 'nl', name: 'Dutch', localName: 'Nederlands' },
   { code: 'pl', name: 'Polish', localName: 'Polski' },
+  { code: 'pt', name: 'Portuguese', localName: 'Português' },
+  { code: 'ru', name: 'Russian', localName: 'русский' },
   { code: 'ta', name: 'Tamil', localName: 'தமிழ்' },
   { code: 'tr', name: 'Turkish', localName: 'Türkçe' },
   { code: 'vi', name: 'Vietnamese', localName: 'Tiếng Việt' },

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-i18next.config.js

@@ -3,7 +3,27 @@ const path = require('path');
 const i18nConfig = {
   i18n: {
     defaultLocale: 'en',
-    locales: ['ar', 'bn', 'da', 'de', 'en', 'es', 'fr', 'hi', 'it', 'kn', 'ml', 'pl', 'ta', 'tr', 'vi', 'zh'],
+    locales: [
+      'ar',
+      'bn',
+      'da',
+      'de',
+      'en',
+      'es',
+      'fr',
+      'hi',
+      'it',
+      'kn',
+      'ml',
+      'nl',
+      'pl',
+      'pt',
+      'ru',
+      'ta',
+      'tr',
+      'vi',
+      'zh',
+    ],
   },
   nsSeparator: '.',
   localePath: path.resolve('./public/locales'),

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.73",
-    "@mui/material": "^5.5.1",
-    "@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.0",
+    "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.7",
+    "@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/node": "17.0.21",
-    "@types/react": "17.0.40",
+    "@types/lodash": "^4.14.181",
+    "@types/node": "17.0.23",
+    "@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.3",
-    "eslint": "^8.11.0",
-    "eslint-config-next": "12.1.0",
-    "next-sitemap": "^2.5.10",
-    "postcss": "^8.4.11",
-    "prettier": "^2.6.0",
-    "sass": "^1.49.9",
+    "autoprefixer": "^10.4.4",
+    "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.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>