gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix TOC duplication when navigating

Browse Source
This commit is contained in:
gbanyan
2025-11-21 00:39:56 +08:00
parent 4173aa69d3
commit 7685c79705
3 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/blog/[slug]/page.tsx
View File

@@ -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

5
app/pages/[slug]/page.tsx
View File

@@ -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

12
components/post-toc.tsx
View File

@@ -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)