Improve text truncation for descriptions and listings

Author: dragonstyle

src/core/text.ts

@@ -48,18 +48,97 @@ export function formatLineRange(
   };
 }
 
-export function truncateText(text: string, length: number) {
+const kLastPunctuationRegex = /([\S\s]*)[\.\?\!]/;
+function trimSentence(text: string) {
+  const match = text.match(kLastPunctuationRegex);
+  if (match) {
+    return {
+      text: match[0],
+      trimmed: true,
+    };
+  } else {
+    return {
+      text,
+      trimmed: false,
+    };
+  }
+}
+
+function trimLength(text: string, length: number) {
   if (text.length < length) {
-    return text;
+    return {
+      text,
+      trimmed: false,
+    };
+  } else {
+    return {
+      text: text.substring(0, length),
+      trimmed: true,
+    };
+  }
+}
+
+function trimSpace(text: string) {
+  const lastSpace = text.lastIndexOf(" ");
+  if (lastSpace > 0) {
+    return {
+      text: text.substring(0, lastSpace),
+      trimmed: true,
+    };
+  } else {
+    return {
+      text,
+      trimmed: false,
+    };
+  }
+}
+
+export function truncateText(
+  text: string,
+  length: number,
+  breakAt: "space" | "punctuation",
+) {
+  const trimEnd = (text: string) => {
+    if ([",", "/", ":"].includes(text.charAt(text.length - 1))) {
+      return text.substring(0, text.length - 1);
+    } else {
+      return text;
+    }
+  };
+
+  const trimAtSpace = (text: string) => {
+    console.log(text);
+    const spaceResult = trimSpace(
+      text.substring(0, text.length - 1),
+    );
+    console.log(spaceResult.text);
+    return trimEnd(spaceResult.text) + "…";
+  };
+
+  const trimPunc = (text: string) => {
+    const puncResult = trimSentence(text);
+    if (puncResult.trimmed) {
+      return puncResult.text;
+    } else {
+      return trimAtSpace(puncResult.text);
+    }
+  };
+
+  const lengthResult = trimLength(text, length);
+
+  if (lengthResult.trimmed) {
+    // This was shortened
+    if (breakAt === "punctuation") {
+      return trimPunc(lengthResult.text);
+    } else {
+      return trimAtSpace(lengthResult.text);
+    }
   } else {
-    // Since we'll insert elips, trim an extra space
-    const clipLength = length - 1;
-    const clipped = text.substring(0, clipLength);
-    const lastSpace = clipped.lastIndexOf(" ");
-    if (lastSpace > 0) {
-      return clipped.substring(0, lastSpace) + "…";
+    // This wasn't shortened
+    if (breakAt === "punctuation") {
+      return trimPunc(lengthResult.text);
     } else {
-      return clipped + "…";
+      return trimEnd(lengthResult.text);
     }
   }
 }

src/project/types/website/listing/website-listing-template.ts

@@ -41,6 +41,7 @@ import {
 import { resourcePath } from "../../../../core/resources.ts";
 import { localizedString } from "../../../../config/localization.ts";
 import { formatDate, parsePandocDate } from "../../../../core/date.ts";
+import { truncateText } from "../../../../core/text.ts";
 
 export const kDateFormat = "date-format";
 
@@ -111,7 +112,11 @@ export function templateMarkdownHandler(
         const maxDescLength = listing[kMaxDescLength] as number ||
           -1;
         if (maxDescLength > 0) {
-          record.description = truncateText(item.description, maxDescLength);
+          record.description = truncateText(
+            item.description,
+            maxDescLength,
+            "space",
+          );
         }
       }
 
@@ -198,14 +203,14 @@ export function templateMarkdownHandler(
         if (content) {
           content.appendChild(listingEl);
         } else {
-          // Custom page layout doesn't have a main.content, so 
+          // Custom page layout doesn't have a main.content, so
           // just use the quarto-content div directly
           const customContent = doc.querySelector("#quarto-content");
           if (customContent) {
             customContent.appendChild(listingEl);
           } else {
             // Couldn't find anywhere to put the listing el, just
-            // stick at the bottom of the body 
+            // stick at the bottom of the body
             doc.body.appendChild(listingEl);
           }
         }
@@ -513,19 +518,3 @@ export function templateJsScript(
   `;
   return jsScript;
 }
-
-function truncateText(text: string, length: number) {
-  if (text.length < length) {
-    return text;
-  } else {
-    // Since we'll insert elips, trim an extra space
-    const clipLength = length - 1;
-    const clipped = text.substring(0, clipLength);
-    const lastSpace = clipped.lastIndexOf(" ");
-    if (lastSpace > 0) {
-      return clipped.substring(0, lastSpace) + "…";
-    } else {
-      return clipped + "…";
-    }
-  }
-}

src/project/types/website/website-meta.ts

@@ -106,7 +106,7 @@ export function metadataHtmlPostProcessor(
       resolveValue: (key: string, value: string) => {
         // Limit to 300 chars for Open Graph
         if ([kDescription].includes(key)) {
-          return truncateText(value, 300);
+          return truncateText(value, 200, "punctuation");
         }
 
         return value;
@@ -135,7 +135,7 @@ export function metadataHtmlPostProcessor(
       resolveValue: (key: string, value: string) => {
         // Limit to 200 chars for Twitter
         if ([kDescription].includes(key)) {
-          return truncateText(value, 200);
+          return truncateText(value, 200, "punctuation");
         }
 
         return value;