zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(table-of-contents): implement scrollable TOC with radix-ui

Browse Source 
- Add @radix-ui/react-scroll-area dependency
- Create scroll-area component with custom styling
- Refactor TOC layout to use scroll-area component
- Improve TOC styling and active state transitions
- Apply consistent TOC styling across blog and about layouts
This commit is contained in:
joyzhao
2025-06-19 12:36:35 +08:00
parent 8cecab8479
commit 8fbeec7dc8
6 changed files with 265 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/layout/TableOfContents.astro
View File

@@ -1,5 +1,6 @@
---
import { type Lang } from '@/types';
import { ScrollArea } from '@/components/ui/scroll-area';
interface Props {
lang: Lang;
@@ -10,18 +11,20 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
---
<div>
<div id="nav-content" class="sticky xl:w-72 w-full top-14 max-h-[calc(100svh-3.5rem)] overflow-x-hidden">
<div id="nav-content" class="sticky xl:w-72 w-full top-14">
<div class="flex flex-col gap-3 p-4">
<h3 class="dark:text-zinc-400 text-blacktext/90 font-bold tracking-wide text-sm sm:text-base uppercase flex items-center mb-4">
<h3 class="dark:text-zinc-200 text-blacktext font-bold tracking-wide text-sm sm:text-base uppercase flex items-center">
<svg class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
</svg>
{title}
</h3>
<div class="text-neutral-500 dark:text-neutral-300">
<ul id="toc-list" class="leading-relaxed text-sm sm:text-base border-l dark:border-neutral-500/20 border-blacktext/20">
</ul>
</div>
<ScrollArea className="w-full" client:load>
<div class="text-neutral-500 dark:text-neutral-300 pr-4">
<ul id="toc-list" class="leading-relaxed text-sm sm:text-base border-l dark:border-neutral-500/20 border-blacktext/20 mt-4">
</ul>
</div>
</ScrollArea>
</div>
</div>
</div>
@@ -58,20 +61,20 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
// Apply styling based on heading level
const level = parseInt(header.tagName.charAt(1));
link.classList.add(
"block", "w-full", "text-left", "py-2", "px-3", "rounded-lg", "text-sm",
"transition-all", "duration-200", "border-l", "border-transparent",
"text-muted-foreground", "hover:text-foreground", "hover:bg-muted/50"
"block", "w-full", "text-left", "py-1.5", "px-3", "text-sm",
"transition-all", "duration-200", "border-l-2", "border-transparent",
"text-muted-foreground", "hover:text-foreground", "hover:bg-muted/30"
);
// Add indentation based on heading level
if (level === 1) {
link.classList.add("font-semibold");
} else if (level === 2) {
link.classList.add("ml-3");
link.classList.add("ml-2");
} else if (level === 3) {
link.classList.add("ml-6");
link.classList.add("ml-4");
} else if (level === 4) {
link.classList.add("ml-9");
link.classList.add("ml-6");
}
li.appendChild(link);
@@ -91,6 +94,7 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
/**
* Set up intersection observer for active section tracking
* Only highlights the active section without auto-scrolling
*/
const observer = new IntersectionObserver(
(entries) => {
@@ -102,16 +106,16 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
// Remove active state from all links
document.querySelectorAll("#toc-list a").forEach((el) => {
el.classList.remove(
"bg-purple-500/10", "text-purple-500", "border-l-2", "border-purple-500"
"bg-purple-500/10", "text-purple-500", "border-l-purple-500", "font-medium"
);
el.classList.add("text-muted-foreground");
el.classList.add("text-muted-foreground", "border-transparent");
});
// Add active state to current link
if (link) {
link.classList.remove("text-muted-foreground");
link.classList.remove("text-muted-foreground", "border-transparent");
link.classList.add(
"bg-purple-500/10", "text-purple-500", "border-l-2", "border-purple-500"
"bg-purple-500/10", "text-purple-500", "border-l-purple-500", "font-medium"
);
}
}
@@ -132,10 +136,17 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
/* Additional styling for smooth transitions */
#toc-list a:hover {
transform: translateX(2px);
background-color: rgba(168, 85, 247, 0.05);
}
#toc-list a:focus {
outline: 2px solid rgba(168, 85, 247, 0.5);
outline-offset: 2px;
outline: 2px solid rgba(168, 85, 247, 0.3);
outline-offset: 1px;
}
/* Smooth transition for active state */
#toc-list a {
position: relative;
transition: all 0.2s ease;
}
</style>

56
src/components/ui/scroll-area.tsx Normal file
View File

