mirror of
https://github.com/yangshun/tech-interview-handbook.git
synced 2025-07-13 00:25:04 +08:00
website: upgrade to docusaurus@2.0.0-beta.18
This commit is contained in:
Yangshun
10
node_modules/.yarn-integrity
generated
vendored
Normal file
10
node_modules/.yarn-integrity
generated
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"systemParams": "win32-x64-93",
|
||||
"modulesFolders": [],
|
||||
"flags": [],
|
||||
"linkedModules": [],
|
||||
"topLevelPatterns": [],
|
||||
"lockfileEntries": {},
|
||||
"files": [],
|
||||
"artifacts": {}
|
||||
}
|
||||
@ -155,6 +155,7 @@ module.exports = {
|
||||
],
|
||||
},
|
||||
algolia: {
|
||||
appId: 'Y09P1J4IPV',
|
||||
apiKey: '4dabb055be464346fcb6877f086f08e8',
|
||||
indexName: 'techinterviewhandbook',
|
||||
},
|
||||
|
||||
@ -11,9 +11,9 @@
|
||||
"deploy": "docusaurus deploy"
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "^2.0.0-beta.15",
|
||||
"@docusaurus/plugin-client-redirects": "^2.0.0-beta.15",
|
||||
"@docusaurus/preset-classic": "^2.0.0-beta.15",
|
||||
"@docusaurus/core": "^2.0.0-beta.18",
|
||||
"@docusaurus/plugin-client-redirects": "^2.0.0-beta.18",
|
||||
"@docusaurus/preset-classic": "^2.0.0-beta.18",
|
||||
"classnames": "^2.2.6",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
|
||||
@ -1,96 +1,113 @@
|
||||
// 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 Seo from '@theme/Seo';
|
||||
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 {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common';
|
||||
import {
|
||||
PageMetadata,
|
||||
HtmlClassNameProvider,
|
||||
ThemeClassNames,
|
||||
useWindowSize,
|
||||
} from '@docusaurus/theme-common';
|
||||
import DocBreadcrumbs from '@theme/DocBreadcrumbs';
|
||||
import MDXContent from '@theme/MDXContent';
|
||||
|
||||
import SidebarAd from '../../components/SidebarAd';
|
||||
|
||||
export default function DocItem(props) {
|
||||
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 {
|
||||
image,
|
||||
keywords,
|
||||
hide_title: hideTitle,
|
||||
hide_table_of_contents: hideTableOfContents,
|
||||
toc_min_heading_level: tocMinHeadingLevel,
|
||||
toc_max_heading_level: tocMaxHeadingLevel,
|
||||
} = frontMatter;
|
||||
const {description, title} = metadata; // We only add a title if:
|
||||
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 windowSize = useWindowSize();
|
||||
const canRenderTOC =
|
||||
!hideTableOfContents && DocContent.toc && DocContent.toc.length > 0;
|
||||
// const renderTocDesktop =
|
||||
// canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
|
||||
const renderTocDesktop =
|
||||
canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
|
||||
return (
|
||||
<>
|
||||
<Seo
|
||||
{...{
|
||||
title,
|
||||
description,
|
||||
keywords,
|
||||
image,
|
||||
}}
|
||||
/>
|
||||
<div className="row">
|
||||
<div className={clsx('col', !hideTableOfContents && styles.docItemCol)}>
|
||||
<DocVersionBanner />
|
||||
<div className={styles.docItemContainer}>
|
||||
<article>
|
||||
<DocBreadcrumbs />
|
||||
<DocVersionBadge />
|
||||
|
||||
<div className="row">
|
||||
<div
|
||||
className={clsx('col', {
|
||||
[styles.docItemCol]: !hideTableOfContents,
|
||||
})}>
|
||||
<DocVersionBanner />
|
||||
<div className={styles.docItemContainer}>
|
||||
<article>
|
||||
<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>
|
||||
{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">
|
||||
<DocItemFooter {...props} />
|
||||
<div className="margin-top--md">
|
||||
<DocContent />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<DocPaginator previous={metadata.previous} next={metadata.next} />
|
||||
<div className="margin-top--md">
|
||||
<SidebarAd position="docs_bottom" />
|
||||
<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--4">
|
||||
{/* Change it such that sidebar ad is shown regardless whether there's a TOC */}
|
||||
<TOC
|
||||
toc={DocContent.toc}
|
||||
minHeadingLevel={tocMinHeadingLevel}
|
||||
@ -98,7 +115,17 @@ export default function DocItem(props) {
|
||||
className={ThemeClassNames.docs.docTocDesktop}
|
||||
/>
|
||||
</div>
|
||||
</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,3 +1,10 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.docItemContainer header + *,
|
||||
.docItemContainer article > *:first-child {
|
||||
margin-top: 0;
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
// Swizzled to remove the prev button.
|
||||
import React from 'react';
|
||||
import Translate, {translate} from '@docusaurus/Translate';
|
||||
import PaginatorNavLink from '@theme/PaginatorNavLink';
|
||||
|
||||
49
website/src/theme/DocSidebar/Mobile/index.js
Normal file
49
website/src/theme/DocSidebar/Mobile/index.js
Normal file
@ -0,0 +1,49 @@
|
||||
// Swizzled to add sidebar ad below mobile nav items.
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {
|
||||
NavbarSecondaryMenuFiller,
|
||||
ThemeClassNames,
|
||||
useNavbarMobileSidebar,
|
||||
} from '@docusaurus/theme-common';
|
||||
import DocSidebarItems from '@theme/DocSidebarItems';
|
||||
|
||||
import SidebarAd from '../../../components/SidebarAd';
|
||||
|
||||
// eslint-disable-next-line react/function-component-definition
|
||||
const DocSidebarMobileSecondaryMenu = ({sidebar, path}) => {
|
||||
const mobileSidebar = useNavbarMobileSidebar();
|
||||
return (
|
||||
<ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
|
||||
<DocSidebarItems
|
||||
items={sidebar}
|
||||
activePath={path}
|
||||
onItemClick={(item) => {
|
||||
// Mobile sidebar should only be closed if the category has a link
|
||||
if (item.type === 'category' && item.href) {
|
||||
mobileSidebar.toggle();
|
||||
}
|
||||
|
||||
if (item.type === 'link') {
|
||||
mobileSidebar.toggle();
|
||||
}
|
||||
}}
|
||||
level={1}
|
||||
/>
|
||||
<div className="margin--md">
|
||||
<SidebarAd position="mobile_sidebar" />
|
||||
</div>
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
function DocSidebarMobile(props) {
|
||||
return (
|
||||
<NavbarSecondaryMenuFiller
|
||||
component={DocSidebarMobileSecondaryMenu}
|
||||
props={props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(DocSidebarMobile);
|
||||
@ -1,123 +0,0 @@
|
||||
import React, {useState} from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {
|
||||
useThemeConfig,
|
||||
useAnnouncementBar,
|
||||
MobileSecondaryMenuFiller,
|
||||
ThemeClassNames,
|
||||
useScrollPosition,
|
||||
useWindowSize,
|
||||
} from '@docusaurus/theme-common';
|
||||
import Logo from '@theme/Logo';
|
||||
import IconArrow from '@theme/IconArrow';
|
||||
import {translate} from '@docusaurus/Translate';
|
||||
import {DocSidebarItems} from '@theme/DocSidebarItem';
|
||||
import styles from './styles.module.css';
|
||||
import SidebarAd from '../../components/SidebarAd';
|
||||
import CarbonAd from '../../components/CarbonAd';
|
||||
|
||||
function useShowAnnouncementBar() {
|
||||
const {isActive} = useAnnouncementBar();
|
||||
const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive);
|
||||
useScrollPosition(
|
||||
({scrollY}) => {
|
||||
if (isActive) {
|
||||
setShowAnnouncementBar(scrollY === 0);
|
||||
}
|
||||
},
|
||||
[isActive],
|
||||
);
|
||||
return isActive && showAnnouncementBar;
|
||||
}
|
||||
|
||||
function HideableSidebarButton({onClick}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
title={translate({
|
||||
id: 'theme.docs.sidebar.collapseButtonTitle',
|
||||
message: 'Collapse sidebar',
|
||||
description: 'The title attribute for collapse button of doc sidebar',
|
||||
})}
|
||||
aria-label={translate({
|
||||
id: 'theme.docs.sidebar.collapseButtonAriaLabel',
|
||||
message: 'Collapse sidebar',
|
||||
description: 'The title attribute for collapse button of doc sidebar',
|
||||
})}
|
||||
className={clsx(
|
||||
'button button--secondary button--outline',
|
||||
styles.collapseSidebarButton,
|
||||
)}
|
||||
onClick={onClick}>
|
||||
<IconArrow className={styles.collapseSidebarButtonIcon} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
|
||||
const showAnnouncementBar = useShowAnnouncementBar();
|
||||
const {
|
||||
navbar: {hideOnScroll},
|
||||
hideableSidebar,
|
||||
} = useThemeConfig();
|
||||
return (
|
||||
<div
|
||||
className={clsx(styles.sidebar, {
|
||||
[styles.sidebarWithHideableNavbar]: hideOnScroll,
|
||||
[styles.sidebarHidden]: isHidden,
|
||||
})}>
|
||||
{hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
|
||||
<nav
|
||||
className={clsx('menu thin-scrollbar', styles.menu, {
|
||||
[styles.menuWithAnnouncementBar]: showAnnouncementBar,
|
||||
})}>
|
||||
<ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
|
||||
<DocSidebarItems items={sidebar} activePath={path} level={1} />
|
||||
</ul>
|
||||
</nav>
|
||||
{hideableSidebar && <HideableSidebarButton onClick={onCollapse} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const DocSidebarMobileSecondaryMenu = ({toggleSidebar, sidebar, path}) => {
|
||||
return (
|
||||
<ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
|
||||
<DocSidebarItems
|
||||
items={sidebar}
|
||||
activePath={path}
|
||||
onItemClick={() => toggleSidebar()}
|
||||
level={1}
|
||||
/>
|
||||
<div className="margin--md">
|
||||
<SidebarAd position="mobile_sidebar" />
|
||||
</div>
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
function DocSidebarMobile(props) {
|
||||
return (
|
||||
<MobileSecondaryMenuFiller
|
||||
component={DocSidebarMobileSecondaryMenu}
|
||||
props={props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const DocSidebarDesktopMemo = React.memo(DocSidebarDesktop);
|
||||
const DocSidebarMobileMemo = React.memo(DocSidebarMobile);
|
||||
export default function DocSidebar(props) {
|
||||
const windowSize = useWindowSize(); // Desktop sidebar visible on hydration: need SSR rendering
|
||||
|
||||
const shouldRenderSidebarDesktop =
|
||||
windowSize === 'desktop' || windowSize === 'ssr'; // Mobile sidebar not visible on hydration: can avoid SSR rendering
|
||||
|
||||
const shouldRenderSidebarMobile = windowSize === 'mobile';
|
||||
return (
|
||||
<>
|
||||
{shouldRenderSidebarDesktop && <DocSidebarDesktopMemo {...props} />}
|
||||
{shouldRenderSidebarMobile && <DocSidebarMobileMemo {...props} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,99 +0,0 @@
|
||||
:root {
|
||||
--collapse-button-bg-color-dark: #2e333a;
|
||||
}
|
||||
|
||||
@media (min-width: 997px) {
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 100vh;
|
||||
height: 100%;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding-top: var(--ifm-navbar-height);
|
||||
width: var(--doc-sidebar-width);
|
||||
transition: opacity 50ms ease;
|
||||
}
|
||||
|
||||
.sidebarWithHideableNavbar {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.sidebarHidden {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.sidebarLogo {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
margin: 0 var(--ifm-navbar-padding-horizontal);
|
||||
min-height: var(--ifm-navbar-height);
|
||||
max-height: var(--ifm-navbar-height);
|
||||
color: inherit !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.sidebarLogo img {
|
||||
margin-right: 0.5rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.menu {
|
||||
flex-grow: 1;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.menuWithAnnouncementBar {
|
||||
margin-bottom: var(--docusaurus-announcement-bar-height);
|
||||
}
|
||||
|
||||
.collapseSidebarButton {
|
||||
display: block !important;
|
||||
background-color: var(--ifm-button-background-color);
|
||||
height: 40px;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--ifm-toc-border-color);
|
||||
}
|
||||
|
||||
.collapseSidebarButtonIcon {
|
||||
transform: rotate(180deg);
|
||||
margin-top: 4px;
|
||||
}
|
||||
html[dir='rtl'] .collapseSidebarButtonIcon {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .collapseSidebarButton {
|
||||
background-color: var(--collapse-button-bg-color-dark);
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .collapseSidebarButton:hover,
|
||||
html[data-theme='dark'] .collapseSidebarButton:focus {
|
||||
background-color: var(--ifm-color-emphasis-200);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebarLogo,
|
||||
.collapseSidebarButton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebarMenuIcon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.sidebarMenuCloseIcon {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: var(--ifm-font-weight-bold);
|
||||
line-height: 0.9;
|
||||
width: 24px;
|
||||
}
|
||||
@ -1,175 +0,0 @@
|
||||
import React, {useEffect, memo} from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {
|
||||
isSamePath,
|
||||
usePrevious,
|
||||
Collapsible,
|
||||
useCollapsible,
|
||||
ThemeClassNames,
|
||||
} from '@docusaurus/theme-common';
|
||||
import Link from '@docusaurus/Link';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import IconExternalLink from '@theme/IconExternalLink';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const isActiveSidebarItem = (item, activePath) => {
|
||||
if (item.type === 'link') {
|
||||
return isSamePath(item.href, activePath);
|
||||
}
|
||||
|
||||
if (item.type === 'category') {
|
||||
return item.items.some((subItem) =>
|
||||
isActiveSidebarItem(subItem, activePath),
|
||||
);
|
||||
}
|
||||
|
||||
return false;
|
||||
}; // Optimize sidebar at each "level"
|
||||
// TODO this item should probably not receive the "activePath" props
|
||||
// TODO this triggers whole sidebar re-renders on navigation
|
||||
|
||||
export const DocSidebarItems = memo(function DocSidebarItems({
|
||||
items,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
{items.map((item, index) => (
|
||||
<DocSidebarItem
|
||||
key={index} // sidebar is static, the index does not change
|
||||
item={item}
|
||||
{...props}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
});
|
||||
export default function DocSidebarItem({item, ...props}) {
|
||||
switch (item.type) {
|
||||
case 'category':
|
||||
if (item.items.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <DocSidebarItemCategory 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]);
|
||||
}
|
||||
|
||||
function DocSidebarItemCategory({
|
||||
item,
|
||||
onItemClick,
|
||||
activePath,
|
||||
level,
|
||||
...props
|
||||
}) {
|
||||
const {items, label, collapsible, className} = item;
|
||||
const isActive = isActiveSidebarItem(item, activePath);
|
||||
const {collapsed, setCollapsed, toggleCollapsed} = 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,
|
||||
});
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarItemCategory,
|
||||
ThemeClassNames.docs.docSidebarItemCategoryLevel(level),
|
||||
'menu__list-item',
|
||||
{
|
||||
'menu__list-item--collapsed': collapsed,
|
||||
},
|
||||
className,
|
||||
)}>
|
||||
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
||||
<a
|
||||
className={clsx('menu__link', {
|
||||
'menu__link--sublist': collapsible,
|
||||
'menu__link--active': collapsible && isActive,
|
||||
[styles.menuLinkText]: !collapsible,
|
||||
})}
|
||||
onClick={
|
||||
collapsible
|
||||
? (e) => {
|
||||
e.preventDefault();
|
||||
toggleCollapsed();
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
href={collapsible ? '#' : undefined}
|
||||
{...props}>
|
||||
{label}
|
||||
</a>
|
||||
|
||||
<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 DocSidebarItemLink({item, onItemClick, activePath, level, ...props}) {
|
||||
const {href, label, className} = item;
|
||||
const isActive = isActiveSidebarItem(item, activePath);
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarItemLink,
|
||||
ThemeClassNames.docs.docSidebarItemLinkLevel(level),
|
||||
'menu__list-item',
|
||||
className,
|
||||
)}
|
||||
key={label}>
|
||||
<Link
|
||||
className={clsx('menu__link', {
|
||||
'menu__link--active': isActive,
|
||||
})}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
to={href}
|
||||
{...(isInternalUrl(href) && {
|
||||
onClick: onItemClick,
|
||||
})}
|
||||
{...props}>
|
||||
{isInternalUrl(href) ? (
|
||||
label
|
||||
) : (
|
||||
<span>
|
||||
{label}
|
||||
<IconExternalLink />
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
@media (min-width: 997px) {
|
||||
.menuLinkText {
|
||||
cursor: initial;
|
||||
}
|
||||
.menuLinkText:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
// Swizzled to change the appearance of a paginator nav link.
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import Link from '@docusaurus/Link';
|
||||
|
||||
2079
website/yarn.lock
2079
website/yarn.lock
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user