asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: fix scroll + divider issues (#9663)

Browse Source
This commit is contained in:
Shahed Nasser
2024-10-21 09:54:05 +03:00
committed by GitHub
parent 34621f53a3
commit b4855825be
8 changed files with 73 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
www/apps/api-reference/components/Section/Container/index.tsx
View File

@@ -19,7 +19,9 @@ const SectionContainer = forwardRef<HTMLDivElement, SectionContainerProps>(
ref={ref}
>
{children}
{!noDivider && <SectionDivider className="-left-1.5 lg:!-left-full" />}
{!noDivider && (
<SectionDivider className="-left-[16px] lg:!-left-1/4" />
)}
</div>
)
}

2
www/apps/api-reference/components/Tags/Operation/index.tsx
View File

@@ -134,7 +134,7 @@ const TagOperation = ({
}
/>
</div>
<SectionDivider />
<SectionDivider className="-left-[16px] lg:!-left-1/4" />
</div>
)
}

5
www/apps/api-reference/components/Tags/Section/index.tsx
View File

@@ -123,7 +123,7 @@ const TagSection = ({ tag }: TagSectionProps) => {
<DividedLayout
ref={ref}
mainContent={
<SectionContainer>
<SectionContainer noDivider={true}>
<h2>{tag.name}</h2>
{tag.description && (
<Section>
@@ -154,6 +154,7 @@ const TagSection = ({ tag }: TagSectionProps) => {
vertical
question="Was this section helpful?"
/>
<SectionDivider className="-left-[16px] lg:!-left-[30%]" />
</SectionContainer>
}
codeContent={<></>}
@@ -166,7 +167,7 @@ const TagSection = ({ tag }: TagSectionProps) => {
<TagPaths tag={tag} />
</LoadingProvider>
)}
{!loadPaths && <SectionDivider />}
{!loadPaths && <SectionDivider className="lg:!-left-1" />}
</div>
)
}

20
www/apps/api-reference/layouts/Divided/index.tsx
View File

@@ -39,15 +39,17 @@ const DividedLayout = forwardRef<HTMLDivElement, DividedLayoutProps>(
>
{mainContent}
</div>
<div
className={clsx(
"w-full flex-shrink-0 flex-grow-0 lg:w-[calc(50%-32px)] lg:basis-[calc(50%-32px)] lg:pr-1.5",
"mt-2 lg:mt-0",
codeContentClassName
)}
>
{codeContent}
</div>
{codeContent && (
<div
className={clsx(
"w-full flex-shrink-0 flex-grow-0 lg:w-[calc(50%-32px)] lg:basis-[calc(50%-32px)] lg:pr-1.5",
"mt-2 lg:mt-0",
codeContentClassName
)}
>
{codeContent}
</div>
)}
</div>
)
}

32
www/packages/docs-ui/src/components/Heading/H2/index.tsx
View File

@@ -1,6 +1,9 @@
"use client"
import clsx from "clsx"
import React from "react"
import { Link } from "@/components"
import React, { useMemo } from "react"
import { CopyButton, Link } from "@/components"
import { useIsBrowser } from "../../../providers"
type H2Props = React.HTMLAttributes<HTMLHeadingElement> & {
id?: string
@@ -8,6 +11,21 @@ type H2Props = React.HTMLAttributes<HTMLHeadingElement> & {
}
export const H2 = ({ className, children, passRef, ...props }: H2Props) => {
const { isBrowser } = useIsBrowser()
const copyText = useMemo(() => {
const url = `#${props.id}`
if (!isBrowser) {
return url
}
const hashIndex = window.location.href.indexOf("#")
return (
window.location.href.substring(
0,
hashIndex !== -1 ? hashIndex : window.location.href.length
) + url
)
}, [props.id, isBrowser])
return (
<h2
className={clsx(
@@ -20,12 +38,14 @@ export const H2 = ({ className, children, passRef, ...props }: H2Props) => {
>
{children}
{props.id && (
<Link
href={`#${props.id}`}
<CopyButton
text={copyText}
className="opacity-0 group-hover/h2:opacity-100 transition-opacity ml-docs_0.5 inline-block"
>
#
</Link>
<Link href={`#${props.id}`} scroll={false}>
#
</Link>
</CopyButton>
)}
</h2>
)

32
www/packages/docs-ui/src/components/Heading/H3/index.tsx
View File

@@ -1,12 +1,30 @@
"use client"
import clsx from "clsx"
import React from "react"
import { Link } from "@/components"
import React, { useMemo } from "react"
import { CopyButton, Link } from "@/components"
import { useIsBrowser } from "../../../providers"
type H3Props = React.HTMLAttributes<HTMLHeadingElement> & {
id?: string
}
export const H3 = ({ className, children, ...props }: H3Props) => {
const { isBrowser } = useIsBrowser()
const copyText = useMemo(() => {
const url = `#${props.id}`
if (!isBrowser) {
return url
}
const hashIndex = window.location.href.indexOf("#")
return (
window.location.href.substring(
0,
hashIndex !== -1 ? hashIndex : window.location.href.length
) + url
)
}, [props.id, isBrowser])
return (
<h3
className={clsx(
@@ -18,12 +36,14 @@ export const H3 = ({ className, children, ...props }: H3Props) => {
>
{children}
{props.id && (
<Link
href={`#${props.id}`}
<CopyButton
text={copyText}
className="opacity-0 group-hover/h3:opacity-100 transition-opacity ml-docs_0.5 inline-block"
>
#
</Link>
<Link href={`#${props.id}`} scroll={false}>
#
</Link>
</CopyButton>
)}
</h3>
)

4
www/packages/docs-ui/src/hooks/use-page-scroll-manager/index.tsx
View File

@@ -36,7 +36,7 @@ export const usePageScrollManager = () => {
targetElm?.scrollIntoView()
}
}, [pathname, scrollableElement])
}, [pathname, scrollableElement, checkedPageReload])
useEffect(() => {
if (!scrollableElement || checkedPageReload) {
@@ -71,5 +71,5 @@ export const usePageScrollManager = () => {
)
}
})
}, [scrollableElement])
}, [scrollableElement, checkedPageReload])
}

2
www/packages/docs-ui/src/layouts/main-content.tsx
View File

@@ -38,7 +38,7 @@ export const MainContentLayout = ({
"relative max-w-full",
"h-full flex-1",
"flex flex-col",
"gap-docs_0.5 lg:pt-docs_0.25 lg:mr-docs_0.25",
"gap-docs_0.5 lg:pt-docs_0.25 lg:mr-docs_0.25 scroll-m-docs_0.25",
!desktopSidebarOpen && "lg:ml-docs_0.25",
mainWrapperClasses
)}