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' }}
>
<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>
</PanZoom>
<PageController />
</div>
<div id="printPage" className="break-words">
{templates.find(x => theme.layout.toLowerCase() === x.key).component()}
</div>
<RightSidebar />
<PanZoomAnimation />

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

@ -29,6 +29,10 @@
"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": {
"cancel": "Cancel",
"saveAsPdf": "Save as PDF"

17
src/index.css
View File

@ -99,6 +99,10 @@ input[type='range']::-webkit-slider-thumb {
background-color: white;
}
#printPage {
display: none;
}
#pageController {
bottom: 25px;
}
@ -110,7 +114,7 @@ input[type='range']::-webkit-slider-thumb {
@page {
size: A4;
margin: 2.5em;
margin: 0;
}
@media print {
@ -122,18 +126,17 @@ input[type='range']::-webkit-slider-thumb {
visibility: hidden;
}
#page,
#page * {
#printPage,
#printPage * {
visibility: visible;
}
#page {
#printPage {
width: 21cm;
height: 29.7cm;
background-color: white;
box-shadow: none;
position: absolute;
left: 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="p-3 hover:bg-gray-200 cursor-pointer flex" onClick={() => window.print()}>
<i className="material-icons">print</i>
</div>
<div
className="p-3 hover:bg-gray-200 cursor-pointer flex"
onClick={() => setPrintDialogOpen(true)}

9
src/shared/PrintDialog.js
View File

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

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

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

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

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

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

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

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

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

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

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

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

@ -58,7 +58,7 @@ const Pikachu = () => {
</div>
);
const SkillItem = (x) => (
const SkillItem = x => (
<span
key={x}
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>
);
const ReferenceItem = (x) => (
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>
@ -92,12 +92,12 @@ const Pikachu = () => {
<div>
<Heading title={data.references.heading} />
<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>
);
const LanguageItem = (x) => (
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">
@ -115,11 +115,11 @@ const Pikachu = () => {
data.languages.enable && (
<div>
<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>
);
const ExtraItem = (x) => (
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>
@ -132,13 +132,13 @@ const Pikachu = () => {
<div>
<Heading title={data.extras.heading} />
<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>
);
const WorkItem = (x) => (
<div key={x.title} className="mb-3">
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>
@ -158,13 +158,13 @@ const Pikachu = () => {
<div>
<Heading title={data.work.heading} />
<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>
);
const EducationItem = (x) => (
<div key={x.name} className="mb-3">
const EducationItem = x => (
<div key={x.id} className="mb-3">
<div className="flex justify-between items-center">
<div>
<h6 className="font-semibold">{x.name}</h6>
@ -189,13 +189,13 @@ const Pikachu = () => {
<div>
<Heading title={data.education.heading} />
<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>
);
const AwardItem = (x) => (
<div key={x.title} className="mb-3">
const AwardItem = 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} />
@ -208,13 +208,13 @@ const Pikachu = () => {
<div>
<Heading title={data.awards.heading} />
<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>
);
const CertificationItem = (x) => (
<div key={x.title} className="mb-3">
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} />
@ -227,7 +227,7 @@ const Pikachu = () => {
<div>
<Heading title={data.certifications.heading} />
<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>
);

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]]);
};
const hexToRgb = (hex) => {
const hexToRgb = hex => {
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);
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;
};
const copyToClipboard = (text) => {
const copyToClipboard = text => {
const textArea = document.createElement('textarea');
textArea.style.position = 'fixed';
textArea.style.top = 0;
@ -44,7 +44,7 @@ const copyToClipboard = (text) => {
return successful;
};
const saveData = (dispatch) => dispatch({ type: 'save_data' });
const saveData = dispatch => dispatch({ type: 'save_data' });
const addItem = (dispatch, key, value) => {
dispatch({
@ -105,7 +105,7 @@ const importJson = (event, dispatch) => {
};
const saveAsPdf = (pageRef, panZoomRef, quality, type) =>
new Promise((resolve) => {
new Promise(resolve => {
panZoomRef.current.autoCenter(1);
panZoomRef.current.reset();
@ -114,7 +114,7 @@ const saveAsPdf = (pageRef, panZoomRef, quality, type) =>
scale: 5,
useCORS: true,
allowTaint: true,
}).then((canvas) => {
}).then(canvas => {
const image = canvas.toDataURL('image/jpeg', quality / 100);
const doc = new jsPDF({
orientation: 'portrait',
@ -148,7 +148,7 @@ const saveAsPdf = (pageRef, panZoomRef, quality, type) =>
});
const saveAsMultiPagePdf = (pageRef, panZoomRef, quality) =>
new Promise((resolve) => {
new Promise(resolve => {
panZoomRef.current.autoCenter(1);
panZoomRef.current.reset();
@ -157,7 +157,7 @@ const saveAsMultiPagePdf = (pageRef, panZoomRef, quality) =>
scale: 5,
useCORS: true,
allowTaint: true,
}).then((canvas) => {
}).then(canvas => {
const image = canvas.toDataURL('image/jpeg', quality / 100);
const doc = new jsPDF({
orientation: 'portrait',