Fix bespoke landing page duplicate articles and flat sidebar (#59750)

Author: Ebonsignori

src/article-api/lib/get-all-toc-items.ts

@@ -101,18 +101,24 @@ export function flattenTocItems(
 ): LinkData[] {
   const { excludeParents = true } = options
   const result: LinkData[] = []
+  const seen = new Set<string>()
 
   function recurse(items: TocItem[]) {
     for (const item of items) {
       const hasChildren = item.childTocItems && item.childTocItems.length > 0
 
       // Include this item if it's a leaf or if we're including parents
+      // Deduplicate by href - needed when a page lists both individual
+      // articles and their parent group as children (e.g., bespoke landing pages)
       if (!hasChildren || !excludeParents) {
-        result.push({
-          href: item.href,
-          title: item.title,
-          intro: item.intro,
-        })
+        if (!seen.has(item.href)) {
+          seen.add(item.href)
+          result.push({
+            href: item.href,
+            title: item.title,
+            intro: item.intro,
+          })
+        }
       }
 
       // Recurse into children

src/fixtures/fixtures/content/get-started/article-grid-bespoke/index.md

@@ -19,6 +19,8 @@ spotlight:
   - article: /grid-category-two/grid-article-three
     image: /assets/images/placeholder.png
 children:
+  - /grid-category-one/grid-article-one
+  - /grid-category-one/grid-article-two
   - /grid-category-one
   - /grid-category-two
 ---

src/fixtures/tests/playwright-rendering.spec.ts

@@ -1410,6 +1410,31 @@ test.describe('LandingArticleGridWithFilter component', () => {
     const articleGrid = page.getByTestId('article-grid')
     await expect(articleGrid).toBeVisible()
   })
+
+  test('bespoke landing page does not show duplicate articles', async ({ page }) => {
+    // The bespoke fixture lists individual articles AND their parent group
+    // as children, which would cause duplicates without deduplication.
+    await page.goto('/get-started/article-grid-bespoke')
+
+    const articleGrid = page.getByTestId('article-grid')
+    await expect(articleGrid).toBeVisible()
+
+    const articleCards = articleGrid.getByTestId('article-card')
+    // There are 4 unique articles across grid-category-one (2) and grid-category-two (2).
+    // Even though grid-article-one and grid-article-two are listed both individually
+    // and as children of grid-category-one, they should appear only once each.
+    await expect(articleCards).toHaveCount(4)
+
+    // Verify no duplicate titles by collecting all card titles
+    const titles: string[] = []
+    const count = await articleCards.count()
+    for (let i = 0; i < count; i++) {
+      const title = await articleCards.nth(i).locator('h3 span').textContent()
+      titles.push(title!)
+    }
+    const uniqueTitles = new Set(titles)
+    expect(uniqueTitles.size).toBe(titles.length)
+  })
 })
 
 test.describe('Non-child page resolution', () => {

src/frame/middleware/context/current-product-tree.ts

@@ -142,14 +142,24 @@ function excludeHidden(tree: TitlesTree) {
   }
   if (tree.sidebarLink) newTree.sidebarLink = tree.sidebarLink
   if (tree.layout && typeof tree.layout === 'string') newTree.layout = tree.layout
+  if (tree.crossProductChild) newTree.crossProductChild = true
   return newTree
 }
 
 function sidebarTree(tree: TitlesTree) {
   const { href, title, shortTitle, childPages, sidebarLink } = tree
   // Filter out cross-product children from the sidebar
   const filteredChildPages = childPages.filter((child) => !child.crossProductChild)
-  const childChildPages = filteredChildPages.map(sidebarTree)
+
+  // Filter out children that are descendants of another sibling.
+  // When a page lists both a subdirectory and individual articles from it,
+  // the articles should only appear nested under the subdirectory in the sidebar.
+  const siblingHrefs = filteredChildPages.map((c) => c.href)
+  const dedupedChildPages = filteredChildPages.filter(
+    (child) => !siblingHrefs.some((sh) => sh !== child.href && child.href.startsWith(`${sh}/`)),
+  )
+
+  const childChildPages = dedupedChildPages.map(sidebarTree)
   const newTree: TitlesTree = {
     href,
     title: shortTitle || title,

src/frame/tests/non-child-pages-resolution.test.ts

@@ -191,4 +191,65 @@ describe('Non-child page resolution', () => {
       expect(sidebarChildPages.map((c) => c.title)).toEqual(['Foo', 'Bar'])
     })
   })
+
+  describe('descendant-of-sibling filtering in sidebar', () => {
+    test('filters out children that are descendants of another sibling', () => {
+      // Simulate the sidebarTree descendant filtering logic.
+      // When a bespoke landing page lists both individual articles and their
+      // parent group as children, the individual articles should be filtered out
+      // from the sidebar (they appear nested under their parent group instead).
+      const childPages = [
+        {
+          href: '/en/get-started/copilot/add-custom-instructions',
+          title: 'Add custom instructions',
+        },
+        { href: '/en/get-started/copilot/create-skills', title: 'Create skills' },
+        { href: '/en/get-started/copilot', title: 'Copilot' },
+        { href: '/en/get-started/actions', title: 'Actions' },
+      ]
+
+      const siblingHrefs = childPages.map((c) => c.href)
+      const dedupedChildPages = childPages.filter(
+        (child) => !siblingHrefs.some((sh) => sh !== child.href && child.href.startsWith(`${sh}/`)),
+      )
+
+      // The two individual articles under /copilot/ should be removed
+      expect(dedupedChildPages).toHaveLength(2)
+      expect(dedupedChildPages.map((c) => c.title)).toEqual(['Copilot', 'Actions'])
+    })
+
+    test('does not filter children that are not descendants of any sibling', () => {
+      // Normal case: no overlapping paths, nothing should be filtered
+      const childPages = [
+        { href: '/en/get-started/copilot', title: 'Copilot' },
+        { href: '/en/get-started/actions', title: 'Actions' },
+        { href: '/en/get-started/packages', title: 'Packages' },
+      ]
+
+      const siblingHrefs = childPages.map((c) => c.href)
+      const dedupedChildPages = childPages.filter(
+        (child) => !siblingHrefs.some((sh) => sh !== child.href && child.href.startsWith(`${sh}/`)),
+      )
+
+      expect(dedupedChildPages).toHaveLength(3)
+    })
+
+    test('handles multiple overlapping groups correctly', () => {
+      // Multiple groups each with their own individual articles listed
+      const childPages = [
+        { href: '/en/get-started/copilot/article-a', title: 'Article A' },
+        { href: '/en/get-started/copilot', title: 'Copilot' },
+        { href: '/en/get-started/actions/article-b', title: 'Article B' },
+        { href: '/en/get-started/actions', title: 'Actions' },
+      ]
+
+      const siblingHrefs = childPages.map((c) => c.href)
+      const dedupedChildPages = childPages.filter(
+        (child) => !siblingHrefs.some((sh) => sh !== child.href && child.href.startsWith(`${sh}/`)),
+      )
+
+      expect(dedupedChildPages).toHaveLength(2)
+      expect(dedupedChildPages.map((c) => c.title)).toEqual(['Copilot', 'Actions'])
+    })
+  })
 })

src/landings/components/shared/LandingArticleGridWithFilter.tsx

@@ -40,10 +40,18 @@ const flattenArticlesRecursive = (articles: (TocItem | ChildTocItem)[]): Article
   return flattened
 }
 
-// Wrapper function that flattens and sorts alphabetically by title (only once)
+// Wrapper function that flattens, deduplicates, and sorts alphabetically by title (only once)
 const flattenArticles = (articles: (TocItem | ChildTocItem)[]): ArticleCardItems => {
   const flattened = flattenArticlesRecursive(articles)
-  return flattened.sort((a, b) => a.title.localeCompare(b.title))
+  // Deduplicate articles by fullPath - needed when a page lists both individual
+  // articles and their parent group as children (e.g., bespoke landing pages)
+  const seen = new Set<string>()
+  const deduped = flattened.filter((article) => {
+    if (seen.has(article.fullPath)) return false
+    seen.add(article.fullPath)
+    return true
+  })
+  return deduped.sort((a, b) => a.title.localeCompare(b.title))
 }
 
 // Hook to get current articles per page based on screen size