🚀 release v3.0.0

client/templates/Kakuna/widgets/BadgeDisplay.tsx

@@ -0,0 +1,38 @@
+import { Theme } from '@reactive-resume/schema';
+import get from 'lodash/get';
+import isArray from 'lodash/isArray';
+import isEmpty from 'lodash/isEmpty';
+import { useMemo } from 'react';
+
+import { useAppSelector } from '@/store/hooks';
+import { getContrastColor } from '@/utils/styles';
+
+type Props = {
+  items: string[];
+};
+
+const BadgeDisplay: React.FC<Props> = ({ items }) => {
+  const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
+  const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]);
+
+  if (!isArray(items) || isEmpty(items)) return null;
+
+  return (
+    <ul className="my-1 flex flex-wrap items-start justify-center gap-1.5">
+      {items.map((item) => (
+        <li
+          key={item}
+          className="rounded-lg px-2 py-0.5 text-xs"
+          style={{
+            color: contrast === 'dark' ? theme.text : theme.background,
+            backgroundColor: theme.primary,
+          }}
+        >
+          {item}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default BadgeDisplay;

client/templates/Kakuna/widgets/Heading.tsx

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

client/templates/Kakuna/widgets/Masthead.tsx

@@ -0,0 +1,59 @@
+import { Email, Phone, Public, Room } from '@mui/icons-material';
+import isEmpty from 'lodash/isEmpty';
+import React from 'react';
+
+import { useAppSelector } from '@/store/hooks';
+import DataDisplay from '@/templates/shared/DataDisplay';
+import getProfileIcon from '@/utils/getProfileIcon';
+import { addHttp, formatLocation, getPhotoClassNames } from '@/utils/template';
+
+const Masthead = () => {
+  const { name, photo, email, phone, website, headline, location, profiles } = useAppSelector(
+    (state) => state.resume.basics
+  );
+
+  return (
+    <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>
+
+      <div>
+        <h1 className="mb-1">{name}</h1>
+        <p className="opacity-75">{headline}</p>
+      </div>
+
+      <div className="flex flex-wrap justify-center gap-3">
+        <DataDisplay icon={<Email />} link={`mailto:${email}`}>
+          {email}
+        </DataDisplay>
+
+        <DataDisplay icon={<Phone />} link={`tel:${phone}`}>
+          {phone}
+        </DataDisplay>
+
+        <DataDisplay icon={<Public />} link={addHttp(website)}>
+          {website}
+        </DataDisplay>
+
+        <DataDisplay icon={<Room />}>{formatLocation(location)}</DataDisplay>
+
+        {profiles.map(({ id, username, network, url }) => (
+          <DataDisplay key={id} icon={getProfileIcon(network)} link={url}>
+            {username}
+          </DataDisplay>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Masthead;

client/templates/Kakuna/widgets/Section.tsx

@@ -0,0 +1,120 @@
+import { Email, Phone } from '@mui/icons-material';
+import { ListItem, Section } from '@reactive-resume/schema';
+import get from 'lodash/get';
+import isArray from 'lodash/isArray';
+import isEmpty from 'lodash/isEmpty';
+
+import Markdown from '@/components/shared/Markdown';
+import { useAppSelector } from '@/store/hooks';
+import { SectionProps } from '@/templates/sectionMap';
+import { formatDateString } from '@/utils/date';
+import { parseListItemPath } from '@/utils/template';
+
+import BadgeDisplay from './BadgeDisplay';
+import Heading from './Heading';
+
+const Section: React.FC<SectionProps> = ({
+  path,
+  titlePath = 'title',
+  subtitlePath = 'subtitle',
+  headlinePath = 'headline',
+  keywordsPath = 'keywords',
+}) => {
+  const section: Section = 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'));
+
+  if (!section.visible) return null;
+
+  if (isArray(section.items) && isEmpty(section.items)) return null;
+
+  return (
+    <section>
+      <Heading>{section.name}</Heading>
+
+      <div
+        className="grid items-start gap-4"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, minmax(0, 1fr))` }}
+      >
+        {section.items.map((item: ListItem) => {
+          const id = item.id,
+            title = parseListItemPath(item, titlePath),
+            subtitle = parseListItemPath(item, subtitlePath),
+            headline = parseListItemPath(item, headlinePath),
+            keywords: string[] = get(item, keywordsPath),
+            url: string = get(item, 'url'),
+            summary: string = get(item, 'summary'),
+            level: string = get(item, 'level'),
+            levelNum: number = get(item, 'levelNum'),
+            phone: string = get(item, 'phone'),
+            email: string = get(item, 'email'),
+            date = formatDateString(get(item, 'date'), dateFormat);
+
+          return (
+            <div key={id} id={id} className="grid gap-1">
+              {title && <span className="font-bold">{title}</span>}
+
+              {subtitle && <span className="opacity-75">{subtitle}</span>}
+
+              {headline && <span className="opacity-75">{headline}</span>}
+
+              {(level || levelNum > 0) && (
+                <div className="grid gap-1">
+                  {level && <span className="opacity-75">{level}</span>}
+                  {levelNum > 0 && (
+                    <div className="flex justify-center">
+                      {Array.from(Array(5).keys()).map((_, index) => (
+                        <div
+                          key={index}
+                          className="mr-1 h-3 w-4 rounded border-2"
+                          style={{
+                            borderColor: primaryColor,
+                            backgroundColor: levelNum / (10 / 5) > index ? primaryColor : '',
+                          }}
+                        />
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {date && <div className="opacity-50">({date})</div>}
+
+              {summary && <Markdown>{summary}</Markdown>}
+
+              {url && (
+                <div className="inline-flex justify-center">
+                  <a href={url} target="_blank" rel="noreferrer">
+                    {url}
+                  </a>
+                </div>
+              )}
+
+              {keywords && <BadgeDisplay items={keywords} />}
+
+              {(phone || email) && (
+                <div className="grid gap-1">
+                  {phone && (
+                    <div className="inline-flex items-center justify-center gap-x-2">
+                      <Phone />
+                      <span>{phone}</span>
+                    </div>
+                  )}
+
+                  {email && (
+                    <div className="inline-flex items-center justify-center gap-x-2">
+                      <Email />
+                      <span>{email}</span>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+};
+
+export default Section;