fix(i18n): load locales from file system, instead of http-backend

apps/client/.env

@@ -1,8 +0,0 @@
-NEXT_PUBLIC_APP_VERSION=$npm_package_version
-
-# App & Server URLs
-NEXT_PUBLIC_APP_URL=$APP_URL
-NEXT_PUBLIC_SERVER_URL=$SERVER_URL
-
-# Google OAuth
-NEXT_PUBLIC_GOOGLE_CLIENT_ID=$GOOGLE_CLIENT_ID

apps/client/.eslintrc.json

@@ -19,5 +19,8 @@
   ],
   "env": {
     "jest": true
+  },
+  "rules": {
+    "@next/next/no-img-element": "off"
   }
 }

apps/client/components/build/Center/ArtboardController.tsx

@@ -9,7 +9,7 @@ import {
   ZoomIn,
   ZoomOut,
 } from '@mui/icons-material';
-import { ButtonBase, Divider, Tooltip } from '@mui/material';
+import { ButtonBase, Divider, Tooltip, useMediaQuery, useTheme } from '@mui/material';
 import clsx from 'clsx';
 import { get } from 'lodash';
 import { useTranslation } from 'next-i18next';
@@ -28,9 +28,11 @@ import styles from './ArtboardController.module.scss';
 const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, centerView }) => {
   const { t } = useTranslation();
 
+  const theme = useTheme();
   const dispatch = useAppDispatch();
 
   const resume = useAppSelector((state) => state.resume);
+  const isDesktop = useMediaQuery(theme.breakpoints.up('sm'));
   const { left, right } = useAppSelector((state) => state.build.sidebar);
   const orientation = useAppSelector((state) => state.build.page.orientation);
 
@@ -92,29 +94,33 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
 
         <Divider />
 
-        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-orientation')}>
-          <ButtonBase onClick={handleTogglePageOrientation}>
-            {orientation === 'vertical' ? (
-              <AlignHorizontalCenter fontSize="medium" />
-            ) : (
-              <AlignVerticalCenter fontSize="medium" />
-            )}
-          </ButtonBase>
-        </Tooltip>
+        {isDesktop && (
+          <>
+            <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-orientation')}>
+              <ButtonBase onClick={handleTogglePageOrientation}>
+                {orientation === 'vertical' ? (
+                  <AlignHorizontalCenter fontSize="medium" />
+                ) : (
+                  <AlignVerticalCenter fontSize="medium" />
+                )}
+              </ButtonBase>
+            </Tooltip>
 
-        <Tooltip arrow placement="top" title={t('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-page-break-line')}>
+              <ButtonBase onClick={handleTogglePageBreakLine}>
+                <InsertPageBreak fontSize="medium" />
+              </ButtonBase>
+            </Tooltip>
 
-        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-sidebars')}>
-          <ButtonBase onClick={handleToggleSidebar}>
-            <ViewSidebar fontSize="medium" />
-          </ButtonBase>
-        </Tooltip>
+            <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-sidebars')}>
+              <ButtonBase onClick={handleToggleSidebar}>
+                <ViewSidebar fontSize="medium" />
+              </ButtonBase>
+            </Tooltip>
 
-        <Divider />
+            <Divider />
+          </>
+        )}
 
         <Tooltip arrow placement="top" title={t('builder.controller.tooltip.copy-link')}>
           <ButtonBase onClick={handleCopyLink}>

apps/client/components/build/RightSidebar/RightSidebar.tsx

@@ -72,7 +72,7 @@ const RightSidebar = () => {
           <footer className={styles.footer}>
             <Footer />
 
-            <div>v{process.env.NEXT_PUBLIC_APP_VERSION}</div>
+            <div>v{process.env.appVersion}</div>
           </footer>
         </main>
       </div>

apps/client/i18n/index.ts

@@ -1,18 +1,15 @@
-import HttpBackend from 'i18next-http-backend';
+import { UserConfig } from 'next-i18next';
+import { join } from 'path';
 
-const i18nConfig = {
+const i18nConfig: UserConfig = {
   i18n: {
     defaultLocale: 'en',
     locales: ['en'],
   },
   debug: false,
   nsSeparator: '.',
+  localePath: join(__dirname, '../../../public/locales'),
   ns: ['common', 'modals', 'landing', 'dashboard', 'builder'],
-  serializeConfig: false,
-  use: [HttpBackend],
-  backend: {
-    loadPath: `${process.env.NEXT_PUBLIC_APP_URL}/locales/{{lng}}/{{ns}}.json`,
-  },
 };
 
 export default i18nConfig;

apps/client/modals/auth/LoginModal.tsx

@@ -54,7 +54,7 @@ const LoginModal: React.FC = () => {
   );
 
   const { signIn } = useGoogleLogin({
-    clientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
+    clientId: process.env.googleClientId,
     onSuccess: async (response: GoogleLoginResponse) => {
       await loginWithGoogleMutation({ accessToken: response.accessToken });
 

apps/client/next.config.js

@@ -9,12 +9,19 @@ const nextConfig = {
     locales: ['en'],
   },
 
+  env: {
+    appUrl: process.env.APP_URL,
+    serverUrl: process.env.SERVER_URL,
+    appVersion: process.env.npm_package_version,
+    googleClientId: process.env.GOOGLE_CLIENT_ID,
+  },
+
   nx: {
     svgr: false,
   },
 
   images: {
-    domains: ['localhost', 'www.gravatar.com'],
+    domains: ['www.gravatar.com'],
   },
 
   // Hack to make Tailwind darkMode 'class' strategy with CSS Modules

apps/client/project.json

@@ -20,8 +20,7 @@
       "options": {
         "buildTarget": "client:build",
         "dev": true,
-        "port": 3000,
-        "proxyConfig": "apps/client/proxy.conf.json"
+        "port": 3000
       },
       "configurations": {
         "production": {

apps/client/services/axios.ts

@@ -13,11 +13,11 @@ export type ServerError = {
 };
 
 const axios = _axios.create({
-  baseURL: `${process.env.NEXT_PUBLIC_SERVER_URL}/api`,
+  baseURL: `${process.env.serverUrl}/api`,
 });
 
 export const uninterceptedAxios = _axios.create({
-  baseURL: `${process.env.NEXT_PUBLIC_SERVER_URL}/api`,
+  baseURL: `${process.env.serverUrl}/api`,
 });
 
 axios.interceptors.request.use((config) => {

apps/client/templates/Castform/widgets/Masthead.tsx

@@ -4,7 +4,6 @@ import { Theme } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
-import Image from 'next/image';
 import { useMemo } from 'react';
 
 import Markdown from '@/components/shared/Markdown';
@@ -25,10 +24,9 @@ export const MastheadSidebar: React.FC = () => {
   return (
     <div className="col-span-2 grid justify-items-start gap-3 px-4 pt-4">
       {photo.visible && !isEmpty(photo.url) && (
-        <Image
+        <img
           alt={name}
           src={photo.url}
-          objectFit="cover"
           width={photo.filters.size}
           height={photo.filters.size}
           className={getPhotoClassNames(photo.filters)}

apps/client/templates/Gengar/widgets/Masthead.tsx

@@ -5,7 +5,6 @@ import { Theme } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
-import Image from 'next/image';
 import { useMemo } from 'react';
 
 import Markdown from '@/components/shared/Markdown';
@@ -26,10 +25,9 @@ export const MastheadSidebar: React.FC = () => {
   return (
     <div className="col-span-2 grid justify-items-start gap-3 p-4">
       {photo.visible && !isEmpty(photo.url) && (
-        <Image
+        <img
           alt={name}
           src={photo.url}
-          objectFit="cover"
           width={photo.filters.size}
           height={photo.filters.size}
           className={getPhotoClassNames(photo.filters)}

apps/client/templates/Glalie/widgets/Masthead.tsx

@@ -1,7 +1,6 @@
 import { Email, Phone, Public, Room } from '@mui/icons-material';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
-import Image from 'next/image';
 
 import Markdown from '@/components/shared/Markdown';
 import { useAppSelector } from '@/store/hooks';
@@ -18,19 +17,18 @@ export const MastheadSidebar: React.FC = () => {
   return (
     <div className="col-span-2 grid justify-items-center gap-4">
       {photo.visible && !isEmpty(photo.url) && (
-        <Image
+        <img
           alt={name}
           src={photo.url}
-          objectFit="cover"
           width={photo.filters.size}
           height={photo.filters.size}
           className={getPhotoClassNames(photo.filters)}
         />
       )}
 
-      <div>
+      <div className="text-center">
         <h1>{name}</h1>
-        <p className="opacity-75">{headline}</p>
+        <p className="mt-1 opacity-75">{headline}</p>
       </div>
 
       <div className="flex flex-col gap-2 rounded border-2 p-4" style={{ borderColor: primaryColor }}>

apps/client/templates/Kakuna/widgets/Masthead.tsx

@@ -1,6 +1,5 @@
 import { Email, Phone, Public, Room } from '@mui/icons-material';
 import isEmpty from 'lodash/isEmpty';
-import Image from 'next/image';
 import React from 'react';
 
 import { useAppSelector } from '@/store/hooks';
@@ -14,22 +13,25 @@ const Masthead = () => {
   );
 
   return (
-    <div className="mb-4 border-b pb-4 text-center">
-      {photo.visible && !isEmpty(photo.url) && (
-        <Image
-          alt={name}
-          src={photo.url}
-          width={photo.filters.size}
-          height={photo.filters.size}
-          objectFit="cover"
-          className={getPhotoClassNames(photo.filters)}
-        />
-      )}
+    <div className="grid gap-3 justify-center mb-4 border-b pb-4 text-center">
+      <div className="mx-auto">
+        {photo.visible && !isEmpty(photo.url) && (
+          <img
+            alt={name}
+            src={photo.url}
+            width={photo.filters.size}
+            height={photo.filters.size}
+            className={getPhotoClassNames(photo.filters)}
+          />
+        )}
+      </div>
 
-      <h1 className="mt-2 mb-1">{name}</h1>
-      <p className="opacity-75">{headline}</p>
+      <div>
+        <h1 className="mb-1">{name}</h1>
+        <p className="opacity-75">{headline}</p>
+      </div>
 
-      <div className="mt-4 flex flex-wrap justify-center gap-3">
+      <div className="flex flex-wrap justify-center gap-3">
         <DataDisplay icon={<Email />} link={`mailto:${email}`}>
           {email}
         </DataDisplay>

apps/client/templates/Onyx/widgets/Masthead.tsx

@@ -1,6 +1,5 @@
 import { Email, Phone, Public, Room } from '@mui/icons-material';
 import isEmpty from 'lodash/isEmpty';
-import Image from 'next/image';
 
 import { useAppSelector } from '@/store/hooks';
 import DataDisplay from '@/templates/shared/DataDisplay';
@@ -15,12 +14,11 @@ const Masthead: React.FC = () => {
   return (
     <div className="flex items-center gap-4">
       {photo.visible && !isEmpty(photo.url) && (
-        <Image
+        <img
           alt={name}
           src={photo.url}
           width={photo.filters.size}
           height={photo.filters.size}
-          objectFit="cover"
           className={getPhotoClassNames(photo.filters)}
         />
       )}

apps/client/templates/Pikachu/widgets/Masthead.tsx

@@ -2,7 +2,6 @@ import { Email, Phone, Public, Room } from '@mui/icons-material';
 import { Theme } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
-import Image from 'next/image';
 import { useMemo } from 'react';
 
 import Markdown from '@/components/shared/Markdown';
@@ -19,13 +18,7 @@ export const MastheadSidebar: React.FC = () => {
     <div className="col-span-2 grid justify-items-center gap-4">
       {photo.visible && !isEmpty(photo.url) && (
         <div className="relative aspect-square h-full w-full">
-          <Image
-            alt={name}
-            layout="fill"
-            src={photo.url}
-            objectFit="cover"
-            className={getPhotoClassNames(photo.filters)}
-          />
+          <img alt={name} src={photo.url} className={getPhotoClassNames(photo.filters)} />
         </div>
       )}
 

apps/client/templates/templateMap.tsx

@@ -18,37 +18,37 @@ const templateMap: Record<string, TemplateMeta> = {
   kakuna: {
     id: 'kakuna',
     name: 'Kakuna',
-    preview: require('./Kakuna/preview.jpg'),
+    preview: '/images/templates/kakuna.jpg',
     component: Kakuna,
   },
   onyx: {
     id: 'onyx',
     name: 'Onyx',
-    preview: require('./Onyx/preview.jpg'),
+    preview: '/images/templates/onyx.jpg',
     component: Onyx,
   },
   pikachu: {
     id: 'pikachu',
     name: 'Pikachu',
-    preview: require('./Pikachu/preview.jpg'),
+    preview: '/images/templates/pikachu.jpg',
     component: Pikachu,
   },
   gengar: {
     id: 'gengar',
     name: 'Gengar',
-    preview: require('./Gengar/preview.jpg'),
+    preview: '/images/templates/gengar.jpg',
     component: Gengar,
   },
   castform: {
     id: 'castform',
     name: 'Castform',
-    preview: require('./Castform/preview.jpg'),
+    preview: '/images/templates/castform.jpg',
     component: Castform,
   },
   glalie: {
     id: 'glalie',
     name: 'Glalie',
-    preview: require('./Glalie/preview.jpg'),
+    preview: '/images/templates/glalie.jpg',
     component: Glalie,
   },
 };

apps/client/types/environment.d.ts

@@ -2,12 +2,7 @@ declare global {
   namespace NodeJS {
     interface ProcessEnv {
       TZ: string;
-      ANALYZE?: boolean;
       NODE_ENV: 'development' | 'production';
-
-      // Public Environment Variables
-      NEXT_PUBLIC_APP_VERSION?: string;
-      NEXT_PUBLIC_GOOGLE_CLIENT_ID?: string;
     }
   }
 }

apps/client/utils/template.ts

@@ -51,6 +51,7 @@ export const parseListItemPath = (item: ListItem, path: string | string[], separ
 
 export const getPhotoClassNames = (filters: PhotoFilters) =>
   clsx({
+    'object-cover': true,
     grayscale: filters.grayscale,
     '!border-[4px] !border-solid': filters.border,
     'rounded-lg': filters.shape === 'rounded-square',