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

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,
   },
 };