feat(all): upgrade to v3.4.0

client/templates/Castform/widgets/Heading.tsx

@@ -5,7 +5,7 @@ import { useMemo } from 'react';
 
 import { useAppSelector } from '@/store/hooks';
 
-const Heading: React.FC = ({ children }) => {
+const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
   const darkerPrimary = useMemo(() => darken(theme.primary, 0.2), [theme.primary]);
 

client/templates/Castform/widgets/Masthead.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { Email, Phone, Public, Room } from '@mui/icons-material';
+import { Cake, Email, Phone, Public, Room } from '@mui/icons-material';
 import { Theme } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import get from 'lodash/get';
@@ -9,12 +9,14 @@ import { useMemo } from 'react';
 import Markdown from '@/components/shared/Markdown';
 import { useAppSelector } from '@/store/hooks';
 import DataDisplay from '@/templates/shared/DataDisplay';
+import { formatDateString } from '@/utils/date';
 import getProfileIcon from '@/utils/getProfileIcon';
 import { getContrastColor } from '@/utils/styles';
 import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
 
 export const MastheadSidebar: React.FC = () => {
-  const { name, headline, photo, email, phone, website, location, profiles } = useAppSelector(
+  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
+  const { name, headline, photo, email, phone, birthdate, website, location, profiles } = useAppSelector(
     (state) => state.resume.basics
   );
   const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
@@ -43,6 +45,10 @@ export const MastheadSidebar: React.FC = () => {
           {formatLocation(location)}
         </DataDisplay>
 
+        <DataDisplay icon={<Cake />} className="!gap-2 text-xs">
+          {formatDateString(birthdate, dateFormat)}
+        </DataDisplay>
+
         <DataDisplay icon={<Email />} className="!gap-2 text-xs" link={`mailto:${email}`}>
           {email}
         </DataDisplay>

client/templates/Gengar/widgets/Heading.tsx

@@ -3,7 +3,7 @@ import get from 'lodash/get';
 
 import { useAppSelector } from '@/store/hooks';
 
-const Heading: React.FC = ({ children }) => {
+const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
 
   return (

client/templates/Gengar/widgets/Masthead.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { Email, Phone, Public, Room } from '@mui/icons-material';
+import { Cake, Email, Phone, Public, Room } from '@mui/icons-material';
 import { alpha } from '@mui/material';
 import { Theme } from '@reactive-resume/schema';
 import clsx from 'clsx';
@@ -10,12 +10,14 @@ import { useMemo } from 'react';
 import Markdown from '@/components/shared/Markdown';
 import { useAppSelector } from '@/store/hooks';
 import DataDisplay from '@/templates/shared/DataDisplay';
+import { formatDateString } from '@/utils/date';
 import getProfileIcon from '@/utils/getProfileIcon';
 import { getContrastColor } from '@/utils/styles';
 import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
 
 export const MastheadSidebar: React.FC = () => {
-  const { name, headline, photo, email, phone, website, location, profiles } = useAppSelector(
+  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
+  const { name, headline, photo, email, phone, birthdate, website, location, profiles } = useAppSelector(
     (state) => state.resume.basics
   );
   const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
@@ -44,6 +46,10 @@ export const MastheadSidebar: React.FC = () => {
           {formatLocation(location)}
         </DataDisplay>
 
+        <DataDisplay icon={<Cake />} className="!gap-2 text-xs">
+          {formatDateString(birthdate, dateFormat)}
+        </DataDisplay>
+
         <DataDisplay icon={<Email />} className="!gap-2 text-xs" link={`mailto:${email}`}>
           {email}
         </DataDisplay>

client/templates/Glalie/widgets/Heading.tsx

@@ -3,7 +3,7 @@ import get from 'lodash/get';
 
 import { useAppSelector } from '@/store/hooks';
 
-const Heading: React.FC = ({ children }) => {
+const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
 
   return (

client/templates/Glalie/widgets/Masthead.tsx

@@ -1,16 +1,18 @@
-import { Email, Phone, Public, Room } from '@mui/icons-material';
+import { Cake, Email, Phone, Public, Room } from '@mui/icons-material';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 
 import Markdown from '@/components/shared/Markdown';
 import { useAppSelector } from '@/store/hooks';
 import DataDisplay from '@/templates/shared/DataDisplay';
+import { formatDateString } from '@/utils/date';
 import getProfileIcon from '@/utils/getProfileIcon';
 import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
 
 export const MastheadSidebar: React.FC = () => {
+  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
   const primaryColor: string = useAppSelector((state) => get(state.resume, 'metadata.theme.primary'));
-  const { name, headline, photo, email, phone, website, location, profiles } = useAppSelector(
+  const { name, headline, photo, email, phone, birthdate, website, location, profiles } = useAppSelector(
     (state) => state.resume.basics
   );
 
@@ -36,6 +38,10 @@ export const MastheadSidebar: React.FC = () => {
           {formatLocation(location)}
         </DataDisplay>
 
+        <DataDisplay icon={<Cake />} className="text-xs">
+          {formatDateString(birthdate, dateFormat)}
+        </DataDisplay>
+
         <DataDisplay icon={<Email />} className="text-xs" link={`mailto:${email}`}>
           {email}
         </DataDisplay>

client/templates/Kakuna/widgets/Heading.tsx

@@ -1,4 +1,4 @@
-const Heading: React.FC = ({ children }) => {
+const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   return <h3 className="my-2 inline-block border-b px-5 pb-2">{children}</h3>;
 };
 

client/templates/Kakuna/widgets/Masthead.tsx

@@ -1,14 +1,17 @@
-import { Email, Phone, Public, Room } from '@mui/icons-material';
+import { Cake, Email, Phone, Public, Room } from '@mui/icons-material';
+import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import React from 'react';
 
 import { useAppSelector } from '@/store/hooks';
 import DataDisplay from '@/templates/shared/DataDisplay';
+import { formatDateString } from '@/utils/date';
 import getProfileIcon from '@/utils/getProfileIcon';
 import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
 
 const Masthead = () => {
-  const { name, photo, email, phone, website, headline, location, profiles } = useAppSelector(
+  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
+  const { name, photo, email, phone, website, birthdate, headline, location, profiles } = useAppSelector(
     (state) => state.resume.basics
   );
 
@@ -32,6 +35,8 @@ const Masthead = () => {
       </div>
 
       <div className="flex flex-wrap justify-center gap-3">
+        <DataDisplay icon={<Cake />}>{formatDateString(birthdate, dateFormat)}</DataDisplay>
+
         <DataDisplay icon={<Email />} link={`mailto:${email}`}>
           {email}
         </DataDisplay>

client/templates/Leafish/Leafish.module.scss

@@ -1,5 +1,3 @@
-.page {}
-
 .container {
   @apply grid grid-cols-2 gap-8 px-6 py-4;
 

client/templates/Leafish/widgets/Heading.tsx

@@ -3,7 +3,7 @@ import get from 'lodash/get';
 
 import { useAppSelector } from '@/store/hooks';
 
-const Heading: React.FC = ({ children }) => {
+const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
 
   return (

client/templates/Leafish/widgets/Masthead.tsx

@@ -1,4 +1,4 @@
-import { Email, Phone, Public, Room } from '@mui/icons-material';
+import { Cake, Email, Phone, Public, Room } from '@mui/icons-material';
 import { alpha } from '@mui/material';
 import { Theme } from '@reactive-resume/schema';
 import get from 'lodash/get';
@@ -6,11 +6,13 @@ import isEmpty from 'lodash/isEmpty';
 
 import { useAppSelector } from '@/store/hooks';
 import DataDisplay from '@/templates/shared/DataDisplay';
+import { formatDateString } from '@/utils/date';
 import getProfileIcon from '@/utils/getProfileIcon';
 import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
 
 const Masthead: React.FC = () => {
-  const { name, photo, headline, summary, email, phone, website, location, profiles } = useAppSelector(
+  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
+  const { name, photo, headline, summary, email, phone, birthdate, website, location, profiles } = useAppSelector(
     (state) => state.resume.basics
   );
   const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
@@ -48,6 +50,12 @@ const Masthead: React.FC = () => {
         id="Masterhead_data"
         style={{ backgroundColor: alpha(theme.primary, 0.4), gridTemplateColumns: `repeat(2, minmax(0, 1fr))` }}
       >
+        <DataDisplay icon={<Room />} className="col-span-2">
+          {formatLocation(location)}
+        </DataDisplay>
+
+        <DataDisplay icon={<Cake />}>{formatDateString(birthdate, dateFormat)}</DataDisplay>
+
         <DataDisplay icon={<Email />} link={`mailto:${email}`}>
           {email}
         </DataDisplay>
@@ -60,8 +68,6 @@ const Masthead: React.FC = () => {
           {website}
         </DataDisplay>
 
-        <DataDisplay icon={<Room />}>{formatLocation(location)}</DataDisplay>
-
         {profiles.map(({ id, username, network, url }) => (
           <DataDisplay key={id} icon={getProfileIcon(network)} link={url && addHttp(url)}>
             {username}

client/templates/Onyx/widgets/Heading.tsx

@@ -3,7 +3,7 @@ import get from 'lodash/get';
 
 import { useAppSelector } from '@/store/hooks';
 
-const Heading: React.FC = ({ children }) => {
+const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
 
   return (

client/templates/Onyx/widgets/Masthead.tsx

@@ -1,13 +1,16 @@
-import { Email, Phone, Public, Room } from '@mui/icons-material';
+import { Cake, Email, Phone, Public, Room } from '@mui/icons-material';
+import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 
 import { useAppSelector } from '@/store/hooks';
 import DataDisplay from '@/templates/shared/DataDisplay';
+import { formatDateString } from '@/utils/date';
 import getProfileIcon from '@/utils/getProfileIcon';
 import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
 
 const Masthead: React.FC = () => {
-  const { name, photo, email, phone, website, headline, location, profiles } = useAppSelector(
+  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
+  const { name, photo, email, phone, website, birthdate, headline, location, profiles } = useAppSelector(
     (state) => state.resume.basics
   );
 
@@ -33,6 +36,10 @@ const Masthead: React.FC = () => {
           </DataDisplay>
 
           <div className="flex items-center gap-2">
+            <DataDisplay icon={<Cake />} className="text-xs">
+              {formatDateString(birthdate, dateFormat)}
+            </DataDisplay>
+
             <DataDisplay icon={<Email />} className="text-xs" link={`mailto:${email}`}>
               {email}
             </DataDisplay>

client/templates/Pikachu/widgets/Heading.tsx

@@ -3,7 +3,7 @@ import get from 'lodash/get';
 
 import { useAppSelector } from '@/store/hooks';
 
-const Heading: React.FC = ({ children }) => {
+const Heading: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
 
   return (

client/templates/Pikachu/widgets/Masthead.tsx

@@ -1,4 +1,4 @@
-import { Email, Phone, Public, Room } from '@mui/icons-material';
+import { Cake, Email, Phone, Public, Room } from '@mui/icons-material';
 import { Theme } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
@@ -7,12 +7,16 @@ import { useMemo } from 'react';
 import Markdown from '@/components/shared/Markdown';
 import { useAppSelector } from '@/store/hooks';
 import DataDisplay from '@/templates/shared/DataDisplay';
+import { formatDateString } from '@/utils/date';
 import getProfileIcon from '@/utils/getProfileIcon';
 import { getContrastColor } from '@/utils/styles';
 import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
 
 export const MastheadSidebar: React.FC = () => {
-  const { name, photo, email, phone, website, location, profiles } = useAppSelector((state) => state.resume.basics);
+  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
+  const { name, photo, email, phone, birthdate, website, location, profiles } = useAppSelector(
+    (state) => state.resume.basics
+  );
 
   return (
     <div className="col-span-2 grid justify-items-left gap-4">
@@ -31,6 +35,10 @@ export const MastheadSidebar: React.FC = () => {
           {formatLocation(location)}
         </DataDisplay>
 
+        <DataDisplay icon={<Cake />} className="text-xs">
+          {formatDateString(birthdate, dateFormat)}
+        </DataDisplay>
+
         <DataDisplay icon={<Email />} className="text-xs" link={`mailto:${email}`}>
           {email}
         </DataDisplay>

client/templates/shared/DataDisplay.tsx

@@ -7,7 +7,7 @@ type Props = {
   className?: string;
 };
 
-const DataDisplay: React.FC<Props> = ({ icon, link, className, children }) => {
+const DataDisplay: React.FC<React.PropsWithChildren<Props>> = ({ icon, link, className, children }) => {
   if (isEmpty(children)) return null;
 
   if (!isEmpty(link)) {