From a22aae7c73e8d4809d1db5ee3857e97656ef9543 Mon Sep 17 00:00:00 2001
From: Guz013 <43732358+Guz013@users.noreply.github.com>
Date: Fri, 23 Jun 2023 13:47:59 -0300
Subject: [PATCH] =?UTF-8?q?feat(banners):=20=E2=9C=A8=20custom=20colors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Feature (Banners): Custom colors #9
---
 apps/www/src/routes/api.svg/+server.ts |  4 ++++
 packages/banners/src/html.js           |  6 ++++--
 packages/banners/src/index.js          |  6 +++++-
 packages/banners/src/types.d.ts        | 14 ++++++++++++--
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/apps/www/src/routes/api.svg/+server.ts b/apps/www/src/routes/api.svg/+server.ts
index 347a0a3..e7cd25a 100644
--- a/apps/www/src/routes/api.svg/+server.ts
+++ b/apps/www/src/routes/api.svg/+server.ts
@@ -5,6 +5,10 @@ export const GET = (async ({ fetch }): Promise<Response> => {
 	const banner = await newBanner({
 		title: 'Hello world',
 		subtitle: 'This is a test!',
+		colors: {
+			background: '#000000',
+			foreground: '#ffffff',
+		},
 		font: {
 			title: {
 				data: await (await fetch('/Mona-Sans-SemiBold.woff')).arrayBuffer(),
diff --git a/packages/banners/src/html.js b/packages/banners/src/html.js
index e1800a3..7664053 100644
--- a/packages/banners/src/html.js
+++ b/packages/banners/src/html.js
@@ -9,10 +9,11 @@
  * @param {'vertical' | 'horizontal'} layout
  * @param {{width: number, height: number}} dimensions
  * @param {{subtitle: Font, title: Font}} fonts
+ * @param {import('./types').Colors} colors
  *
  * @return {string}
  */
-export function generateBannerHtml(layout, dimensions, fonts) {
+export function generateBannerHtml(layout, dimensions, fonts, colors) {
 	/** @type {boolean} */
 	const horizontal = layout === 'horizontal';
 
@@ -27,7 +28,8 @@ export function generateBannerHtml(layout, dimensions, fonts) {
 			<div style="
 					box-shadow: 0 5px 12px #00000040;
 					position: relative;
-					background-color: white;
+					color: ${colors.foreground};
+					background-color: ${colors.background};
 					margin: auto;
 					border-radius: 1em;
 					padding: ${horizontal ? '1.2' : '2.5'}em 2.5em;
diff --git a/packages/banners/src/index.js b/packages/banners/src/index.js
index a7bc97f..2c907b4 100644
--- a/packages/banners/src/index.js
+++ b/packages/banners/src/index.js
@@ -10,6 +10,10 @@ import { getMonaSansFonts } from './fonts';
 export default async function banner({
 	title,
 	subtitle = '',
+	colors = {
+		background: '#ffffff',
+		foreground: '#000000',
+	},
 	layout = 'horizontal',
 	font: customFonts,
 	libConfig: config,
@@ -31,7 +35,7 @@ export default async function banner({
 
 	const bannerFonts = customFonts ?? await getMonaSansFonts(config?.reader);
 
-	const html = generateBannerHtml(layout, dimensions, bannerFonts)
+	const html = generateBannerHtml(layout, dimensions, bannerFonts, colors)
 		.replace('%%MARKNOW-PLACEHOLDER-TITLE%%', title)
 		.replace('%%MARKNOW-PLACEHOLDER-SUBTILE%%', subtitle);
 
diff --git a/packages/banners/src/types.d.ts b/packages/banners/src/types.d.ts
index 2905fae..869cfb4 100644
--- a/packages/banners/src/types.d.ts
+++ b/packages/banners/src/types.d.ts
@@ -1,6 +1,15 @@
 import type { Abortable } from "node:events";
 import type { OpenMode, PathLike } from "node:fs";
 import type { FileHandle } from "node:fs/promises";
+import type { SatoriOptions } from "satori/wasm";
+
+export type Font = SatoriOptions['fonts'][0];
+
+export type Colors = {
+	foreground: string;
+	background: string;
+}
+
 
 export type Reader = (
 	path: PathLike | FileHandle,
@@ -14,11 +23,12 @@ export type Reader = (
 export interface BannerOptions {
 	title: string,
 	subtitle?: string,
-	layout?: 'horizontal' | 'vertical' = 'horizontal',
+	layout?: 'horizontal' | 'vertical',
 	font?: {
 		title: Font,
 		subtitle: Font,
-	},
+	}
+	colors?: Colors,
 	libConfig?: {
 		reader?: Reader,
 	}