Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-15 01:01:43 +10:00
Code Issues Packages Projects Releases Wiki Activity

bring back browser print method, parse-able resumes

Browse Source
This commit is contained in:
Amruth Pillai
2020-04-16 13:43:20 +05:30
parent 25b8f26529
commit a6632f06c3
12 changed files with 135 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/App/App.js
View File

@ -51,13 +51,17 @@ const App = () => {
style={{ outline: 'none' }} style={{ outline: 'none' }}
> >
<div id="page" ref={pageRef} className="shadow-2xl break-words"> <div id="page" ref={pageRef} className="shadow-2xl break-words">
{templates.find((x) => theme.layout.toLowerCase() === x.key).component()} {templates.find(x => theme.layout.toLowerCase() === x.key).component()}
</div> </div>
</PanZoom> </PanZoom>
<PageController /> <PageController />
</div> </div>
<div id="printPage" className="break-words">
{templates.find(x => theme.layout.toLowerCase() === x.key).component()}
</div>
<RightSidebar /> <RightSidebar />
<PanZoomAnimation /> <PanZoomAnimation />

4
src/i18n/source/app/app.json
View File

@ -29,6 +29,10 @@
"multiPageA4": "Multi-Page A4" "multiPageA4": "Multi-Page A4"
} }
}, },
"helpText": [
"This export method makes use of HTML canvas to convert the resume to an image and print it on a PDF, which means it will lose all selecting/parsing capabilities.",
"If that is important to you, please try printing the resume instead using Cmd/Ctrl + P or the print button below. The result may vary as the output is browser dependent, but it is known to work best on the latest version of Google Chrome."
],
"buttons": { "buttons": {
"cancel": "Cancel", "cancel": "Cancel",
"saveAsPdf": "Save as PDF" "saveAsPdf": "Save as PDF"

17
src/index.css
View File

@ -99,6 +99,10 @@ input[type='range']::-webkit-slider-thumb {
background-color: white; background-color: white;
} }
#printPage {
display: none;
}
#pageController { #pageController {
bottom: 25px; bottom: 25px;
} }
@ -110,7 +114,7 @@ input[type='range']::-webkit-slider-thumb {
@page { @page {
size: A4; size: A4;
margin: 2.5em; margin: 0;
} }
@media print { @media print {
@ -122,18 +126,17 @@ input[type='range']::-webkit-slider-thumb {
visibility: hidden; visibility: hidden;
} }
#page, #printPage,
#page * { #printPage * {
visibility: visible; visibility: visible;
} }
#page { #printPage {
width: 21cm; width: 21cm;
height: 29.7cm; height: 29.7cm;
background-color: white;
box-shadow: none;
position: absolute; position: absolute;
left: 0;
top: 0; top: 0;
left: 0;
right: 0;
} }
} }

4
src/shared/PageController.js
View File

