From 72b58ed2c71d9417eaa0d29caba995422caf88b7 Mon Sep 17 00:00:00 2001 From: Adeyemi Adetunji Date: Sun, 21 Jul 2024 03:02:33 +0100 Subject: [PATCH] feat: add 4 certificate templates (#295) * add cloud translation api package * feat: Script that auto generates translations for other languages * add comments * fix: broken translation * improve translation * update locck file * clean up * all round trasnlations check * checkpoint * finish up * move to dev dependencies * fix vercel build error * translations fix * - add documentation - translation bug fix * quick adjust * PR Fixes * add new line * update docs * checkpoint * feat: redesign & addition of certificates * text color update * patterned width fix * "student-name" class remove * checkpoint * PR Fix * quick fix * PR Fixes * update certificate ready page for students * PR Fixes * quick cleanup * move fetchCourses into .ts file * feat: give students access to certificates only after completing course * checkpoint * height fix * Merge branch 'main' of https://github.com/rotimi-best/classroomio into classroomio-issue-272 * Fix; merge PR Fix * fix: width of plain & professional certs * PR Fix * feat: add translation * handle error when trying to download a certificate * add fetchExploreCourses * fix: requested reviews * review fixes checkpoint * replace the certificate background * height fix for patterned certififcates * fix more bugs * rename schema --------- Co-authored-by: Rotimi Best --- .vscode/settings.json | 4 +- apps/backend/certificate.html | 499 +++++++++++--- apps/backend/src/utils/certificate.js | 294 +++++++- .../components/Ceritficate/Design.svelte | 99 ++- .../LockedCertificate.svelte | 2 +- .../UnlockedCertificate.svelte | 114 +++- .../Ceritficate/{store.js => store.ts} | 0 .../templates/BlueBadgePattern.svelte | 60 ++ .../templates/BlueProfessionalBadge.svelte | 51 ++ .../{certificates => templates}/Plain.svelte | 8 +- .../Professional.svelte | 10 +- .../templates/PurpleBadgePattern.svelte | 60 ++ .../templates/PurpleProfessionalBadge.svelte | 51 ++ .../src/lib/components/Courses/api.js | 47 -- .../lib/components/Org/Community/index.svelte | 2 +- .../components/RoleBasedSecurity/index.svelte | 12 +- .../src/lib/utils/functions/validator.js | 11 + .../src/lib/utils/services/courses/index.ts | 66 +- .../src/lib/utils/translations/de.json | 10 +- .../src/lib/utils/translations/en.json | 12 +- .../src/lib/utils/translations/es.json | 10 +- .../src/lib/utils/translations/fr.json | 10 +- .../src/lib/utils/translations/hi.json | 10 +- .../src/lib/utils/translations/pt.json | 10 +- .../src/lib/utils/translations/ru.json | 10 +- .../src/lib/utils/translations/vi.json | 10 +- apps/dashboard/src/lib/utils/types/index.ts | 8 + .../courses/[id]/certificates/+page.svelte | 8 +- apps/dashboard/src/routes/lms/+page.svelte | 2 +- .../routes/lms/community/[slug]/+page.svelte | 2 +- .../src/routes/lms/community/ask/+page.svelte | 1 - .../src/routes/lms/explore/+page.svelte | 5 +- .../src/routes/lms/mylearning/+page.svelte | 2 +- .../org/[slug]/community/[slug]/+page.svelte | 2 +- .../org/[slug]/community/ask/+page.svelte | 2 +- .../routes/org/[slug]/courses/+page.svelte | 2 +- .../images/blue-badge-pattern-background.svg | 121 ++++ .../images/blue-badge-pattern-badge.svg | 629 ++++++++++++++++++ .../static/images/blue-professional-badge.svg | 77 +++ .../certificate_theme_blueBadgePattern.png | Bin 0 -> 583653 bytes ...ertificate_theme_blueProfessionalBadge.png | Bin 0 -> 631265 bytes .../certificate_theme_purpleBadgePattern.png | Bin 0 -> 586731 bytes ...tificate_theme_purpleProfessionalBadge.png | Bin 0 -> 620974 bytes .../purple-badge-pattern-background.svg | 121 ++++ .../images/purple-badge-pattern-badge.svg | 629 ++++++++++++++++++ .../images/purple-professional-badge.svg | 77 +++ .../images/student-certificate-preview.png | Bin 0 -> 60231 bytes .../20240518054308_new_certificates.sql | 31 + 48 files changed, 2940 insertions(+), 251 deletions(-) rename apps/dashboard/src/lib/components/Course/components/Ceritficate/{store.js => store.ts} (100%) create mode 100644 apps/dashboard/src/lib/components/Course/components/Ceritficate/templates/BlueBadgePattern.svelte create mode 100644 apps/dashboard/src/lib/components/Course/components/Ceritficate/templates/BlueProfessionalBadge.svelte rename apps/dashboard/src/lib/components/Course/components/Ceritficate/{certificates => templates}/Plain.svelte (87%) rename apps/dashboard/src/lib/components/Course/components/Ceritficate/{certificates => templates}/Professional.svelte (85%) create mode 100644 apps/dashboard/src/lib/components/Course/components/Ceritficate/templates/PurpleBadgePattern.svelte create mode 100644 apps/dashboard/src/lib/components/Course/components/Ceritficate/templates/PurpleProfessionalBadge.svelte delete mode 100644 apps/dashboard/src/lib/components/Courses/api.js create mode 100644 apps/dashboard/static/images/blue-badge-pattern-background.svg create mode 100644 apps/dashboard/static/images/blue-badge-pattern-badge.svg create mode 100644 apps/dashboard/static/images/blue-professional-badge.svg create mode 100644 apps/dashboard/static/images/certificate_theme_blueBadgePattern.png create mode 100644 apps/dashboard/static/images/certificate_theme_blueProfessionalBadge.png create mode 100644 apps/dashboard/static/images/certificate_theme_purpleBadgePattern.png create mode 100644 apps/dashboard/static/images/certificate_theme_purpleProfessionalBadge.png create mode 100644 apps/dashboard/static/images/purple-badge-pattern-background.svg create mode 100644 apps/dashboard/static/images/purple-badge-pattern-badge.svg create mode 100644 apps/dashboard/static/images/purple-professional-badge.svg create mode 100644 apps/dashboard/static/images/student-certificate-preview.png create mode 100644 supabase/migrations/20240518054308_new_certificates.sql diff --git a/.vscode/settings.json b/.vscode/settings.json index c3735da6..a70d1e45 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,7 +1,5 @@ { "deno.enable": false, "deno.lint": false, - "deno.unstable": false, - "spellright.language": [], - "spellright.documentTypes": ["latex", "plaintext"] + "deno.unstable": false } diff --git a/apps/backend/certificate.html b/apps/backend/certificate.html index 86cea1d6..26392dbf 100644 --- a/apps/backend/certificate.html +++ b/apps/backend/certificate.html @@ -1,98 +1,431 @@ - + + + + + + + + + Certificate + + - .student-name { - font-family: 'Qwitcher Grypen', cursive; - } - - + + +
+
+ +

${orgName}

+
- -
-
-
-

- Certificate
of completion +

+

This certificate is awarded to

+

${studentName}

+
+ +
+

has succesfully completed training on

+

${courseName}

+
+ +
+
+

${dateIssued}

+

Date Issued

+
+ +
+

+

Signature

+
+
+ +
${courseDescription}
+
+ + + + + + + + + + + + + + + + + + + - - - - \ No newline at end of file +
--> + + diff --git a/apps/backend/src/utils/certificate.js b/apps/backend/src/utils/certificate.js index 354f52ba..d962c264 100644 --- a/apps/backend/src/utils/certificate.js +++ b/apps/backend/src/utils/certificate.js @@ -1,5 +1,11 @@ const { getPdfBuffer } = require('./puppeteer'); +function getCurrentDate() { + const date = new Date(); + const options = { year: 'numeric', month: 'long', day: 'numeric' }; + return date.toLocaleDateString(undefined, options); +} + function getHtmlTemplate(body) { return ` @@ -18,9 +24,9 @@ function getHtmlTemplate(body) {