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

src/utils.js

@@ -1,4 +1,5 @@
 const axios = require("axios");
+const wrap = require("word-wrap");
 const themes = require("../themes");
 
 const renderError = (message, secondaryMessage = "") => {
@@ -127,10 +128,27 @@ function getCardColors({
   return { titleColor, iconColor, textColor, bgColor };
 }
 
-const fn = () => {};
+function wrapTextMultiline(text, width = 60, maxLines = 3) {
+  const wrapped = wrap(encodeHTML(text), { width })
+    .split("\n") // Split wrapped lines to get an array of lines
+    .map((line) => line.trim()); // Remove leading and trailing whitespace of each line
+
+  const lines = wrapped.slice(0, maxLines); // Only consider maxLines lines
+
+  // Add "..." to the last line if the text exceeds maxLines
+  if (wrapped.length > maxLines) {
+    lines[maxLines - 1] += "...";
+  }
+
+  // Remove empty lines if text fits in less than maxLines lines
+  const multiLineText = lines.filter(Boolean);
+  return multiLineText;
+}
+
+const noop = () => {};
 // return console instance based on the environment
 const logger =
-  process.env.NODE_ENV !== "test" ? console : { log: fn, error: fn };
+  process.env.NODE_ENV !== "test" ? console : { log: noop, error: noop };
 
 const CONSTANTS = {
   THIRTY_MINUTES: 1800,
@@ -150,6 +168,7 @@ module.exports = {
   FlexLayout,
   getCardColors,
   clampValue,
+  wrapTextMultiline,
   logger,
   CONSTANTS,
 };