refactor(banners): ♻️ improve code readability

.eslintrc.cjs

@@ -188,7 +188,7 @@ module.exports = {
 		'@typescript-eslint/semi': ['error', 'always'],
 		'max-depth': ['error', 3],
 		'max-nested-callbacks': ['error', 3],
-		'complexity': ['error', 4],
+		'complexity': ['error', 8],
 		'no-tabs': ['error', { allowIndentationTabs: true }],
 		'spellcheck/spell-checker': ['error', {
 			skipWords: [

apps/www/src/routes/api.svg/+server.ts

@@ -5,12 +5,12 @@ export const GET = (async ({ fetch }): Promise<Response> => {
 	const banner = await newBanner({
 		title: 'Hello world',
 		subtitle: 'This is a test!',
-		icon: 'https://raw.githubusercontent.com/LoredDev/.github/main/assets/designs/dots-icon-dark.svg',
+		icon: 'solar:hand-shake-bold-duotone',
 		colors: {
 			background: '#000000',
 			foreground: '#ffffff',
 		},
-		font: {
+		fonts: {
 			title: {
 				data: await (await fetch('/Mona-Sans-SemiBold.woff')).arrayBuffer(),
 				name: 'Mona Sans',

packages/banners/src/html.js

@@ -7,11 +7,11 @@
  * @typedef {import('satori').SatoriOptions['fonts'][0]} Font
  *
  * @typedef {{
- * layout: 'vertical' | 'horizontal',
- * dimensions: { width: number, height: number }
- * fonts: { title: Font, subtitle: Font }
- * colors: import('./types').Colors
- * rtl: boolean
+ *   dimensions: { width: number, height: number },
+ *   fonts: { title: Font, subtitle: Font },
+ *   layout: 'vertical' | 'horizontal',
+ *   colors: import('./types').Colors,
+ *   rtl: boolean,
  * }} Props
  * @param {Props} properties
  *

packages/banners/src/index.js

@@ -18,29 +18,20 @@ export default async function banner({
 		foreground: '#000000',
 	},
 	libConfig: config = {},
-	font: customFonts,
+	fonts,
 	rtl = false,
 }) {
 	config.iconHandler ||= icon => getIcon(icon, config?.fetcher);
+	fonts ||= await getMonaSansFonts(config?.reader);
+	title = truncateText(title, layout === 'horizontal' ? 45 : 90);
+	subtitle = truncateText(subtitle, layout === 'horizontal' ? 100 : 200);
 
 	const dimensions = {
 		width: 1000,
-		height: 180,
+		height: layout === 'horizontal' ? 180 : 1300,
 	};
 
-	if (layout === 'horizontal') {
-		title = truncateText(title, 45);
-		subtitle = truncateText(subtitle, 100);
-	}
-	else {
-		title = truncateText(title, 90);
-		subtitle = truncateText(subtitle, 200);
-		dimensions.height = 1300;
-	}
-
-	const bannerFonts = customFonts ?? await getMonaSansFonts(config?.reader);
-
-	const htmlTemplate = generateBannerHtml({ layout, dimensions, fonts: bannerFonts, colors, rtl });
+	const htmlTemplate = generateBannerHtml({ layout, dimensions, fonts, colors, rtl });
 
 	const iconSvg = await config.iconHandler(icon);
 
@@ -54,8 +45,8 @@ export default async function banner({
 	const svg = await satori(vNodes, {
 		...dimensions,
 		fonts: [
-			bannerFonts.title,
-			bannerFonts.subtitle,
+			fonts.title,
+			fonts.subtitle,
 		],
 	});
 

packages/banners/src/types.d.ts

@@ -29,7 +29,7 @@ export interface BannerOptions {
 	title: string,
 	subtitle?: string,
 	layout?: 'horizontal' | 'vertical',
-	font?: {
+	fonts?: {
 		title: Font,
 		subtitle: Font,
 	}