Fix TOC duplication when navigating

app/blog/[slug]/page.tsx

@@ -198,7 +198,10 @@ export default async function BlogPostPage({ params }: Props) {
 
           <SectionDivider>
             <ScrollReveal>
-              <article className="prose prose-lg prose-slate mx-auto max-w-none dark:prose-dark">
+              <article
+                data-toc-content={slug}
+                className="prose prose-lg prose-slate mx-auto max-w-none dark:prose-dark"
+              >
                 {post.feature_image && (
                   <div className="-mx-4 mb-8 transition-all duration-500 sm:-mx-12 lg:-mx-20 group-[.toc-open]:lg:-mx-4">
                     <Image

app/pages/[slug]/page.tsx

@@ -110,7 +110,10 @@ export default async function StaticPage({ params }: Props) {
 
           <SectionDivider>
             <ScrollReveal>
-              <article className="prose prose-lg prose-slate mx-auto max-w-none dark:prose-dark">
+              <article
+                data-toc-content={slug}
+                className="prose prose-lg prose-slate mx-auto max-w-none dark:prose-dark"
+              >
                 {page.feature_image && (
                   <div className="-mx-4 mb-8 transition-all duration-500 sm:-mx-12 lg:-mx-20 group-[.toc-open]:lg:-mx-4">
                     <Image

components/post-toc.tsx

@@ -20,6 +20,16 @@ export function PostToc({ onLinkClick, contentKey }: { onLinkClick?: () => void;
     // Clear items immediately when content changes
     setItems([]);
     setActiveId(null);
+    itemRefs.current = {};
+
+    const containerSelector = contentKey
+      ? `[data-toc-content="${contentKey}"]`
+      : '[data-toc-content]';
+    const container = document.querySelector<HTMLElement>(containerSelector);
+
+    if (!container) {
+      return undefined;
+    }
 
     let observer: IntersectionObserver | null = null;
     let rafId1: number;
@@ -30,7 +40,7 @@ export function PostToc({ onLinkClick, contentKey }: { onLinkClick?: () => void;
     rafId1 = requestAnimationFrame(() => {
       rafId2 = requestAnimationFrame(() => {
         const headings = Array.from(
-          document.querySelectorAll<HTMLElement>('article h2, article h3')
+          container.querySelectorAll<HTMLElement>('h2, h3')
         );
         const mapped = headings
           .filter((el) => el.id)