From 00353b475ae6242c743f8ffd273ccb0e8a9baaa1 Mon Sep 17 00:00:00 2001
From: Rangga Fajar Oktariansyah <86386385+FajarKim@users.noreply.github.com>
Date: Sat, 26 Oct 2024 05:18:01 +0700
Subject: [PATCH 1/4] add new option

---
 api/index.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/api/index.ts b/api/index.ts
index 2d0dec7..fc8bd8f 100644
--- a/api/index.ts
+++ b/api/index.ts
@@ -27,6 +27,7 @@ import { isValidHexColor, isValidGradient } from "../src/common/utils";
  * @property {string|undefined} showItems - Items to show.
  * @property {boolean|string} hideStroke - Toggle for hiding strokes.
  * @property {boolean|string} hideBorder - Toggle for hiding borders.
+ * @property {boolean|string} Revert - Invert display order, stats to left and image to right.
  * @property {number|string} photoQuality - Photo image quality.
  * @property {number|string} photoResize - Photo image resize.
  */
@@ -48,6 +49,7 @@ type UiConfig = {
   showItems: string | undefined;
   hideStroke: boolean | string;
   hideBorder: boolean | string;
+  Revert: boolean | string;
   photoQuality: number | string;
   photoResize: number | string;
 };
@@ -87,6 +89,7 @@ async function readmeStats(req: any, res: any): Promise<any> {
       showItems: escapeHTML(req.query.show),
       hideStroke: parseBoolean(escapeHTML(req.query.hide_stroke)) || false,
       hideBorder: parseBoolean(escapeHTML(req.query.hide_border)) || false,
+      Revert: parseBoolean(escapeHTML(req.query.revert)) || false,
       photoQuality: photoQuality,
       photoResize: photoResize,
     };

From 158e29d8cc70beb34b744ece7d7ac0e3bf4e1f37 Mon Sep 17 00:00:00 2001
From: Rangga Fajar Oktariansyah <86386385+FajarKim@users.noreply.github.com>
Date: Sat, 26 Oct 2024 05:18:56 +0700
Subject: [PATCH 2/4] add new option in test

---
 tests/card.test.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/card.test.ts b/tests/card.test.ts
index e8da6a7..f9aa94e 100644
--- a/tests/card.test.ts
+++ b/tests/card.test.ts
@@ -40,6 +40,7 @@ describe("Test card function", () => {
     disabledAnimations: false,
     showItems: "reviews,issues_closed",
     hiddenItems: "forks,commits",
+    Revert: false,
     photoQuality: 15,
     photoResize: 150,
   };

From 0c8b4ce26c197208e0ba63e33304e9f4547e94ce Mon Sep 17 00:00:00 2001
From: Rangga Fajar Oktariansyah <86386385+FajarKim@users.noreply.github.com>
Date: Sat, 26 Oct 2024 05:26:19 +0700
Subject: [PATCH 3/4] add code for handle if revert is true

---
 src/card.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/card.ts b/src/card.ts
index ad1bbe4..60163a1 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -37,6 +37,7 @@ async function card(data: GetData, uiConfig: UiConfig): Promise<string> {
 
   const isRtlDirection = parseBoolean(selectLocale.rtlDirection);
   const isDisabledAnimations = parseBoolean(uiConfig.disabledAnimations || uiConfig.Format === "png");
+  const isRevert = parseBoolean(uiConfig.Revert);
 
   let titleCard = defaultLocale.titleCard.split("{name}").join(data.name);
   if (uiConfig.Title &&
@@ -58,12 +59,13 @@ async function card(data: GetData, uiConfig: UiConfig): Promise<string> {
     textXPosition: isRtlDirection ? 225 : 20,
     dataXPosition: isRtlDirection ? 25 : 220,
     iconXPosition: isRtlDirection ? 235 : -5,
-    imageXPosition: isDisabledAnimations ? 122 : 127,
+    imageXPosition: isDisabledAnimations ? (isRevert ? 412 : 122) : (isRevert ? 417 : 127),
     imageYPosition: isDisabledAnimations ? 70 : 65,
-    userXPosition: isDisabledAnimations ? 122 : 112,
+    userXPosition: isDisabledAnimations ? (isRevert ? 412 : 122) : (isRevert ? 402 : 112),
     userYPosition: isDisabledAnimations ? 140 : 130,
-    follXPosition: isDisabledAnimations ? 122 : 112,
+    follXPosition: isDisabledAnimations ? (isRevert ? 412 : 122) : (isRevert ? 402 : 112),
     follYPosition: isDisabledAnimations ? 161 : 151,
+    itemStatsXTransform: isRevert ? 0 : 230,
   };
 
   const hideStroke = parseBoolean(uiConfig.hideStroke) ? `` : `stroke="#${uiConfig.strokeColor}" stroke-width="5"`;
@@ -136,7 +138,7 @@ async function card(data: GetData, uiConfig: UiConfig): Promise<string> {
   const cardItemsToShow = cardItems.filter(item => !item.hidden);
 
   const cardItemsSVG = cardItemsToShow.map((item, index) => `
-    <g transform="translate(230, ${15 + index * 25})">
+    <g transform="translate(${position.itemStatsXTransform}, ${15 + index * 25})">
       <g class="single-item-animation" style="animation-delay: ${210 + index * 100}ms" transform="translate(25, 0)">
         <svg x="${position.iconXPosition}" y="0" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16">
           ${item.icon}

From 68f72636fa01eb400fd550712d3b53fd0f7bb0a5 Mon Sep 17 00:00:00 2001
From: Rangga Fajar Oktariansyah <86386385+FajarKim@users.noreply.github.com>
Date: Sat, 26 Oct 2024 05:32:58 +0700
Subject: [PATCH 4/4] add code for handle if revert is true and rtl direction
 is set

---
 src/card.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/card.ts b/src/card.ts
index 60163a1..b6cf5f5 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -65,7 +65,7 @@ async function card(data: GetData, uiConfig: UiConfig): Promise<string> {
     userYPosition: isDisabledAnimations ? 140 : 130,
     follXPosition: isDisabledAnimations ? (isRevert ? 412 : 122) : (isRevert ? 402 : 112),
     follYPosition: isDisabledAnimations ? 161 : 151,
-    itemStatsXTransform: isRevert ? 0 : 230,
+    itemStatsXTransform: isRevert ? (isRtlDirection ? 10 : 0) : 230,
   };
 
   const hideStroke = parseBoolean(uiConfig.hideStroke) ? `` : `stroke="#${uiConfig.strokeColor}" stroke-width="5"`;