diff --git a/packages/docusaurus-theme-classic/src/theme/DocCard/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocCard/index.tsx index 9e1b190d266c..ca94aaed471c 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocCard/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocCard/index.tsx @@ -12,6 +12,7 @@ import { findFirstSidebarItemLink, useDocById, } from '@docusaurus/theme-common/internal'; +import {usePluralForm} from '@docusaurus/theme-common'; import isInternalUrl from '@docusaurus/isInternalUrl'; import {translate} from '@docusaurus/Translate'; @@ -24,6 +25,23 @@ import type { import styles from './styles.module.css'; +function useCategoryItemsPlural() { + const {selectMessage} = usePluralForm(); + return (count: number) => + selectMessage( + count, + translate( + { + message: '{count} items', + id: 'theme.docs.DocCard.categoryDescription', + description: + 'The default description for a category card in the generated index about how many items this category includes', + }, + {count}, + ), + ); +} + function CardContainer({ href, children, @@ -76,6 +94,7 @@ function CardCategory({ item: PropSidebarItemCategory; }): JSX.Element | null { const href = findFirstSidebarItemLink(item); + const categoryItemsPlural = useCategoryItemsPlural(); // Unexpected: categories that don't have a link have been filtered upfront if (!href) { @@ -87,18 +106,7 @@ function CardCategory({ href={href} icon="🗃️" title={item.label} - description={ - item.description ?? - translate( - { - message: '{count} items', - id: 'theme.docs.DocCard.categoryDescription', - description: - 'The default description for a category card in the generated index about how many items this category includes', - }, - {count: item.items.length}, - ) - } + description={item.description ?? categoryItemsPlural(item.items.length)} /> ); }