From 3705f73b9716b3aa802aa88b101066ff330e300c Mon Sep 17 00:00:00 2001
From: Bikrant Jajware <bikrantjajware@gmail.com>
Date: Fri, 3 Nov 2023 18:30:01 +0530
Subject: [PATCH] convert image to base64 before rendering

---
 api/pin.js                   |  2 +-
 src/cards/repo-card.js       |  4 ++--
 src/common/Card.js           | 12 ++++++------
 src/fetchers/types.d.ts      |  2 +-
 tests/renderRepoCard.test.js |  5 ++---
 5 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/api/pin.js b/api/pin.js
index 8ba9feb8..fe724bbe 100644
--- a/api/pin.js
+++ b/api/pin.js
@@ -70,7 +70,7 @@ export default async (req, res) => {
       }, s-maxage=${cacheSeconds}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
     );
 
-    repoData.openGraphImageUrl = await getBase64URIFromImage(
+    repoData.stringifiedRepoImage = await getBase64URIFromImage(
       repoData.openGraphImageUrl,
     );
 
diff --git a/src/cards/repo-card.js b/src/cards/repo-card.js
index 72a565ba..fc6ba8a5 100644
--- a/src/cards/repo-card.js
+++ b/src/cards/repo-card.js
@@ -61,7 +61,7 @@ const renderRepoCard = (repo, options = {}) => {
     isTemplate,
     starCount,
     forkCount,
-    openGraphImageUrl,
+    stringifiedRepoImage,
   } = repo;
   const {
     hide_border = false,
@@ -143,7 +143,7 @@ const renderRepoCard = (repo, options = {}) => {
     height,
     border_radius,
     colors,
-    imageUrl: show_image ? openGraphImageUrl : "",
+    stringifiedRepoImage: show_image ? stringifiedRepoImage : "",
   });
 
   card.disableAnimations();
diff --git a/src/common/Card.js b/src/common/Card.js
index f1823b2e..6850c8a7 100644
--- a/src/common/Card.js
+++ b/src/common/Card.js
@@ -11,7 +11,7 @@ class Card {
    * @param {string?=} args.customTitle Card custom title.
    * @param {string?=} args.defaultTitle Card default title.
    * @param {string?=} args.titlePrefixIcon Card title prefix icon.
-   * @param {string?=} args.imageUrl Card preview image.
+   * @param {string?=} args.stringifiedRepoImage Card preview image.
    * @param {number?=} args.imageHeight Card preview image.
    * @param {object?=} args.colors Card colors arguments.
    * @param {string} args.colors.titleColor Card title color.
@@ -29,7 +29,7 @@ class Card {
     customTitle,
     defaultTitle = "",
     titlePrefixIcon,
-    imageUrl = "",
+    stringifiedRepoImage = "",
     imageHeight = 200,
   }) {
     this.width = width;
@@ -41,7 +41,7 @@ class Card {
     this.border_radius = border_radius;
 
     this.imageHeight = imageHeight;
-    this.imageUrl = imageUrl;
+    this.stringifiedRepoImage = stringifiedRepoImage;
 
     // returns theme based colors with proper overrides and defaults
     this.colors = colors;
@@ -58,7 +58,7 @@ class Card {
     this.animations = true;
     this.a11yTitle = "";
     this.a11yDesc = "";
-    if (this.imageUrl) {
+    if (this.stringifiedRepoImage) {
       this.height += this.imageHeight;
       this.paddingY += this.imageHeight;
     }
@@ -214,13 +214,13 @@ class Card {
    * @returns {string} Renders social preview image
    */
   renderImage = () => {
-    if (!this.imageUrl) {
+    if (!this.stringifiedRepoImage) {
       return "";
     }
     return `
     <g data-testid="card-image" transform="translate(0, 0)">
     <image x="0" y="0" width="${this.width}" height="${this.imageHeight}"
-      href="${this.imageUrl}">
+      href="${this.stringifiedRepoImage}">
     </image>
   </g>`;
   };
diff --git a/src/fetchers/types.d.ts b/src/fetchers/types.d.ts
index e7775eea..7d0c377b 100644
--- a/src/fetchers/types.d.ts
+++ b/src/fetchers/types.d.ts
@@ -22,7 +22,7 @@ export type RepositoryData = {
   };
   forkCount: number;
   starCount: number;
-  openGraphImageUrl: string;
+  stringifiedRepoImage: string;
 };
 
 export type StatsData = {
diff --git a/tests/renderRepoCard.test.js b/tests/renderRepoCard.test.js
index 0c8e3ea4..f1e045bf 100644
--- a/tests/renderRepoCard.test.js
+++ b/tests/renderRepoCard.test.js
@@ -18,8 +18,7 @@ const data_repo = {
     },
     starCount: 38000,
     forkCount: 100,
-    openGraphImageUrl:
-      "https://repository-images.githubusercontent.com/266996769/1e4f2180-b194-11ea-9806-2395601f119b",
+    stringifiedRepoImage: "data:image/png;base64,base64/image/string",
   },
 };
 
@@ -350,7 +349,7 @@ describe("Test renderRepoCard", () => {
     expect(queryByTestId(document.body, "card-image")).toBeInTheDocument();
     expect(
       queryByTestId(document.body, "card-image").children[0],
-    ).toHaveAttribute("href", data_repo.repository.openGraphImageUrl);
+    ).toHaveAttribute("href", data_repo.repository.stringifiedRepoImage);
   });
 
   it("should not render repo's social preview image by default", () => {