feat: add truncate filter to summary tag (#6105)

Co-authored-by: Till Schweneker <till.schweneker@meltingelements.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/netlify-cms-lib-widgets/src/__tests__/stringTemplate.spec.js

@@ -1,12 +1,13 @@
 import { fromJS } from 'immutable';
 
 import {
-  keyToPathArray,
   compileStringTemplate,
-  parseDateFromEntry,
-  extractTemplateVars,
   expandPath,
+  extractTemplateVars,
+  keyToPathArray,
+  parseDateFromEntry,
 } from '../stringTemplate';
+
 describe('stringTemplate', () => {
   describe('keyToPathArray', () => {
     it('should return array of length 1 with simple path', () => {
@@ -152,6 +153,28 @@ describe('stringTemplate', () => {
         ),
       ).toBe('BACKENDSLUG-star️-open️');
     });
+
+    it('return apply filter for truncate', () => {
+      expect(
+        compileStringTemplate(
+          '{{slug | truncate(6)}}',
+          date,
+          'backendSlug',
+          fromJS({ slug: 'entrySlug', starred: true, done: false }),
+        ),
+      ).toBe('backen...');
+    });
+
+    it('return apply filter for truncate', () => {
+      expect(
+        compileStringTemplate(
+          "{{slug | truncate(3,'***')}}",
+          date,
+          'backendSlug',
+          fromJS({ slug: 'entrySlug', starred: true, done: false }),
+        ),
+      ).toBe('bac***');
+    });
   });
 
   describe('expandPath', () => {

packages/netlify-cms-lib-widgets/src/stringTemplate.ts

@@ -1,7 +1,7 @@
-import moment from 'moment';
 import { Map } from 'immutable';
+import { get, trimEnd, truncate } from 'lodash';
+import moment from 'moment';
 import { basename, dirname, extname } from 'path';
-import { get, trimEnd } from 'lodash';
 
 const filters = [
   { pattern: /^upper$/, transform: (str: string) => str.toUpperCase() },
@@ -21,6 +21,18 @@ const filters = [
     pattern: /^ternary\('(.*)',\s*'(.*)'\)$/,
     transform: (str: string, match: RegExpMatchArray) => (str ? match[1] : match[2]),
   },
+  {
+    pattern: /^truncate\(([0-9]+)(?:(?:,\s*['"])([^'"]*)(?:['"]))?\)$/,
+    transform: (str: string, match: RegExpMatchArray) => {
+      const omission = match[2] || '...';
+      const length = parseInt(match[1]) + omission.length;
+
+      return truncate(str, {
+        length,
+        omission,
+      });
+    },
+  },
 ];
 
 const FIELD_PREFIX = 'fields.';

website/content/docs/beta-features.md

@@ -556,14 +556,15 @@ collections:
   - name: 'posts'
     label: 'Posts'
     folder: '_posts'
-    summary: "{{title | upper}} - {{date | date('YYYY-MM-DD')}}"
+    summary: "{{title | upper}} - {{date | date('YYYY-MM-DD')}} – {{body | truncate(20, '***')}}"
     fields:
       - { label: 'Title', name: 'title', widget: 'string' }
       - { label: 'Publish Date', name: 'date', widget: 'datetime' }
+      - { label: 'Body', name: 'body', widget: 'markdown' }
 ```
 
 The above config will transform the title field to uppercase and format the date field using `YYYY-MM-DD` format.
-Available transformations are `upper`, `lower`, `date('<format>'), default('defaultValue') and ternary('valueForTrue','valueForFalse')`
+Available transformations are `upper`, `lower`, `date('<format>')`, `default('defaultValue')`, `ternary('valueForTrue','valueForFalse')` and `truncate(<number>)`/`truncate(<number>, '<string>')`  
 
 ## Registering to CMS Events