Fix frontmatter validation to handle liquid variables (#57011)

Author: heiskr

src/content-linter/lib/linting-rules/frontmatter-validation.js

@@ -1,6 +1,13 @@
 import { addError } from 'markdownlint-rule-helpers'
 import { getFrontmatter } from '@/content-linter/lib/helpers/utils'
 
+// Strip liquid tags from text for character counting purposes
+function stripLiquidTags(text) {
+  if (typeof text !== 'string') return text
+  // Remove both {% %} and {{ }} liquid tags
+  return text.replace(/\{%.*?%\}/g, '').replace(/\{\{.*?\}\}/g, '')
+}
+
 export const frontmatterValidation = {
   names: ['GHD055', 'frontmatter-validation'],
   description:
@@ -75,12 +82,13 @@ export const frontmatterValidation = {
     }
 
     // Cross-property validation: if title is longer than shortTitle limit, shortTitle must exist
-    if (fm.title && fm.title.length > rules.shortTitle.max && !fm.shortTitle) {
+    const strippedTitle = stripLiquidTags(fm.title)
+    if (fm.title && strippedTitle.length > rules.shortTitle.max && !fm.shortTitle) {
       const titleLine = findPropertyLine(params.lines, 'title')
       addError(
         onError,
         titleLine,
-        `Title is ${fm.title.length} characters, which exceeds the shortTitle limit of ${rules.shortTitle.max} characters. A shortTitle must be provided.`,
+        `Title is ${strippedTitle.length} characters, which exceeds the shortTitle limit of ${rules.shortTitle.max} characters. A shortTitle must be provided.`,
         fm.title,
         null,
         null,
@@ -108,7 +116,8 @@ export const frontmatterValidation = {
 }
 
 function validatePropertyLength(onError, lines, propertyName, propertyValue, limits, displayName) {
-  const propertyLength = propertyValue.length
+  const strippedValue = stripLiquidTags(propertyValue)
+  const propertyLength = strippedValue.length
   const propertyLine = findPropertyLine(lines, propertyName)
 
   // Only report the most severe error - maximum takes precedence over recommended

src/content-linter/tests/unit/frontmatter-validation.js

@@ -501,4 +501,76 @@ topics:
     })
     expect(articleResult['content/section/article.md']).toEqual([])
   })
+
+  // Liquid variable handling tests
+  test('title with liquid variables counts characters correctly', async () => {
+    const markdown = `---
+title: 'Getting started with {% data variables.product.prodname_github %}'
+topics:
+  - GitHub
+---
+# Content
+`
+    const result = await runRule(frontmatterValidation, {
+      strings: { 'content/section/article.md': markdown },
+      ...fmOptions,
+    })
+    // 'Getting started with ' (21 chars) + liquid tag (0 chars) = 21 chars, should pass
+    expect(result['content/section/article.md']).toEqual([])
+  })
+
+  test('intro with liquid variables counts characters correctly', async () => {
+    const markdown = `---
+title: 'Article title'
+intro: 'Learn how to use {% data variables.product.prodname_copilot %} for {{ something }}'
+topics:
+  - GitHub
+---
+# Content
+`
+    const result = await runRule(frontmatterValidation, {
+      strings: { 'content/section/article.md': markdown },
+      ...fmOptions,
+    })
+    // 'Learn how to use  for ' (21 chars) should pass
+    expect(result['content/section/article.md']).toEqual([])
+  })
+
+  test('shortTitle with liquid variables counts characters correctly', async () => {
+    const markdown = `---
+title: 'This article title is exactly fifty characters!!!!'
+shortTitle: '{% data variables.product.prodname_copilot_short %}'
+topics:
+  - GitHub
+---
+# Content
+`
+    const result = await runRule(frontmatterValidation, {
+      strings: { 'content/section/article.md': markdown },
+      ...fmOptions,
+    })
+    // Liquid tag should count as 0 characters, should pass
+    expect(result['content/section/article.md']).toEqual([])
+  })
+
+  test('long text with liquid variables still fails when limit exceeded', async () => {
+    const longText = 'A'.repeat(70) // 70 chars
+    const markdown = `---
+title: '${longText} {% data variables.product.prodname_github %} extra text'
+shortTitle: 'Short title'
+topics:
+  - GitHub
+---
+# Content
+`
+    const result = await runRule(frontmatterValidation, {
+      strings: { 'content/section/article.md': markdown },
+      ...fmOptions,
+    })
+    // 70 A's + 1 space + 0 (liquid tag) + 1 space + 10 ('extra text') = 82 chars, should exceed 80 char limit for articles
+    expect(result['content/section/article.md']).toHaveLength(1)
+    expect(result['content/section/article.md'][0].errorDetail).toContain(
+      'exceeds maximum length of 80 characters',
+    )
+  })
 })