[components/toc][f]: intersection observer adjsmnt

site/components/Layout.js

@@ -17,7 +17,7 @@ export default function Layout({ children }) {
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
       </Head>
       <Nav />
-      <main className="max-w-7xl relative mx-auto px-2 sm:px-6 md:px-8">
+      <main className="border-2 border-blue-500 max-w-7xl relative mx-auto px-2 sm:px-6 md:px-8">
         {/* <div className="hidden md:block w-[16rem] fixed top-16 left-[max(0px,calc(50%-40rem))] bottom-0 right-auto px-8 overflow-y-auto border-2 border-red-500"> */}
         {/*   <Sidebar /> */}
         {/* </div> */}

site/components/MDX.js

@@ -120,8 +120,7 @@ export default function MdxPage({ children }) {
           { name: "keywords", content: keywords ? keywords : "" },
         ]}
       />
-      {/*<article className="px-8 md:pl-[14rem] lg:pr-[1rem] prose max-w-none dark:prose-invert prose-a:break-all mx-auto border-2 border-yellow-500">*/}
-      <article className="px-12 lg:pr-[22rem] prose max-w-none dark:prose-invert prose-a:break-all mx-auto">
+      <article className="border-2 border-green-500 prose dark:prose-invert prose-a:break-all mx-auto lg:mr-[20rem] p-6">
         <header>
           <div className="mb-6">
             {title && <h1 className="mb-0">{title}</h1>}

site/components/_getIntersectionObserver.js

@@ -2,12 +2,18 @@ const getIntersectionObserver = (callback) => {
   if (typeof window !== 'undefined') {
     return new IntersectionObserver(
       (entries) => {
-        entries.forEach((entry) => {
-          callback(entry);
-        });
+        const intersectingEntries = entries.filter((e) => e.isIntersecting);
+        const firstEntry = intersectingEntries[0];
+        if (firstEntry) {
+          callback(firstEntry);
+        }
+        // entries.forEach((entry) => {
+        //   callback(entry);
+        // });
       },
       { root: null,
-        rootMargin: `0% 0% -85% 0%`
+        threshold: 0.9,
+        rootMargin: `0% 0% -90% 0%`
       }
     );
   }

site/styles/global.css

@@ -44,15 +44,16 @@ body {
   @apply
     hidden
     lg:block
-    w-[22rem]
-    p-12 /* 1.5rem */
-    pl-12
+    w-[20rem]
+    px-8
     py-24
     fixed
     top-16
     /* bottom-0 */
     right-[max(2rem,calc(50%-40rem+2rem))]
     overflow-y-auto
+    border-2
+    border-red-500
 }
 
 .toc::before {