From 1759852c4038ee44bc2af1208e014d6225f60634 Mon Sep 17 00:00:00 2001
From: Guz013 <43732358+Guz013@users.noreply.github.com>
Date: Fri, 23 Jun 2023 14:19:55 -0300
Subject: [PATCH] =?UTF-8?q?feat(banners):=20=E2=9C=A8=20right-to-left=20la?=
 =?UTF-8?q?yout/lang=20support?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/www/src/routes/api.svg/+server.ts |  1 +
 packages/banners/src/html.js           | 40 ++++++++++++++++++++------
 packages/banners/src/index.js          |  5 +++-
 packages/banners/src/types.d.ts        |  1 +
 4 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/apps/www/src/routes/api.svg/+server.ts b/apps/www/src/routes/api.svg/+server.ts
index e7cd25a..6f6c90b 100644
--- a/apps/www/src/routes/api.svg/+server.ts
+++ b/apps/www/src/routes/api.svg/+server.ts
@@ -23,6 +23,7 @@ export const GET = (async ({ fetch }): Promise<Response> => {
 				style: 'normal',
 			},
 		},
+		rtl: true,
 	});
 
 	return new Response(`${banner.toString()}`, {
diff --git a/packages/banners/src/html.js b/packages/banners/src/html.js
index 7664053..d4658a0 100644
--- a/packages/banners/src/html.js
+++ b/packages/banners/src/html.js
@@ -6,14 +6,24 @@
  *
  * @typedef {import('satori').SatoriOptions['fonts'][0]} Font
  *
- * @param {'vertical' | 'horizontal'} layout
- * @param {{width: number, height: number}} dimensions
- * @param {{subtitle: Font, title: Font}} fonts
- * @param {import('./types').Colors} colors
+ * @typedef {{
+ * layout: 'vertical' | 'horizontal',
+ * dimensions: { width: number, height: number }
+ * fonts: { title: Font, subtitle: Font }
+ * colors: import('./types').Colors
+ * rtl: boolean
+ * }} Props
+ * @param {Props} properties
  *
  * @return {string}
  */
-export function generateBannerHtml(layout, dimensions, fonts, colors) {
+export function generateBannerHtml({
+	layout,
+	dimensions,
+	colors,
+	fonts,
+	rtl,
+}) {
 	/** @type {boolean} */
 	const horizontal = layout === 'horizontal';
 
@@ -35,8 +45,10 @@ export function generateBannerHtml(layout, dimensions, fonts, colors) {
 					padding: ${horizontal ? '1.2' : '2.5'}em 2.5em;
 					display: flex;
 					${horizontal
-							? 'flex-direction: row;'
-							: 'flex-direction: column;'
+						? rtl
+							? 'flex-direction: row-reverse;'
+							: 'flex-direction: row;'
+						: 'flex-direction: column;'
 					}
 					align-items: center;
 					min-width: 98%;
@@ -69,7 +81,12 @@ export function generateBannerHtml(layout, dimensions, fonts, colors) {
 							font-family: ${fonts.title.name};
 							text-overflow: ellipsis;
 							max-width: 50em;
-							${horizontal ? 'text-align: start;' : 'text-align: center;'}
+							display: flex;
+							flex-direction: ${rtl ? 'row-reverse' : 'row'};
+							${horizontal
+								? 'text-align: start;'
+								: 'text-align: center;'
+							}
 						">
 							%%MARKNOW-PLACEHOLDER-TITLE%%
 						</h1>
@@ -79,7 +96,12 @@ export function generateBannerHtml(layout, dimensions, fonts, colors) {
 							font-family: ${fonts.subtitle.name};
 							text-overflow: ellipsis;
 							max-width: 50em;
-							${horizontal ? 'text-align: start;' : 'text-align: center;'}
+							display: flex;
+							flex-direction: ${rtl ? 'row-reverse' : 'row'};
+							${horizontal
+								? 'text-align: start;'
+								: 'text-align: center;'
+							}
 						">
 							%%MARKNOW-PLACEHOLDER-SUBTILE%%
 						</sub>
diff --git a/packages/banners/src/index.js b/packages/banners/src/index.js
index 2c907b4..d22c434 100644
--- a/packages/banners/src/index.js
+++ b/packages/banners/src/index.js
@@ -16,6 +16,7 @@ export default async function banner({
 	},
 	layout = 'horizontal',
 	font: customFonts,
+	rtl = false,
 	libConfig: config,
 }) {
 	const dimensions = {
@@ -35,7 +36,9 @@ export default async function banner({
 
 	const bannerFonts = customFonts ?? await getMonaSansFonts(config?.reader);
 
-	const html = generateBannerHtml(layout, dimensions, bannerFonts, colors)
+	const htmlTemplate = generateBannerHtml({ layout, dimensions, fonts: bannerFonts, colors, rtl });
+
+	const html = htmlTemplate
 		.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 869cfb4..07660da 100644
--- a/packages/banners/src/types.d.ts
+++ b/packages/banners/src/types.d.ts
@@ -29,6 +29,7 @@ export interface BannerOptions {
 		subtitle: Font,
 	}
 	colors?: Colors,
+	rtl?: boolean,
 	libConfig?: {
 		reader?: Reader,
 	}