@ -33,6 +33,10 @@ const PageController = () => {
<div className="text-gray-400 p-3">|</div> <div className="text-gray-400 p-3">|</div>
<div className="p-3 hover:bg-gray-200 cursor-pointer flex" onClick={() => window.print()}>
<i className="material-icons">print</i>
</div>
<div <div
className="p-3 hover:bg-gray-200 cursor-pointer flex" className="p-3 hover:bg-gray-200 cursor-pointer flex"
onClick={() => setPrintDialogOpen(true)} onClick={() => setPrintDialogOpen(true)}

9
src/shared/PrintDialog.js
View File

@ -31,7 +31,7 @@ const PrintDialog = () => {
> >
<div <div
className="centered py-8 px-12 bg-white shadow-xl rounded w-full md:w-1/3" className="centered py-8 px-12 bg-white shadow-xl rounded w-full md:w-1/3"
onClick={(e) => { onClick={e => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
}} }}
@ -44,7 +44,7 @@ const PrintDialog = () => {
type="range" type="range"
className="w-full h-4 my-2 rounded-full overflow-hidden appearance-none focus:outline-none bg-gray-400" className="w-full h-4 my-2 rounded-full overflow-hidden appearance-none focus:outline-none bg-gray-400"
value={quality} value={quality}
onChange={(e) => setQuality(e.target.value)} onChange={e => setQuality(e.target.value)}
min="40" min="40"
max="100" max="100"
step="5" step="5"
@ -58,13 +58,16 @@ const PrintDialog = () => {
value={type} value={type}
options={printTypes} options={printTypes}
onChange={setType} onChange={setType}
optionItem={(x) => ( optionItem={x => (
<option key={x.key} value={x.key}> <option key={x.key} value={x.key}>
{x.value} {x.value}
</option> </option>
)} )}
/> />
<p className="my-3 text-xs text-gray-600">{t('printDialog.helpText.0')}</p>
<p className="my-3 text-xs text-gray-600">{t('printDialog.helpText.1')}</p>
<div className="flex justify-between"> <div className="flex justify-between">
<button <button
type="button" type="button"

38
src/templates/castform/Castform.js
View File

@ -78,7 +78,7 @@ const Castform = () => {
</div> </div>
); );
const SkillItem = (x) => ( const SkillItem = x => (
<li key={x} className="text-sm my-2"> <li key={x} className="text-sm my-2">
{x} {x}
</li> </li>
@ -96,8 +96,8 @@ const Castform = () => {
const Objective = () => const Objective = () =>
data.objective && data.objective.enable && <p className="m-5 text-sm">{data.objective.body}</p>; data.objective && data.objective.enable && <p className="m-5 text-sm">{data.objective.body}</p>;
const WorkItem = (x) => ( const WorkItem = x => (
<div key={x.title} className="my-3 px-5"> <div key={x.id} className="my-3 px-5">
<div className="flex justify-between"> <div className="flex justify-between">
<div> <div>
<h6 className="font-semibold">{x.title}</h6> <h6 className="font-semibold">{x.title}</h6>
@ -116,11 +116,11 @@ const Castform = () => {
data.work.enable && ( data.work.enable && (
<div> <div>
<Heading light title={data.work.heading} /> <Heading light title={data.work.heading} />
{data.work.items.filter((x) => x.enable).map(WorkItem)} {data.work.items.filter(x => x.enable).map(WorkItem)}
</div> </div>
); );
const ReferenceItem = (x) => ( const ReferenceItem = x => (
<div key={x.id} className="flex flex-col"> <div key={x.id} className="flex flex-col">
<h6 className="text-sm font-medium">{x.name}</h6> <h6 className="text-sm font-medium">{x.name}</h6>
<span className="text-xs">{x.position}</span> <span className="text-xs">{x.position}</span>
@ -136,12 +136,12 @@ const Castform = () => {
<div> <div>
<Heading light title={data.references.heading} /> <Heading light title={data.references.heading} />
<div className="grid grid-cols-2 gap-6 px-5"> <div className="grid grid-cols-2 gap-6 px-5">
{data.references.items.filter((x) => x.enable).map(ReferenceItem)} {data.references.items.filter(x => x.enable).map(ReferenceItem)}
</div> </div>
</div> </div>
); );
const LanguageItem = (x) => ( const LanguageItem = x => (
<div key={x.id} className="flex flex-col my-2"> <div key={x.id} className="flex flex-col my-2">
<h6 className="text-sm font-medium mb-1">{x.key}</h6> <h6 className="text-sm font-medium mb-1">{x.key}</h6>
<div className="relative h-5"> <div className="relative h-5">
@ -168,13 +168,13 @@ const Castform = () => {
<div> <div>
<Heading title={data.languages.heading} /> <Heading title={data.languages.heading} />
<div className="px-5 mb-6"> <div className="px-5 mb-6">
{data.languages.items.filter((x) => x.enable).map(LanguageItem)} {data.languages.items.filter(x => x.enable).map(LanguageItem)}
</div> </div>
</div> </div>
); );
const EducationItem = (x) => ( const EducationItem = x => (
<div key={x.name} className="my-3 px-5"> <div key={x.id} className="my-3 px-5">
<div className="flex justify-between"> <div className="flex justify-between">
<div> <div>
<h6 className="font-semibold">{x.name}</h6> <h6 className="font-semibold">{x.name}</h6>
@ -196,12 +196,12 @@ const Castform = () => {
data.education.enable && ( data.education.enable && (
<div> <div>
<Heading light title={data.education.heading} /> <Heading light title={data.education.heading} />
{data.education.items.filter((x) => x.enable).map(EducationItem)} {data.education.items.filter(x => x.enable).map(EducationItem)}
</div> </div>
); );
const AwardItem = (x) => ( const AwardItem = x => (
<div key={x.title} className="my-3 px-5"> <div key={x.id} className="my-3 px-5">
<h6 className="font-semibold">{x.title}</h6> <h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p> <p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} /> <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@ -213,12 +213,12 @@ const Castform = () => {
data.awards.enable && ( data.awards.enable && (
<div> <div>
<Heading light title={data.awards.heading} /> <Heading light title={data.awards.heading} />
{data.awards.items.filter((x) => x.enable).map(AwardItem)} {data.awards.items.filter(x => x.enable).map(AwardItem)}
</div> </div>
); );
const CertificationItem = (x) => ( const CertificationItem = x => (
<div key={x.title} className="my-3 px-5"> <div key={x.id} className="my-3 px-5">
<h6 className="font-semibold">{x.title}</h6> <h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p> <p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} /> <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@ -230,11 +230,11 @@ const Castform = () => {
data.certifications.enable && ( data.certifications.enable && (
<div> <div>
<Heading title={data.certifications.heading} /> <Heading title={data.certifications.heading} />
{data.certifications.items.filter((x) => x.enable).map(CertificationItem)} {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
</div> </div>
); );
const ExtraItem = (x) => ( const ExtraItem = x => (
<div key={x.id} className="px-5 my-2"> <div key={x.id} className="px-5 my-2">
<h6 className="text-xs font-bold">{x.key}</h6> <h6 className="text-xs font-bold">{x.key}</h6>
<div className="text-sm">{x.value}</div> <div className="text-sm">{x.value}</div>
@ -246,7 +246,7 @@ const Castform = () => {
data.extras.enable && ( data.extras.enable && (
<div> <div>
<Heading title={data.extras.heading} /> <Heading title={data.extras.heading} />
{data.extras.items.filter((x) => x.enable).map(ExtraItem)} {data.extras.items.filter(x => x.enable).map(ExtraItem)}
</div> </div>
); );

8
src/templates/celebi/Celebi.js
View File

@ -98,7 +98,7 @@ const Celebi = () => {
); );
const WorkItem = x => ( const WorkItem = x => (
<div key={x.title} className="my-3 mr-10"> <div key={x.id} className="my-3 mr-10">
<div> <div>
<h6 className="font-semibold">{x.title}</h6> <h6 className="font-semibold">{x.title}</h6>
<p className="text-xs text-gray-800"> <p className="text-xs text-gray-800">
@ -119,7 +119,7 @@ const Celebi = () => {
); );
const EducationItem = x => ( const EducationItem = x => (
<div key={x.name} className="my-3 mr-10"> <div key={x.id} className="my-3 mr-10">
<h6 className="font-semibold">{x.name}</h6> <h6 className="font-semibold">{x.name}</h6>
<p className="text-xs">{x.major}</p> <p className="text-xs">{x.major}</p>
<div className="text-xs"> <div className="text-xs">
@ -196,7 +196,7 @@ const Celebi = () => {
); );
const AwardItem = x => ( const AwardItem = x => (
<div key={x.title} className="my-2"> <div key={x.id} className="my-2">
<h6 className="font-semibold">{x.title}</h6> <h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p> <p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} /> <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@ -213,7 +213,7 @@ const Celebi = () => {
); );
const CertificationItem = x => ( const CertificationItem = x => (
<div key={x.title} className="my-2"> <div key={x.id} className="my-2">
<h6 className="font-semibold">{x.title}</h6> <h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p> <p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} /> <ReactMarkdown className="mt-2 text-sm" source={x.description} />

38
src/templates/gengar/Gengar.js
View File

@ -63,7 +63,7 @@ const Gengar = () => {
</div> </div>
); );
const SkillItem = (x) => ( const SkillItem = x => (
<li key={x} className="text-sm py-1"> <li key={x} className="text-sm py-1">
{x} {x}
</li> </li>
@ -78,8 +78,8 @@ const Gengar = () => {
</div> </div>
); );
const EducationItem = (x) => ( const EducationItem = x => (
<div key={x.name} className="mb-3"> <div key={x.id} className="mb-3">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div> <div>
<h6 className="font-semibold"> <h6 className="font-semibold">
@ -109,12 +109,12 @@ const Gengar = () => {
data.education.enable && ( data.education.enable && (
<div className="mb-6"> <div className="mb-6">
<Heading title={data.education.heading} /> <Heading title={data.education.heading} />
{data.education.items.filter((x) => x.enable).map(EducationItem)} {data.education.items.filter(x => x.enable).map(EducationItem)}
</div> </div>
); );
const CertificationItem = (x) => ( const CertificationItem = x => (
<div key={x.title} className="mb-3"> <div key={x.id} className="mb-3">
<h6 className="font-semibold">{x.title}</h6> <h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p> <p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} /> <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@ -126,12 +126,12 @@ const Gengar = () => {
data.certifications.enable && ( data.certifications.enable && (
<div className="mb-6"> <div className="mb-6">
<Heading title={data.certifications.heading} /> <Heading title={data.certifications.heading} />
{data.certifications.items.filter((x) => x.enable).map(CertificationItem)} {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
</div> </div>
); );
const AwardItem = (x) => ( const AwardItem = x => (
<div key={x.title} className="mb-3"> <div key={x.id} className="mb-3">
<h6 className="font-semibold">{x.title}</h6> <h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p> <p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} /> <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@ -143,11 +143,11 @@ const Gengar = () => {
data.awards.enable && ( data.awards.enable && (
<div className="mb-6"> <div className="mb-6">
<Heading title={data.awards.heading} /> <Heading title={data.awards.heading} />
{data.awards.items.filter((x) => x.enable).map(AwardItem)} {data.awards.items.filter(x => x.enable).map(AwardItem)}
</div> </div>
); );
const ReferenceItem = (x) => ( const ReferenceItem = x => (
<div key={x.id} className="flex flex-col"> <div key={x.id} className="flex flex-col">
<h6 className="text-sm font-medium">{x.name}</h6> <h6 className="text-sm font-medium">{x.name}</h6>
<span className="text-xs">{x.position}</span> <span className="text-xs">{x.position}</span>
@ -163,13 +163,13 @@ const Gengar = () => {
<div> <div>
<Heading title={data.references.heading} /> <Heading title={data.references.heading} />
<div className="grid grid-cols-2 gap-6"> <div className="grid grid-cols-2 gap-6">
{data.references.items.filter((x) => x.enable).map(ReferenceItem)} {data.references.items.filter(x => x.enable).map(ReferenceItem)}
</div> </div>
</div> </div>
); );
const WorkItem = (x) => ( const WorkItem = x => (
<div key={x.title} className="mb-3"> <div key={x.id} className="mb-3">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div> <div>
<h6 className="font-semibold">{x.title}</h6> <h6 className="font-semibold">{x.title}</h6>
@ -188,11 +188,11 @@ const Gengar = () => {
data.work.enable && ( data.work.enable && (
<div className="mb-6"> <div className="mb-6">
<Heading title={data.work.heading} /> <Heading title={data.work.heading} />
{data.work.items.filter((x) => x.enable).map(WorkItem)} {data.work.items.filter(x => x.enable).map(WorkItem)}
</div> </div>
); );
const LanguageItem = (x) => ( const LanguageItem = x => (
<div key={x.id} className="grid grid-cols-2 items-center py-2"> <div key={x.id} className="grid grid-cols-2 items-center py-2">
<h6 className="text-sm font-medium">{x.key}</h6> <h6 className="text-sm font-medium">{x.key}</h6>
<div className="flex"> <div className="flex">
@ -210,11 +210,11 @@ const Gengar = () => {
data.languages.enable && ( data.languages.enable && (
<div> <div>
<Heading title={data.languages.heading} /> <Heading title={data.languages.heading} />
<div className="mb-6">{data.languages.items.filter((x) => x.enable).map(LanguageItem)}</div> <div className="mb-6">{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
</div> </div>
); );
const ExtraItem = (x) => ( const ExtraItem = x => (
<div key={x.id} className="text-sm my-1"> <div key={x.id} className="text-sm my-1">
<h6 className="text-xs font-bold">{x.key}</h6> <h6 className="text-xs font-bold">{x.key}</h6>
<h6>{x.value}</h6> <h6>{x.value}</h6>
@ -227,7 +227,7 @@ const Gengar = () => {
<div> <div>
<Heading title={data.extras.heading} /> <Heading title={data.extras.heading} />
<div className="grid grid-cols-2"> <div className="grid grid-cols-2">
{data.extras.items.filter((x) => x.enable).map(ExtraItem)} {data.extras.items.filter(x => x.enable).map(ExtraItem)}
</div> </div>
</div> </div>
); );

40
src/templates/glalie/Glalie.js
View File

@ -95,8 +95,8 @@ const Glalie = () => {
</div> </div>
); );
const WorkItem = (x) => ( const WorkItem = x => (
<div key={x.title} className="mt-3"> <div key={x.id} className="mt-3">
<div className="flex justify-between"> <div className="flex justify-between">
<div> <div>
<h6 className="font-semibold text-sm">{x.title}</h6> <h6 className="font-semibold text-sm">{x.title}</h6>
@ -114,12 +114,12 @@ const Glalie = () => {
data.work.enable && ( data.work.enable && (
<div> <div>
<Heading title={data.work.heading} /> <Heading title={data.work.heading} />
{data.work.items.filter((x) => x.enable).map(WorkItem)} {data.work.items.filter(x => x.enable).map(WorkItem)}
</div> </div>
); );
const EducationItem = (x) => ( const EducationItem = x => (
<div key={x.name} className="mt-3"> <div key={x.id} className="mt-3">
<div> <div>
<h6 className="font-semibold text-xs">{x.name}</h6> <h6 className="font-semibold text-xs">{x.name}</h6>
<p className="text-xs opacity-75">{x.major}</p> <p className="text-xs opacity-75">{x.major}</p>
@ -137,13 +137,13 @@ const Glalie = () => {
<div> <div>
<Heading title={data.education.heading} /> <Heading title={data.education.heading} />
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
{data.education.items.filter((x) => x.enable).map(EducationItem)} {data.education.items.filter(x => x.enable).map(EducationItem)}
</div> </div>
</div> </div>
); );
const AwardItem = (x) => ( const AwardItem = x => (
<div key={x.title} className="mt-3 text-left"> <div key={x.id} className="mt-3 text-left">
<h6 className="font-semibold">{x.title}</h6> <h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p> <p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} /> <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@ -155,12 +155,12 @@ const Glalie = () => {
data.awards.enable && ( data.awards.enable && (
<div> <div>
<Heading title={data.awards.heading} /> <Heading title={data.awards.heading} />
{data.awards.items.filter((x) => x.enable).map(AwardItem)} {data.awards.items.filter(x => x.enable).map(AwardItem)}
</div> </div>
); );
const CertificationItem = (x) => ( const CertificationItem = x => (
<div key={x.title} className="mt-3 text-left"> <div key={x.id} className="mt-3 text-left">
<h6 className="font-semibold">{x.title}</h6> <h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p> <p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} /> <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@ -172,11 +172,11 @@ const Glalie = () => {
data.certifications.enable && ( data.certifications.enable && (
<div> <div>
<Heading title={data.certifications.heading} /> <Heading title={data.certifications.heading} />
{data.certifications.items.filter((x) => x.enable).map(CertificationItem)} {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
</div> </div>
); );
const SkillItem = (x) => ( const SkillItem = x => (
<li key={x} className="text-xs font-medium"> <li key={x} className="text-xs font-medium">
{x} {x}
</li> </li>
@ -191,7 +191,7 @@ const Glalie = () => {
</div> </div>
); );
const LanguageItem = (x) => ( const LanguageItem = x => (
<div key={x.id} className="grid grid-cols-2 items-center py-2"> <div key={x.id} className="grid grid-cols-2 items-center py-2">
<h6 className="text-xs font-medium text-left">{x.key}</h6> <h6 className="text-xs font-medium text-left">{x.key}</h6>
<div className="flex"> <div className="flex">
@ -209,13 +209,11 @@ const Glalie = () => {
data.languages.enable && ( data.languages.enable && (
<div> <div>
<Heading title={data.languages.heading} /> <Heading title={data.languages.heading} />
<div className="w-3/4"> <div className="w-3/4">{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
{data.languages.items.filter((x) => x.enable).map(LanguageItem)}
</div>
</div> </div>
); );
const ReferenceItem = (x) => ( const ReferenceItem = x => (
<div key={x.id} className="flex flex-col"> <div key={x.id} className="flex flex-col">
<h6 className="text-sm font-medium">{x.name}</h6> <h6 className="text-sm font-medium">{x.name}</h6>
<span className="text-xs">{x.position}</span> <span className="text-xs">{x.position}</span>
@ -231,12 +229,12 @@ const Glalie = () => {
<div> <div>
<Heading title={data.references.heading} /> <Heading title={data.references.heading} />
<div className="grid grid-cols-3 gap-8"> <div className="grid grid-cols-3 gap-8">
{data.references.items.filter((x) => x.enable).map(ReferenceItem)} {data.references.items.filter(x => x.enable).map(ReferenceItem)}
</div> </div>
</div> </div>
); );
const ExtraItem = (x) => ( const ExtraItem = x => (
<tr key={x.id}> <tr key={x.id}>
<td className="border font-medium px-4 py-2 text-xs">{x.key}</td> <td className="border font-medium px-4 py-2 text-xs">{x.key}</td>
<td className="border px-4 py-2 text-xs">{x.value}</td> <td className="border px-4 py-2 text-xs">{x.value}</td>
@ -249,7 +247,7 @@ const Glalie = () => {
<div> <div>
<Heading title={data.extras.heading} /> <Heading title={data.extras.heading} />
<table className="mt-4 w-2/3 table-auto"> <table className="mt-4 w-2/3 table-auto">
<tbody>{data.extras.items.filter((x) => x.enable).map(ExtraItem)}</tbody> <tbody>{data.extras.items.filter(x => x.enable).map(ExtraItem)}</tbody>
</table> </table>
</div> </div>
); );

40
src/templates/onyx/Onyx.js
View File

@ -60,8 +60,8 @@ const Onyx = () => {
</div> </div>
); );
const WorkItem = (x) => ( const WorkItem = x => (
<div key={x.title} className="mt-3"> <div key={x.id} className="mt-3">
<div className="flex justify-between"> <div className="flex justify-between">
<div> <div>
<h6 className="font-semibold">{x.title}</h6> <h6 className="font-semibold">{x.title}</h6>
@ -80,12 +80,12 @@ const Onyx = () => {
data.work.enable && ( data.work.enable && (
<div> <div>
<Heading title={data.work.heading} /> <Heading title={data.work.heading} />
{data.work.items.filter((x) => x.enable).map(WorkItem)} {data.work.items.filter(x => x.enable).map(WorkItem)}
</div> </div>
); );
const EducationItem = (x) => ( const EducationItem = x => (
<div key={x.name} className="mt-3"> <div key={x.id} className="mt-3">
<div className="flex justify-between"> <div className="flex justify-between">
<div> <div>
<h6 className="font-semibold">{x.name}</h6> <h6 className="font-semibold">{x.name}</h6>
@ -107,12 +107,12 @@ const Onyx = () => {
data.education.enable && ( data.education.enable && (
<div> <div>
<Heading title={data.education.heading} /> <Heading title={data.education.heading} />
{data.education.items.filter((x) => x.enable).map(EducationItem)} {data.education.items.filter(x => x.enable).map(EducationItem)}
</div> </div>
); );
const AwardItem = (x) => ( const AwardItem = x => (
<div key={x.title} className="mt-3"> <div key={x.id} className="mt-3">
<h6 className="font-semibold">{x.title}</h6> <h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p> <p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} /> <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@ -124,12 +124,12 @@ const Onyx = () => {
data.awards.enable && ( data.awards.enable && (
<div> <div>
<Heading title={data.awards.heading} /> <Heading title={data.awards.heading} />
{data.awards.items.filter((x) => x.enable).map(AwardItem)} {data.awards.items.filter(x => x.enable).map(AwardItem)}
</div> </div>
); );
const CertificationItem = (x) => ( const CertificationItem = x => (
<div key={x.title} className="mt-3"> <div key={x.id} className="mt-3">
<h6 className="font-semibold">{x.title}</h6> <h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p> <p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} /> <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@ -141,11 +141,11 @@ const Onyx = () => {
data.certifications.enable && ( data.certifications.enable && (
<div> <div>
<Heading title={data.certifications.heading} /> <Heading title={data.certifications.heading} />
{data.certifications.items.filter((x) => x.enable).map(CertificationItem)} {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
</div> </div>
); );
const SkillItem = (x) => ( const SkillItem = x => (
<span <span
key={x} key={x}
className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2" className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
@ -167,7 +167,7 @@ const Onyx = () => {
</div> </div>
); );
const LanguageItem = (x) => ( const LanguageItem = x => (
<div key={x.id} className="grid grid-cols-2 items-center py-2"> <div key={x.id} className="grid grid-cols-2 items-center py-2">
<h6 className="text-sm font-medium">{x.key}</h6> <h6 className="text-sm font-medium">{x.key}</h6>
<div className="flex"> <div className="flex">
@ -185,13 +185,11 @@ const Onyx = () => {
data.languages.enable && ( data.languages.enable && (
<div> <div>
<Heading title={data.languages.heading} /> <Heading title={data.languages.heading} />
<div className="w-3/4"> <div className="w-3/4">{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
{data.languages.items.filter((x) => x.enable).map(LanguageItem)}
</div>
</div> </div>
); );
const ReferenceItem = (x) => ( const ReferenceItem = x => (
<div key={x.id} className="flex flex-col"> <div key={x.id} className="flex flex-col">
<h6 className="text-sm font-medium">{x.name}</h6> <h6 className="text-sm font-medium">{x.name}</h6>
<span className="text-xs">{x.position}</span> <span className="text-xs">{x.position}</span>
@ -207,12 +205,12 @@ const Onyx = () => {
<div> <div>
<Heading title={data.references.heading} /> <Heading title={data.references.heading} />
<div className="grid grid-cols-3 gap-6"> <div className="grid grid-cols-3 gap-6">
{data.references.items.filter((x) => x.enable).map(ReferenceItem)} {data.references.items.filter(x => x.enable).map(ReferenceItem)}
</div> </div>
</div> </div>
); );
const ExtraItem = (x) => ( const ExtraItem = x => (
<tr key={x.id}> <tr key={x.id}>
<td className="border font-medium px-4 py-2 text-sm">{x.key}</td> <td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
<td className="border px-4 py-2 text-sm">{x.value}</td> <td className="border px-4 py-2 text-sm">{x.value}</td>
@ -225,7 +223,7 @@ const Onyx = () => {
<div> <div>
<Heading title={data.extras.heading} /> <Heading title={data.extras.heading} />
<table className="w-2/3 table-auto"> <table className="w-2/3 table-auto">
<tbody>{data.extras.items.filter((x) => x.enable).map(ExtraItem)}</tbody> <tbody>{data.extras.items.filter(x => x.enable).map(ExtraItem)}</tbody>
</table> </table>
</div> </div>
); );

38
src/templates/pikachu/Pikachu.js
View File

@ -58,7 +58,7 @@ const Pikachu = () => {
</div> </div>
); );
const SkillItem = (x) => ( const SkillItem = x => (
<span <span
key={x} key={x}
className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4" className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
@ -76,7 +76,7 @@ const Pikachu = () => {
</div> </div>
); );
const ReferenceItem = (x) => ( const ReferenceItem = x => (
<div key={x.id} className="flex flex-col"> <div key={x.id} className="flex flex-col">
<h6 className="text-sm font-medium">{x.name}</h6> <h6 className="text-sm font-medium">{x.name}</h6>
<span className="text-xs">{x.position}</span> <span className="text-xs">{x.position}</span>
@ -92,12 +92,12 @@ const Pikachu = () => {
<div> <div>
<Heading title={data.references.heading} /> <Heading title={data.references.heading} />
<div className="grid grid-cols-2 gap-6"> <div className="grid grid-cols-2 gap-6">
{data.references.items.filter((x) => x.enable).map(ReferenceItem)} {data.references.items.filter(x => x.enable).map(ReferenceItem)}
</div> </div>
</div> </div>
); );
const LanguageItem = (x) => ( const LanguageItem = x => (
<div key={x.id} className="grid grid-cols-2 items-center py-2"> <div key={x.id} className="grid grid-cols-2 items-center py-2">
<h6 className="text-sm font-medium">{x.key}</h6> <h6 className="text-sm font-medium">{x.key}</h6>
<div className="flex"> <div className="flex">
@ -115,11 +115,11 @@ const Pikachu = () => {
data.languages.enable && ( data.languages.enable && (
<div> <div>
<Heading title={data.languages.heading} /> <Heading title={data.languages.heading} />
<div className="mb-6">{data.languages.items.filter((x) => x.enable).map(LanguageItem)}</div> <div className="mb-6">{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
</div> </div>
); );
const ExtraItem = (x) => ( const ExtraItem = x => (
<div key={x.id} className="text-sm my-1"> <div key={x.id} className="text-sm my-1">
<h6 className="text-xs font-bold">{x.key}</h6> <h6 className="text-xs font-bold">{x.key}</h6>
<h6 className="">{x.value}</h6> <h6 className="">{x.value}</h6>
@ -132,13 +132,13 @@ const Pikachu = () => {
<div> <div>
<Heading title={data.extras.heading} /> <Heading title={data.extras.heading} />
<div className="flex flex-col mb-6"> <div className="flex flex-col mb-6">
{data.extras.items.filter((x) => x.enable).map(ExtraItem)} {data.extras.items.filter(x => x.enable).map(ExtraItem)}
</div> </div>
</div> </div>
); );
const WorkItem = (x) => ( const WorkItem = x => (
<div key={x.title} className="mb-3"> <div key={x.id} className="mb-3">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div> <div>
<h6 className="font-semibold">{x.title}</h6> <h6 className="font-semibold">{x.title}</h6>
@ -158,13 +158,13 @@ const Pikachu = () => {
<div> <div>
<Heading title={data.work.heading} /> <Heading title={data.work.heading} />
<div className="flex flex-col mb-4"> <div className="flex flex-col mb-4">
{data.work.items.filter((x) => x.enable).map(WorkItem)} {data.work.items.filter(x => x.enable).map(WorkItem)}
</div> </div>
</div> </div>
); );
const EducationItem = (x) => ( const EducationItem = x => (
<div key={x.name} className="mb-3"> <div key={x.id} className="mb-3">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div> <div>
<h6 className="font-semibold">{x.name}</h6> <h6 className="font-semibold">{x.name}</h6>
@ -189,13 +189,13 @@ const Pikachu = () => {
<div> <div>
<Heading title={data.education.heading} /> <Heading title={data.education.heading} />
<div className="flex flex-col mb-4"> <div className="flex flex-col mb-4">
{data.education.items.filter((x) => x.enable).map(EducationItem)} {data.education.items.filter(x => x.enable).map(EducationItem)}
</div> </div>
</div> </div>
); );
const AwardItem = (x) => ( const AwardItem = x => (
<div key={x.title} className="mb-3"> <div key={x.id} className="mb-3">
<h6 className="font-semibold">{x.title}</h6> <h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p> <p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} /> <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@ -208,13 +208,13 @@ const Pikachu = () => {
<div> <div>
<Heading title={data.awards.heading} /> <Heading title={data.awards.heading} />
<div className="flex flex-col mb-2"> <div className="flex flex-col mb-2">
{data.awards.items.filter((x) => x.enable).map(AwardItem)} {data.awards.items.filter(x => x.enable).map(AwardItem)}
</div> </div>
</div> </div>
); );
const CertificationItem = (x) => ( const CertificationItem = x => (
<div key={x.title} className="mb-3"> <div key={x.id} className="mb-3">
<h6 className="font-semibold">{x.title}</h6> <h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p> <p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} /> <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@ -227,7 +227,7 @@ const Pikachu = () => {
<div> <div>
<Heading title={data.certifications.heading} /> <Heading title={data.certifications.heading} />
<div className="flex flex-col mb-2"> <div className="flex flex-col mb-2">
{data.certifications.items.filter((x) => x.enable).map(CertificationItem)} {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
</div> </div>
</div> </div>
); );

14
src/utils/index.js
View File

@ -10,7 +10,7 @@ const move = (array, element, delta) => {
array.splice(indexes[0], 2, array[indexes[1]], array[indexes[0]]); array.splice(indexes[0], 2, array[indexes[1]], array[indexes[0]]);
}; };
const hexToRgb = (hex) => { const hexToRgb = hex => {
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b); hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@ -23,7 +23,7 @@ const hexToRgb = (hex) => {
: null; : null;
}; };
const copyToClipboard = (text) => { const copyToClipboard = text => {
const textArea = document.createElement('textarea'); const textArea = document.createElement('textarea');
textArea.style.position = 'fixed'; textArea.style.position = 'fixed';
textArea.style.top = 0; textArea.style.top = 0;
@ -44,7 +44,7 @@ const copyToClipboard = (text) => {
return successful; return successful;
}; };
const saveData = (dispatch) => dispatch({ type: 'save_data' }); const saveData = dispatch => dispatch({ type: 'save_data' });
const addItem = (dispatch, key, value) => { const addItem = (dispatch, key, value) => {
dispatch({ dispatch({
@ -105,7 +105,7 @@ const importJson = (event, dispatch) => {
}; };
const saveAsPdf = (pageRef, panZoomRef, quality, type) => const saveAsPdf = (pageRef, panZoomRef, quality, type) =>
new Promise((resolve) => { new Promise(resolve => {
panZoomRef.current.autoCenter(1); panZoomRef.current.autoCenter(1);
panZoomRef.current.reset(); panZoomRef.current.reset();
@ -114,7 +114,7 @@ const saveAsPdf = (pageRef, panZoomRef, quality, type) =>
scale: 5, scale: 5,
useCORS: true, useCORS: true,
allowTaint: true, allowTaint: true,
}).then((canvas) => { }).then(canvas => {
const image = canvas.toDataURL('image/jpeg', quality / 100); const image = canvas.toDataURL('image/jpeg', quality / 100);
const doc = new jsPDF({ const doc = new jsPDF({
orientation: 'portrait', orientation: 'portrait',
@ -148,7 +148,7 @@ const saveAsPdf = (pageRef, panZoomRef, quality, type) =>
}); });
const saveAsMultiPagePdf = (pageRef, panZoomRef, quality) => const saveAsMultiPagePdf = (pageRef, panZoomRef, quality) =>
new Promise((resolve) => { new Promise(resolve => {
panZoomRef.current.autoCenter(1); panZoomRef.current.autoCenter(1);
panZoomRef.current.reset(); panZoomRef.current.reset();
@ -157,7 +157,7 @@ const saveAsMultiPagePdf = (pageRef, panZoomRef, quality) =>
scale: 5, scale: 5,
useCORS: true, useCORS: true,
allowTaint: true, allowTaint: true,
}).then((canvas) => { }).then(canvas => {
const image = canvas.toDataURL('image/jpeg', quality / 100); const image = canvas.toDataURL('image/jpeg', quality / 100);
const doc = new jsPDF({ const doc = new jsPDF({
orientation: 'portrait', orientation: 'portrait',