Fix article count on landing pages to count recursively (#59423)

Author: heiskr

src/landings/components/ProductArticlesList.tsx

@@ -2,6 +2,7 @@ import { ActionList } from '@primer/react'
 
 import { ProductTreeNode, useMainContext } from '@/frame/components/context/MainContext'
 import { Link } from '@/frame/components/Link'
+import { countArticles } from '@/landings/lib/count-articles'
 import clsx from 'clsx'
 import styles from './ProductArticlesList.module.scss'
 
@@ -44,7 +45,7 @@ const ProductTreeNodeList = ({ treeNode }: { treeNode: ProductTreeNode }) => {
               {childNode.title}
               {childNode.childPages.length > 0 ? (
                 <small className="color-fg-muted d-inline-block">
-                  &nbsp;&bull; {childNode.childPages.length} articles
+                  &nbsp;&bull; {countArticles(childNode)} articles
                 </small>
               ) : null}
             </ActionList.LinkItem>

src/landings/lib/count-articles.ts

@@ -0,0 +1,9 @@
+import type { ProductTreeNode } from '@/frame/components/context/MainContext'
+
+// Recursively counts all leaf articles (nodes without children) under a given node
+export const countArticles = (node: ProductTreeNode): number => {
+  if (node.childPages.length === 0) {
+    return 1
+  }
+  return node.childPages.reduce((sum, child) => sum + countArticles(child), 0)
+}

src/landings/tests/count-articles.ts

@@ -0,0 +1,51 @@
+import { describe, expect, test } from 'vitest'
+
+import { countArticles } from '@/landings/lib/count-articles'
+import type { ProductTreeNode } from '@/frame/components/context/MainContext'
+
+// Helper to create a minimal ProductTreeNode for testing
+const createNode = (childPages: ProductTreeNode[] = []): ProductTreeNode => ({
+  title: 'Test',
+  href: '/test',
+  childPages,
+})
+
+describe('countArticles', () => {
+  test('returns 1 for a leaf node (no children)', () => {
+    const leaf = createNode()
+    expect(countArticles(leaf)).toBe(1)
+  })
+
+  test('counts direct children when all are leaf nodes', () => {
+    const node = createNode([createNode(), createNode(), createNode()])
+    expect(countArticles(node)).toBe(3)
+  })
+
+  test('counts all nested leaf articles recursively', () => {
+    // Structure: parent -> 2 sections -> each with 3 articles = 6 total
+    const section1 = createNode([createNode(), createNode(), createNode()])
+    const section2 = createNode([createNode(), createNode(), createNode()])
+    const parent = createNode([section1, section2])
+
+    expect(countArticles(parent)).toBe(6)
+  })
+
+  test('handles deeply nested structure', () => {
+    // 3 levels deep: parent -> section -> subsection -> 2 articles
+    const subsection = createNode([createNode(), createNode()])
+    const section = createNode([subsection])
+    const parent = createNode([section])
+
+    expect(countArticles(parent)).toBe(2)
+  })
+
+  test('handles mixed depth structure', () => {
+    // parent -> section with 2 articles + section with subsection with 3 articles = 5 total
+    const section1 = createNode([createNode(), createNode()])
+    const subsection = createNode([createNode(), createNode(), createNode()])
+    const section2 = createNode([subsection])
+    const parent = createNode([section1, section2])
+
+    expect(countArticles(parent)).toBe(5)
+  })
+})