@@ -0,0 +1,56 @@
import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
import { cn } from "@/lib/utils"
function ScrollArea({
className,
children,
...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
return (
<ScrollAreaPrimitive.Root
data-slot="scroll-area"
className={cn("relative", className)}
{...props}
>
<ScrollAreaPrimitive.Viewport
data-slot="scroll-area-viewport"
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
>
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
)
}
function ScrollBar({
className,
orientation = "vertical",
...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
return (
<ScrollAreaPrimitive.ScrollAreaScrollbar
data-slot="scroll-area-scrollbar"
orientation={orientation}
className={cn(
"flex touch-none p-px transition-colors select-none",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent",
className
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb
data-slot="scroll-area-thumb"
className="bg-border relative flex-1 rounded-full"
/>
</ScrollAreaPrimitive.ScrollAreaScrollbar>
)
}
export { ScrollArea, ScrollBar }

55
src/layouts/AboutLayout.astro
View File

@@ -76,20 +76,18 @@ const lang = Astro.currentLocale as Lang || defaultLang;
<aside class="xl:col-span-1 order-1 xl:order-2">
<div class="xl:sticky xl:top-24 space-y-6 sm:space-y-8 xl:space-y-12 xl:max-h-[calc(100vh-6rem)] xl:overflow-y-auto">
<!-- Table of Contents -->
<div class="bg-card/50 backdrop-blur-sm rounded-2xl border border-border h-auto xl:h-[400px] lg:h-[500px] overflow-y-auto">
<div class="max-xl:hidden">
<div id="nav-content" class="sticky w-72 top-14 max-h-[calc(100svh-3.5rem)] overflow-x-hidden">
<div class="flex flex-col gap-3 p-4">
<h3 class="dark:text-zinc-400 text-blacktext/90 font-bold tracking-wide text-sm sm:text-base uppercase flex items-center mb-4">
<svg class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
</svg>
{lang === 'zh' ? '📑 目录' : '📑 Table of Contents'}
</h3>
<div class="text-neutral-500 dark:text-neutral-300">
<ul id="toc-list" class="leading-relaxed text-sm sm:text-base border-l dark:border-neutral-500/20 border-blacktext/20">
</ul>
</div>
<div class="max-xl:hidden">
<div id="nav-content" class="sticky xl:w-72 w-full top-14">
<div class="flex flex-col gap-3 p-4">
<h3 class="dark:text-zinc-200 text-blacktext font-bold tracking-wide text-sm sm:text-base uppercase flex items-center">
<svg class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
</svg>
{lang === 'zh' ? '目录' : 'Table of Contents'}
</h3>
<div class="text-neutral-500 dark:text-neutral-300 pr-4">
<ul id="toc-list" class="leading-relaxed text-sm sm:text-base border-l dark:border-neutral-500/20 border-blacktext/20 mt-4">
</ul>
</div>
</div>
</div>
@@ -138,20 +136,20 @@ const lang = Astro.currentLocale as Lang || defaultLang;
// Apply styling based on heading level
const level = parseInt(header.tagName.charAt(1));
link.classList.add(
"block", "w-full", "text-left", "py-2", "px-3", "rounded-lg", "text-sm",
"transition-all", "duration-200", "border-l", "border-transparent",
"text-muted-foreground", "hover:text-foreground", "hover:bg-muted/50"
"block", "w-full", "text-left", "py-1.5", "px-3", "text-sm",
"transition-all", "duration-200", "border-l-2", "border-transparent",
"text-muted-foreground", "hover:text-foreground", "hover:bg-muted/30"
);
// Add indentation based on heading level
if (level === 1) {
link.classList.add("font-semibold");
} else if (level === 2) {
link.classList.add("ml-3");
link.classList.add("ml-2");
} else if (level === 3) {
link.classList.add("ml-6");
link.classList.add("ml-4");
} else if (level === 4) {
link.classList.add("ml-9");
link.classList.add("ml-6");
}
li.appendChild(link);
@@ -182,16 +180,16 @@ const lang = Astro.currentLocale as Lang || defaultLang;
// Remove active state from all links
document.querySelectorAll("#toc-list a").forEach((el) => {
el.classList.remove(
"bg-purple-500/10", "text-purple-500", "border-l-2", "border-purple-500"
"bg-purple-500/10", "text-purple-500", "border-l-purple-500", "font-medium"
);
el.classList.add("text-muted-foreground");
el.classList.add("text-muted-foreground", "border-transparent");
});
// Add active state to current link
if (link) {
link.classList.remove("text-muted-foreground");
link.classList.remove("text-muted-foreground", "border-transparent");
link.classList.add(
"bg-purple-500/10", "text-purple-500", "border-l-2", "border-purple-500"
"bg-purple-500/10", "text-purple-500", "border-l-purple-500", "font-medium"
);
}
}
@@ -236,11 +234,16 @@ const lang = Astro.currentLocale as Lang || defaultLang;
/* Additional styling for smooth transitions */
#toc-list a:hover {
transform: translateX(2px);
background-color: rgba(168, 85, 247, 0.05);
}
#toc-list a:focus {
outline: 2px solid rgba(168, 85, 247, 0.5);
outline-offset: 2px;
outline: 2px solid rgba(168, 85, 247, 0.3);
outline-offset: 1px;
}
#toc-list a {
transition: all 0.2s ease;
}
html,

6
src/layouts/BlogPostLayout.astro
View File

@@ -111,10 +111,8 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
<!-- Sidebar with Table of Contents -->
<aside class="xl:col-span-1 order-1 xl:order-2 md:mb-0 mb-6">
<div class="xl:sticky xl:top-24">
<!-- Table of Contents with dynamic max height -->
<div class="bg-card/50 backdrop-blur-sm rounded-2xl border border-border overflow-y-auto" style="max-height: min(calc(100vh - 6rem), 600px);">
<TableOfContents lang={lang} />
</div>
<!-- Table of Contents without height restriction -->
<TableOfContents lang={lang} />
</div>
</aside>
</div>