docs: create docs workspace (#5174)
* docs: migrate ui docs to docs universe * created yarn workspace * added eslint and tsconfig configurations * fix eslint configurations * fixed eslint configurations * shared tailwind configurations * added shared ui package * added more shared components * migrating more components * made details components shared * move InlineCode component * moved InputText * moved Loading component * Moved Modal component * moved Select components * Moved Tooltip component * moved Search components * moved ColorMode provider * Moved Notification components and providers * used icons package * use UI colors in api-reference * moved Navbar component * used Navbar and Search in UI docs * added Feedback to UI docs * general enhancements * fix color mode * added copy colors file from ui-preset * added features and enhancements to UI docs * move Sidebar component and provider * general fixes and preparations for deployment * update docusaurus version * adjusted versions * fix output directory * remove rootDirectory property * fix yarn.lock * moved code component * added vale for all docs MD and MDX * fix tests * fix vale error * fix deployment errors * change ignore commands * add output directory * fix docs test * general fixes * content fixes * fix announcement script * added changeset * fix vale checks * added nofilter option * fix vale error
This commit is contained in:
Shahed Nasser
GitHub
@@ -0,0 +1,67 @@
|
||||
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"
|
||||
import type { Props } from "@theme/DocItem/Content"
|
||||
import { DocContextValue } from "@medusajs/docs"
|
||||
import { Badge, type BadgeVariant } from "docs-ui"
|
||||
|
||||
/**
|
||||
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(): string | null {
|
||||
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 }: Props): JSX.Element {
|
||||
const {
|
||||
frontMatter: { badge },
|
||||
} = useDoc() as DocContextValue
|
||||
const syntheticTitle = useSyntheticTitle()
|
||||
|
||||
return (
|
||||
<div className={clsx(ThemeClassNames.docs.docMarkdown, "markdown")}>
|
||||
{syntheticTitle && (
|
||||
<header
|
||||
className={clsx(badge && "md:flex md:items-center md:gap-0.5 mb-2")}
|
||||
>
|
||||
<Heading as="h1" className={clsx(badge && "!mb-0")}>
|
||||
{syntheticTitle}
|
||||
{badge && (
|
||||
<Badge
|
||||
variant={badge.variant as BadgeVariant}
|
||||
className="md:hidden ml-1 align-middle"
|
||||
>
|
||||
{badge.text}
|
||||
</Badge>
|
||||
)}
|
||||
</Heading>
|
||||
{badge && (
|
||||
<Badge
|
||||
variant={badge.variant as BadgeVariant}
|
||||
className={clsx("md:block hidden")}
|
||||
>
|
||||
{badge.text}
|
||||
</Badge>
|
||||
)}
|
||||
</header>
|
||||
)}
|
||||
<MDXContent>{children}</MDXContent>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from "react"
|
||||
import Footer from "@theme-original/DocItem/Footer"
|
||||
import type FooterType from "@theme/DocItem/Footer"
|
||||
import type { WrapperProps } from "@docusaurus/types"
|
||||
import { useDoc } from "@docusaurus/theme-common/internal"
|
||||
import { useThemeConfig } from "@docusaurus/theme-common"
|
||||
import { ThemeConfig } from "@medusajs/docs"
|
||||
import Feedback from "@site/src/components/Feedback"
|
||||
|
||||
type Props = WrapperProps<typeof FooterType>
|
||||
|
||||
export default function FooterWrapper(props: Props): JSX.Element {
|
||||
const { metadata } = useDoc()
|
||||
const { footerFeedback = { event: "" } } = useThemeConfig() as ThemeConfig
|
||||
|
||||
return (
|
||||
<>
|
||||
{!metadata.frontMatter?.hide_footer && (
|
||||
<div className="mt-[42px]">
|
||||
<Feedback
|
||||
{...footerFeedback}
|
||||
className="border-0 border-t border-solid border-medusa-border-base dark:border-medusa-border-base-dark"
|
||||
/>
|
||||
<Footer {...props} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
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 type { Props } from "@theme/DocItem/Layout"
|
||||
import Footer from "@theme/Footer"
|
||||
import { useSidebar } from "../../../providers/Sidebar"
|
||||
|
||||
/**
|
||||
* 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 }: Props): JSX.Element {
|
||||
const docTOC = useDocTOC()
|
||||
const sidebarContext = useSidebar()
|
||||
return (
|
||||
<div className="row m-0">
|
||||
<div
|
||||
className={clsx(
|
||||
"col",
|
||||
"my-0 mx-auto max-w-main-content w-full ml-auto lg:py-0 py-0 px-1",
|
||||
!docTOC.hidden && "w-9/12",
|
||||
!sidebarContext?.hiddenSidebarContainer && "!max-w-[720px]"
|
||||
)}
|
||||
>
|
||||
<DocVersionBanner />
|
||||
<div>
|
||||
<article className={clsx("[&>*:first-child]:mt-0")}>
|
||||
<DocBreadcrumbs />
|
||||
<DocVersionBadge />
|
||||
{docTOC.mobile}
|
||||
<DocItemContent>{children}</DocItemContent>
|
||||
<DocItemFooter />
|
||||
</article>
|
||||
<DocItemPaginator />
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
{docTOC.desktop && (
|
||||
<div className="col toc-wrapper">{docTOC.desktop}</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user