- implement glalie template

src/components/builder/center/Artboard.js

@@ -1,10 +1,12 @@
 import React, { memo } from 'react';
 import { Helmet } from 'react-helmet';
 import { useSelector } from '../../../contexts/ResumeContext';
+import Castform from '../../../templates/Castform';
+import Gengar from '../../../templates/Gengar';
+import Glalie from '../../../templates/Glalie';
 import Onyx from '../../../templates/Onyx';
 import Pikachu from '../../../templates/Pikachu';
 import styles from './Artboard.module.css';
-import Gengar from '../../../templates/Gengar';
 
 const Artboard = () => {
   const state = useSelector();
@@ -22,6 +24,8 @@ const Artboard = () => {
         {template === 'onyx' && <Onyx data={state} />}
         {template === 'pikachu' && <Pikachu data={state} />}
         {template === 'gengar' && <Gengar data={state} />}
+        {template === 'castform' && <Castform data={state} />}
+        {template === 'glalie' && <Glalie data={state} />}
       </div>
     </div>
   );

src/contexts/DatabaseContext.js

@@ -68,8 +68,6 @@ const DatabaseProvider = ({ children }) => {
   };
 
   const duplicateResume = (originalResume) => {
-    console.trace();
-
     const id = uuid();
     const createdAt = firebase.database.ServerValue.TIMESTAMP;
 

src/data/demoState.json

@@ -143,6 +143,14 @@
         ["objective", "skills"],
         ["awards", "certifications", "languages", "references", "hobbies"],
         ["work", "education", "projects"]
+      ],
+      "castform": [
+        ["awards", "certifications", "languages", "hobbies"],
+        ["work", "education", "skills", "projects", "references"]
+      ],
+      "glalie": [
+        ["awards", "certifications", "hobbies"],
+        ["work", "education", "skills", "projects", "languages", "references"]
       ]
     },
     "template": "pikachu"

src/data/initialState.json

@@ -87,6 +87,14 @@
         ["objective", "skills"],
         ["awards", "certifications", "languages", "references", "hobbies"],
         ["work", "education", "projects"]
+      ],
+      "castform": [
+        ["awards", "certifications", "languages", "hobbies"],
+        ["work", "education", "skills", "projects", "references"]
+      ],
+      "glalie": [
+        ["awards", "certifications", "hobbies"],
+        ["work", "education", "skills", "projects", "languages", "references"]
       ]
     },
     "colors": {

src/data/templateOptions.js

@@ -14,6 +14,16 @@ const templateOptions = [
     name: 'Gengar',
     preview: 'https://source.unsplash.com/random/302x502',
   },
+  {
+    id: 'castform',
+    name: 'Castform',
+    preview: 'https://source.unsplash.com/random/303x503',
+  },
+  {
+    id: 'glalie',
+    name: 'Glalie',
+    preview: 'https://source.unsplash.com/random/304x504',
+  },
 ];
 
 export default templateOptions;

src/pages/r/view.js

