CLASSROOMIO-T-75: Add download certificate function

.gitignore

@@ -5,3 +5,6 @@ yarn-error.log
 /__sapper__/
 .env
 /dist/
+
+# Local Netlify folder
+.netlify

.netlify/functions-serve/create-org-site/create-org-site.js

@@ -1 +0,0 @@
-module.exports = require('./src/netlify/functions/create-org-site.js')

netlify.toml

@@ -1,6 +1,15 @@
+[build]
+  functions = "functions"
+
 [[redirects]]
   from = "/*"
   to = "/404.html"
   status = 404
+
+[[redirects]]
+  from = "/api/*"
+  to = "/.netlify/functions/:splat"
+  status = 200
+
 [build.environment]
   NODE_OPTIONS = "--max_old_space_size=4096"

netlify/functions/downloadCertificate.js

@@ -0,0 +1,167 @@
+var html_to_pdf = require('html-pdf-node');
+
+exports.handler = async function (event, context) {
+  console.log('body', event.body);
+  const pdfBuffer = await generateCertificate(event.body);
+
+  return {
+    isBase64Encoded: true,
+    statusCode: 200,
+    headers: { 'Content-Type': 'application/pdf' },
+    body: pdfBuffer,
+  };
+};
+
+function getHtmlTemplate(body) {
+  return `
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Qwitcher+Grypen&family=Roboto:wght@300;400;700&display=swap"
+        rel="stylesheet"
+      />
+      <script src="https://cdn.tailwindcss.com"></script>
+      <title>Certificate</title>
+      <style>
+        .student-name {
+          font-family: 'Qwitcher Grypen', cursive;
+        }
+        .desc {
+          font-size: 10px;
+        }
+        .clamp {
+          font-size: clamp(14px, 3vw, 16px);
+        }
+      </style>
+    </head>
+    <body>
+      ${body}
+    </body>
+  </html>
+  `;
+}
+
+function getProfessionalTheme({
+  studentName,
+  courseName,
+  courseDescription,
+  orgLogoUrl,
+  orgName,
+}) {
+  const themeBody = `
+  <div
+    class="flex items-center justify-center border border-dashed border-blue-400"
+  >
+    <div class="border-l-8 border-blue-800">
+      <div class="w-full px-5 py-3">
+        <p class="text-sm font-normal my-2 uppercase text-gray-500">
+          Certificate<br /> of completion
+        </p>
+        <div class="border-b border-gray-500 mb-4">
+          <p class="text-xs text-black font-medium">This is to certify that</p>
+          <p class="student-name text-center text-5xl">${studentName}</p>
+        </div>
+        <div class="mb-2">
+          <p class="text-xs text-black font-medium">
+            has successfully completed introductory courses in
+          </p>
+          <div>
+            <p
+              class="clamp bg-transparent text-base font-semibold text-blue-800 text-center uppercase my-2"
+            >
+              ${courseName}
+            </p>
+          </div>
+        </div>
+        <p class="desc mb-4 text-justify">${courseDescription}</p>
+        <div class="flex items-center gap-1 my-2">
+          <img
+            src="${orgLogoUrl}"
+            alt="logo"
+            class="w-10 h-10 rounded-md"
+          />
+          <p class="font-semibold capitalize">${orgName}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  `;
+  return getHtmlTemplate(themeBody);
+}
+
+function getPlainTheme({
+  studentName,
+  courseName,
+  courseDescription,
+  orgLogoUrl,
+  orgName,
+}) {
+  const themeBody = `
+    <div
+      class="flex flex-col items-center justify-center {borderwidth} {bordercolor} py-3"
+    >
+      <div class="flex items-center gap-1 my-2">
+        <img
+          src="${orgLogoUrl}"
+          alt="logo"
+          class=" w-10 h-10 rounded-md"
+        />
+        <p class="font-semibold capitalize">${orgName}</p>
+      </div>
+      <div class="w-full px-5 py-3">
+        <p
+          class="text-sm text-center font-normal my-2 uppercase tracking-widest text-gray-500 w-full"
+        >
+          Certificate of completion
+        </p>
+        <div class="border-b border-gray-500 mb-4">
+          <p class="text-xs text-black font-medium">This is to certify that</p>
+          <p class="student-name text-center text-5xl">${studentName}</p>
+        </div>
+        <div class="mb-2">
+          <p class="text-xs text-black font-medium">
+            has successfully completed a courses in
+          </p>
+          <div>
+            <p
+              class="clamp bg-transparent text-base font-semibold text-pink-700 text-center uppercase"
+            >
+              ${courseName}
+            </p>
+          </div>
+        </div>
+        <p class="desc text-center">${courseDescription}</p>
+      </div>
+    </div>
+  `;
+  return getHtmlTemplate(themeBody);
+}
+
+const generateCertificate = ({
+  theme,
+  studentName,
+  courseName,
+  courseDescription,
+  orgLogoUrl,
+  orgName,
+}) => {
+  const params = {
+    studentName,
+    courseName,
+    courseDescription,
+    orgLogoUrl,
+    orgName,
+  };
+  console.log('theme', theme);
+
+  const html =
+    theme === 'plain' ? getPlainTheme(params) : getProfessionalTheme(params);
+  console.log('body', html);
+
+  return html_to_pdf.generatePdf({ content: html }, { format: 'A4' });
+};

package.json

@@ -32,6 +32,7 @@
     "electron-serve": "^1.1.0",
     "express": "^4.17.1",
     "hotkeys-js": "^3.8.5",
+    "html-pdf-node": "^1.0.8",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "marked": "^1.2.7",