render preview image url in card, when imageUrl is provided

src/cards/repo-card.js

@@ -61,6 +61,7 @@ const renderRepoCard = (repo, options = {}) => {
     isTemplate,
     starCount,
     forkCount,
+    openGraphImageUrl,
   } = repo;
   const {
     hide_border = false,
@@ -141,6 +142,7 @@ const renderRepoCard = (repo, options = {}) => {
     height,
     border_radius,
     colors,
+    imageUrl: openGraphImageUrl,
   });
 
   card.disableAnimations();

src/common/Card.js

@@ -11,6 +11,8 @@ 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 {number?=} args.imageHeight Card preview image.
    * @param {object?=} args.colors Card colors arguments.
    * @param {string} args.colors.titleColor Card title color.
    * @param {string} args.colors.textColor Card text color.
@@ -27,6 +29,8 @@ class Card {
     customTitle,
     defaultTitle = "",
     titlePrefixIcon,
+    imageUrl = "",
+    imageHeight = 200,
   }) {
     this.width = width;
     this.height = height;
@@ -36,6 +40,8 @@ class Card {
 
     this.border_radius = border_radius;
 
+    this.imageHeight = imageHeight;
+    this.imageUrl = imageUrl;
     // returns theme based colors with proper overrides and defaults
     this.colors = colors;
     this.title =
@@ -51,6 +57,10 @@ class Card {
     this.animations = true;
     this.a11yTitle = "";
     this.a11yDesc = "";
+    if (this.imageUrl) {
+      this.height += this.imageHeight;
+      this.paddingY += this.imageHeight;
+    }
   }
 
   /**
@@ -199,6 +209,18 @@ class Card {
     `;
   };
 
+  renderImage = () => {
+    if (!this.imageUrl) {
+      return "";
+    }
+    return `
+    <g transform="translate(0, 0)">
+    <image x="0" y="0" height="${this.imageHeight}"
+      href="${this.imageUrl}">
+    </image>
+  </g>`;
+  };
+
   /**
    * @param {string} body The inner body of the card.
    * @returns {string} The rendered card.
@@ -264,6 +286,7 @@ class Card {
         >
           ${body}
         </g>
+          ${this.renderImage()}
       </svg>
     `;
   }

src/fetchers/repo-fetcher.js

@@ -34,6 +34,7 @@ const fetcher = (variables, token) => {
           name
         }
         forkCount
+        openGraphImageUrl
       }
       query getRepo($login: String!, $repo: String!) {
         user(login: $login) {

src/fetchers/types.d.ts

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

tests/__snapshots__/renderWakatimeCard.test.js.snap

@@ -150,6 +150,7 @@ exports[`Test Render WakaTime Card should render correctly with compact layout 1
     </svg>
   
         </g>
+          
       </svg>
     "
 `;
@@ -302,6 +303,7 @@ exports[`Test Render WakaTime Card should render correctly with compact layout w
     </svg>
   
         </g>
+          
       </svg>
     "
 `;