From 7685c79705587b1b5a649916d9d49c065231cc16 Mon Sep 17 00:00:00 2001
From: gbanyan <gbanyan.huang@gmail.com>
Date: Fri, 21 Nov 2025 00:39:56 +0800
Subject: [PATCH] Fix TOC duplication when navigating

---
 app/blog/[slug]/page.tsx  |  5 ++++-
 app/pages/[slug]/page.tsx |  5 ++++-
 components/post-toc.tsx   | 12 +++++++++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
index de8d5ac..014277e 100644
--- a/app/blog/[slug]/page.tsx
+++ b/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
diff --git a/app/pages/[slug]/page.tsx b/app/pages/[slug]/page.tsx
index 5c901b9..82a8dec 100644
--- a/app/pages/[slug]/page.tsx
+++ b/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
diff --git a/components/post-toc.tsx b/components/post-toc.tsx
index e65495a..8646ff0 100644
--- a/components/post-toc.tsx
+++ b/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)