docs: update docusaurus to v3 (#5625)
* update dependencies * update onboarding mdx * fixes for mdx issues * fixes for mdx compatibility * resolve mdx errors * fixes in reference * fix check errors * revert change in vale action * fix node version in action * fix summary in markdown
This commit is contained in:
Shahed Nasser
GitHub
@@ -0,0 +1,32 @@
|
||||
import React from "react"
|
||||
import clsx from "clsx"
|
||||
import { useDocsSidebar } from "@docusaurus/theme-common/internal"
|
||||
import type { Props } from "@theme/DocRoot/Layout/Main"
|
||||
|
||||
import { useSidebar } from "../../../../providers/Sidebar"
|
||||
|
||||
export default function DocRootLayoutMain({ children }: Props): JSX.Element {
|
||||
const sidebar = useDocsSidebar()
|
||||
const sidebarContext = useSidebar()
|
||||
return (
|
||||
<main
|
||||
className={clsx(
|
||||
"flex flex-col w-full lg:flex-grow",
|
||||
(sidebarContext?.hiddenSidebarContainer || !sidebar) &&
|
||||
"lg:max-w-[calc(100%-30px)]",
|
||||
!sidebarContext?.hiddenSidebarContainer &&
|
||||
"xxl:max-w-[1119px] lg:max-w-[calc(100%-321px)]"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"container padding-top--md px-0",
|
||||
sidebarContext?.hiddenSidebarContainer &&
|
||||
"lg:max-w-main-content-hidden-sidebar"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
import React, { type ReactNode, useRef } from "react"
|
||||
import clsx from "clsx"
|
||||
import { ThemeClassNames } from "@docusaurus/theme-common"
|
||||
import { useDocsSidebar } from "@docusaurus/theme-common/internal"
|
||||
import { useLocation } from "@docusaurus/router"
|
||||
import DocSidebar from "@theme/DocSidebar"
|
||||
import type { Props } from "@theme/DocRoot/Layout/Sidebar"
|
||||
import { useSidebar } from "../../../../providers/Sidebar"
|
||||
import { CSSTransition, SwitchTransition } from "react-transition-group"
|
||||
|
||||
// Reset sidebar state when sidebar changes
|
||||
// Use React key to unmount/remount the children
|
||||
// See https://github.com/facebook/docusaurus/issues/3414
|
||||
function ResetOnSidebarChange({ children }: { children: ReactNode }) {
|
||||
const sidebar = useDocsSidebar()
|
||||
return (
|
||||
<React.Fragment key={sidebar?.name ?? "noSidebar"}>
|
||||
{children}
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
export default function DocRootLayoutSidebar({
|
||||
sidebar,
|
||||
hiddenSidebarContainer,
|
||||
}: Props): JSX.Element {
|
||||
const { pathname } = useLocation()
|
||||
const sidebarContext = useSidebar()
|
||||
const { name } = useDocsSidebar()
|
||||
const sidebarRef = useRef(null)
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={clsx(
|
||||
ThemeClassNames.docs.docSidebarContainer,
|
||||
"min-[997px]:block min-[997px]:w-sidebar min-[997px]:transition-[left] min-[997px]:ease-ease min-[997px]:duration-200 min-[997px]:left-0 hidden",
|
||||
!hiddenSidebarContainer && "clip",
|
||||
hiddenSidebarContainer &&
|
||||
"min-[997px]:fixed min-[997px]:left-[-100%] min-[997px]:rounded min-[997px]:border-0 min-[997px]:border-medusa-border-strong",
|
||||
hiddenSidebarContainer &&
|
||||
sidebarContext?.floatingSidebar &&
|
||||
"min-[997px]:!left-0.5 min-[997px]:top-[65px] min-[997px]:z-20 min-[997px]:bg-docs-bg min-[997px]:shadow-flyout min-[997px]:dark:shadow-flyout-dark"
|
||||
)}
|
||||
onTransitionEnd={(e) => {
|
||||
if (
|
||||
!e.currentTarget.classList.contains(
|
||||
ThemeClassNames.docs.docSidebarContainer
|
||||
)
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
if (hiddenSidebarContainer) {
|
||||
sidebarContext?.setHiddenSidebar(true)
|
||||
}
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setTimeout(() => {
|
||||
if (!document.querySelector(".sidebar-toggler:hover")) {
|
||||
sidebarContext?.setFloatingSidebar(false)
|
||||
}
|
||||
}, 100)
|
||||
}}
|
||||
onMouseUp={(e) => {
|
||||
const target = e.target as Element
|
||||
if (
|
||||
target.classList.contains("menu__list-item") ||
|
||||
target.parentElement.classList.contains("menu__list-item")
|
||||
) {
|
||||
sidebarContext?.setFloatingSidebar(false)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SwitchTransition>
|
||||
<CSSTransition
|
||||
key={name}
|
||||
nodeRef={sidebarRef}
|
||||
classNames={{
|
||||
enter: "animate-fadeInLeft animate-fast",
|
||||
exit: "animate-fadeOutLeft animate-fast",
|
||||
}}
|
||||
timeout={200}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"min-[997px]:top-[57px] min-[997px]:sticky min-[997px]:max-h-screen min-[997px]:[&>div]:max-h-screen"
|
||||
)}
|
||||
ref={sidebarRef}
|
||||
>
|
||||
<ResetOnSidebarChange>
|
||||
<div>
|
||||
<DocSidebar
|
||||
sidebar={sidebar}
|
||||
path={pathname}
|
||||
onCollapse={sidebarContext?.onCollapse}
|
||||
isHidden={sidebarContext?.hiddenSidebar}
|
||||
/>
|
||||
</div>
|
||||
</ResetOnSidebarChange>
|
||||
</div>
|
||||
</CSSTransition>
|
||||
</SwitchTransition>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from "react"
|
||||
import { useDocsSidebar } from "@docusaurus/theme-common/internal"
|
||||
import BackToTopButton from "@theme/BackToTopButton"
|
||||
import DocRootLayoutSidebar from "@theme/DocRoot/Layout/Sidebar"
|
||||
import DocRootLayoutMain from "@theme/DocRoot/Layout/Main"
|
||||
import type { Props } from "@theme/DocRoot/Layout"
|
||||
|
||||
import useOnboarding from "../../../hooks/use-onboarding"
|
||||
import useCurrentLearningPath from "../../../hooks/use-current-learning-path"
|
||||
import { useSidebar } from "../../../providers/Sidebar"
|
||||
import clsx from "clsx"
|
||||
|
||||
export default function DocRootLayout({ children }: Props): JSX.Element {
|
||||
const sidebar = useDocsSidebar()
|
||||
const sidebarContext = useSidebar()
|
||||
useOnboarding()
|
||||
useCurrentLearningPath()
|
||||
return (
|
||||
<div className={clsx("flex flex-[1_0_auto]")}>
|
||||
<BackToTopButton />
|
||||
<div className={clsx("flex w-full flex-[1_0]")}>
|
||||
{sidebar && (
|
||||
<DocRootLayoutSidebar
|
||||
sidebar={sidebar.items}
|
||||
hiddenSidebarContainer={sidebarContext?.hiddenSidebarContainer}
|
||||
setHiddenSidebarContainer={
|
||||
sidebarContext?.setHiddenSidebarContainer
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<DocRootLayoutMain
|
||||
hiddenSidebarContainer={sidebarContext?.hiddenSidebarContainer}
|
||||
>
|
||||
{children}
|
||||
</DocRootLayoutMain>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import React from "react"
|
||||
import clsx from "clsx"
|
||||
import {
|
||||
HtmlClassNameProvider,
|
||||
ThemeClassNames,
|
||||
} from "@docusaurus/theme-common"
|
||||
import {
|
||||
DocsSidebarProvider,
|
||||
useDocRootMetadata,
|
||||
} from "@docusaurus/theme-common/internal"
|
||||
import DocRootLayout from "@theme/DocRoot/Layout"
|
||||
import NotFoundContent from "@theme/NotFound/Content"
|
||||
import type { Props } from "@theme/DocRoot"
|
||||
import SidebarProvider from "../../providers/Sidebar"
|
||||
|
||||
export default function DocRoot(props: Props): JSX.Element {
|
||||
const currentDocRouteMetadata = useDocRootMetadata(props)
|
||||
if (!currentDocRouteMetadata) {
|
||||
// We only render the not found content to avoid a double layout
|
||||
// see https://github.com/facebook/docusaurus/pull/7966#pullrequestreview-1077276692
|
||||
return <NotFoundContent />
|
||||
}
|
||||
const { docElement, sidebarName, sidebarItems } = currentDocRouteMetadata
|
||||
return (
|
||||
<HtmlClassNameProvider className={clsx(ThemeClassNames.page.docsDocPage)}>
|
||||
<DocsSidebarProvider name={sidebarName} items={sidebarItems}>
|
||||
<SidebarProvider sidebarName={sidebarName}>
|
||||
<DocRootLayout>{docElement}</DocRootLayout>
|
||||
</SidebarProvider>
|
||||
</DocsSidebarProvider>
|
||||
</HtmlClassNameProvider>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user