- implement gengar template

src/templates/Gengar.js

@@ -0,0 +1,131 @@
+import React from 'react';
+import PageContext from '../contexts/PageContext';
+import { hexToRgb } from '../utils';
+import AwardsA from './blocks/Awards/AwardsA';
+import CertificationsA from './blocks/Certifications/CertificationsA';
+import ContactB from './blocks/Contact/ContactB';
+import EducationA from './blocks/Education/EducationA';
+import HeadingC from './blocks/Heading/HeadingC';
+import HobbiesA from './blocks/Hobbies/HobbiesA';
+import LanguagesA from './blocks/Languages/LanguagesA';
+import ObjectiveA from './blocks/Objective/ObjectiveA';
+import ProjectsA from './blocks/Projects/ProjectsA';
+import ReferencesB from './blocks/References/ReferencesB';
+import SkillsA from './blocks/Skills/SkillsA';
+import WorkA from './blocks/Work/WorkA';
+
+const Blocks = {
+  objective: ObjectiveA,
+  work: WorkA,
+  education: EducationA,
+  projects: ProjectsA,
+  awards: AwardsA,
+  certifications: CertificationsA,
+  skills: SkillsA,
+  hobbies: HobbiesA,
+  languages: LanguagesA,
+  references: ReferencesB,
+};
+
+const Gengar = ({ data }) => {
+  const layout = data.metadata.layout.gengar;
+  const { r, g, b } = hexToRgb(data.metadata.colors.primary) || {};
+
+  const Photo = () =>
+    data.profile.photograph !== '' && (
+      <img
+        className="w-24 h-24 rounded-full mr-4 object-cover border-4"
+        style={{
+          borderColor: data.metadata.colors.background,
+        }}
+        src={data.profile.photograph}
+        alt={data.profile.firstName}
+      />
+    );
+
+  const Profile = () => (
+    <div>
+      <h1 className="text-2xl font-bold leading-tight">
+        {data.profile.firstName}
+      </h1>
+      <h1 className="text-2xl font-bold leading-tight">
+        {data.profile.lastName}
+      </h1>
+      <div className="text-xs font-medium mt-2">{data.profile.subtitle}</div>
+    </div>
+  );
+
+  return (
+    <PageContext.Provider value={{ data, heading: HeadingC }}>
+      <div
+        id="page"
+        className="rounded"
+        style={{
+          fontFamily: data.metadata.font,
+          color: data.metadata.colors.text,
+          backgroundColor: data.metadata.colors.background,
+        }}
+      >
+        <div className="grid grid-cols-12">
+          <div
+            className="col-span-4 px-6 py-8"
+            style={{
+              backgroundColor: data.metadata.colors.primary,
+              color: data.metadata.colors.background,
+            }}
+          >
+            <div className="flex items-center">
+              <Photo />
+              <Profile />
+            </div>
+
+            <hr
+              className="w-1/4 my-5 opacity-25"
+              style={{ borderColor: data.metadata.colors.background }}
+            />
+
+            <ContactB />
+          </div>
+
+          <div
+            className="col-span-8 px-6 py-8"
+            style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
+          >
+            <div className="grid gap-6 items-center">
+              {layout[0] &&
+                layout[0].map((x) => {
+                  const Component = Blocks[x];
+                  return Component && <Component key={x} />;
+                })}
+            </div>
+          </div>
+
+          <div
+            className="col-span-4 px-6 py-8"
+            style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
+          >
+            <div className="grid gap-6">
+              {layout[1] &&
+                layout[1].map((x) => {
+                  const Component = Blocks[x];
+                  return Component && <Component key={x} />;
+                })}
+            </div>
+          </div>
+
+          <div className="col-span-8 px-6 py-8">
+            <div className="grid gap-6">
+              {layout[2] &&
+                layout[2].map((x) => {
+                  const Component = Blocks[x];
+                  return Component && <Component key={x} />;
+                })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </PageContext.Provider>
+  );
+};
+
+export default Gengar;

src/templates/Onyx.js

@@ -1,11 +1,10 @@
-import React, { memo, useEffect } from 'react';
+import React, { memo } from 'react';
 import PageContext from '../contexts/PageContext';
-import { useDispatch } from '../contexts/ResumeContext';
 import AwardsA from './blocks/Awards/AwardsA';
 import CertificationsA from './blocks/Certifications/CertificationsA';
 import Contact from './blocks/Contact/ContactA';
 import EducationA from './blocks/Education/EducationA';
-import Heading from './blocks/Heading/HeadingA';
+import HeadingA from './blocks/Heading/HeadingA';
 import HobbiesA from './blocks/Hobbies/HobbiesA';
 import LanguagesA from './blocks/Languages/LanguagesA';
 import ObjectiveA from './blocks/Objective/ObjectiveA';
@@ -28,18 +27,10 @@ const Blocks = {
 };
 
 const Onyx = ({ data }) => {
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    dispatch({
-      type: 'set_fixed_sections',
-      payload: ['profile', 'social'],
-    });
-    dispatch({ type: 'set_block_count', payload: 3 });
-  }, []);
+  const layout = data.metadata.layout.onyx;
 
   return (
-    <PageContext.Provider value={{ data, heading: Heading }}>
+    <PageContext.Provider value={{ data, heading: HeadingA }}>
       <div
         id="page"
         className="p-10 rounded"
@@ -88,22 +79,22 @@ const Onyx = ({ data }) => {
         />
 
         <div className="grid gap-4">
-          {data.metadata.layout[0] &&
-            data.metadata.layout[0].map((x) => {
+          {layout[0] &&
+            layout[0].map((x) => {
               const Component = Blocks[x];
               return Component && <Component key={x} />;
             })}
 
           <div className="grid grid-cols-2 gap-4">
-            {data.metadata.layout[1] &&
-              data.metadata.layout[1].map((x) => {
+            {layout[1] &&
+              layout[1].map((x) => {
                 const Component = Blocks[x];
                 return Component && <Component key={x} />;
               })}
           </div>
 
-          {data.metadata.layout[2] &&
-            data.metadata.layout[2].map((x) => {
+          {layout[2] &&
+            layout[2].map((x) => {
               const Component = Blocks[x];
               return Component && <Component key={x} />;
             })}

src/templates/Pikachu.js

@@ -1,339 +1,116 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import ReactMarkdown from 'react-markdown';
+import PageContext from '../contexts/PageContext';
+import ContactA from './blocks/Contact/ContactA';
+import HeadingB from './blocks/Heading/HeadingB';
+import AwardsA from './blocks/Awards/AwardsA';
+import CertificationsA from './blocks/Certifications/CertificationsA';
+import EducationA from './blocks/Education/EducationA';
+import HobbiesA from './blocks/Hobbies/HobbiesA';
+import LanguagesA from './blocks/Languages/LanguagesA';
+import ProjectsA from './blocks/Projects/ProjectsA';
+import ReferencesA from './blocks/References/ReferencesA';
+import SkillsA from './blocks/Skills/SkillsA';
+import WorkA from './blocks/Work/WorkA';
 
-const Pikachu = () => {
-  const context = useContext(AppContext);
-  const { state } = context;
-  const { data, theme } = state;
+const Blocks = {
+  work: WorkA,
+  education: EducationA,
+  projects: ProjectsA,
+  awards: AwardsA,
+  certifications: CertificationsA,
+  skills: SkillsA,
+  hobbies: HobbiesA,
+  languages: LanguagesA,
+  references: ReferencesA,
+};
 
-  const Photo = () =>
-    data.profile.photo !== '' && (
-      <div className="self-center col-span-4">
-        <img
-          className="w-48 h-48 rounded-full mx-auto object-cover"
-          src={data.profile.photo}
-          alt=""
-        />
-      </div>
-    );
-
-  const Header = () => (
-    <div
-      className="h-48 rounded flex flex-col justify-center"
-      style={{
-        backgroundColor: theme.colors.accent,
-        color: theme.colors.background,
-      }}
-    >
-      <div className="flex flex-col justify-center mx-8 my-6">
-        <h1 className="text-3xl font-bold leading-tight">
-          {data.profile.firstName} {data.profile.lastName}
-        </h1>
-        <div className="text-sm font-medium tracking-wide">
-          {data.profile.subtitle}
-        </div>
-
-        <hr className="my-4 opacity-50" />
-
-        <ReactMarkdown className="text-sm" source={data.objective.body} />
-      </div>
-    </div>
-  );
-
-  const ContactItem = ({ icon, value, link = '#' }) =>
-    value && (
-      <div className="flex items-center my-3">
-        <span
-          className="material-icons text-lg mr-2"
-          style={{ color: theme.colors.accent }}
-        >
-          {icon}
-        </span>
-        <a href={link}>
-          <span className="font-medium break-all">{value}</span>
-        </a>
-      </div>
-    );
-
-  const Heading = ({ title }) => (
-    <div
-      className="mb-2 border-b-2 pb-1 font-bold uppercase tracking-wide text-sm"
-      style={{ color: theme.colors.accent, borderColor: theme.colors.accent }}
-    >
-      {title}
-    </div>
-  );
-
-  const SkillItem = (x) => (
-    <span
-      key={x.id}
-      className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
-    >
-      {x.skill}
-    </span>
-  );
-
-  const Skills = () =>
-    data.skills &&
-    data.skills.enable && (
-      <div>
-        <Heading title={data.skills.heading} />
-        <div className="flex flex-col mb-6">
-          {data.skills.items.map(SkillItem)}
-        </div>
-      </div>
-    );
-
-  const HobbyItem = (x) => (
-    <span
-      key={x.id}
-      className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
-    >
-      {x.hobby}
-    </span>
-  );
-
-  const Hobbies = () =>
-    data.hobbies &&
-    data.hobbies.enable && (
-      <div>
-        <Heading title={data.hobbies.heading} />
-        <div className="flex flex-col mb-6">
-          {data.hobbies.items.map(HobbyItem)}
-        </div>
-      </div>
-    );
-
-  const ReferenceItem = (x) => (
-    <div key={x.id} className="flex flex-col">
-      <h6 className="text-sm font-medium">{x.name}</h6>
-      <span className="text-xs">{x.position}</span>
-      <span className="text-xs">{x.phone}</span>
-      <span className="text-xs">{x.email}</span>
-      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
-    </div>
-  );
-
-  const References = () =>
-    data.references &&
-    data.references.enable && (
-      <div>
-        <Heading title={data.references.heading} />
-        <div className="grid grid-cols-2 gap-2 mb-6">
-          {data.references.items.filter((x) => x.enable).map(ReferenceItem)}
-        </div>
-      </div>
-    );
-
-  const LanguageItem = (x) => (
-    <div key={x.id} className="grid grid-cols-2 items-center py-2">
-      <h6 className="text-sm font-medium">{x.key}</h6>
-      <div className="flex">
-        {x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
-        {x.rating !== 0 && (
-          <div className="flex">
-            {Array.from(Array(x.rating)).map((_, i) => (
-              <i
-                key={i}
-                className="material-icons text-lg"
-                style={{ color: theme.colors.accent }}
-              >
-                star
-              </i>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-
-  const Languages = () =>
-    data.languages &&
-    data.languages.enable && (
-      <div>
-        <Heading title={data.languages.heading} />
-        <div className="mb-6">
-          {data.languages.items.filter((x) => x.enable).map(LanguageItem)}
-        </div>
-      </div>
-    );
-
-  const ExtraItem = (x) => (
-    <div key={x.id} className="text-sm my-1">
-      <h6 className="text-xs font-bold">{x.key}</h6>
-      <h6 className="">{x.value}</h6>
-    </div>
-  );
-
-  const Extras = () =>
-    data.extras &&
-    data.extras.enable && (
-      <div>
-        <Heading title={data.extras.heading} />
-        <div className="grid grid-cols-2">
-          {data.extras.items.filter((x) => x.enable).map(ExtraItem)}
-        </div>
-      </div>
-    );
-
-  const WorkItem = (x) => (
-    <div key={x.id} className="mb-3">
-      <div className="flex justify-between items-center">
-        <div>
-          <h6 className="font-semibold">{x.title}</h6>
-          <p className="text-xs">{x.role}</p>
-        </div>
-        <span className="text-xs font-medium">
-          ({x.start} - {x.end})
-        </span>
-      </div>
-      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
-    </div>
-  );
-
-  const Work = () =>
-    data.work &&
-    data.work.enable && (
-      <div>
-        <Heading title={data.work.heading} />
-        <div className="flex flex-col mb-4">
-          {data.work.items.filter((x) => x.enable).map(WorkItem)}
-        </div>
-      </div>
-    );
-
-  const EducationItem = (x) => (
-    <div key={x.id} className="mb-2">
-      <div className="flex justify-between items-center">
-        <div>
-          <h6 className="font-semibold">{x.name}</h6>
-          <p className="text-xs">{x.major}</p>
-        </div>
-        <div className="flex flex-col text-right items-end">
-          <span
-            className="text-sm font-bold"
-            style={{ color: theme.colors.accent }}
-          >
-            {x.grade}
-          </span>
-          <span className="text-xs font-medium">
-            ({x.start} - {x.end})
-          </span>
-        </div>
-      </div>
-      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
-    </div>
-  );
-
-  const Education = () =>
-    data.education &&
-    data.education.enable && (
-      <div>
-        <Heading title={data.education.heading} />
-        <div className="flex flex-col mb-4">
-          {data.education.items.filter((x) => x.enable).map(EducationItem)}
-        </div>
-      </div>
-    );
-
-  const AwardItem = (x) => (
-    <div key={x.id} className="mb-2">
-      <h6 className="font-semibold">{x.title}</h6>
-      <p className="text-xs">{x.subtitle}</p>
-      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
-    </div>
-  );
-
-  const Awards = () =>
-    data.awards &&
-    data.awards.enable && (
-      <div>
-        <Heading title={data.awards.heading} />
-        <div className="flex flex-col mb-2">
-          {data.awards.items.filter((x) => x.enable).map(AwardItem)}
-        </div>
-      </div>
-    );
-
-  const CertificationItem = (x) => (
-    <div key={x.id} className="mb-3">
-      <h6 className="font-semibold">{x.title}</h6>
-      <p className="text-xs">{x.subtitle}</p>
-      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
-    </div>
-  );
-
-  const Certifications = () =>
-    data.certifications &&
-    data.certifications.enable && (
-      <div>
-        <Heading title={data.certifications.heading} />
-        <div className="flex flex-col mb-2">
-          {data.certifications.items
-            .filter((x) => x.enable)
-            .map(CertificationItem)}
-        </div>
-      </div>
-    );
+const Pikachu = ({ data }) => {
+  const layout = data.metadata.layout.pikachu;
 
   return (
-    <div
-      className="p-10"
-      style={{
-        fontFamily: theme.font.family,
-        backgroundColor: theme.colors.background,
-        color: theme.colors.primary,
-      }}
-    >
-      <div className="grid grid-cols-12 col-gap-6 row-gap-8">
-        <Photo />
+    <PageContext.Provider value={{ data, heading: HeadingB }}>
+      <div
+        id="page"
+        className="p-10 rounded"
+        style={{
+          fontFamily: data.metadata.font,
+          color: data.metadata.colors.text,
+          backgroundColor: data.metadata.colors.background,
+        }}
+      >
+        <div className="grid grid-cols-12 col-gap-6 row-gap-8">
+          {data.profile.photograph && (
+            <div className="self-center col-span-4">
+              <img
+                className="w-48 h-48 rounded-full mx-auto object-cover"
+                src={data.profile.photograph}
+                alt={data.profile.firstName}
+              />
+            </div>
+          )}
 
-        <div
-          className={`${
-            data.profile.photo !== '' ? 'col-span-8' : 'col-span-12'
-          }`}
-        >
-          <Header />
-        </div>
+          <div
+            className={`${
+              data.profile.photograph !== '' ? 'col-span-8' : 'col-span-12'
+            }`}
+          >
+            <div
+              className="h-48 rounded flex flex-col justify-center"
+              style={{
+                backgroundColor: data.metadata.colors.primary,
+                color: data.metadata.colors.background,
+              }}
+            >
+              <div className="flex flex-col justify-center mx-8 my-6">
+                <h1 className="text-3xl font-bold leading-tight">
+                  {data.profile.firstName} {data.profile.lastName}
+                </h1>
+                <div className="text-sm font-medium tracking-wide">
+                  {data.profile.subtitle}
+                </div>
 
-        <div className="col-span-4 overflow-hidden">
-          <div className="text-sm mb-6">
-            <ContactItem
-              icon="phone"
-              value={data.profile.phone}
-              link={`tel:${data.profile.phone}`}
-            />
-            <ContactItem
-              icon="language"
-              value={data.profile.website}
-              link={`http://${data.profile.website}`}
-            />
-            <ContactItem
-              icon="email"
-              value={data.profile.email}
-              link={`mailto:${data.profile.email}`}
-            />
-            <ContactItem
-              icon="location_on"
-              value={data.profile.address.line3}
-            />
+                {data.objective.body && (
+                  <div>
+                    <hr
+                      className="my-5 opacity-25"
+                      style={{ borderColor: data.metadata.colors.background }}
+                    />
+
+                    <ReactMarkdown
+                      className="text-sm"
+                      source={data.objective.body}
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
           </div>
 
-          <Skills />
-          <Hobbies />
-          <Languages />
-          <Certifications />
-        </div>
+          <div className="col-span-4">
+            <div className="grid gap-4">
+              <ContactA />
 
-        <div className="col-span-8">
-          <Work />
-          <Education />
-          <Awards />
-          <References />
-          <Extras />
+              {layout[0] &&
+                layout[0].map((x) => {
+                  const Component = Blocks[x];
+                  return Component && <Component key={x} />;
+                })}
+            </div>
+          </div>
+
+          <div className="col-span-8">
+            <div className="grid gap-4">
+              {layout[1] &&
+                layout[1].map((x) => {
+                  const Component = Blocks[x];
+                  return Component && <Component key={x} />;
+                })}
+            </div>
+          </div>
         </div>
       </div>
-    </div>
+    </PageContext.Provider>
   );
 };
 

src/templates/blocks/Awards/AwardsA.js

@@ -12,7 +12,7 @@ const AwardItem = (x) => (
         <span className="text-xs">{x.awarder}</span>
       </div>
       {x.date && (
-        <h6 className="text-xs font-medium">
+        <h6 className="text-xs font-medium text-right">
           {moment(x.date).format('MMMM YYYY')}
         </h6>
       )}

src/templates/blocks/Certifications/CertificationsA.js

@@ -12,7 +12,7 @@ const CertificationItem = (x) => (
         <span className="text-xs">{x.issuer}</span>
       </div>
       {x.date && (
-        <h6 className="text-xs font-medium">
+        <h6 className="text-xs font-medium text-right">
           {moment(x.date).format('MMMM YYYY')}
         </h6>
       )}

src/templates/blocks/Contact/ContactB.js

@@ -0,0 +1,64 @@
+import { get } from 'lodash';
+import React, { memo, useContext } from 'react';
+import { FaCaretRight } from 'react-icons/fa';
+import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
+import Icons from '../Icons';
+
+const ContactItem = ({ value, icon, link }) => {
+  const { data } = useContext(PageContext);
+  const Icon = get(Icons, icon.toLowerCase(), FaCaretRight);
+
+  return value ? (
+    <div className="flex items-center">
+      <Icon
+        size="10px"
+        className="mr-2"
+        style={{ color: data.metadata.colors.background }}
+      />
+      {link ? (
+        <a href={link} target="_blank" rel="noopener noreferrer">
+          <span className="font-medium break-all">{value}</span>
+        </a>
+      ) : (
+        <span className="font-medium break-all">{value}</span>
+      )}
+    </div>
+  ) : null;
+};
+
+const ContactA = () => {
+  const { data } = useContext(PageContext);
+
+  return (
+    <div className="text-xs grid gap-2">
+      <ContactItem
+        icon="phone"
+        value={data.profile.phone}
+        link={`tel:${data.profile.phone}`}
+      />
+      <ContactItem
+        icon="website"
+        value={data.profile.website}
+        link={`http://${data.profile.website}`}
+      />
+      <ContactItem
+        icon="email"
+        value={data.profile.email}
+        link={`mailto:${data.profile.email}`}
+      />
+
+      {safetyCheck(data.social) &&
+        data.social.items.map((x) => (
+          <ContactItem
+            key={x.id}
+            value={x.username}
+            icon={x.network}
+            link={x.url}
+          />
+        ))}
+    </div>
+  );
+};
+
+export default memo(ContactA);

src/templates/blocks/Education/EducationA.js

@@ -12,9 +12,9 @@ const EducationItem = (x) => (
           <strong>{x.degree}</strong> {x.field}
         </span>
       </div>
-      <div className="flex flex-col items-end">
+      <div className="flex flex-col items-end text-right">
         {x.startDate && (
-          <h6 className="text-xs font-medium">
+          <h6 className="text-xs font-medium mb-1">
             ({formatDateRange({ startDate: x.startDate, endDate: x.endDate })})
           </h6>
         )}

src/templates/blocks/Heading/HeadingB.js

@@ -0,0 +1,20 @@
+import React, { memo, useContext } from 'react';
+import PageContext from '../../../contexts/PageContext';
+
+const HeadingB = ({ children }) => {
+  const { data } = useContext(PageContext);
+
+  return (
+    <h6
+      className="mb-2 border-b-2 pb-1 font-bold uppercase tracking-wide text-sm"
+      style={{
+        color: data.metadata.colors.primary,
+        borderColor: data.metadata.colors.primary,
+      }}
+    >
+      {children}
+    </h6>
+  );
+};
+
+export default memo(HeadingB);

src/templates/blocks/Heading/HeadingC.js

@@ -0,0 +1,11 @@
+import React, { memo } from 'react';
+
+const HeadingC = ({ children }) => {
+  return (
+    <h6 className="font-bold text-xs uppercase tracking-wide mb-1">
+      {children}
+    </h6>
+  );
+};
+
+export default memo(HeadingC);

src/templates/blocks/Projects/ProjectsA.js

@@ -16,7 +16,7 @@ const ProjectItem = (x) => (
         )}
       </div>
       {x.date && (
-        <h6 className="text-xs font-medium">
+        <h6 className="text-xs font-medium text-right">
           {moment(x.date).format('MMMM YYYY')}
         </h6>
       )}

src/templates/blocks/References/ReferencesB.js

@@ -0,0 +1,31 @@
+import React, { memo, useContext } from 'react';
+import ReactMarkdown from 'react-markdown';
+import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
+
+const ReferenceItem = (x) => (
+  <div key={x.id} className="flex flex-col">
+    <h6 className="font-semibold">{x.name}</h6>
+    <span className="text-xs">{x.position}</span>
+    <span className="text-xs">{x.phone}</span>
+    <span className="text-xs">{x.email}</span>
+    {x.summary && (
+      <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
+    )}
+  </div>
+);
+
+const ReferencesB = () => {
+  const { data, heading: Heading } = useContext(PageContext);
+
+  return safetyCheck(data.references) ? (
+    <div>
+      <Heading>{data.references.heading}</Heading>
+      <div className="grid gap-4">
+        {data.references.items.map(ReferenceItem)}
+      </div>
+    </div>
+  ) : null;
+};
+
+export default memo(ReferencesB);

src/templates/blocks/Skills/SkillsB.js

@@ -0,0 +1,22 @@
+import React, { memo, useContext } from 'react';
+import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
+
+const SkillItem = (x) => (
+  <li key={x.id} className="text-sm py-1">
+    {x.skill}
+  </li>
+);
+
+const SkillsA = () => {
+  const { data, heading: Heading } = useContext(PageContext);
+
+  return safetyCheck(data.skills) ? (
+    <div>
+      <Heading>{data.skills.heading}</Heading>
+      <ul>{data.skills.items.map(SkillItem)}</ul>
+    </div>
+  ) : null;
+};
+
+export default memo(SkillsA);

src/templates/blocks/Work/WorkA.js

@@ -11,7 +11,7 @@ const WorkItem = (x) => (
         <span className="text-xs">{x.position}</span>
       </div>
       {x.startDate && (
-        <h6 className="text-xs font-medium">
+        <h6 className="text-xs font-medium text-right">
           ({formatDateRange({ startDate: x.startDate, endDate: x.endDate })})
         </h6>
       )}