feat(banners): ✨ custom colors

Feature (Banners): Custom colors #9

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(),

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;

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);
 

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,
 	}