feat: multiline text in repo description (#206)

* Enable multi line repo card descriptions

* Adjust unit tests to multi line descriptions

* refactor: refactored code & fixed tests

* style: minor height adjustments

* chore: codecov stuck

Co-authored-by: anuraghazra <hazru.anurag@gmail.com>

src/renderRepoCard.js

@@ -3,6 +3,7 @@ const {
   encodeHTML,
   getCardColors,
   FlexLayout,
+  wrapTextMultiline,
 } = require("../src/utils");
 const icons = require("./icons");
 const toEmoji = require("emoji-name-map");
@@ -31,7 +32,6 @@ const renderRepoCard = (repo, options = {}) => {
   const langName = (primaryLanguage && primaryLanguage.name) || "Unspecified";
   const langColor = (primaryLanguage && primaryLanguage.color) || "#333";
 
-  const height = 120;
   const shiftText = langName.length > 15 ? 0 : 30;
 
   let desc = description || "No description provided";
@@ -41,9 +41,12 @@ const renderRepoCard = (repo, options = {}) => {
     return toEmoji.get(emoji) || "";
   });
 
-  if (desc.length > 55) {
-    desc = `${desc.slice(0, 55)}..`;
-  }
+  const multiLineDescription = wrapTextMultiline(desc);
+  const descriptionLines = multiLineDescription.length;
+  const lineHeight = 10;
+
+  const height =
+    (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
 
   // returns theme based colors with proper overrides and defaults
   const { titleColor, textColor, iconColor, bgColor } = getCardColors({
@@ -60,11 +63,11 @@ const renderRepoCard = (repo, options = {}) => {
   const getBadgeSVG = (label) => `
     <g data-testid="badge" class="badge" transform="translate(320, 38)">
       <rect stroke="${textColor}" stroke-width="1" width="70" height="20" x="-12" y="-14" ry="10" rx="10"></rect>
-      <text 
+      <text
         x="23" y="-5"
-        alignment-baseline="central" 
-        dominant-baseline="central" 
-        text-anchor="middle" 
+        alignment-baseline="central"
+        dominant-baseline="central"
+        text-anchor="middle"
         fill="${textColor}"
       >
         ${label}
@@ -74,7 +77,7 @@ const renderRepoCard = (repo, options = {}) => {
 
   const svgLanguage = primaryLanguage
     ? `
-    <g data-testid="primary-lang" transform="translate(30, 100)">
+    <g data-testid="primary-lang" transform="translate(30, 0)">
       <circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
       <text data-testid="lang-name" class="gray" x="15">${langName}</text>
     </g>
@@ -124,15 +127,23 @@ const renderRepoCard = (repo, options = {}) => {
           ? getBadgeSVG("Archived")
           : ""
       }
-      
-      <text class="description" x="25" y="70">${encodeHTML(desc)}</text>
-      
-      ${svgLanguage}
-      
-      <g transform="translate(${primaryLanguage ? 155 - shiftText : 25}, 100)">
-        ${FlexLayout({ items: [svgStars, svgForks], gap: 65 }).join("")}
-      </g>
 
+      <text class="description" x="25" y="50">
+        ${multiLineDescription
+          .map((line) => `<tspan dy="1.2em" x="25">${encodeHTML(line)}</tspan>`)
+          .join("")}
+      </text>
+
+      <g transform="translate(0, ${height - 20})">
+        ${svgLanguage}
+
+        <g 
+          data-testid="star-fork-group" 
+          transform="translate(${primaryLanguage ? 155 - shiftText : 25}, 0)"
+        >
+          ${FlexLayout({ items: [svgStars, svgForks], gap: 65 }).join("")}
+        </g>
+      </g>
     </svg>
   `;
 };