- implement donation link, in about section

functions/index.js

@@ -7,29 +7,38 @@ function timeout(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-exports.printSinglePageResume = functions.https.onCall(
-  async ({ id }, { auth }) => {
-    if (!id) {
-      throw new functions.https.HttpsError(
-        'invalid-argument',
-        'The function must be called with one arguments "id" containing the resume ID.',
-      );
-    }
+exports.printResume = functions.https.onCall(async ({ id, type }, { auth }) => {
+  if (!id) {
+    throw new functions.https.HttpsError(
+      'invalid-argument',
+      'The function must be called with argument "id" containing the resume ID.',
+    );
+  }
 
-    if (!auth) {
-      throw new functions.https.HttpsError(
-        'failed-precondition',
-        'The function must be called while authenticated.',
-      );
-    }
+  if (!type || type !== 'single' || type !== 'multi') {
+    throw new functions.https.HttpsError(
+      'invalid-argument',
+      'The function must be called with argument "type" containing the type of resume.',
+    );
+  }
 
-    const browser = await puppeteer.launch({
-      headless: true,
-    });
-    const page = await browser.newPage();
-    await page.goto(BASE_URL + id);
-    await timeout(5000);
-    await page.emulateMediaType('print');
+  if (!auth) {
+    throw new functions.https.HttpsError(
+      'failed-precondition',
+      'The function must be called while authenticated.',
+    );
+  }
+
+  const browser = await puppeteer.launch({
+    headless: true,
+  });
+  const page = await browser.newPage();
+  await page.goto(BASE_URL + id);
+  await timeout(5000);
+  await page.emulateMediaType('print');
+  let pdf;
+
+  if (type === 'single') {
     const height = await page.evaluate(() => {
       const { body } = document;
       const html = document.documentElement;
@@ -44,45 +53,19 @@ exports.printSinglePageResume = functions.https.onCall(
 
       return maxHeight;
     });
-    const pdf = await page.pdf({
+    pdf = await page.pdf({
       printBackground: true,
       width: `21cm`,
       height: `${height}px`,
       pageRanges: '1',
     });
-    await browser.close();
-    return Buffer.from(pdf).toString('base64');
-  },
-);
-
-exports.printMultiPageResume = functions.https.onCall(
-  async ({ id }, { auth }) => {
-    if (!id) {
-      throw new functions.https.HttpsError(
-        'invalid-argument',
-        'The function must be called with one arguments "id" containing the resume ID.',
-      );
-    }
-
-    if (!auth) {
-      throw new functions.https.HttpsError(
-        'failed-precondition',
-        'The function must be called while authenticated.',
-      );
-    }
-
-    const browser = await puppeteer.launch({
-      headless: true,
-    });
-    const page = await browser.newPage();
-    await page.goto(BASE_URL + id);
-    await timeout(5000);
-    await page.emulateMediaType('print');
-    const pdf = await page.pdf({
+  } else if (type === 'multi') {
+    pdf = await page.pdf({
       format: 'A4',
       printBackground: true,
     });
-    await browser.close();
-    return Buffer.from(pdf).toString('base64');
-  },
-);
+  }
+
+  await browser.close();
+  return Buffer.from(pdf).toString('base64');
+});

src/components/builder/right/RightSidebar.js

@@ -9,6 +9,7 @@ import Layout from './sections/Layout';
 import Templates from './sections/Templates';
 import Actions from './sections/Actions';
 import Settings from './sections/Settings';
+import About from './sections/About';
 
 const getComponent = (id) => {
   switch (id) {
@@ -24,6 +25,8 @@ const getComponent = (id) => {
       return Actions;
     case 'settings':
       return Settings;
+    case 'about':
+      return About;
     default:
       throw new Error();
   }

src/components/builder/right/sections/About.js

@@ -0,0 +1,44 @@
+import React, { memo } from 'react';
+import { FaCoffee } from 'react-icons/fa';
+import Button from '../../../shared/Button';
+import Heading from '../../../shared/Heading';
+import styles from './About.module.css';
+
+const About = () => {
+  return (
+    <section>
+      <Heading>About</Heading>
+
+      <div className={styles.container}>
+        <h5>Donate to Reactive Resume</h5>
+
+        <p className="leading-loose">
+          As you know, every nook and cranny of this app is free and
+          open-source, but servers don&apos;t pay for themselves.
+        </p>
+
+        <p className="leading-loose">
+          I try to do what I can, but if you found the app helpful, or
+          you&apos;re in a better position than the others who depend on this
+          project for their first job, please consider donating{' '}
+          <span className="font-semibold">
+            as little as $5 to help keep the project alive
+          </span>{' '}
+          :)
+        </p>
+
+        <div className="mt-4 flex">
+          <a
+            href="https://www.buymeacoffee.com/AmruthPillai"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <Button icon={FaCoffee}>Buy me a coffee!</Button>
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default memo(About);

src/components/builder/right/sections/About.module.css

@@ -0,0 +1,11 @@
+.container {
+  @apply bg-primary-100 rounded grid gap-5 p-8;
+}
+
+.container h5 {
+  @apply text-lg font-semibold;
+}
+
+.container p {
+  @apply text-sm font-medium;
+}

src/data/rightSections.js

@@ -3,6 +3,7 @@ import {
   MdDashboard,
   MdFontDownload,
   MdImportExport,
+  MdInfo,
   MdSettings,
   MdStyle,
 } from 'react-icons/md';
@@ -38,4 +39,9 @@ export default [
     name: 'Settings',
     icon: MdSettings,
   },
+  {
+    id: 'about',
+    name: 'About',
+    icon: MdInfo,
+  },
 ];

src/modals/sections/ExportModal.js

@@ -38,20 +38,16 @@ const ExportModal = () => {
 
   const handleSinglePageDownload = async () => {
     setLoadingSingle(true);
-    const printSinglePageResume = firebase
-      .functions()
-      .httpsCallable('printSinglePageResume');
-    const { data } = await printSinglePageResume({ id: state.id });
+    const printResume = firebase.functions().httpsCallable('printResume');
+    const { data } = await printResume({ id: state.id, type: 'single' });
     const blob = b64toBlob(data, 'application/pdf');
     openFile(blob);
   };
 
   const handleMultiPageDownload = async () => {
     setLoadingMulti(true);
-    const printMultiPageResume = firebase
-      .functions()
-      .httpsCallable('printMultiPageResume');
-    const { data } = await printMultiPageResume({ id: state.id });
+    const printResume = firebase.functions().httpsCallable('printResume');
+    const { data } = await printResume({ id: state.id, type: 'multi' });
     const blob = b64toBlob(data, 'application/pdf');
     openFile(blob);
   };