polish

shuding · Sep 15, 2024 · fcbd32b · fcbd32b
1 parent 932876c
commit fcbd32b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 16 deletions.
diff --git a/packages/nextra-theme-docs/src/components/head.tsx b/packages/nextra-theme-docs/src/components/head.tsx
@@ -56,7 +56,7 @@ export function Head(): ReactElement {
         name="viewport"
         content="width=device-width, initial-scale=1.0, viewport-fit=cover"
       />
-      <style>{`:root{--nextra-primary-hue:${lightHue}deg;--nextra-primary-saturation:${lightSaturation}%;--nextra-navbar-height:4rem;--nextra-menu-height:3.75rem;--nextra-banner-height:2.5rem;--nextra-bg:${bgColor.light};}.dark{--nextra-primary-hue:${darkHue}deg;--nextra-primary-saturation:${darkSaturation}%;--nextra-bg:${bgColor.dark};}`}</style>
+      <style>{`:root{--nextra-primary-hue:${lightHue}deg;--nextra-primary-saturation:${lightSaturation}%;--nextra-navbar-height:64px;--nextra-menu-height:3.75rem;--nextra-banner-height:2.5rem;--nextra-bg:${bgColor.light};}.dark{--nextra-primary-hue:${darkHue}deg;--nextra-primary-saturation:${darkSaturation}%;--nextra-bg:${bgColor.dark};}`}</style>
       {head}
     </NextHead>
   )

diff --git a/packages/nextra-theme-docs/src/contexts/active-anchor.tsx b/packages/nextra-theme-docs/src/contexts/active-anchor.tsx
@@ -11,12 +11,12 @@ type ActiveAnchor = Record<
   }
 >
 
-const ActiveAnchorContext = createContext<ActiveAnchor>({})
+const ActiveAnchorContext = createContext<ActiveAnchor>(null!)
 ActiveAnchorContext.displayName = 'ActiveAnchor'
 
 const SetActiveAnchorContext = createContext<
   Dispatch<SetStateAction<ActiveAnchor>>
->(v => v)
+>(null!)
 SetActiveAnchorContext.displayName = 'SetActiveAnchor'
 
 const IntersectionObserverContext = createContext<IntersectionObserver | null>(
@@ -41,14 +41,12 @@ export const ActiveAnchorProvider = ({
   children: ReactNode
 }): ReactElement => {
   const [activeAnchor, setActiveAnchor] = useState<ActiveAnchor>({})
-  const observerRef = useRef<IntersectionObserver | null>(null)
+  const observerRef = useRef<IntersectionObserver>(null!)
 
   useEffect(() => {
-    if (observerRef.current) return
-    const nextraContentEl = document.querySelector<HTMLElement>('.nextra-content')
-    const rootMarginTop = nextraContentEl
-      ? `${0 - nextraContentEl.offsetTop}px`
-      : '0px'
+    const navbarHeight = getComputedStyle(document.body).getPropertyValue(
+      '--nextra-navbar-height'
+    )
     observerRef.current = new IntersectionObserver(
       entries => {
         setActiveAnchor(f => {
@@ -96,14 +94,13 @@ export const ActiveAnchorProvider = ({
         })
       },
       {
-        rootMargin: `${rootMarginTop} 0px -50%`,
+        rootMargin: `-${navbarHeight} 0px -50%`,
         threshold: [0, 1]
       }
     )
 
     return () => {
-      observerRef.current?.disconnect()
-      observerRef.current = null
+      observerRef.current.disconnect()
     }
   }, [])
   return (

diff --git a/packages/nextra-theme-docs/src/mdx-components.tsx b/packages/nextra-theme-docs/src/mdx-components.tsx
@@ -44,14 +44,13 @@ const createHeading = (
     const obRef = useRef<HTMLAnchorElement>(null)
 
     useEffect(() => {
-      if (!id) return
       const heading = obRef.current
-      if (!heading) return
+      if (!id || !observer || !heading) return
+      observer.observe(heading)
       slugs.set(heading, [id, (context.index += 1)])
-      observer?.observe(heading)
 
       return () => {
-        observer?.disconnect()
+        observer.disconnect()
         slugs.delete(heading)
         setActiveAnchor(f => {
           const ret = { ...f }