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

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,