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

1
package.json
View File

@@ -17,6 +17,7 @@
},
"dependencies": {
"@astrojs/react": "^4.2.1",
"@radix-ui/react-scroll-area": "^1.2.9",
"@radix-ui/react-slot": "^1.1.2",
"@tailwindcss/vite": "^4.0.14",
"@types/react": "^19.0.12",

148
pnpm-lock.yaml generated
View File

@@ -11,6 +11,9 @@ importers:
'@astrojs/react':
specifier: ^4.2.1
version: 4.3.0(@types/node@24.0.1)(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(jiti@2.4.2)(lightningcss@1.30.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@radix-ui/react-scroll-area':
specifier: ^1.2.9
version: 1.2.9(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@radix-ui/react-slot':
specifier: ^1.1.2
version: 1.2.3(@types/react@19.1.8)(react@19.1.0)
@@ -485,6 +488,12 @@ packages:
peerDependencies:
'@proload/core': ^0.3.2
'@radix-ui/number@1.1.1':
resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
'@radix-ui/primitive@1.1.2':
resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
'@radix-ui/react-compose-refs@1.1.2':
resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
peerDependencies:
@@ -494,6 +503,63 @@ packages:
'@types/react':
optional: true
'@radix-ui/react-context@1.1.2':
resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
peerDependencies:
'@types/react': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@radix-ui/react-direction@1.1.1':
resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
peerDependencies:
'@types/react': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@radix-ui/react-presence@1.1.4':
resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
'@radix-ui/react-primitive@2.1.3':
resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
'@radix-ui/react-scroll-area@1.2.9':
resolution: {integrity: sha512-YSjEfBXnhUELsO2VzjdtYYD4CfQjvao+lhhrX5XsHD7/cyUNzljF1FHEbgTPN7LH2MClfwRMIsYlqTYpKTTe2A==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
'@radix-ui/react-slot@1.2.3':
resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
peerDependencies:
@@ -503,6 +569,24 @@ packages:
'@types/react':
optional: true
'@radix-ui/react-use-callback-ref@1.1.1':
resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
peerDependencies:
'@types/react': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@radix-ui/react-use-layout-effect@1.1.1':
resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
peerDependencies:
'@types/react': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@rolldown/pluginutils@1.0.0-beta.11':
resolution: {integrity: sha512-L/gAA/hyCSuzTF1ftlzUSI/IKr2POHsv1Dd78GfqkR83KMNuswWD61JxGV2L7nRwBBBSDr6R1gCkdTmoN7W4ag==}
@@ -2561,12 +2645,64 @@ snapshots:
'@proload/core': 0.3.3
tsm: 2.3.0
'@radix-ui/number@1.1.1': {}
'@radix-ui/primitive@1.1.2': {}
'@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.8)(react@19.1.0)':
dependencies:
react: 19.1.0
optionalDependencies:
'@types/react': 19.1.8
'@radix-ui/react-context@1.1.2(@types/react@19.1.8)(react@19.1.0)':
dependencies:
react: 19.1.0
optionalDependencies:
'@types/react': 19.1.8
'@radix-ui/react-direction@1.1.1(@types/react@19.1.8)(react@19.1.0)':
dependencies:
react: 19.1.0
optionalDependencies:
'@types/react': 19.1.8
'@radix-ui/react-presence@1.1.4(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
dependencies:
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.8)(react@19.1.0)
react: 19.1.0
react-dom: 19.1.0(react@19.1.0)
optionalDependencies:
'@types/react': 19.1.8
'@types/react-dom': 19.1.6(@types/react@19.1.8)
'@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
dependencies:
'@radix-ui/react-slot': 1.2.3(@types/react@19.1.8)(react@19.1.0)
react: 19.1.0
react-dom: 19.1.0(react@19.1.0)
optionalDependencies:
'@types/react': 19.1.8
'@types/react-dom': 19.1.6(@types/react@19.1.8)
'@radix-ui/react-scroll-area@1.2.9(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
dependencies:
'@radix-ui/number': 1.1.1
'@radix-ui/primitive': 1.1.2
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)
'@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.0)
'@radix-ui/react-direction': 1.1.1(@types/react@19.1.8)(react@19.1.0)
'@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.8)(react@19.1.0)
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.8)(react@19.1.0)
react: 19.1.0
react-dom: 19.1.0(react@19.1.0)
optionalDependencies:
'@types/react': 19.1.8
'@types/react-dom': 19.1.6(@types/react@19.1.8)
'@radix-ui/react-slot@1.2.3(@types/react@19.1.8)(react@19.1.0)':
dependencies:
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)
@@ -2574,6 +2710,18 @@ snapshots:
optionalDependencies:
'@types/react': 19.1.8
'@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.8)(react@19.1.0)':
dependencies:
react: 19.1.0
optionalDependencies:
'@types/react': 19.1.8
'@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.8)(react@19.1.0)':
dependencies:
react: 19.1.0
optionalDependencies:
'@types/react': 19.1.8
'@rolldown/pluginutils@1.0.0-beta.11': {}
'@rollup/pluginutils@5.1.4(rollup@4.43.0)':

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>