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
www/packages/docs-ui/src/components/Heading/H2/index.tsx
+26 -6
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>
)
www/packages/docs-ui/src/components/Heading/H3/index.tsx
+26 -6
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>
)