fix: Simplify DocBreadcrumbs so we don't need the swizzle warning comment (#715)

Author: vkarpov15

packages/docs/sidebars.js

@@ -39,12 +39,13 @@ function nestMarkdownFiles() {
       } else {
         let item = items.find(({ label }) => label === category);
         if (item === undefined) {
+          const anchor = category.toLowerCase() === 'enums' ? 'enumerations' : category.toLowerCase();
           item = {
             type: 'category',
             label: category,
             items: [],
             customProps: {
-              breadcrumbLink: `/api/namespaces/${parts[0]}#${category.toLowerCase()}`,
+              breadcrumbLink: `/api/namespaces/${parts[0]}#${anchor}`,
             },
           };
           items.push(item);

packages/docs/src/theme/DocBreadcrumbs/index.js

@@ -1,65 +1,6 @@
-// Swizzled from facebook/docusaurus@44ebe73e506fb3e09540c7650a6b2db0a1a435a0
-// To get updated version:
-// 1. `cd packages/docs`
-// 2. `npm run swizzle`
-// 3. Select `@docusaurus/theme-classic`
-// 4. Select `DocBreadcrumbs (Unsafe)`
-// 5. Select `Eject (Unsafe)`
-// Only change is adding getHrefFromItem
-
-/**
- * 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 { useSidebarBreadcrumbs, useHomePageRoute } from '@docusaurus/theme-common';
 import Link from '@docusaurus/Link';
-import useBaseUrl from '@docusaurus/useBaseUrl'; // TODO move to design system folder
-
-function BreadcrumbsItemLink({ children, href }) {
-  const className = 'breadcrumbs__link';
-  return href ? (
-    <Link className={className} href={href} itemProp="item">
-      <span itemProp="name">{children}</span>
-    </Link>
-  ) : (
-    <span className={className} itemProp="item name">
-      {children}
-    </span>
-  );
-} // TODO move to design system folder
-
-function BreadcrumbsItem({ children, active, index }) {
-  return (
-    <li
-      itemScope
-      itemProp="itemListElement"
-      itemType="https://schema.org/ListItem"
-      className={clsx('breadcrumbs__item', {
-        'breadcrumbs__item--active': active,
-      })}
-    >
-      {children}
-      <meta itemProp="position" content={String(index + 1)} />
-    </li>
-  );
-}
-
-function HomeBreadcrumbItem() {
-  const homeHref = useBaseUrl('/');
-  return (
-    <li className="breadcrumbs__item">
-      <Link className={clsx('breadcrumbs__link', styles.breadcrumbsItemLink)} href={homeHref}>
-        🏠
-      </Link>
-    </li>
-  );
-}
 
 export default function DocBreadcrumbs() {
   const breadcrumbs = useSidebarBreadcrumbs();
@@ -70,21 +11,33 @@ export default function DocBreadcrumbs() {
   }
 
   return (
-    <nav className={clsx(ThemeClassNames.docs.docBreadcrumbs, styles.breadcrumbsContainer)} aria-label="breadcrumbs">
-      <ul className="breadcrumbs" itemScope itemType="https://schema.org/BreadcrumbList">
-        {homePageRoute && <HomeBreadcrumbItem />}
+    <nav aria-label="breadcrumbs">
+      <ul className="breadcrumbs">
+        <li className="breadcrumbs__item">
+          <Link className="breadcrumbs__link" href={homePageRoute.path}>
+            🏠
+          </Link>
+        </li>
         {breadcrumbs.map((item, idx) => (
-          <BreadcrumbsItem key={idx} active={idx === breadcrumbs.length - 1} index={idx}>
-            <BreadcrumbsItemLink href={idx < breadcrumbs.length - 1 ? getHrefFromItem(item) : undefined}>
-              {item.label}
-            </BreadcrumbsItemLink>
-          </BreadcrumbsItem>
+          <li key={idx} className={getItemClassNames(breadcrumbs, idx)}>
+            <Link className="breadcrumbs__link" href={getHrefFromItem(item)}>
+              <span>{item.label}</span>
+            </Link>
+          </li>
         ))}
       </ul>
     </nav>
   );
 }
 
+function getItemClassNames(breadcrumbs, idx) {
+  const classes = ['breadcrumbs__item'];
+  if (idx === breadcrumbs.length - 1) {
+    classes.push('breadcrumbs__item--active');
+  }
+  return classes.join(' ');
+}
+
 function getHrefFromItem(item) {
   return item.customProps?.breadcrumbLink || item.href;
 }