support new frontmatter for filtering the category dropdown (#58197)

Author: Ebonsignori

src/frame/lib/frontmatter.ts

@@ -405,6 +405,14 @@ export const schema: Schema = {
  maxItems: 9,
  description: 'Array of articles to feature in the carousel section',
  },
+ // Included categories for article grid filtering
+ includedCategories: {
+ type: 'array',
+ items: {
+ type: 'string',
+ },
+ description: 'Array of category names to include in the article grid dropdown filter',
+ },
  },
 }
 

src/landings/components/bespoke/BespokeLanding.tsx

@@ -6,7 +6,16 @@ import { UtmPreserver } from '@/frame/components/UtmPreserver'
 import { LandingCarousel } from '@/landings/components/shared/LandingCarousel'
 
 export const BespokeLanding = () => {
- const { title, intro, heroImage, introLinks, tocItems, recommended } = useLandingContext()
+ const {
+ title,
+ intro,
+ heroImage,
+ introLinks,
+ tocItems,
+ recommended,
+ includedCategories,
+ landingType,
+ } = useLandingContext()
 
  return (
  <DefaultLayout>
@@ -16,7 +25,11 @@ export const BespokeLanding = () => {
 
  <div className="container-xl px-3 px-md-6 mt-6 mb-4">
  <LandingCarousel recommended={recommended} />
- <ArticleGrid tocItems={tocItems} />
+ <ArticleGrid
+ tocItems={tocItems}
+ includedCategories={includedCategories}
+ landingType={landingType}
+ />
  </div>
  </div>
  </DefaultLayout>

src/landings/components/discovery/DiscoveryLanding.tsx

@@ -6,7 +6,16 @@ import { LandingCarousel } from '@/landings/components/shared/LandingCarousel'
 import { UtmPreserver } from '@/frame/components/UtmPreserver'
 
 export const DiscoveryLanding = () => {
- const { title, intro, heroImage, introLinks, tocItems, recommended } = useLandingContext()
+ const {
+ title,
+ intro,
+ heroImage,
+ introLinks,
+ tocItems,
+ recommended,
+ includedCategories,
+ landingType,
+ } = useLandingContext()
 
  return (
  <DefaultLayout>
@@ -15,7 +24,11 @@ export const DiscoveryLanding = () => {
  <LandingHero title={title} intro={intro} heroImage={heroImage} introLinks={introLinks} />
  <div className="container-xl px-3 px-md-6 mt-6 mb-4">
  <LandingCarousel recommended={recommended} />
- <ArticleGrid tocItems={tocItems} />
+ <ArticleGrid
+ tocItems={tocItems}
+ includedCategories={includedCategories}
+ landingType={landingType}
+ />
  </div>
  </div>
  </DefaultLayout>

src/landings/components/shared/LandingArticleGridWithFilter.tsx

@@ -6,11 +6,14 @@ import cx from 'classnames'
 import { Link } from '@/frame/components/Link'
 import { useTranslation } from '@/languages/components/useTranslation'
 import { ArticleCardItems, ChildTocItem, TocItem } from '@/landings/types'
+import { LandingType } from '@/landings/context/LandingContext'
 
 import styles from './LandingArticleGridWithFilter.module.scss'
 
 type ArticleGridProps = {
  tocItems: TocItem[]
+ includedCategories?: string[]
+ landingType: LandingType
 }
 
 const ALL_CATEGORIES = 'all_categories'
@@ -66,7 +69,7 @@ const useResponsiveArticlesPerPage = () => {
  return articlesPerPage
 }
 
-export const ArticleGrid = ({ tocItems }: ArticleGridProps) => {
+export const ArticleGrid = ({ tocItems, includedCategories, landingType }: ArticleGridProps) => {
  const { t } = useTranslation('product_landing')
  const [searchQuery, setSearchQuery] = useState('')
  const [selectedCategory, setSelectedCategory] = useState(ALL_CATEGORIES)
@@ -83,21 +86,42 @@ export const ArticleGrid = ({ tocItems }: ArticleGridProps) => {
  [tocItems],
  )
 
+ // Filter articles based on includedCategories for discovery landing pages
+ // For bespoke landing pages, show all articles regardless of includedCategories
+ const filteredArticlesByLandingType = useMemo(() => {
+ if (landingType === 'discovery' && includedCategories && includedCategories.length > 0) {
+ // For discovery pages, only include articles that have at least one matching category
+ return allArticles.filter((article) => {
+ if (!article.category || article.category.length === 0) return false
+ return article.category.some((cat) =>
+ includedCategories.some((included) => included.toLowerCase() === cat.toLowerCase()),
+ )
+ })
+ }
+ // For bespoke pages or when includedCategories is empty/undefined, return all articles
+ return allArticles
+ }, [allArticles, includedCategories, landingType])
+
  // Reset to first page when articlesPerPage changes (screen size changes)
  useEffect(() => {
  setCurrentPage(1)
  }, [articlesPerPage])
 
- // Extract unique categories from the articles
+ // Extract unique categories from the filtered articles, filtering dropdown by includedCategories if provided
  const categories: string[] = [
  ALL_CATEGORIES,
- ...Array.from(new Set(allArticles.flatMap((item) => item.category || []))).sort((a, b) =>
- a.localeCompare(b),
- ),
+ ...Array.from(new Set(filteredArticlesByLandingType.flatMap((item) => item.category || [])))
+ .filter((category) => {
+ if (!includedCategories || includedCategories.length === 0) return true
+ // Case-insensitive comparison for dropdown filtering
+ const lowerCategory = category.toLowerCase()
+ return includedCategories.some((included) => included.toLowerCase() === lowerCategory)
+ })
+ .sort((a, b) => a.localeCompare(b)),
  ]
 
  const applyFilters = () => {
- let results = allArticles
+ let results = filteredArticlesByLandingType
 
  if (searchQuery) {
  results = results.filter((token) => {

src/landings/context/LandingContext.tsx

@@ -26,6 +26,8 @@ export type LandingContextT = {
  introLinks?: Record<string, string>
  // For journey landing pages
  journeyTracks?: JourneyTrack[]
+ // For article grid category filtering
+ includedCategories?: string[]
 }
 
 export const LandingContext = createContext<LandingContextT | null>(null)
@@ -83,5 +85,6 @@ export const getLandingContextFromRequest = async (
  introLinks: page.introLinks || null,
  recommended,
  journeyTracks,
+ includedCategories: page.includedCategories || [],
  }
 }