@@ -1,13 +1,15 @@
-import { navigate, Link } from '@reach/router';
+import { Link, navigate } from '@reach/router';
 import React, { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { toast } from 'react-toastify';
 import LoadingScreen from '../../components/router/LoadingScreen';
 import DatabaseContext from '../../contexts/DatabaseContext';
-import Onyx from '../../templates/Onyx';
-import styles from './view.module.css';
-import Pikachu from '../../templates/Pikachu';
+import Castform from '../../templates/Castform';
 import Gengar from '../../templates/Gengar';
+import Glalie from '../../templates/Glalie';
+import Onyx from '../../templates/Onyx';
+import Pikachu from '../../templates/Pikachu';
+import styles from './view.module.css';
 
 const ResumeViewer = ({ id }) => {
   const [resume, setResume] = useState(null);
@@ -50,6 +52,10 @@ const ResumeViewer = ({ id }) => {
           {resume.metadata.template === 'onyx' && <Onyx data={resume} />}
           {resume.metadata.template === 'pikachu' && <Pikachu data={resume} />}
           {resume.metadata.template === 'gengar' && <Gengar data={resume} />}
+          {resume.metadata.template === 'castform' && (
+            <Castform data={resume} />
+          )}
+          {resume.metadata.template === 'glalie' && <Glalie data={resume} />}
         </div>
 
         <p className={styles.footer}>

src/templates/Castform.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import PageContext from '../contexts/PageContext';
+import AwardsA from './blocks/Awards/AwardsA';
+import CertificationsA from './blocks/Certifications/CertificationsA';
+import ContactC from './blocks/Contact/ContactC';
+import EducationA from './blocks/Education/EducationA';
+import HeadingD from './blocks/Heading/HeadingD';
+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';
+
+const Blocks = {
+  objective: ObjectiveA,
+  work: WorkA,
+  education: EducationA,
+  projects: ProjectsA,
+  awards: AwardsA,
+  certifications: CertificationsA,
+  skills: SkillsA,
+  hobbies: HobbiesA,
+  languages: LanguagesA,
+  references: ReferencesA,
+};
+
+const Castform = ({ data }) => {
+  const layout = data.metadata.layout.castform;
+
+  const Photo = () =>
+    data.profile.photograph !== '' && (
+      <img
+        className="w-32 h-32 rounded-full"
+        style={{
+          borderWidth: 6,
+          borderColor: data.metadata.colors.background,
+        }}
+        src={data.profile.photograph}
+        alt={data.profile.firstName}
+      />
+    );
+
+  const Profile = () => (
+    <div>
+      <h1 className="text-2xl font-bold">
+        {data.profile.firstName} {data.profile.lastName}
+      </h1>
+      <h5>{data.profile.subtitle}</h5>
+    </div>
+  );
+
+  return (
+    <PageContext.Provider value={{ data, heading: HeadingD }}>
+      <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 p-5"
+            style={{
+              color: data.metadata.colors.background,
+              backgroundColor: data.metadata.colors.primary,
+            }}
+          >
+            <div className="grid gap-4">
+              <Photo />
+              <Profile />
+
+              <div>
+                <HeadingD>Profile</HeadingD>
+                <ContactC />
+              </div>
+
+              {layout[0] &&
+                layout[0].map((x) => {
+                  const Component = Blocks[x];
+                  return Component && <Component key={x} />;
+                })}
+            </div>
+          </div>
+          <div className="col-span-8 p-5">
+            <div className="grid gap-4">
+              {layout[1] &&
+                layout[1].map((x) => {
+                  const Component = Blocks[x];
+                  return Component && <Component key={x} />;
+                })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </PageContext.Provider>
+  );
+};
+
+export default Castform;

src/templates/Glalie.js

@@ -0,0 +1,98 @@
+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 ContactD from './blocks/Contact/ContactD';
+import EducationA from './blocks/Education/EducationA';
+import HeadingB from './blocks/Heading/HeadingB';
+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';
+
+const Blocks = {
+  objective: ObjectiveA,
+  work: WorkA,
+  education: EducationA,
+  projects: ProjectsA,
+  awards: AwardsA,
+  certifications: CertificationsA,
+  skills: SkillsA,
+  hobbies: HobbiesA,
+  languages: LanguagesA,
+  references: ReferencesA,
+};
+
+const Glalie = ({ data }) => {
+  const layout = data.metadata.layout.glalie;
+  const { r, g, b } = hexToRgb(data.metadata.colors.primary) || {};
+
+  const Profile = () => (
+    <div className="grid gap-2 text-center">
+      {data.profile.photograph !== '' && (
+        <img
+          className="w-40 h-40 rounded-full mx-auto"
+          src={data.profile.photograph}
+          alt={data.profile.firstName}
+        />
+      )}
+      <div className="text-4xl font-bold leading-none">
+        <h1>{data.profile.firstName}</h1>
+        <h1>{data.profile.lastName}</h1>
+      </div>
+      <div className="tracking-wide text-xs uppercase font-medium">
+        {data.profile.subtitle}
+      </div>
+    </div>
+  );
+
+  return (
+    <PageContext.Provider value={{ data, heading: HeadingB }}>
+      <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"
+            style={{
+              backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,
+            }}
+          >
+            <div className="grid gap-6 p-6">
+              <Profile />
+              <ContactD />
+
+              {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 p-6">
+              {layout[1] &&
+                layout[1].map((x) => {
+                  const Component = Blocks[x];
+                  return Component && <Component key={x} />;
+                })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </PageContext.Provider>
+  );
+};
+
+export default Glalie;

src/templates/Onyx.js

@@ -33,7 +33,7 @@ const Onyx = ({ data }) => {
     <PageContext.Provider value={{ data, heading: HeadingA }}>
       <div
         id="page"
-        className="p-10 rounded"
+        className="p-8 rounded"
         style={{
           fontFamily: data.metadata.font,
           color: data.metadata.colors.text,

src/templates/Pikachu.js

@@ -32,7 +32,7 @@ const Pikachu = ({ data }) => {
     <PageContext.Provider value={{ data, heading: HeadingB }}>
       <div
         id="page"
-        className="p-10 rounded"
+        className="p-6 rounded"
         style={{
           fontFamily: data.metadata.font,
           color: data.metadata.colors.text,

src/templates/blocks/Contact/ContactC.js

@@ -0,0 +1,65 @@
+import React, { memo, useContext } from 'react';
+import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
+
+const ContactItem = ({ value, label, link }) => {
+  return value ? (
+    <div className="flex flex-col">
+      <h6 className="capitalize font-semibold">{label}</h6>
+      {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 ContactC = () => {
+  const { data } = useContext(PageContext);
+
+  return (
+    <div className="text-xs grid gap-2">
+      <div>
+        <h6 className="capitalize font-semibold">Address</h6>
+        <div className="flex flex-col text-xs">
+          <span>{data.profile.address.line1}</span>
+          <span>{data.profile.address.line2}</span>
+          <span>
+            {data.profile.address.city} {data.profile.address.pincode}
+          </span>
+        </div>
+      </div>
+
+      <ContactItem
+        label="phone"
+        value={data.profile.phone}
+        link={`tel:${data.profile.phone}`}
+      />
+      <ContactItem
+        label="website"
+        value={data.profile.website}
+        link={`http://${data.profile.website}`}
+      />
+      <ContactItem
+        label="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}
+            label={x.network}
+            link={x.url}
+          />
+        ))}
+    </div>
+  );
+};
+
+export default memo(ContactC);

src/templates/blocks/Contact/ContactD.js

@@ -0,0 +1,83 @@
+import React, { memo, useContext } from 'react';
+import { MdFlare } from 'react-icons/md';
+import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
+
+const ContactItem = ({ value, label, link }) => {
+  return value ? (
+    <div className="flex flex-col">
+      <h6 className="capitalize font-semibold">{label}</h6>
+      {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 ContactC = () => {
+  const { data } = useContext(PageContext);
+
+  return (
+    <div
+      className="my-4 relative w-full border-2 grid gap-2 text-center text-xs py-5"
+      style={{
+        borderColor: data.metadata.colors.primary,
+      }}
+    >
+      <div
+        className="absolute text-center"
+        style={{
+          top: '-11px',
+          left: '50%',
+          marginLeft: '-10px',
+          color: data.metadata.colors.primary,
+        }}
+      >
+        <MdFlare size="20px" />
+      </div>
+
+      <div>
+        <h6 className="capitalize font-semibold">Address</h6>
+        <div className="flex flex-col text-xs">
+          <span>{data.profile.address.line1}</span>
+          <span>{data.profile.address.line2}</span>
+          <span>
+            {data.profile.address.city} {data.profile.address.pincode}
+          </span>
+        </div>
+      </div>
+
+      <ContactItem
+        label="phone"
+        value={data.profile.phone}
+        link={`tel:${data.profile.phone}`}
+      />
+      <ContactItem
+        label="website"
+        value={data.profile.website}
+        link={`http://${data.profile.website}`}
+      />
+      <ContactItem
+        label="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}
+            label={x.network}
+            link={x.url}
+          />
+        ))}
+    </div>
+  );
+};
+
+export default memo(ContactC);

src/templates/blocks/Heading/HeadingD.js

@@ -0,0 +1,23 @@
+import React, { memo, useContext } from 'react';
+import PageContext from '../../../contexts/PageContext';
+import { hexToRgb } from '../../../utils';
+
+const HeadingC = ({ children }) => {
+  const { data } = useContext(PageContext);
+  const { r, g, b } = hexToRgb(data.metadata.colors.primary) || {};
+
+  return (
+    <h6
+      className="py-1 px-4 rounded-r leading-loose font-bold text-xs uppercase tracking-wide mb-3"
+      style={{
+        marginLeft: '-15px',
+        color: data.metadata.colors.background,
+        backgroundColor: `rgba(${r - 40}, ${g - 40}, ${b - 40}, 0.8)`,
+      }}
+    >
+      {children}
+    </h6>
+  );
+};
+
+export default memo(HeadingC);