fix: word-wrap bug (#1378)

* Fixed word-wrap bug

* ci(workflow): add 'npm' cache for actions/setup-node in .github/workflows (#1382)

* Revert "ci(workflow): add 'npm' cache for actions/setup-node in .github/workflows (#1382)"

This reverts commit 2723f00cb8.

* chore: remove action cache

* chore: minor change

Co-authored-by: Markus Tyrkkö <markus.tyrkko@nitor.com>
Co-authored-by: Oscar Dominguez <dominguez.celada@gmail.com>
Co-authored-by: Anurag <hazru.anurag@gmail.com>

src/cards/repo-card.js

@@ -139,7 +139,7 @@ const renderRepoCard = (repo, options = {}) => {
   }).join("");
 
   const card = new Card({
-    defaultTitle: header,
+    defaultTitle: header.length > 35 ? `${header.slice(0, 35)}...` : header,
     titlePrefixIcon: icons.contribs,
     width: 400,
     height,

src/common/utils.js

@@ -220,12 +220,22 @@ function getCardColors({
  * @param {number} maxLines
  * @returns {string[]}
  */
-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
+function wrapTextMultiline(text, width = 59, maxLines = 3) {
+  const fullWidthComma = "，";
+  const encoded = encodeHTML(text);
+  const isChinese = encoded.includes(fullWidthComma);
 
-  const lines = wrapped.slice(0, maxLines); // Only consider maxLines lines
+  let wrapped = [];
+
+  if (isChinese) {
+    wrapped = encoded.split(fullWidthComma); // Chinese full punctuation
+  } else {
+    wrapped = wrap(encoded, {
+      width,
+    }).split("\n"); // Split wrapped lines to get an array of lines
+  }
+
+  const lines = wrapped.map((line) => line.trim()).slice(0, maxLines); // Only consider maxLines lines
 
   // Add "..." to the last line if the text exceeds maxLines
   if (wrapped.length > maxLines) {

tests/renderRepoCard.test.js

@@ -51,6 +51,17 @@ describe("Test renderRepoCard", () => {
     );
   });
 
+  it("should trim header", () => {
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      name: "some-really-long-repo-name-for-test-purposes",
+    });
+
+    expect(document.getElementsByClassName("header")[0].textContent).toBe(
+      "some-really-long-repo-name-for-test...",
+    );
+  });
+
   it("should trim description", () => {
     document.body.innerHTML = renderRepoCard({
       ...data_repo.repository,

tests/utils.test.js

@@ -117,4 +117,11 @@ describe("wrapTextMultiline", () => {
     );
     expect(multiLineText).toEqual(["Hello", "world long..."]);
   });
+  it("should wrap chinese by punctuation", () => {
+    let multiLineText = wrapTextMultiline(
+      "专门为刚开始刷题的同学准备的算法基地，没有最细只有更细，立志用动画将晦涩难懂的算法说的通俗易懂！",
+    );
+    expect(multiLineText.length).toEqual(3);
+    expect(multiLineText[0].length).toEqual(18 * 8); // &#xxxxx; x 8
+  });
 });