Yangshun Tay
2 years ago
parent
41de7b8a19
commit
bbefdc4bf0
@ -0,0 +1,47 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
import {ThemeClassNames} from '@docusaurus/theme-common';
|
||||||
|
import {useDoc} from '@docusaurus/theme-common/internal';
|
||||||
|
import Heading from '@theme/Heading';
|
||||||
|
import MDXContent from '@theme/MDXContent';
|
||||||
|
/**
|
||||||
|
Title can be declared inside md content or declared through
|
||||||
|
front matter and added manually. To make both cases consistent,
|
||||||
|
the added title is added under the same div.markdown block
|
||||||
|
See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
|
||||||
|
|
||||||
|
We render a "synthetic title" if:
|
||||||
|
- user doesn't ask to hide it with front matter
|
||||||
|
- the markdown content does not already contain a top-level h1 heading
|
||||||
|
*/
|
||||||
|
function useSyntheticTitle() {
|
||||||
|
const {metadata, frontMatter, contentTitle} = useDoc();
|
||||||
|
const shouldRender =
|
||||||
|
!frontMatter.hide_title && typeof contentTitle === 'undefined';
|
||||||
|
if (!shouldRender) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return metadata.title;
|
||||||
|
}
|
||||||
|
export default function DocItemContent({children}) {
|
||||||
|
const syntheticTitle = useSyntheticTitle();
|
||||||
|
return (
|
||||||
|
<div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
|
||||||
|
{syntheticTitle && (
|
||||||
|
<header>
|
||||||
|
<Heading as="h1">{syntheticTitle}</Heading>
|
||||||
|
</header>
|
||||||
|
)}
|
||||||
|
<div className="margin-bottom--lg">
|
||||||
|
<iframe
|
||||||
|
src="https://ghbtns.com/github-btn.html?user=yangshun&repo=tech-interview-handbook&type=star&count=true&size=large"
|
||||||
|
frameBorder={0}
|
||||||
|
width={160}
|
||||||
|
height={30}
|
||||||
|
title="GitHub Stars"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<MDXContent>{children}</MDXContent>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
import {useWindowSize} from '@docusaurus/theme-common';
|
||||||
|
import {useDoc} from '@docusaurus/theme-common/internal';
|
||||||
|
import DocItemPaginator from '@theme/DocItem/Paginator';
|
||||||
|
import DocVersionBanner from '@theme/DocVersionBanner';
|
||||||
|
import DocVersionBadge from '@theme/DocVersionBadge';
|
||||||
|
import DocItemFooter from '@theme/DocItem/Footer';
|
||||||
|
import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
|
||||||
|
import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
|
||||||
|
import DocItemContent from '@theme/DocItem/Content';
|
||||||
|
import DocBreadcrumbs from '@theme/DocBreadcrumbs';
|
||||||
|
import styles from './styles.module.css';
|
||||||
|
import SidebarAd from '../../../components/SidebarAd';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Decide if the toc should be rendered, on mobile or desktop viewports
|
||||||
|
*/
|
||||||
|
function useDocTOC() {
|
||||||
|
const {frontMatter, toc} = useDoc();
|
||||||
|
const windowSize = useWindowSize();
|
||||||
|
const hidden = frontMatter.hide_table_of_contents;
|
||||||
|
const canRender = !hidden && toc.length > 0;
|
||||||
|
const mobile = canRender ? <DocItemTOCMobile /> : undefined;
|
||||||
|
const desktop =
|
||||||
|
canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
|
||||||
|
<DocItemTOCDesktop />
|
||||||
|
) : undefined;
|
||||||
|
return {
|
||||||
|
hidden,
|
||||||
|
mobile,
|
||||||
|
desktop,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
export default function DocItemLayout({children}) {
|
||||||
|
const docTOC = useDocTOC();
|
||||||
|
return (
|
||||||
|
<div className="row">
|
||||||
|
<div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
|
||||||
|
<DocVersionBanner />
|
||||||
|
<div className={styles.docItemContainer}>
|
||||||
|
<article>
|
||||||
|
<DocBreadcrumbs />
|
||||||
|
<DocVersionBadge />
|
||||||
|
{docTOC.mobile}
|
||||||
|
<DocItemContent>{children}</DocItemContent>
|
||||||
|
<DocItemFooter />
|
||||||
|
</article>
|
||||||
|
<DocItemPaginator />
|
||||||
|
{/* TIH: Add sidebar */}
|
||||||
|
<div className="margin-top--md">
|
||||||
|
<SidebarAd position="docs_bottom" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
/* TIH: Add horizontal padding */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.docItemContainer {
|
||||||
|
padding: 0 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.docItemContainer header + *,
|
||||||
|
.docItemContainer article > *:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 997px) {
|
||||||
|
.docItemCol {
|
||||||
|
max-width: 75% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,138 +0,0 @@
|
|||||||
// Swizzled to make TOC column wider.
|
|
||||||
import React from 'react';
|
|
||||||
import clsx from 'clsx';
|
|
||||||
import DocPaginator from '@theme/DocPaginator';
|
|
||||||
import DocVersionBanner from '@theme/DocVersionBanner';
|
|
||||||
import DocVersionBadge from '@theme/DocVersionBadge';
|
|
||||||
import DocItemFooter from '@theme/DocItemFooter';
|
|
||||||
import TOC from '@theme/TOC';
|
|
||||||
import TOCCollapsible from '@theme/TOCCollapsible';
|
|
||||||
import Heading from '@theme/Heading';
|
|
||||||
import styles from './styles.module.css';
|
|
||||||
import {
|
|
||||||
PageMetadata,
|
|
||||||
HtmlClassNameProvider,
|
|
||||||
ThemeClassNames,
|
|
||||||
useWindowSize,
|
|
||||||
} from '@docusaurus/theme-common';
|
|
||||||
import DocBreadcrumbs from '@theme/DocBreadcrumbs';
|
|
||||||
import MDXContent from '@theme/MDXContent';
|
|
||||||
|
|
||||||
import SidebarAd from '../../components/SidebarAd';
|
|
||||||
|
|
||||||
function DocItemMetadata(props) {
|
|
||||||
const {content: DocContent} = props;
|
|
||||||
const {metadata, frontMatter, assets} = DocContent;
|
|
||||||
const {keywords} = frontMatter;
|
|
||||||
const {description, title} = metadata;
|
|
||||||
const image = assets.image ?? frontMatter.image;
|
|
||||||
return (
|
|
||||||
<PageMetadata
|
|
||||||
{...{
|
|
||||||
title,
|
|
||||||
description,
|
|
||||||
keywords,
|
|
||||||
image,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function DocItemContent(props) {
|
|
||||||
const {content: DocContent} = props;
|
|
||||||
const {metadata, frontMatter} = DocContent;
|
|
||||||
const {
|
|
||||||
hide_title: hideTitle,
|
|
||||||
hide_table_of_contents: hideTableOfContents,
|
|
||||||
toc_min_heading_level: tocMinHeadingLevel,
|
|
||||||
toc_max_heading_level: tocMaxHeadingLevel,
|
|
||||||
} = frontMatter;
|
|
||||||
const {title} = metadata; // We only add a title if:
|
|
||||||
// - user asks to hide it with front matter
|
|
||||||
// - the markdown content does not already contain a top-level h1 heading
|
|
||||||
|
|
||||||
const shouldAddTitle =
|
|
||||||
!hideTitle && typeof DocContent.contentTitle === 'undefined';
|
|
||||||
const windowSize = useWindowSize();
|
|
||||||
const canRenderTOC =
|
|
||||||
!hideTableOfContents && DocContent.toc && DocContent.toc.length > 0;
|
|
||||||
const renderTocDesktop =
|
|
||||||
canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
|
|
||||||
return (
|
|
||||||
<div className="row">
|
|
||||||
<div className={clsx('col', !hideTableOfContents && styles.docItemCol)}>
|
|
||||||
<DocVersionBanner />
|
|
||||||
<div className={styles.docItemContainer}>
|
|
||||||
<article>
|
|
||||||
<DocBreadcrumbs />
|
|
||||||
<DocVersionBadge />
|
|
||||||
|
|
||||||
{canRenderTOC && (
|
|
||||||
<TOCCollapsible
|
|
||||||
toc={DocContent.toc}
|
|
||||||
minHeadingLevel={tocMinHeadingLevel}
|
|
||||||
maxHeadingLevel={tocMaxHeadingLevel}
|
|
||||||
className={clsx(
|
|
||||||
ThemeClassNames.docs.docTocMobile,
|
|
||||||
styles.tocMobile,
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
|
|
||||||
{/*
|
|
||||||
Title can be declared inside md content or declared through
|
|
||||||
front matter and added manually. To make both cases consistent,
|
|
||||||
the added title is added under the same div.markdown block
|
|
||||||
See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
|
|
||||||
*/}
|
|
||||||
{shouldAddTitle && (
|
|
||||||
<header>
|
|
||||||
<Heading as="h1">{title}</Heading>
|
|
||||||
</header>
|
|
||||||
)}
|
|
||||||
<div className="margin-bottom--lg">
|
|
||||||
<iframe
|
|
||||||
src="https://ghbtns.com/github-btn.html?user=yangshun&repo=tech-interview-handbook&type=star&count=true&size=large"
|
|
||||||
frameBorder={0}
|
|
||||||
width={160}
|
|
||||||
height={30}
|
|
||||||
title="GitHub Stars"
|
|
||||||
/>
|
|
||||||
<DocItemFooter {...props} />
|
|
||||||
</div>
|
|
||||||
<MDXContent>
|
|
||||||
<DocContent />
|
|
||||||
</MDXContent>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<DocPaginator previous={metadata.previous} next={metadata.next} />
|
|
||||||
<div className="margin-top--md">
|
|
||||||
<SidebarAd position="docs_bottom" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{renderTocDesktop && (
|
|
||||||
<div className="col col--3">
|
|
||||||
<TOC
|
|
||||||
toc={DocContent.toc}
|
|
||||||
minHeadingLevel={tocMinHeadingLevel}
|
|
||||||
maxHeadingLevel={tocMaxHeadingLevel}
|
|
||||||
className={ThemeClassNames.docs.docTocDesktop}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function DocItem(props) {
|
|
||||||
const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
|
|
||||||
return (
|
|
||||||
<HtmlClassNameProvider className={docHtmlClassName}>
|
|
||||||
<DocItemMetadata {...props} />
|
|
||||||
<DocItemContent {...props} />
|
|
||||||
</HtmlClassNameProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.docItemContainer {
|
|
||||||
padding: 0 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.docItemContainer header + *,
|
|
||||||
.docItemContainer article > *:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 997px) {
|
|
||||||
.docItemCol {
|
|
||||||
max-width: 75% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
|
|
||||||
.tocMobile {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
// Swizzled to remove the prev button.
|
|
||||||
import React from 'react';
|
|
||||||
import Translate, {translate} from '@docusaurus/Translate';
|
|
||||||
import PaginatorNavLink from '@theme/PaginatorNavLink';
|
|
||||||
|
|
||||||
function DocPaginator(props) {
|
|
||||||
const {
|
|
||||||
// previous,
|
|
||||||
next,
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<nav
|
|
||||||
className="pagination-nav docusaurus-mt-lg"
|
|
||||||
aria-label={translate({
|
|
||||||
id: 'theme.docs.paginator.navAriaLabel',
|
|
||||||
message: 'Docs pages navigation',
|
|
||||||
description: 'The ARIA label for the docs pagination',
|
|
||||||
})}>
|
|
||||||
<div className="pagination-nav__item">
|
|
||||||
{next && (
|
|
||||||
<PaginatorNavLink
|
|
||||||
hasArrow={true}
|
|
||||||
{...next}
|
|
||||||
subLabel={
|
|
||||||
<Translate
|
|
||||||
id="theme.docs.paginator.next"
|
|
||||||
description="The label used to navigate to the next doc">
|
|
||||||
Next page
|
|
||||||
</Translate>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default DocPaginator;
|
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import type { Props } from '@theme/DocSidebar/Mobile';
|
||||||
|
declare function DocSidebarMobile(props: Props): JSX.Element;
|
||||||
|
declare const _default: React.MemoExoticComponent<typeof DocSidebarMobile>;
|
||||||
|
export default _default;
|
||||||
@ -1,265 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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, {useEffect, useMemo} from 'react';
|
|
||||||
import clsx from 'clsx';
|
|
||||||
import {
|
|
||||||
isActiveSidebarItem,
|
|
||||||
usePrevious,
|
|
||||||
Collapsible,
|
|
||||||
useCollapsible,
|
|
||||||
findFirstCategoryLink,
|
|
||||||
ThemeClassNames,
|
|
||||||
useThemeConfig,
|
|
||||||
useDocSidebarItemsExpandedState,
|
|
||||||
isSamePath,
|
|
||||||
} from '@docusaurus/theme-common';
|
|
||||||
import Link from '@docusaurus/Link';
|
|
||||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
|
||||||
import {translate} from '@docusaurus/Translate';
|
|
||||||
import IconExternalLink from '@theme/IconExternalLink';
|
|
||||||
import DocSidebarItems from '@theme/DocSidebarItems';
|
|
||||||
import styles from './styles.module.css';
|
|
||||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
|
||||||
export default function DocSidebarItem({item, ...props}) {
|
|
||||||
switch (item.type) {
|
|
||||||
case 'category':
|
|
||||||
return <DocSidebarItemCategory item={item} {...props} />;
|
|
||||||
|
|
||||||
case 'html':
|
|
||||||
return <DocSidebarItemHtml item={item} {...props} />;
|
|
||||||
|
|
||||||
case 'link':
|
|
||||||
default:
|
|
||||||
return <DocSidebarItemLink item={item} {...props} />;
|
|
||||||
}
|
|
||||||
} // If we navigate to a category and it becomes active, it should automatically
|
|
||||||
// expand itself
|
|
||||||
|
|
||||||
function useAutoExpandActiveCategory({isActive, collapsed, setCollapsed}) {
|
|
||||||
const wasActive = usePrevious(isActive);
|
|
||||||
useEffect(() => {
|
|
||||||
const justBecameActive = isActive && !wasActive;
|
|
||||||
|
|
||||||
if (justBecameActive && collapsed) {
|
|
||||||
setCollapsed(false);
|
|
||||||
}
|
|
||||||
}, [isActive, wasActive, collapsed, setCollapsed]);
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* When a collapsible category has no link, we still link it to its first child
|
|
||||||
* during SSR as a temporary fallback. This allows to be able to navigate inside
|
|
||||||
* the category even when JS fails to load, is delayed or simply disabled
|
|
||||||
* React hydration becomes an optional progressive enhancement
|
|
||||||
* see https://github.com/facebookincubator/infima/issues/36#issuecomment-772543188
|
|
||||||
* see https://github.com/facebook/docusaurus/issues/3030
|
|
||||||
*/
|
|
||||||
|
|
||||||
function useCategoryHrefWithSSRFallback(item) {
|
|
||||||
const isBrowser = useIsBrowser();
|
|
||||||
return useMemo(() => {
|
|
||||||
if (item.href) {
|
|
||||||
return item.href;
|
|
||||||
} // In these cases, it's not necessary to render a fallback
|
|
||||||
// We skip the "findFirstCategoryLink" computation
|
|
||||||
|
|
||||||
if (isBrowser || !item.collapsible) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
return findFirstCategoryLink(item);
|
|
||||||
}, [item, isBrowser]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function DocSidebarItemCategory({
|
|
||||||
item,
|
|
||||||
onItemClick,
|
|
||||||
activePath,
|
|
||||||
level,
|
|
||||||
index,
|
|
||||||
...props
|
|
||||||
}) {
|
|
||||||
const {items, label, collapsible, className, href} = item;
|
|
||||||
const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
|
|
||||||
const isActive = isActiveSidebarItem(item, activePath);
|
|
||||||
const isCurrentPage = isSamePath(href, activePath);
|
|
||||||
const {collapsed, setCollapsed} = useCollapsible({
|
|
||||||
// active categories are always initialized as expanded
|
|
||||||
// the default (item.collapsed) is only used for non-active categories
|
|
||||||
initialState: () => {
|
|
||||||
if (!collapsible) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return isActive ? false : item.collapsed;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
useAutoExpandActiveCategory({
|
|
||||||
isActive,
|
|
||||||
collapsed,
|
|
||||||
setCollapsed,
|
|
||||||
});
|
|
||||||
const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState();
|
|
||||||
|
|
||||||
function updateCollapsed(toCollapsed = !collapsed) {
|
|
||||||
setExpandedItem(toCollapsed ? null : index);
|
|
||||||
setCollapsed(toCollapsed);
|
|
||||||
}
|
|
||||||
|
|
||||||
const {autoCollapseSidebarCategories} = useThemeConfig();
|
|
||||||
useEffect(() => {
|
|
||||||
if (
|
|
||||||
collapsible &&
|
|
||||||
expandedItem &&
|
|
||||||
expandedItem !== index &&
|
|
||||||
autoCollapseSidebarCategories
|
|
||||||
) {
|
|
||||||
setCollapsed(true);
|
|
||||||
}
|
|
||||||
}, [
|
|
||||||
collapsible,
|
|
||||||
expandedItem,
|
|
||||||
index,
|
|
||||||
setCollapsed,
|
|
||||||
autoCollapseSidebarCategories,
|
|
||||||
]);
|
|
||||||
return (
|
|
||||||
<li
|
|
||||||
className={clsx(
|
|
||||||
ThemeClassNames.docs.docSidebarItemCategory,
|
|
||||||
ThemeClassNames.docs.docSidebarItemCategoryLevel(level),
|
|
||||||
'menu__list-item',
|
|
||||||
{
|
|
||||||
'menu__list-item--collapsed': collapsed,
|
|
||||||
},
|
|
||||||
className,
|
|
||||||
)}>
|
|
||||||
<div
|
|
||||||
className={clsx('menu__list-item-collapsible', {
|
|
||||||
'menu__list-item-collapsible--active': isCurrentPage,
|
|
||||||
})}>
|
|
||||||
<Link
|
|
||||||
className={clsx('menu__link', {
|
|
||||||
'menu__link--sublist': collapsible,
|
|
||||||
'menu__link--sublist-caret': !href && collapsible,
|
|
||||||
'menu__link--active': isActive,
|
|
||||||
})}
|
|
||||||
onClick={
|
|
||||||
collapsible
|
|
||||||
? (e) => {
|
|
||||||
onItemClick?.(item);
|
|
||||||
|
|
||||||
if (href) {
|
|
||||||
updateCollapsed(false);
|
|
||||||
} else {
|
|
||||||
e.preventDefault();
|
|
||||||
updateCollapsed();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
: () => {
|
|
||||||
onItemClick?.(item);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
aria-current={isCurrentPage ? 'page' : undefined}
|
|
||||||
aria-expanded={collapsible ? !collapsed : undefined}
|
|
||||||
href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
|
|
||||||
{...props}>
|
|
||||||
{label}
|
|
||||||
</Link>
|
|
||||||
{href && collapsible && (
|
|
||||||
<button
|
|
||||||
aria-label={translate(
|
|
||||||
{
|
|
||||||
id: 'theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel',
|
|
||||||
message: "Toggle the collapsible sidebar category '{label}'",
|
|
||||||
description:
|
|
||||||
'The ARIA label to toggle the collapsible sidebar category',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label,
|
|
||||||
},
|
|
||||||
)}
|
|
||||||
type="button"
|
|
||||||
className="clean-btn menu__caret"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
updateCollapsed();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
|
|
||||||
<DocSidebarItems
|
|
||||||
items={items}
|
|
||||||
tabIndex={collapsed ? -1 : 0}
|
|
||||||
onItemClick={onItemClick}
|
|
||||||
activePath={activePath}
|
|
||||||
level={level + 1}
|
|
||||||
/>
|
|
||||||
</Collapsible>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function DocSidebarItemHtml({item, level, index}) {
|
|
||||||
const {value, defaultStyle, className} = item;
|
|
||||||
return (
|
|
||||||
<li
|
|
||||||
className={clsx(
|
|
||||||
ThemeClassNames.docs.docSidebarItemLink,
|
|
||||||
ThemeClassNames.docs.docSidebarItemLinkLevel(level),
|
|
||||||
defaultStyle && `${styles.menuHtmlItem} menu__list-item`,
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
key={index} // eslint-disable-next-line react/no-danger
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: value,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function DocSidebarItemLink({
|
|
||||||
item,
|
|
||||||
onItemClick,
|
|
||||||
activePath,
|
|
||||||
level,
|
|
||||||
index,
|
|
||||||
...props
|
|
||||||
}) {
|
|
||||||
const {href, label, className} = item;
|
|
||||||
const isActive = isActiveSidebarItem(item, activePath);
|
|
||||||
const isInternalLink = isInternalUrl(href);
|
|
||||||
return (
|
|
||||||
<li
|
|
||||||
className={clsx(
|
|
||||||
ThemeClassNames.docs.docSidebarItemLink,
|
|
||||||
ThemeClassNames.docs.docSidebarItemLinkLevel(level),
|
|
||||||
'menu__list-item',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
key={label}>
|
|
||||||
<Link
|
|
||||||
className={clsx(
|
|
||||||
'menu__link',
|
|
||||||
!isInternalLink && styles.menuExternalLink,
|
|
||||||
{
|
|
||||||
'menu__link--active': isActive,
|
|
||||||
},
|
|
||||||
)}
|
|
||||||
aria-current={isActive ? 'page' : undefined}
|
|
||||||
to={href}
|
|
||||||
{...(isInternalLink && {
|
|
||||||
onClick: onItemClick ? () => onItemClick(item) : undefined,
|
|
||||||
})}
|
|
||||||
{...props}>
|
|
||||||
{label}
|
|
||||||
{!isInternalLink && <IconExternalLink />}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
@media (min-width: 997px) {
|
|
||||||
.menuHtmlItem {
|
|
||||||
padding: var(--ifm-menu-link-padding-vertical)
|
|
||||||
var(--ifm-menu-link-padding-horizontal);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menuExternalLink {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
// Swizzled to change the appearance of a paginator nav link.
|
|
||||||
import React from 'react';
|
|
||||||
import clsx from 'clsx';
|
|
||||||
import Link from '@docusaurus/Link';
|
|
||||||
import styles from './styles.module.css';
|
|
||||||
|
|
||||||
function PaginatorNavLink({hasArrow, permalink, title, subLabel, ...rest}) {
|
|
||||||
return (
|
|
||||||
<Link className={clsx('pagination-nav__link', styles.root)} to={permalink}>
|
|
||||||
{subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
|
|
||||||
<div className="pagination-nav__label">{title}</div>
|
|
||||||
{hasArrow && <span className={styles.arrow}>→</span>}
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default PaginatorNavLink;
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
.root {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 2rem;
|
|
||||||
float: right;
|
|
||||||
transform: scale(2);
|
|
||||||
position: absolute;
|
|
||||||
right: 1.5rem;
|
|
||||||
top: 1rem;
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue