feat: ⚡ update app version to 3.6.2

client/templates/Leafish/widgets/Heading.tsx

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

client/templates/Leafish/widgets/Masthead.tsx

@@ -11,27 +11,19 @@ import getProfileIcon from '@/utils/getProfileIcon';
 import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
 
 const Masthead: React.FC = () => {
-  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
+  const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format'));
   const { name, photo, headline, summary, email, phone, birthdate, website, location, profiles } = useAppSelector(
-    (state) => state.resume.basics
+    (state) => state.resume.present.basics
   );
-  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+  const theme: Theme = useAppSelector((state) => get(state.resume.present, 'metadata.theme', {}));
 
   return (
     <div>
-      <div
-        className="flex items-center gap-4 p-6"
-        id="Masterhead_main"
-        style={{ backgroundColor: alpha(theme.primary, 0.2) }}
-      >
+      <div className="flex items-center gap-4 p-6" style={{ backgroundColor: alpha(theme.primary, 0.2) }}>
         <div className="grid flex-1 gap-1">
-          <h1 id="Masterhead_name">{name}</h1>
-          <p style={{ color: theme.primary }} id="Masterhead_headline">
-            {headline}
-          </p>
-          <p className="opacity-75" id="Masterhead_summary">
-            {summary}
-          </p>
+          <h1>{name}</h1>
+          <p style={{ color: theme.primary }}>{headline}</p>
+          <p className="opacity-75">{summary}</p>
         </div>
 
         {photo.visible && !isEmpty(photo.url) && (
@@ -41,13 +33,11 @@ const Masthead: React.FC = () => {
             width={photo.filters.size}
             height={photo.filters.size}
             className={getPhotoClassNames(photo.filters)}
-            id="Masterhead_photo"
           />
         )}
       </div>
       <div
         className="grid gap-y-2 px-8 py-4"
-        id="Masterhead_data"
         style={{ backgroundColor: alpha(theme.primary, 0.4), gridTemplateColumns: `repeat(2, minmax(0, 1fr))` }}
       >
         <DataDisplay icon={<Room />} className="col-span-2">

client/templates/Leafish/widgets/Section.tsx

@@ -3,6 +3,7 @@ import { ListItem, Section as SectionType } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
+import { useMemo } from 'react';
 
 import Markdown from '@/components/shared/Markdown';
 import { useAppSelector } from '@/store/hooks';
@@ -20,22 +21,23 @@ const Section: React.FC<SectionProps> = ({
   headlinePath = 'headline',
   keywordsPath = 'keywords',
 }) => {
-  const section: SectionType = useAppSelector((state) => get(state.resume, path, {}));
-  const dateFormat: string = useAppSelector((state) => get(state.resume, 'metadata.date.format'));
-  const primaryColor: string = useAppSelector((state) => get(state.resume, 'metadata.theme.primary'));
+  const section: SectionType = useAppSelector((state) => get(state.resume.present, path, {}));
+  const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format'));
+  const primaryColor: string = useAppSelector((state) => get(state.resume.present, 'metadata.theme.primary'));
+
+  const sectionId = useMemo(() => section.id || path.replace('sections.', ''), [path, section]);
 
   if (!section.visible) return null;
 
   if (isArray(section.items) && isEmpty(section.items)) return null;
 
   return (
-    <section className="mb-4">
+    <section id={`Leafish_${sectionId}`}>
       <Heading>{section.name}</Heading>
 
       <div
         className="grid items-start gap-4"
         style={{ gridTemplateColumns: `repeat(${section.columns}, minmax(0, 1fr))` }}
-        id={`Section_${section.id}`}
       >
         {section.items.map((item: ListItem) => {
           const id = item.id,
@@ -52,16 +54,16 @@ const Section: React.FC<SectionProps> = ({
             date = formatDateString(get(item, 'date'), dateFormat);
 
           return (
-            <div key={id} id={id} className={`grid gap-1 mb-2 Section_${section.id}_inner`}>
-              <div>
-                {title && <div className="font-bold Section_title">{title}</div>}
-                {subtitle && <div className="Section_subtitle">{subtitle}</div>}
+            <div key={id} className="mb-2 grid gap-1">
+              <div className="grid gap-1">
+                {title && <div className="font-bold">{title}</div>}
+                {subtitle && <div>{subtitle}</div>}
                 {date && (
-                  <div className="italic text-xs Section_date" style={{ color: primaryColor }}>
+                  <div className="text-xs" style={{ color: primaryColor }}>
                     ({date})
                   </div>
                 )}
-                {headline && <div className="opacity-50 Section_headline">{headline}</div>}
+                {headline && <div className="opacity-50">{headline}</div>}
               </div>
 
               {(level || levelNum > 0) && (
@@ -84,14 +86,7 @@ const Section: React.FC<SectionProps> = ({
                 </div>
               )}
 
-              {summary && (
-                <div>
-                  <div className="italic text-xs" style={{ color: primaryColor }}>
-                    Overview
-                  </div>
-                  <Markdown className={`marker:text-[${primaryColor}]`}>{summary}</Markdown>
-                </div>
-              )}
+              {summary && <Markdown>{summary}</Markdown>}
 
               {url && (
                 <DataDisplay icon={<Link />} link={url} className="text-xs">