convert image to base64 before rendering

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

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

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>`;
   };

src/fetchers/types.d.ts

@@ -22,7 +22,7 @@ export type RepositoryData = {
   };
   forkCount: number;
   starCount: number;
-  openGraphImageUrl: string;
+  stringifiedRepoImage: string;
 };
 
 export type StatsData = {

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", () => {