Skip to content

Commit

Permalink
Fix broken build
Browse files Browse the repository at this point in the history
  • Loading branch information
Andrzej Broński committed Jul 18, 2023
1 parent ddd52bb commit bbcc298
Showing 1 changed file with 104 additions and 124 deletions.
228 changes: 104 additions & 124 deletions src/theme/DocBreadcrumbs/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,144 +9,124 @@
* LICENSE file in the root directory of this source tree.
*/

import React, {type ReactNode} from 'react';
import clsx from 'clsx';
import {ThemeClassNames} from '@docusaurus/theme-common';
import {
useSidebarBreadcrumbs,
useHomePageRoute,
useDoc,
} from '@docusaurus/theme-common/internal';
import Link from '@docusaurus/Link';
import {translate} from '@docusaurus/Translate';
import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home';
import { type PropSidebarBreadcrumbsItem } from '@docusaurus/plugin-content-docs';
import React, { ReactNode } from "react";
import clsx from "clsx";
import { ThemeClassNames } from "@docusaurus/theme-common";
import { useSidebarBreadcrumbs, useHomePageRoute, useDoc } from "@docusaurus/theme-common/internal";
import Link from "@docusaurus/Link";
import { translate } from "@docusaurus/Translate";
import HomeBreadcrumbItem from "@theme/DocBreadcrumbs/Items/Home";
import { PropSidebarBreadcrumbsItem } from "@docusaurus/plugin-content-docs";

import styles from './styles.module.css';
import styles from "./styles.module.css";

