- complete onyx design template

- implement public sharable urls
- implement more actions

src/templates/Onyx.js

@@ -9,6 +9,7 @@ import Heading from './blocks/Heading/HeadingA';
 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 ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';
 import WorkA from './blocks/Work/WorkA';
@@ -17,6 +18,7 @@ const Blocks = {
   objective: ObjectiveA,
   work: WorkA,
   education: EducationA,
+  projects: ProjectsA,
   awards: AwardsA,
   certifications: CertificationsA,
   skills: SkillsA,
@@ -35,8 +37,7 @@ const Onyx = ({ data }) => {
   return (
     <PageContext.Provider value={{ data, heading: Heading }}>
       <div
-        id="page"
-        className="p-10"
+        className="p-10 rounded"
         style={{
           fontFamily: data.metadata.font,
           color: data.metadata.colors.text,
@@ -45,12 +46,14 @@ const Onyx = ({ data }) => {
       >
         <div className="grid grid-cols-4 items-center">
           <div className="col-span-3 flex items-center">
-            <img
-              className="rounded object-cover mr-4"
-              src={data.profile.photograph}
-              alt="Resume Photograph"
-              style={{ width: '120px', height: '120px' }}
-            />
+            {data.profile.photograph && (
+              <img
+                className="rounded object-cover mr-4"
+                src={data.profile.photograph}
+                alt="Resume Photograph"
+                style={{ width: '120px', height: '120px' }}
+              />
+            )}
 
             <div>
               <h1
@@ -75,18 +78,18 @@ const Onyx = ({ data }) => {
         </div>
 
         <hr
-          className="my-6 opacity-25"
+          className="my-5 opacity-25"
           style={{ borderColor: data.metadata.colors.text }}
         />
 
-        <div className="grid grid-cols-1 col-gap-8">
+        <div className="grid gap-4">
           {data.metadata.layout[0] &&
             data.metadata.layout[0].map((x) => {
               const Component = Blocks[x];
               return Component && <Component key={x} />;
             })}
 
-          <div className="grid grid-cols-3 col-gap-8">
+          <div className="grid grid-cols-2 gap-4">
             {data.metadata.layout[1] &&
               data.metadata.layout[1].map((x) => {
                 const Component = Blocks[x];

src/templates/blocks/Awards/AwardsA.js

@@ -2,30 +2,32 @@ import moment from 'moment';
 import React, { memo, useContext } from 'react';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
 
 const AwardItem = (x) => (
-  <div key={x.id} className="mb-2">
+  <div key={x.id}>
     <div className="flex justify-between items-center">
-      <div>
+      <div className="flex flex-col">
         <h6 className="font-semibold">{x.title}</h6>
-        <p className="text-xs">{x.awarder}</p>
+        <span className="text-xs">{x.awarder}</span>
       </div>
-
-      <h6 className="text-xs font-medium">
-        {moment(x.date).format('MMMM YYYY')}
-      </h6>
+      {x.date && (
+        <h6 className="text-xs font-medium">
+          {moment(x.date).format('MMMM YYYY')}
+        </h6>
+      )}
     </div>
-    <ReactMarkdown className="mt-2 text-sm" source={x.summary} />
+    <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
   </div>
 );
 
 const AwardsA = () => {
   const { data, heading: Heading } = useContext(PageContext);
 
-  return data.awards.visible && data.awards.items ? (
+  return safetyCheck(data.awards) ? (
     <div>
       <Heading>{data.awards.heading}</Heading>
-      {data.awards.items.map(AwardItem)}
+      <div className="grid gap-4">{data.awards.items.map(AwardItem)}</div>
     </div>
   ) : null;
 };

src/templates/blocks/Certifications/CertificationsA.js

@@ -2,30 +2,34 @@ import moment from 'moment';
 import React, { memo, useContext } from 'react';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
 
 const CertificationItem = (x) => (
-  <div key={x.id} className="mb-2">
+  <div key={x.id}>
     <div className="flex justify-between items-center">
-      <div>
+      <div className="flex flex-col">
         <h6 className="font-semibold">{x.title}</h6>
-        <p className="text-xs">{x.issuer}</p>
+        <span className="text-xs">{x.issuer}</span>
       </div>
-
-      <h6 className="text-xs font-medium">
-        {moment(x.date).format('MMMM YYYY')}
-      </h6>
+      {x.date && (
+        <h6 className="text-xs font-medium">
+          {moment(x.date).format('MMMM YYYY')}
+        </h6>
+      )}
     </div>
-    <ReactMarkdown className="mt-2 text-sm" source={x.summary} />
+    <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
   </div>
 );
 
 const CertificationsA = () => {
   const { data, heading: Heading } = useContext(PageContext);
 
-  return data.certifications.visible && data.certifications.items ? (
+  return safetyCheck(data.certifications) ? (
     <div>
       <Heading>{data.certifications.heading}</Heading>
-      {data.certifications.items.map(CertificationItem)}
+      <div className="grid gap-4">
+        {data.certifications.items.map(CertificationItem)}
+      </div>
     </div>
   ) : null;
 };

src/templates/blocks/Contact/ContactA.js

@@ -2,6 +2,7 @@ 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 }) => {
@@ -9,9 +10,9 @@ const ContactItem = ({ value, icon, link }) => {
   const Icon = get(Icons, icon.toLowerCase(), FaCaretRight);
 
   return value ? (
-    <div className="flex items-center my-3">
+    <div className="flex items-center">
       <Icon
-        size="14px"
+        size="10px"
         className="mr-2"
         style={{ color: data.metadata.colors.primary }}
       />
@@ -30,7 +31,7 @@ const ContactA = () => {
   const { data } = useContext(PageContext);
 
   return (
-    <div className="col-span-1 text-xs">
+    <div className="text-xs grid gap-2">
       <ContactItem
         icon="phone"
         value={data.profile.phone}
@@ -47,18 +48,15 @@ const ContactA = () => {
         link={`mailto:${data.profile.email}`}
       />
 
-      {data.social.visible && data.social.items ? (
-        <div>
-          {data.social.items.map((x) => (
-            <ContactItem
-              key={x.id}
-              value={x.username}
-              icon={x.network}
-              link={x.url}
-            />
-          ))}
-        </div>
-      ) : null}
+      {safetyCheck(data.social) &&
+        data.social.items.map((x) => (
+          <ContactItem
+            key={x.id}
+            value={x.username}
+            icon={x.network}
+            link={x.url}
+          />
+        ))}
     </div>
   );
 };

src/templates/blocks/Education/EducationA.js

@@ -1,40 +1,39 @@
 import React, { memo, useContext } from 'react';
+import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
-import { formatDateRange } from '../../../utils';
+import { formatDateRange, safetyCheck } from '../../../utils';
 
 const EducationItem = (x) => (
-  <div key={x.id} className="mb-2">
+  <div key={x.id}>
     <div className="flex justify-between items-center">
-      <div>
+      <div className="flex flex-col">
         <h6 className="font-semibold">{x.institution}</h6>
         <span className="text-xs">
           <strong>{x.degree}</strong> {x.field}
         </span>
       </div>
       <div className="flex flex-col items-end">
-        <span className="text-xs font-medium">
-          ({formatDateRange({ startDate: x.startDate, endDate: x.endDate })})
-        </span>
-        <h6 className="text-sm font-medium">{x.gpa}</h6>
+        {x.startDate && (
+          <h6 className="text-xs font-medium">
+            ({formatDateRange({ startDate: x.startDate, endDate: x.endDate })})
+          </h6>
+        )}
+        <span className="text-sm font-medium">{x.gpa}</span>
       </div>
     </div>
-    {x.courses && (
-      <ul className="mt-2 text-sm list-disc list-inside">
-        {x.courses.map((y) => (
-          <li key={y}>{y}</li>
-        ))}
-      </ul>
-    )}
+    <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
   </div>
 );
 
 const EducationA = () => {
   const { data, heading: Heading } = useContext(PageContext);
 
-  return data.education.visible && data.education.items ? (
+  return safetyCheck(data.education) ? (
     <div>
       <Heading>{data.education.heading}</Heading>
-      {data.education.items.map(EducationItem)}
+      <div className="grid gap-4">
+        {data.education.items.map(EducationItem)}
+      </div>
     </div>
   ) : null;
 };

src/templates/blocks/Heading/HeadingA.js

@@ -1,4 +1,4 @@
-import React, { useContext, memo } from 'react';
+import React, { memo, useContext } from 'react';
 import PageContext from '../../../contexts/PageContext';
 
 const HeadingA = ({ children }) => {
@@ -6,7 +6,7 @@ const HeadingA = ({ children }) => {
 
   return (
     <h6
-      className="text-xs font-bold uppercase mt-4 mb-1"
+      className="text-xs font-bold uppercase mb-1"
       style={{ color: data.metadata.colors.primary }}
     >
       {children}

src/templates/blocks/Hobbies/HobbiesA.js

@@ -1,8 +1,9 @@
 import React, { memo, useContext } from 'react';
 import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
 
 const HobbyA = (x) => (
-  <div key={x.id} className="mb-2">
+  <div key={x.id}>
     <h6 className="font-semibold">{x.name}</h6>
   </div>
 );
@@ -10,10 +11,10 @@ const HobbyA = (x) => (
 const HobbiesA = () => {
   const { data, heading: Heading } = useContext(PageContext);
 
-  return data.hobbies.visible && data.hobbies.items ? (
+  return safetyCheck(data.hobbies) ? (
     <div>
       <Heading>{data.hobbies.heading}</Heading>
-      {data.hobbies.items.map(HobbyA)}
+      <div className="grid gap-2">{data.hobbies.items.map(HobbyA)}</div>
     </div>
   ) : null;
 };

src/templates/blocks/Languages/LanguagesA.js

@@ -1,20 +1,23 @@
 import React, { memo, useContext } from 'react';
 import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
 
 const LanguageItem = (x) => (
-  <div key={x.id} className="mb-2">
+  <div key={x.id} className="flex flex-col">
     <h6 className="font-semibold">{x.name}</h6>
-    <p className="text-xs">{x.fluency}</p>
+    <span className="text-xs">{x.fluency}</span>
   </div>
 );
 
 const LanguagesA = () => {
   const { data, heading: Heading } = useContext(PageContext);
 
-  return data.languages.visible && data.languages.items ? (
+  return safetyCheck(data.languages) ? (
     <div>
       <Heading>{data.languages.heading}</Heading>
-      {data.languages.items.map(LanguageItem)}
+      <div className="grid grid-cols-2 gap-2">
+        {data.languages.items.map(LanguageItem)}
+      </div>
     </div>
   ) : null;
 };

src/templates/blocks/Objective/ObjectiveA.js

@@ -1,15 +1,21 @@
-import React, { useContext, memo } from 'react';
+import React, { memo, useContext } from 'react';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
 
 const ObjectiveA = () => {
   const { data, heading: Heading } = useContext(PageContext);
 
   return (
-    <div>
-      <Heading>{data.objective.heading}</Heading>
-      <ReactMarkdown className="text-sm" source={data.objective.body} />
-    </div>
+    safetyCheck(data.objective, 'body') && (
+      <div>
+        <Heading>{data.objective.heading}</Heading>
+        <ReactMarkdown
+          className="markdown text-sm"
+          source={data.objective.body}
+        />
+      </div>
+    )
   );
 };
 

src/templates/blocks/Projects/ProjectsA.js

@@ -0,0 +1,39 @@
+import moment from 'moment';
+import React, { memo, useContext } from 'react';
+import ReactMarkdown from 'react-markdown';
+import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
+
+const ProjectItem = (x) => (
+  <div key={x.id}>
+    <div className="flex justify-between items-center">
+      <div className="flex flex-col">
+        <h6 className="font-semibold">{x.title}</h6>
+        {x.link && (
+          <a href={x.link} className="text-xs">
+            {x.link}
+          </a>
+        )}
+      </div>
+      {x.date && (
+        <h6 className="text-xs font-medium">
+          {moment(x.date).format('MMMM YYYY')}
+        </h6>
+      )}
+    </div>
+    <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
+  </div>
+);
+
+const ProjectsA = () => {
+  const { data, heading: Heading } = useContext(PageContext);
+
+  return safetyCheck(data.projects) ? (
+    <div>
+      <Heading>{data.projects.heading}</Heading>
+      <div className="grid gap-4">{data.projects.items.map(ProjectItem)}</div>
+    </div>
+  ) : null;
+};
+
+export default memo(ProjectsA);

src/templates/blocks/References/ReferencesA.js

@@ -1,24 +1,25 @@
 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="mb-2">
+  <div key={x.id} className="flex flex-col">
     <h6 className="font-semibold">{x.name}</h6>
-    <p className="text-xs">{x.position}</p>
-    <p className="text-xs">{x.phone}</p>
-    <p className="text-xs">{x.email}</p>
-    <ReactMarkdown className="mt-2 text-sm" source={x.summary} />
+    <span className="text-xs">{x.position}</span>
+    <span className="text-xs">{x.phone}</span>
+    <span className="text-xs">{x.email}</span>
+    <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
   </div>
 );
 
 const ReferencesA = () => {
   const { data, heading: Heading } = useContext(PageContext);
 
-  return data.references.visible && data.references.items ? (
+  return safetyCheck(data.references) ? (
     <div>
       <Heading>{data.references.heading}</Heading>
-      <div className="grid grid-cols-3 col-gap-8">
+      <div className="grid grid-cols-3 gap-4">
         {data.references.items.map(ReferenceItem)}
       </div>
     </div>

src/templates/blocks/Skills/SkillsA.js

@@ -1,20 +1,23 @@
 import React, { memo, useContext } from 'react';
 import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
 
 const SkillItem = (x) => (
-  <div key={x.id} className="mb-2">
+  <div key={x.id} className="flex flex-col">
     <h6 className="font-semibold">{x.name}</h6>
-    <p className="text-xs">{x.level}</p>
+    <span className="text-xs">{x.level}</span>
   </div>
 );
 
 const SkillsA = () => {
   const { data, heading: Heading } = useContext(PageContext);
 
-  return data.skills.visible && data.skills.items ? (
+  return safetyCheck(data.skills) ? (
     <div>
       <Heading>{data.skills.heading}</Heading>
-      {data.skills.items.map(SkillItem)}
+      <div className="grid grid-cols-2 gap-2">
+        {data.skills.items.map(SkillItem)}
+      </div>
     </div>
   ) : null;
 };

src/templates/blocks/Work/WorkA.js

@@ -1,37 +1,32 @@
-import React, { useContext, memo } from 'react';
+import React, { memo, useContext } from 'react';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
-import { formatDateRange } from '../../../utils';
+import { formatDateRange, safetyCheck } from '../../../utils';
 
 const WorkItem = (x) => (
-  <div key={x.id} className="mb-4 last:mb-0">
+  <div key={x.id}>
     <div className="flex justify-between items-center">
-      <div>
+      <div className="flex flex-col">
         <h6 className="font-semibold">{x.company}</h6>
         <span className="text-xs">{x.position}</span>
       </div>
-      <span className="text-xs font-medium">
-        ({formatDateRange({ startDate: x.startDate, endDate: x.endDate })})
-      </span>
+      {x.startDate && (
+        <h6 className="text-xs font-medium">
+          ({formatDateRange({ startDate: x.startDate, endDate: x.endDate })})
+        </h6>
+      )}
     </div>
-    <ReactMarkdown className="mt-2 text-sm" source={x.summary} />
-    {x.highlights && (
-      <ul className="mt-2 text-sm list-disc list-inside">
-        {x.highlights.map((y) => (
-          <li key={y}>{y}</li>
-        ))}
-      </ul>
-    )}
+    <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
   </div>
 );
 
 const WorkA = () => {
   const { data, heading: Heading } = useContext(PageContext);
 
-  return data.work.visible && data.work.items ? (
+  return safetyCheck(data.work) ? (
     <div>
       <Heading>{data.work.heading}</Heading>
-      <div>{data.work.items.map(WorkItem)}</div>
+      <div className="grid gap-4">{data.work.items.map(WorkItem)}</div>
     </div>
   ) : null;
 };