add multiple carousel pattern (#59184)

Author: Ebonsignori

content/copilot/tutorials/index.md

@@ -39,10 +39,11 @@ layout: bespoke-landing
 sidebarLink:
   text: All tutorials
   href: /copilot/tutorials
-recommended:
-  - /copilot/tutorials/copilot-chat-cookbook
-  - /copilot/tutorials/customization-library
-  - /copilot/tutorials/roll-out-at-scale
+carousels:
+  recommended:
+    - /copilot/tutorials/copilot-chat-cookbook
+    - /copilot/tutorials/customization-library
+    - /copilot/tutorials/roll-out-at-scale
 includedCategories:
   - Accelerate PR velocity
   - Automate simple user stories

data/reusables/contributing/content-linter-rules.md

@@ -57,7 +57,7 @@
 | GHD047 | table-column-integrity | Tables must have consistent column counts across all rows | error | tables, accessibility, formatting |
 | GHD051 | frontmatter-versions-whitespace | Versions frontmatter should not contain unnecessary whitespace | error | frontmatter, versions |
 | GHD054 | third-party-actions-reusable | Code examples with third-party actions must include disclaimer reusable | error | actions, reusable, third-party |
-| GHD056 | frontmatter-landing-recommended | Only landing pages can have recommended articles, there should be no duplicate recommended articles, and all recommended articles must exist | error | frontmatter, landing, recommended |
+| GHD056 | frontmatter-landing-carousels | Only landing pages can have carousels, there should be no duplicate articles, and all articles must exist | error | frontmatter, landing, carousels |
 | GHD057 | ctas-schema | CTA URLs must conform to the schema | error | ctas, schema, urls |
 | GHD058 | journey-tracks-liquid | Journey track properties must use valid Liquid syntax | error | frontmatter, journey-tracks, liquid |
 | GHD059 | journey-tracks-guide-path-exists | Journey track guide paths must reference existing content files | error | frontmatter, journey-tracks |

data/ui.yml

@@ -346,6 +346,9 @@ cookbook_landing:
   category: Category
   complexity: Complexity
 
+carousels:
+  recommended: Recommended
+
 not_found:
   title: Ooops!
   message: It looks like this page doesn't exist.

src/article-api/transformers/bespoke-landing-transformer.ts

@@ -1,26 +1,20 @@
-import type { Context, Page } from '@/types'
+import type { Context, Page, ResolvedArticle } from '@/types'
 import type { PageTransformer, TemplateData, Section, LinkData } from './types'
 import { renderContent } from '@/content-render/index'
 import { loadTemplate } from '@/article-api/lib/load-template'
 import { getAllTocItems, flattenTocItems } from '@/article-api/lib/get-all-toc-items'
 
-interface RecommendedItem {
-  href: string
-  title?: string
-  intro?: string
-}
-
 interface BespokeLandingPage extends Omit<Page, 'featuredLinks'> {
   featuredLinks?: Record<string, Array<string | { href: string; title: string; intro?: string }>>
   children?: string[]
-  recommended?: RecommendedItem[]
-  rawRecommended?: string[]
+  carousels?: Record<string, ResolvedArticle[]>
+  rawCarousels?: Record<string, string[]>
   includedCategories?: string[]
 }
 
 /**
  * Transforms bespoke-landing pages into markdown format.
- * Handles recommended carousel and full article listings.
+ * Handles carousels and full article listings.
  * Note: Unlike discovery-landing, bespoke-landing shows ALL articles
  * regardless of includedCategories.
  */
@@ -53,38 +47,48 @@ export class BespokeLandingTransformer implements PageTransformer {
     const bespokePage = page as BespokeLandingPage
     const sections: Section[] = []
 
-    // Recommended carousel
-    const recommended = bespokePage.recommended ?? bespokePage.rawRecommended
-    if (recommended && recommended.length > 0) {
+    // Process carousels (each carousel becomes a section)
+    const carousels = bespokePage.carousels ?? bespokePage.rawCarousels
+    if (carousels && typeof carousels === 'object') {
       const { default: getLearningTrackLinkData } = await import(
         '@/learning-track/lib/get-link-data'
       )
 
-      let links: LinkData[]
-      if (typeof recommended[0] === 'object' && 'title' in recommended[0]) {
-        links = recommended.map((item) => ({
-          href: typeof item === 'string' ? item : item.href,
-          title: (typeof item === 'object' && item.title) || '',
-          intro: (typeof item === 'object' && item.intro) || '',
-        }))
-      } else {
-        const linkData = await getLearningTrackLinkData(recommended as string[], context, {
-          title: true,
-          intro: true,
-        })
-        links = (linkData || []).map((item: { href: string; title?: string; intro?: string }) => ({
-          href: item.href,
-          title: item.title || '',
-          intro: item.intro || '',
-        }))
-      }
-
-      const validLinks = links.filter((l) => l.href && l.title)
-      if (validLinks.length > 0) {
-        sections.push({
-          title: 'Recommended',
-          groups: [{ title: null, links: validLinks }],
-        })
+      for (const [carouselKey, articles] of Object.entries(carousels)) {
+        if (!Array.isArray(articles) || articles.length === 0) continue
+
+        let links: LinkData[]
+        if (typeof articles[0] === 'object' && 'title' in articles[0]) {
+          // Already resolved articles
+          links = articles.map((item) => ({
+            href: typeof item === 'string' ? item : item.href,
+            title: (typeof item === 'object' && item.title) || '',
+            intro: (typeof item === 'object' && item.intro) || '',
+          }))
+        } else {
+          // Raw paths that need resolution
+          const linkData = await getLearningTrackLinkData(articles as string[], context, {
+            title: true,
+            intro: true,
+          })
+          links = (linkData || []).map(
+            (item: { href: string; title?: string; intro?: string }) => ({
+              href: item.href,
+              title: item.title || '',
+              intro: item.intro || '',
+            }),
+          )
+        }
+
+        const validLinks = links.filter((l) => l.href && l.title)
+        if (validLinks.length > 0) {
+          // Use carousel key as title (capitalize first letter)
+          const sectionTitle = carouselKey.charAt(0).toUpperCase() + carouselKey.slice(1)
+          sections.push({
+            title: sectionTitle,
+            groups: [{ title: null, links: validLinks }],
+          })
+        }
       }
     }
 

src/article-api/transformers/discovery-landing-transformer.ts

@@ -1,20 +1,14 @@
-import type { Context, Page } from '@/types'
+import type { Context, Page, ResolvedArticle } from '@/types'
 import type { PageTransformer, TemplateData, Section, LinkData } from './types'
 import { renderContent } from '@/content-render/index'
 import { loadTemplate } from '@/article-api/lib/load-template'
 import { getAllTocItems, flattenTocItems } from '@/article-api/lib/get-all-toc-items'
 
-interface RecommendedItem {
-  href: string
-  title?: string
-  intro?: string
-}
-
 interface DiscoveryPage extends Page {
   rawIntroLinks?: Record<string, string>
   introLinks?: Record<string, string>
-  recommended?: RecommendedItem[]
-  rawRecommended?: string[]
+  carousels?: Record<string, ResolvedArticle[]>
+  rawCarousels?: Record<string, string[]>
   includedCategories?: string[]
   children?: string[]
 }
@@ -53,38 +47,48 @@ export class DiscoveryLandingTransformer implements PageTransformer {
     const discoveryPage = page as DiscoveryPage
     const sections: Section[] = []
 
-    // Recommended carousel
-    const recommended = discoveryPage.recommended ?? discoveryPage.rawRecommended
-    if (recommended && recommended.length > 0) {
+    // Process carousels (each carousel becomes a section)
+    const carousels = discoveryPage.carousels ?? discoveryPage.rawCarousels
+    if (carousels && typeof carousels === 'object') {
       const { default: getLearningTrackLinkData } = await import(
         '@/learning-track/lib/get-link-data'
       )
 
-      let links: LinkData[]
-      if (typeof recommended[0] === 'object' && 'title' in recommended[0]) {
-        links = recommended.map((item) => ({
-          href: typeof item === 'string' ? item : item.href,
-          title: (typeof item === 'object' && item.title) || '',
-          intro: (typeof item === 'object' && item.intro) || '',
-        }))
-      } else {
-        const linkData = await getLearningTrackLinkData(recommended as string[], context, {
-          title: true,
-          intro: true,
-        })
-        links = (linkData || []).map((item: { href: string; title?: string; intro?: string }) => ({
-          href: item.href,
-          title: item.title || '',
-          intro: item.intro || '',
-        }))
-      }
+      for (const [carouselKey, articles] of Object.entries(carousels)) {
+        if (!Array.isArray(articles) || articles.length === 0) continue
+
+        let links: LinkData[]
+        if (typeof articles[0] === 'object' && 'title' in articles[0]) {
+          // Already resolved articles
+          links = articles.map((item) => ({
+            href: typeof item === 'string' ? item : item.href,
+            title: (typeof item === 'object' && item.title) || '',
+            intro: (typeof item === 'object' && item.intro) || '',
+          }))
+        } else {
+          // Raw paths that need resolution
+          const linkData = await getLearningTrackLinkData(articles as string[], context, {
+            title: true,
+            intro: true,
+          })
+          links = (linkData || []).map(
+            (item: { href: string; title?: string; intro?: string }) => ({
+              href: item.href,
+              title: item.title || '',
+              intro: item.intro || '',
+            }),
+          )
+        }
 
-      const validLinks = links.filter((l) => l.href && l.title)
-      if (validLinks.length > 0) {
-        sections.push({
-          title: 'Recommended',
-          groups: [{ title: null, links: validLinks }],
-        })
+        const validLinks = links.filter((l) => l.href && l.title)
+        if (validLinks.length > 0) {
+          // Use carousel key as title (capitalize first letter)
+          const sectionTitle = carouselKey.charAt(0).toUpperCase() + carouselKey.slice(1)
+          sections.push({
+            title: sectionTitle,
+            groups: [{ title: null, links: validLinks }],
+          })
+        }
       }
     }
 

src/article-api/transformers/product-landing-transformer.ts

@@ -1,21 +1,15 @@
-import type { Context, Page } from '@/types'
+import type { Context, Page, ResolvedArticle } from '@/types'
 import type { PageTransformer, TemplateData, Section, LinkGroup, LinkData } from './types'
 import { renderContent } from '@/content-render/index'
 import { loadTemplate } from '@/article-api/lib/load-template'
 import { resolvePath } from '@/article-api/lib/resolve-path'
 import { getLinkData } from '@/article-api/lib/get-link-data'
 
-interface RecommendedItem {
-  href: string
-  title?: string
-  intro?: string
-}
-
 interface ProductPage extends Omit<Page, 'featuredLinks'> {
   featuredLinks?: Record<string, Array<string | { href: string; title: string; intro?: string }>>
   children?: string[]
-  recommended?: RecommendedItem[]
-  rawRecommended?: string[]
+  carousels?: Record<string, ResolvedArticle[]>
+  rawCarousels?: Record<string, string[]>
   includedCategories?: string[]
 }
 
@@ -59,38 +53,48 @@ export class ProductLandingTransformer implements PageTransformer {
     const languageCode = page.languageCode || 'en'
     const sections: Section[] = []
 
-    // Recommended carousel
-    const recommended = productPage.recommended ?? productPage.rawRecommended
-    if (recommended && recommended.length > 0) {
+    // Process carousels (each carousel becomes a section)
+    const carousels = productPage.carousels ?? productPage.rawCarousels
+    if (carousels && typeof carousels === 'object') {
       const { default: getLearningTrackLinkData } = await import(
         '@/learning-track/lib/get-link-data'
       )
 
-      let links: LinkData[]
-      if (typeof recommended[0] === 'object' && 'title' in recommended[0]) {
-        links = recommended.map((item) => ({
-          href: typeof item === 'string' ? item : item.href,
-          title: (typeof item === 'object' && item.title) || '',
-          intro: (typeof item === 'object' && item.intro) || '',
-        }))
-      } else {
-        const linkData = await getLearningTrackLinkData(recommended as string[], context, {
-          title: true,
-          intro: true,
-        })
-        links = (linkData || []).map((item: { href: string; title?: string; intro?: string }) => ({
-          href: item.href,
-          title: item.title || '',
-          intro: item.intro || '',
-        }))
-      }
+      for (const [carouselKey, articles] of Object.entries(carousels)) {
+        if (!Array.isArray(articles) || articles.length === 0) continue
 
-      const validLinks = links.filter((l) => l.href && l.title)
-      if (validLinks.length > 0) {
-        sections.push({
-          title: 'Recommended',
-          groups: [{ title: null, links: validLinks }],
-        })
+        let links: LinkData[]
+        if (typeof articles[0] === 'object' && 'title' in articles[0]) {
+          // Already resolved articles
+          links = articles.map((item) => ({
+            href: typeof item === 'string' ? item : item.href,
+            title: (typeof item === 'object' && item.title) || '',
+            intro: (typeof item === 'object' && item.intro) || '',
+          }))
+        } else {
+          // Raw paths that need resolution
+          const linkData = await getLearningTrackLinkData(articles as string[], context, {
+            title: true,
+            intro: true,
+          })
+          links = (linkData || []).map(
+            (item: { href: string; title?: string; intro?: string }) => ({
+              href: item.href,
+              title: item.title || '',
+              intro: item.intro || '',
+            }),
+          )
+        }
+
+        const validLinks = links.filter((l) => l.href && l.title)
+        if (validLinks.length > 0) {
+          // Use carousel key as title (capitalize first letter)
+          const sectionTitle = carouselKey.charAt(0).toUpperCase() + carouselKey.slice(1)
+          sections.push({
+            title: sectionTitle,
+            groups: [{ title: null, links: validLinks }],
+          })
+        }
       }
     }