// TODO move to design system folder
function BreadcrumbsItemLink({
children,
href,
isLast,
}: {
children: ReactNode;
href: string | undefined;
isLast: boolean;
}): JSX.Element {
const className = 'breadcrumbs__link';
if (isLast) {
return (
<span className={className} itemProp="name">
{children}
</span>
function BreadcrumbsItemLink({ children, href, isLast }: { children: ReactNode; href: string | undefined; isLast: boolean }): JSX.Element {
const className = "breadcrumbs__link";
if (isLast) {
return (
<span className={className} itemProp="name">
{children}
</span>
);
}
return href ? (
<Link className={className} href={href} itemProp="item">
<span itemProp="name">{children}</span>
</Link>
) : (
// TODO Google search console doesn't like breadcrumb items without href.
// The schema doesn't seem to require `id` for each `item`, although Google
// insist to infer one, even if it's invalid. Removing `itemProp="item
// name"` for now, since I don't know how to properly fix it.
// See https://github.com/facebook/docusaurus/issues/7241
<span className={className}>{children}</span>
);
}
return href ? (
<Link className={className} href={href} itemProp="item">
<span itemProp="name">{children}</span>
</Link>
) : (
// TODO Google search console doesn't like breadcrumb items without href.
// The schema doesn't seem to require `id` for each `item`, although Google
// insist to infer one, even if it's invalid. Removing `itemProp="item
// name"` for now, since I don't know how to properly fix it.
// See https://github.com/facebook/docusaurus/issues/7241
<span className={className}>{children}</span>
);
}

// TODO move to design system folder
function BreadcrumbsItem({
children,
active,
index,
addMicrodata,
children,
active,
index,
addMicrodata,
}: {
children: ReactNode;
active?: boolean;
index: number;
addMicrodata: boolean;
children: ReactNode;
active?: boolean;
index: number;
addMicrodata: boolean;
}): JSX.Element {
return (
<li
{...(addMicrodata && {
itemScope: true,
itemProp: 'itemListElement',
itemType: 'https://schema.org/ListItem',
})}
className={clsx('breadcrumbs__item', {
'breadcrumbs__item--active': active,
})}>
{children}
<meta itemProp="position" content={String(index + 1)} />
</li>
);
return (
<li
{...(addMicrodata && {
itemScope: true,
itemProp: "itemListElement",
itemType: "https://schema.org/ListItem",
})}
className={clsx("breadcrumbs__item", {
"breadcrumbs__item--active": active,
})}
>
{children}
<meta itemProp="position" content={String(index + 1)} />
</li>
);
}

export default function DocBreadcrumbs(): JSX.Element | null {
let breadcrumbs = useSidebarBreadcrumbs();
const homePageRoute = useHomePageRoute();
const { metadata } = useDoc();
let breadcrumbs = useSidebarBreadcrumbs();
const homePageRoute = useHomePageRoute();
const { metadata } = useDoc();

if (!breadcrumbs) {
return null;
}
if (!breadcrumbs) {
return null;
}

// Workaround for https://github.com/facebook/docusaurus/issues/6953.
//
// NOTE: Sidebar is not connected directly with navbar items, so we
// make simple assumption that for sidebar named "foo_bar" we get:
// - label: "Foo_bar"
// - URL: "/foo_bar"
// We hope it points to the correct navbar item.
//
const sidebar = metadata.sidebar;
if (sidebar !== undefined) {
const label = sidebar.charAt(0).toUpperCase() + sidebar.slice(1);
const href = "/" + sidebar;
const topLevelBreadcrumb: PropSidebarBreadcrumbsItem = {
collapsed: true,
collapsible: true,
href,
items: [],
label,
type: "category",
};
breadcrumbs.unshift(topLevelBreadcrumb);
}
// Workaround for https://github.com/facebook/docusaurus/issues/6953.
//
// NOTE: Sidebar is not connected directly with navbar items, so we
// make simple assumption that for sidebar named "foo_bar" we get:
// - label: "Foo_bar"
// - URL: "/foo_bar"
// We hope it points to the correct navbar item.
//
const sidebar = metadata.sidebar;
if (sidebar !== undefined) {
const label = sidebar.charAt(0).toUpperCase() + sidebar.slice(1);
const href = "/" + sidebar;
const topLevelBreadcrumb: PropSidebarBreadcrumbsItem = {
collapsed: true,
collapsible: true,
href,
items: [],
label,
type: "category",
};
breadcrumbs.unshift(topLevelBreadcrumb);
}

return (
<nav
className={clsx(
ThemeClassNames.docs.docBreadcrumbs,
styles.breadcrumbsContainer,
)}
aria-label={translate({
id: 'theme.docs.breadcrumbs.navAriaLabel',
message: 'Breadcrumbs',
description: 'The ARIA label for the breadcrumbs',
})}>
<ul
className="breadcrumbs"
itemScope
itemType="https://schema.org/BreadcrumbList">
{homePageRoute && <HomeBreadcrumbItem />}
{breadcrumbs.map((item, idx) => {
const isLast = idx === breadcrumbs.length - 1;
return (
<BreadcrumbsItem
key={idx}
active={isLast}
index={idx}
addMicrodata={!!item.href}>
<BreadcrumbsItemLink href={item.href} isLast={isLast}>
{item.label}
</BreadcrumbsItemLink>
</BreadcrumbsItem>
);
})}
</ul>
</nav>
);
return (
<nav
className={clsx(ThemeClassNames.docs.docBreadcrumbs, styles.breadcrumbsContainer)}
aria-label={translate({
id: "theme.docs.breadcrumbs.navAriaLabel",
message: "Breadcrumbs",
description: "The ARIA label for the breadcrumbs",
})}
>
<ul className="breadcrumbs" itemScope itemType="https://schema.org/BreadcrumbList">
{homePageRoute && <HomeBreadcrumbItem />}
{breadcrumbs.map((item, idx) => {
const isLast = idx === breadcrumbs.length - 1;
return (
<BreadcrumbsItem key={idx} active={isLast} index={idx} addMicrodata={!!item.href}>
<BreadcrumbsItemLink href={item.href} isLast={isLast}>
{item.label}
</BreadcrumbsItemLink>
</BreadcrumbsItem>
);
})}
</ul>
</nav>
);
}

0 comments on commit bbcc298

Please sign in to comment.