diff --git a/README.md b/README.md index 4b9b86b..547abf5 100644 --- a/README.md +++ b/README.md @@ -617,6 +617,41 @@ Here’s what each variable represents: > PRINTERS: 'pdf,192.168.1.10,192.168.1.11' > ``` +### Custom Branding (Logo) + +You can customize the appearance of the pdf and ESC/POS print layout by providing your own branding assets, including: + +* `logo.png` — Logo used in the print header + +To do this, use Docker volume mappings to mount your custom assets into the `/print` directory inside the container. +The application will use these files (if present) instead of the default ones. + +> **If you provide custom branding for printed vouchers, make sure your logo closely match the original application logo’s size, aspect ratio, and color space.** This helps ensure the layout prints correctly and avoids color shifts or misalignment in the final output. + +#### Example + +Suppose you have your custom images in a local directory called `branding/`: + +``` +branding/ +└── logo.png +``` + +You can configure this using Docker Compose: + +```yaml +services: + unifi-voucher-site: + image: glenndehaan/unifi-voucher-site:latest + ports: + - "3000:3000" + environment: + KIOSK_ENABLED: 'true' + KIOSK_VOUCHER_TYPES: '480,1,,,;' + volumes: + - ./branding:/print +``` + ### Usage #### PDF @@ -677,6 +712,41 @@ Here’s what each variable represents: These settings allow the application to connect to your SMTP server and send emails on your behalf. +### Custom Branding (Logo) + +You can customize the appearance of the email by providing your own branding assets, including: + +* `logo.png` — Logo used in the email header + +To do this, use Docker volume mappings to mount your custom assets into the `/email` directory inside the container. +The application will use these files (if present) instead of the default ones. + +> We recommend to keep the logo at a maximum height of 75px, to prevent layout shifts + +#### Example + +Suppose you have your custom images in a local directory called `branding/`: + +``` +branding/ +└── logo.png +``` + +You can configure this using Docker Compose: + +```yaml +services: + unifi-voucher-site: + image: glenndehaan/unifi-voucher-site:latest + ports: + - "3000:3000" + environment: + KIOSK_ENABLED: 'true' + KIOSK_VOUCHER_TYPES: '480,1,,,;' + volumes: + - ./branding:/email +``` + ### Usage Once the SMTP environment variables are configured, the email feature will be available within the UniFi Voucher Site interface. After generating a voucher, you will see an option to send the voucher via email. Enter the recipient's email address, and the application will send the voucher details directly to their inbox. @@ -760,9 +830,14 @@ KIOSK_VOUCHER_TYPES: '480,1,,,;' ### Custom Branding (Logo and Background) -You can customize the appearance of the kiosk page by providing your own `logo.png` and `bg.jpg` images. +You can customize the appearance of the kiosk page by providing your own branding assets, including: -To do this, use Docker volume mappings to mount your custom assets to the `/kiosk` directory inside the container. The application will use these files (if present) instead of the default ones. +* `logo.png` — Logo used in light mode +* `logo_dark.png` — Logo used in dark mode +* `bg.jpg` — Background image + +To do this, use Docker volume mappings to mount your custom assets into the `/kiosk` directory inside the container. +The application will use these files (if present) instead of the default ones. #### Example @@ -771,6 +846,7 @@ Suppose you have your custom images in a local directory called `branding/`: ``` branding/ ├── logo.png +├── logo_dark.png └── bg.jpg ``` @@ -789,7 +865,8 @@ services: - ./branding:/kiosk ``` -> **Note:** Ensure `logo.png` and `bg.jpg` are valid image files. Both are optional — only override the ones you want to customize. +> **Note:** All branding files are optional — provide only the ones you want to override. +> Ensure `logo.png`, `logo_dark.png`, and `bg.jpg` are valid image files. ### Usage diff --git a/modules/mail.js b/modules/mail.js index f22d1b1..66bab2c 100644 --- a/modules/mail.js +++ b/modules/mail.js @@ -75,10 +75,21 @@ module.exports = { voucher, unifiSsid: variables.unifiSsid, unifiSsidPassword: variables.unifiSsidPassword, - qr: await qr(), timeConvert: time, bytesConvert: bytes - }) + }), + attachments: [ + { + filename: 'logo.png', + content: fs.existsSync('/email/logo.png') ? fs.readFileSync(`/email/logo.png`) : fs.readFileSync(`${process.cwd()}/public/images/email/logo.png`), + cid: 'logo@unifi-voucher-site.com' + }, + { + filename: 'qr.png', + content: await qr(true), + cid: 'qr@unifi-voucher-site.com' + } + ] }).catch((e) => { log.error(`[Mail] Error when sending mail`); log.error(e); diff --git a/modules/print.js b/modules/print.js index 3068a48..34a3e1f 100644 --- a/modules/print.js +++ b/modules/print.js @@ -1,6 +1,7 @@ /** - * Import base packages + * Import vendor modules */ +const fs = require('fs'); const PDFDocument = require('pdfkit'); const ThermalPrinter = require('node-thermal-printer').printer; const PrinterTypes = require('node-thermal-printer').types; @@ -82,7 +83,7 @@ module.exports = { doc.moveDown(1); } - doc.image('public/images/logo_grayscale_dark.png', 75, 15, { + doc.image(fs.existsSync('/print/logo.png') ? '/print/logo.png' : `${process.cwd()}/public/images/print/logo.png`, 75, 15, { fit: [75, 75], align: 'center', valign: 'center' @@ -248,7 +249,7 @@ module.exports = { printer.setTypeFontB(); printer.alignCenter(); printer.newLine(); - await printer.printImage(`${process.cwd()}/public/images/logo_grayscale_dark.png`); + await printer.printImage(fs.existsSync('/print/logo.png') ? '/print/logo.png' : `${process.cwd()}/public/images/logo_grayscale_dark.png`); printer.newLine(); printer.alignCenter(); diff --git a/package-lock.json b/package-lock.json index 52f8809..0eee7a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "cookie-parser": "^1.4.7", "ejs": "^3.1.10", - "express": "^5.2.0", + "express": "^5.2.1", "express-locale": "^2.0.2", "express-openid-connect": "^2.19.3", "js-logger": "^1.6.1", @@ -1837,9 +1837,9 @@ } }, "node_modules/express": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/express/-/express-5.2.0.tgz", - "integrity": "sha512-XdpJDLxfztVY59X0zPI6sibRiGcxhTPXRD3IhJmjKf2jwMvkRGV1j7loB8U+heeamoU3XvihAaGRTR4aXXUN3A==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz", + "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==", "license": "MIT", "dependencies": { "accepts": "^2.0.0", diff --git a/package.json b/package.json index 592a350..3eebcbc 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "dependencies": { "cookie-parser": "^1.4.7", "ejs": "^3.1.10", - "express": "^5.2.0", + "express": "^5.2.1", "express-locale": "^2.0.2", "express-openid-connect": "^2.19.3", "js-logger": "^1.6.1", diff --git a/public/images/email/logo.png b/public/images/email/logo.png new file mode 100644 index 0000000..14a05e7 Binary files /dev/null and b/public/images/email/logo.png differ diff --git a/public/images/kiosk/logo_dark.png b/public/images/kiosk/logo_dark.png new file mode 100644 index 0000000..14a05e7 Binary files /dev/null and b/public/images/kiosk/logo_dark.png differ diff --git a/public/images/logo_grayscale_dark.png b/public/images/print/logo.png similarity index 100% rename from public/images/logo_grayscale_dark.png rename to public/images/print/logo.png diff --git a/template/email/voucher.ejs b/template/email/voucher.ejs index 9800315..269577b 100644 --- a/template/email/voucher.ejs +++ b/template/email/voucher.ejs @@ -114,7 +114,7 @@

- + Logo

<%= t('title') %>

@@ -134,7 +134,7 @@

<%= t('connect') %>: <%= unifiSsid %> <%= t('or') %>,

<% } %>

<%= t('scan') %>:

- + Scan to Connect QR Code

 

<% } %> diff --git a/template/kiosk.ejs b/template/kiosk.ejs index c722285..747f583 100644 --- a/template/kiosk.ejs +++ b/template/kiosk.ejs @@ -24,6 +24,7 @@ + @@ -60,7 +61,8 @@
- UniFi Voucher Site Logo + UniFi Voucher Site Logo +

<%= t('title') %>

<% if(error) { %>