@docusaurus/theme-classic 2.0.0-beta.15 → 2.0.0-beta.16

package/lib/translations.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.getTranslationFiles = getTranslationFiles;
 exports.translateThemeConfig = translateThemeConfig;
 
-var _lodash = require("lodash");
+var _lodash = _interopRequireDefault(require("lodash"));
 
 var _utils = require("@docusaurus/utils");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
@@ -20,19 +22,17 @@ function getNavbarTranslationFile(navbar) {
   // TODO handle properly all the navbar item types here!
   function flattenNavbarItems(items) {
     const subItems = items.flatMap(item => {
-      var _item$items;
-
-      const allSubItems = [(_item$items = item.items) !== null && _item$items !== void 0 ? _item$items : []].flat();
+      const allSubItems = [item.items ?? []].flat();
       return flattenNavbarItems(allSubItems);
     });
     return [...items, ...subItems];
   }
 
   const allNavbarItems = flattenNavbarItems(navbar.items);
-  const navbarItemsTranslations = (0, _lodash.chain)(allNavbarItems.filter(navbarItem => !!navbarItem.label)).keyBy(navbarItem => `item.label.${navbarItem.label}`).mapValues(navbarItem => ({
+  const navbarItemsTranslations = Object.fromEntries(allNavbarItems.filter(navbarItem => navbarItem.label).map(navbarItem => [`item.label.${navbarItem.label}`, {
     message: navbarItem.label,
     description: `Navbar item with label ${navbarItem.label}`
-  })).value();
+  }]));
   const titleTranslations = navbar.title ? {
     title: {
       message: navbar.title,
@@ -43,23 +43,23 @@ function getNavbarTranslationFile(navbar) {
 }
 
 function translateNavbar(navbar, navbarTranslations) {
-  var _navbarTranslations$t, _navbarTranslations$t2;
+  var _navbarTranslations$t;
 
   return { ...navbar,
-    title: (_navbarTranslations$t = (_navbarTranslations$t2 = navbarTranslations.title) === null || _navbarTranslations$t2 === void 0 ? void 0 : _navbarTranslations$t2.message) !== null && _navbarTranslations$t !== void 0 ? _navbarTranslations$t : navbar.title,
+    title: ((_navbarTranslations$t = navbarTranslations.title) === null || _navbarTranslations$t === void 0 ? void 0 : _navbarTranslations$t.message) ?? navbar.title,
     //  TODO handle properly all the navbar item types here!
     items: navbar.items.map(item => {
-      var _item$items2, _navbarTranslations$$2, _navbarTranslations$2;
+      var _item$items, _navbarTranslations$2;
 
-      const subItems = (_item$items2 = item.items) === null || _item$items2 === void 0 ? void 0 : _item$items2.map(subItem => {
-        var _navbarTranslations$$, _navbarTranslations$;
+      const subItems = (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.map(subItem => {
+        var _navbarTranslations$;
 
         return { ...subItem,
-          label: (_navbarTranslations$$ = (_navbarTranslations$ = navbarTranslations[`item.label.${subItem.label}`]) === null || _navbarTranslations$ === void 0 ? void 0 : _navbarTranslations$.message) !== null && _navbarTranslations$$ !== void 0 ? _navbarTranslations$$ : subItem.label
+          label: ((_navbarTranslations$ = navbarTranslations[`item.label.${subItem.label}`]) === null || _navbarTranslations$ === void 0 ? void 0 : _navbarTranslations$.message) ?? subItem.label
         };
       });
       return { ...item,
-        label: (_navbarTranslations$$2 = (_navbarTranslations$2 = navbarTranslations[`item.label.${item.label}`]) === null || _navbarTranslations$2 === void 0 ? void 0 : _navbarTranslations$2.message) !== null && _navbarTranslations$$2 !== void 0 ? _navbarTranslations$$2 : item.label,
+        label: ((_navbarTranslations$2 = navbarTranslations[`item.label.${item.label}`]) === null || _navbarTranslations$2 === void 0 ? void 0 : _navbarTranslations$2.message) ?? item.label,
         ...(subItems ? {
           items: subItems
         } : undefined)
@@ -73,18 +73,14 @@ function isMultiColumnFooterLinks(links) {
 }
 
 function getFooterTranslationFile(footer) {
-  const footerLinkTitles = (0, _lodash.chain)(isMultiColumnFooterLinks(footer.links) ? footer.links.filter(link => !!link.title) : []).keyBy(link => `link.title.${link.title}`).mapValues(link => ({
+  const footerLinkTitles = Object.fromEntries((isMultiColumnFooterLinks(footer.links) ? footer.links.filter(link => link.title) : []).map(link => [`link.title.${link.title}`, {
     message: link.title,
     description: `The title of the footer links column with title=${link.title} in the footer`
-  })).value();
-  const footerLinkLabels = (0, _lodash.chain)(isMultiColumnFooterLinks(footer.links) ? footer.links.flatMap(link => link.items).filter(link => !!link.label) : footer.links.filter(link => !!link.label)).keyBy(linkItem => `link.item.label.${linkItem.label}`).mapValues(linkItem => {
-    var _linkItem$to;
-
-    return {
-      message: linkItem.label,
-      description: `The label of footer link with label=${linkItem.label} linking to ${(_linkItem$to = linkItem.to) !== null && _linkItem$to !== void 0 ? _linkItem$to : linkItem.href}`
-    };
-  }).value();
+  }]));
+  const footerLinkLabels = Object.fromEntries((isMultiColumnFooterLinks(footer.links) ? footer.links.flatMap(link => link.items).filter(link => link.label) : footer.links.filter(link => link.label)).map(link => [`link.item.label.${link.label}`, {
+    message: link.label,
+    description: `The label of footer link with label=${link.label} linking to ${link.to ?? link.href}`
+  }]));
   const copyright = footer.copyright ? {
     copyright: {
       message: footer.copyright,
@@ -95,29 +91,29 @@ function getFooterTranslationFile(footer) {
 }
 
 function translateFooter(footer, footerTranslations) {
-  var _footerTranslations$c, _footerTranslations$c2;
+  var _footerTranslations$c;
 
   const links = isMultiColumnFooterLinks(footer.links) ? footer.links.map(link => {
-    var _footerTranslations$$, _footerTranslations$;
+    var _footerTranslations$;
 
     return { ...link,
-      title: (_footerTranslations$$ = (_footerTranslations$ = footerTranslations[`link.title.${link.title}`]) === null || _footerTranslations$ === void 0 ? void 0 : _footerTranslations$.message) !== null && _footerTranslations$$ !== void 0 ? _footerTranslations$$ : link.title,
+      title: ((_footerTranslations$ = footerTranslations[`link.title.${link.title}`]) === null || _footerTranslations$ === void 0 ? void 0 : _footerTranslations$.message) ?? link.title,
       items: link.items.map(linkItem => {
-        var _footerTranslations$$2, _footerTranslations$2;
+        var _footerTranslations$2;
 
         return { ...linkItem,
-          label: (_footerTranslations$$2 = (_footerTranslations$2 = footerTranslations[`link.item.label.${linkItem.label}`]) === null || _footerTranslations$2 === void 0 ? void 0 : _footerTranslations$2.message) !== null && _footerTranslations$$2 !== void 0 ? _footerTranslations$$2 : linkItem.label
+          label: ((_footerTranslations$2 = footerTranslations[`link.item.label.${linkItem.label}`]) === null || _footerTranslations$2 === void 0 ? void 0 : _footerTranslations$2.message) ?? linkItem.label
         };
       })
     };
   }) : footer.links.map(link => {
-    var _footerTranslations$$3, _footerTranslations$3;
+    var _footerTranslations$3;
 
     return { ...link,
-      label: (_footerTranslations$$3 = (_footerTranslations$3 = footerTranslations[`link.item.label.${link.label}`]) === null || _footerTranslations$3 === void 0 ? void 0 : _footerTranslations$3.message) !== null && _footerTranslations$$3 !== void 0 ? _footerTranslations$$3 : link.label
+      label: ((_footerTranslations$3 = footerTranslations[`link.item.label.${link.label}`]) === null || _footerTranslations$3 === void 0 ? void 0 : _footerTranslations$3.message) ?? link.label
     };
   });
-  const copyright = (_footerTranslations$c = (_footerTranslations$c2 = footerTranslations.copyright) === null || _footerTranslations$c2 === void 0 ? void 0 : _footerTranslations$c2.message) !== null && _footerTranslations$c !== void 0 ? _footerTranslations$c : footer.copyright;
+  const copyright = ((_footerTranslations$c = footerTranslations.copyright) === null || _footerTranslations$c === void 0 ? void 0 : _footerTranslations$c.message) ?? footer.copyright;
   return { ...footer,
     links,
     copyright
@@ -141,7 +137,8 @@ function translateThemeConfig({
   themeConfig,
   translationFiles
 }) {
-  const translationFilesMap = (0, _lodash.keyBy)(translationFiles, f => f.path);
+  const translationFilesMap = _lodash.default.keyBy(translationFiles, f => f.path);
+
   return { ...themeConfig,
     navbar: translateNavbar(themeConfig.navbar, translationFilesMap.navbar.content),
     footer: themeConfig.footer ? translateFooter(themeConfig.footer, translationFilesMap.footer.content) : undefined

package/lib/validateThemeConfig.js

@@ -58,8 +58,8 @@ const NavbarItemPosition = _utilsValidation.Joi.string().equal('left', 'right').
 const NavbarItemBaseSchema = _utilsValidation.Joi.object({
   label: _utilsValidation.Joi.string(),
   className: _utilsValidation.Joi.string()
-}) // We allow any unknown attributes on the links
-// (users may need additional attributes like target, aria-role, data-customAttribute...)
+}) // We allow any unknown attributes on the links (users may need additional
+// attributes like target, aria-role, data-customAttribute...)
 .unknown();
 
 const DefaultNavbarItemSchema = NavbarItemBaseSchema.append({
@@ -108,6 +108,9 @@ const DropdownSubitemSchema = _utilsValidation.Joi.object({
   }, {
     is: itemWithType('doc'),
     then: DocItemSchema
+  }, {
+    is: itemWithType('docSidebar'),
+    then: DocSidebarItemSchema
   }, {
     is: itemWithType(undefined),
     then: DefaultNavbarItemSchema
@@ -208,8 +211,8 @@ const FooterLinkItemSchema = _utilsValidation.Joi.object({
   href: _utilsValidation.URISchema,
   html: _utilsValidation.Joi.string(),
   label: _utilsValidation.Joi.string()
-}).xor('to', 'href', 'html').with('to', 'label').with('href', 'label').nand('html', 'label') // We allow any unknown attributes on the links
-// (users may need additional attributes like target, aria-role, data-customAttribute...)
+}).xor('to', 'href', 'html').with('to', 'label').with('href', 'label').nand('html', 'label') // We allow any unknown attributes on the links (users may need additional
+// attributes like target, aria-role, data-customAttribute...)
 .unknown();
 
 const CustomCssSchema = _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.array().items(_utilsValidation.Joi.string().required()), _utilsValidation.Joi.string().required()).optional();

package/lib-next/theme/AnnouncementBar/index.js

@@ -10,8 +10,7 @@ import {useThemeConfig, useAnnouncementBar} from '@docusaurus/theme-common';
 import {translate} from '@docusaurus/Translate';
 import IconClose from '@theme/IconClose';
 import styles from './styles.module.css';
-
-function AnnouncementBar() {
+export default function AnnouncementBar() {
   const {isActive, close} = useAnnouncementBar();
   const {announcementBar} = useThemeConfig();
 
@@ -52,5 +51,3 @@ function AnnouncementBar() {
     </div>
   );
 }
-
-export default AnnouncementBar;

package/lib-next/theme/BackToTopButton/index.js

@@ -17,7 +17,9 @@ const threshold = 300; // Not all have support for smooth scrolling (particularl
 // TODO proper detection is currently unreliable!
 // see https://github.com/wessberg/scroll-behavior-polyfill/issues/16
 
-const SupportsNativeSmoothScrolling = false; // const SupportsNativeSmoothScrolling = ExecutionEnvironment.canUseDOM && 'scrollBehavior' in document.documentElement.style;
+const SupportsNativeSmoothScrolling = false; // const SupportsNativeSmoothScrolling =
+//   ExecutionEnvironment.canUseDOM &&
+//   'scrollBehavior' in document.documentElement.style;
 
 function smoothScrollTopNative() {
   window.scrollTo({
@@ -41,8 +43,8 @@ function smoothScrollTopPolyfill() {
     }
   }
 
-  rafRecursion(); // Break the recursion
-  // Prevents the user from "fighting" against that recursion producing a weird UX
+  rafRecursion(); // Break the recursion. Prevents the user from "fighting" against that
+  // recursion producing a weird UX
 
   return () => raf && cancelAnimationFrame(raf);
 }
@@ -62,7 +64,7 @@ function useSmoothScrollToTop() {
   };
 }
 
-function BackToTopButton() {
+export default function BackToTopButton() {
   const [show, setShow] = useState(false);
   const isFocusedAnchor = useRef(false);
   const {smoothScrollTop, cancelScrollToTop} = useSmoothScrollToTop();
@@ -127,5 +129,3 @@ function BackToTopButton() {
     />
   );
 }
-
-export default BackToTopButton;

package/lib-next/theme/BackToTopButton/styles.module.css

@@ -13,12 +13,13 @@
   background-color: var(--ifm-color-emphasis-200);
   width: 3rem;
   height: 3rem;
-  z-index: var(--ifm-z-index-fixed);
+  z-index: calc(var(--ifm-z-index-fixed) - 1);
   box-shadow: var(--ifm-global-shadow-lw);
   transition: all var(--ifm-transition-fast)
     var(--ifm-transition-timing-default);
   opacity: 0;
   transform: scale(0);
+  visibility: hidden;
 }
 
 .backToTopButton::after {
@@ -39,4 +40,5 @@
 .backToTopButtonShow {
   opacity: 1;
   transform: scale(1);
+  visibility: visible;
 }

package/lib-next/theme/BlogLayout/index.js

@@ -8,8 +8,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Layout from '@theme/Layout';
 import BlogSidebar from '@theme/BlogSidebar';
-
-function BlogLayout(props) {
+export default function BlogLayout(props) {
   const {sidebar, toc, children, ...layoutProps} = props;
   const hasSidebar = sidebar && sidebar.items.length > 0;
   return (
@@ -36,5 +35,3 @@ function BlogLayout(props) {
     </Layout>
   );
 }
-
-export default BlogLayout;

package/lib-next/theme/BlogListPage/index.js

@@ -10,8 +10,7 @@ import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogListPaginator from '@theme/BlogListPaginator';
 import {ThemeClassNames} from '@docusaurus/theme-common';
-
-function BlogListPage(props) {
+export default function BlogListPage(props) {
   const {metadata, items, sidebar} = props;
   const {
     siteConfig: {title: siteTitle},
@@ -44,5 +43,3 @@ function BlogListPage(props) {
     </BlogLayout>
   );
 }
-
-export default BlogListPage;

package/lib-next/theme/BlogListPaginator/index.js

@@ -7,8 +7,7 @@
 import React from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
 import PaginatorNavLink from '@theme/PaginatorNavLink';
-
-function BlogListPaginator(props) {
+export default function BlogListPaginator(props) {
   const {metadata} = props;
   const {previousPage, nextPage} = metadata;
   return (
@@ -50,5 +49,3 @@ function BlogListPaginator(props) {
     </nav>
   );
 }
-
-export default BlogListPaginator;

package/lib-next/theme/BlogPostAuthor/index.js

@@ -7,8 +7,7 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
-
-function BlogPostAuthor({author}) {
+export default function BlogPostAuthor({author}) {
   const {name, title, url, imageURL} = author;
   return (
     <div className="avatar margin-bottom--sm">
@@ -18,29 +17,24 @@ function BlogPostAuthor({author}) {
         </Link>
       )}
 
-      {
-        // Note: only legacy author front matter allow empty name (not frontMatter.authors)
-        name && (
-          <div
-            className="avatar__intro"
-            itemProp="author"
-            itemScope
-            itemType="https://schema.org/Person">
-            <div className="avatar__name">
-              <Link href={url} itemProp="url">
-                <span itemProp="name">{name}</span>
-              </Link>
-            </div>
-            {title && (
-              <small className="avatar__subtitle" itemProp="description">
-                {title}
-              </small>
-            )}
+      {name && (
+        <div
+          className="avatar__intro"
+          itemProp="author"
+          itemScope
+          itemType="https://schema.org/Person">
+          <div className="avatar__name">
+            <Link href={url} itemProp="url">
+              <span itemProp="name">{name}</span>
+            </Link>
           </div>
-        )
-      }
+          {title && (
+            <small className="avatar__subtitle" itemProp="description">
+              {title}
+            </small>
+          )}
+        </div>
+      )}
     </div>
   );
 }
-
-export default BlogPostAuthor;

package/lib-next/theme/BlogPostItem/index.js

@@ -39,7 +39,7 @@ function useReadingTimePlural() {
   };
 }
 
-function BlogPostItem(props) {
+export default function BlogPostItem(props) {
   const readingTimePlural = useReadingTimePlural();
   const {withBaseUrl} = useBaseUrlUtils();
   const {
@@ -138,7 +138,17 @@ function BlogPostItem(props) {
               })}>
               <Link
                 to={metadata.permalink}
-                aria-label={`Read more about ${title}`}>
+                aria-label={translate(
+                  {
+                    message: 'Read more about {title}',
+                    id: 'theme.blog.post.readMoreLabel',
+                    description:
+                      'The ARIA label for the link to full blog posts from excerpts',
+                  },
+                  {
+                    title,
+                  },
+                )}>
                 <b>
                   <Translate
                     id="theme.blog.post.readMore"
@@ -154,5 +164,3 @@ function BlogPostItem(props) {
     </article>
   );
 }
-
-export default BlogPostItem;

package/lib-next/theme/BlogPostPage/index.js

@@ -11,8 +11,7 @@ import BlogPostItem from '@theme/BlogPostItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import TOC from '@theme/TOC';
-
-function BlogPostPage(props) {
+export default function BlogPostPage(props) {
   const {content: BlogPostContents, sidebar} = props;
   const {assets, metadata} = BlogPostContents;
   const {
@@ -48,8 +47,9 @@ function BlogPostPage(props) {
           />
         ) : undefined
       }>
-      <Seo // TODO refactor needed: it's a bit annoying but Seo MUST be inside BlogLayout
-        // otherwise  default image (set by BlogLayout) would shadow the custom blog post image
+      <Seo // TODO refactor needed: it's a bit annoying but Seo MUST be inside
+        // BlogLayout, otherwise default image (set by BlogLayout) would shadow
+        // the custom blog post image
         title={title}
         description={description}
         keywords={keywords}
@@ -89,5 +89,3 @@ function BlogPostPage(props) {
     </BlogLayout>
   );
 }
-
-export default BlogPostPage;

package/lib-next/theme/BlogPostPaginator/index.js

@@ -7,8 +7,7 @@
 import React from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
 import PaginatorNavLink from '@theme/PaginatorNavLink';
-
-function BlogPostPaginator(props) {
+export default function BlogPostPaginator(props) {
   const {nextItem, prevItem} = props;
   return (
     <nav
@@ -49,5 +48,3 @@ function BlogPostPaginator(props) {
     </nav>
   );
 }
-
-export default BlogPostPaginator;

package/lib-next/theme/BlogTagsListPage/index.js

@@ -11,8 +11,7 @@ import {
   ThemeClassNames,
   translateTagsPageTitle,
 } from '@docusaurus/theme-common';
-
-function BlogTagsListPage(props) {
+export default function BlogTagsListPage(props) {
   const {tags, sidebar} = props;
   const title = translateTagsPageTitle();
   return (
@@ -30,5 +29,3 @@ function BlogTagsListPage(props) {
     </BlogLayout>
   );
 }
-
-export default BlogTagsListPage;

package/lib-next/theme/BlogTagsPostsPage/index.js

@@ -9,7 +9,8 @@ import Link from '@docusaurus/Link';
 import BlogLayout from '@theme/BlogLayout';
 import BlogPostItem from '@theme/BlogPostItem';
 import Translate, {translate} from '@docusaurus/Translate';
-import {ThemeClassNames, usePluralForm} from '@docusaurus/theme-common'; // Very simple pluralization: probably good enough for now
+import {ThemeClassNames, usePluralForm} from '@docusaurus/theme-common';
+import BlogListPaginator from '@theme/BlogListPaginator'; // Very simple pluralization: probably good enough for now
 
 function useBlogPostsPlural() {
   const {selectMessage} = usePluralForm();
@@ -31,7 +32,7 @@ function useBlogPostsPlural() {
 }
 
 export default function BlogTagsPostsPage(props) {
-  const {metadata, items, sidebar} = props;
+  const {metadata, items, sidebar, listMetadata} = props;
   const {allTagsPath, name: tagName, count} = metadata;
   const blogPostsPlural = useBlogPostsPlural();
   const title = translate(
@@ -77,6 +78,7 @@ export default function BlogTagsPostsPage(props) {
           <BlogPostContent />
         </BlogPostItem>
       ))}
+      <BlogListPaginator metadata={listMetadata} />
     </BlogLayout>
   );
 }

package/lib-next/theme/CodeBlock/index.js

@@ -43,7 +43,8 @@ export default function CodeBlock({
 
   const codeBlockTitle = parseCodeBlockTitle(metastring) || title;
   const prismTheme = usePrismTheme(); // <pre> tags in markdown map to CodeBlocks and they may contain JSX children.
-  // When the children is not a simple string, we just return a styled block without actually highlighting.
+  // When the children is not a simple string, we just return a styled block
+  // without actually highlighting.
 
   if (React.Children.toArray(children).some((el) => isValidElement(el))) {
     return (

package/lib-next/theme/Details/index.js

@@ -7,7 +7,8 @@
 import React from 'react';
 import clsx from 'clsx';
 import {Details as DetailsGeneric} from '@docusaurus/theme-common';
-import styles from './styles.module.css'; // Should we have a custom details/summary comp in Infima instead of reusing alert classes?
+import styles from './styles.module.css'; // Should we have a custom details/summary comp in Infima instead of reusing
+// alert classes?
 
 const InfimaClasses = 'alert alert--info';
 export default function Details({...props}) {

package/lib-next/theme/DocBreadcrumbs/index.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import {
+  ThemeClassNames,
+  useSidebarBreadcrumbs,
+  useHomePageRoute,
+} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl'; // TODO move to design system folder
+
+function BreadcrumbsItemLink({children, href}) {
+  const className = clsx('breadcrumbs__link', styles.breadcrumbsItemLink);
+  return href ? (
+    <Link className={className} href={href}>
+      {children}
+    </Link>
+  ) : (
+    <span className={className}>{children}</span>
+  );
+} // TODO move to design system folder
+
+function BreadcrumbsItem({children, active}) {
+  return (
+    <li
+      className={clsx('breadcrumbs__item', {
+        'breadcrumbs__item--active': active,
+      })}>
+      {children}
+    </li>
+  );
+}
+
+function HomeBreadcrumbItem() {
+  const homeHref = useBaseUrl('/');
+  return (
+    <BreadcrumbsItem>
+      <BreadcrumbsItemLink href={homeHref}>🏠</BreadcrumbsItemLink>
+    </BreadcrumbsItem>
+  );
+}
+
+export default function DocBreadcrumbs() {
+  const breadcrumbs = useSidebarBreadcrumbs();
+  const homePageRoute = useHomePageRoute();
+
+  if (!breadcrumbs) {
+    return null;
+  }
+
+  return (
+    <nav
+      className={clsx(
+        ThemeClassNames.docs.docBreadcrumbs,
+        styles.breadcrumbsContainer,
+      )}
+      aria-label="breadcrumbs">
+      <ul className="breadcrumbs">
+        {homePageRoute && <HomeBreadcrumbItem />}
+        {breadcrumbs.map((item, idx) => (
+          <BreadcrumbsItem key={idx} active={idx === breadcrumbs.length - 1}>
+            <BreadcrumbsItemLink href={item.href}>
+              {item.label}
+            </BreadcrumbsItemLink>
+          </BreadcrumbsItem>
+        ))}
+      </ul>
+    </nav>
+  );
+}

package/lib-next/theme/DocBreadcrumbs/styles.module.css

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.breadcrumbsContainer {
+  margin-bottom: 0.4rem;
+}
+
+.breadcrumbsItemLink {
+  --ifm-breadcrumb-size-multiplier: 0.7 !important;
+  margin-bottom: 0.4rem;
+  background: var(--ifm-color-gray-100);
+}
+
+html[data-theme='dark'] .breadcrumbsItemLink {
+  background-color: var(--ifm-color-gray-900);
+}
+
+@media (min-width: 997px) {
+  .breadcrumbsItemLink {
+    --ifm-breadcrumb-size-multiplier: 0.8;
+  }
+}

package/lib-next/theme/DocCard/index.js

@@ -10,6 +10,7 @@ import {findFirstCategoryLink, useDocById} from '@docusaurus/theme-common';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 import isInternalUrl from '@docusaurus/isInternalUrl';
+import {translate} from '@docusaurus/Translate';
 
 function CardContainer({href, children}) {
   const className = clsx(
@@ -48,7 +49,17 @@ function CardCategory({item}) {
       href={href}
       icon="🗃️"
       title={item.label}
-      description={`${item.items.length} items`}
+      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,
+        },
+      )}
     />
   );
 }

package/lib-next/theme/DocCard/styles.module.css

@@ -24,7 +24,7 @@
   box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
 }
 
-html[data-theme='dark'] .cardContainer.cardContainerLink:hover {
+[data-theme='dark'] .cardContainer.cardContainerLink:hover {
   --ifm-card-background-color: #2d2d2d; /* original, non-hovered color is #242526 */
 }
 

package/lib-next/theme/DocCategoryGeneratedIndexPage/index.js

@@ -11,6 +11,7 @@ import DocPaginator from '@theme/DocPaginator';
 import Seo from '@theme/Seo';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
+import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import Heading from '@theme/Heading';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
@@ -28,6 +29,7 @@ export default function DocCategoryGeneratedIndexPage({
       />
       <div className={styles.generatedIndexPage}>
         <DocVersionBanner />
+        <DocBreadcrumbs />
         <DocVersionBadge />
         <header>
           <Heading as="h1" className={styles.title}>