mirror of
https://github.com/supabase/supabase.git
synced 2026-07-06 19:44:24 +08:00
61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import {
|
|
getAnchor,
|
|
removeAnchor,
|
|
highlightSelectedTocItem,
|
|
unHighlightSelectedTocItems,
|
|
} from './CustomHTMLElements.utils'
|
|
import { useInView } from 'react-intersection-observer'
|
|
|
|
/**
|
|
* [Joshen] The trick with rootMargin
|
|
* We are shrinking the top of the root element by 20 percent, which is currently our entire page,
|
|
* and the bottom by 35 percent. Therefore, when a header is at the top 20 percent and bottom 35 percent
|
|
* of our page, it will not be counted as visible.
|
|
*/
|
|
|
|
interface Props {
|
|
tag?: string
|
|
parseAnchors?: boolean
|
|
customAnchor?: string
|
|
}
|
|
|
|
/**
|
|
* This TOC is used in .mdx files and in .tsx files.
|
|
* In mdx files, we need to parse the content and format them to match the
|
|
* expected tocList format (text, link,level).
|
|
*
|
|
* In tsx files, we can generate this tocList directly. For these files, we don't
|
|
* need to parse the <a> and generate anchors. Custom anchors are used in tsx files.
|
|
* (see: /pages/guides/cli/config.tsx)
|
|
*/
|
|
const Heading: React.FC<React.PropsWithChildren<Props>> = ({ tag, customAnchor, children }) => {
|
|
const HeadingTag = `${tag}` as any
|
|
const anchor = customAnchor ? customAnchor : getAnchor(children)
|
|
const link = `#${anchor}`
|
|
|
|
const { ref } = useInView({
|
|
threshold: 1,
|
|
rootMargin: '-20% 0% -35% 0px',
|
|
onChange: (inView, entry) => {
|
|
if (window.scrollY === 0) unHighlightSelectedTocItems()
|
|
if (inView) highlightSelectedTocItem(entry.target.id)
|
|
},
|
|
})
|
|
|
|
return (
|
|
<HeadingTag id={anchor} ref={ref} className="group scroll-mt-24">
|
|
{removeAnchor(children)}
|
|
{anchor && (
|
|
<a
|
|
href={link}
|
|
aria-hidden="true"
|
|
className="ml-2 opacity-0 group-hover:opacity-100 transition"
|
|
>
|
|
<span aria-hidden="true">#</span>
|
|
</a>
|
|
)}
|
|
</HeadingTag>
|
|
)
|
|
}
|
|
export default Heading
|