hanzoai/docs
2
0
Fork 0
mirror of https://github.com/hanzo-docs/docs.git synced 2026-10-25 04:20:02 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UI: Improve TOC sizing

Browse Source
This commit is contained in:
Fuma Nama
2026-04-20 18:11:08 +08:00
parent 8478be27ce
commit 3ae8809db8
7 changed files with 42 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/shy-buttons-know.md
+6
View File
@@ -0,0 +1,6 @@
---
'fumadocs-ui': patch
'@fumadocs/base-ui': patch
---
Improve TOC sizing
packages/base-ui/src/layouts/docs/page/slots/toc.tsx
+6 -4
View File
@@ -210,7 +210,7 @@ function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>
{...props}
>
<ProgressCircle
value={(selectedIdx + 1) / Math.max(1, items.length)}
value={(items.findLastIndex((item) => item.active) + 1) / Math.max(1, items.length)}
max={1}
className={cn('shrink-0', open && 'text-fd-primary')}
/>
@@ -254,14 +254,15 @@ function clamp(input: number, min: number, max: number): number {
function ProgressCircle({
value,
strokeWidth = 2,
size = 24,
strokeWidth = 1.5,
size = 18,
min = 0,
max = 100,
style,
...restSvgProps
}: ProgressCircleProps) {
const normalizedValue = clamp(value, min, max);
const radius = (size - strokeWidth) / 2;
const radius = size / 2 - strokeWidth;
const circumference = 2 * Math.PI * radius;
const progress = (normalizedValue / max) * circumference;
const circleProps = {
@@ -279,6 +280,7 @@ function ProgressCircle({
aria-valuenow={normalizedValue}
aria-valuemin={min}
aria-valuemax={max}
style={{ width: size, height: size, ...style }}
{...restSvgProps}
>
<circle {...circleProps} className="stroke-current/25" />
packages/base-ui/src/layouts/flux/page/slots/toc.tsx
+6 -4
View File
@@ -184,7 +184,7 @@ function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>
{...props}
>
<ProgressCircle
value={(selectedIdx + 1) / Math.max(1, items.length)}
value={(items.findLastIndex((item) => item.active) + 1) / Math.max(1, items.length)}
max={1}
className={cn('shrink-0', open && 'text-fd-primary')}
/>
@@ -225,14 +225,15 @@ function clamp(input: number, min: number, max: number): number {
function ProgressCircle({
value,
strokeWidth = 2,
size = 24,
strokeWidth = 1.5,
size = 18,
min = 0,
max = 100,
style,
...restSvgProps
}: ProgressCircleProps) {
const normalizedValue = clamp(value, min, max);
const radius = (size - strokeWidth) / 2;
const radius = size / 2 - strokeWidth;
const circumference = 2 * Math.PI * radius;
const progress = (normalizedValue / max) * circumference;
const circleProps = {
@@ -250,6 +251,7 @@ function ProgressCircle({
aria-valuenow={normalizedValue}
aria-valuemin={min}
aria-valuemax={max}
style={{ width: size, height: size, ...style }}
{...restSvgProps}
>
<circle {...circleProps} className="stroke-current/25" />
packages/base-ui/src/layouts/notebook/page/slots/toc.tsx
+6 -4
View File
@@ -210,7 +210,7 @@ function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>
{...props}
>
<ProgressCircle
value={(selectedIdx + 1) / Math.max(1, items.length)}
value={(items.findLastIndex((item) => item.active) + 1) / Math.max(1, items.length)}
max={1}
className={cn('shrink-0', open && 'text-fd-primary')}
/>
@@ -254,14 +254,15 @@ function clamp(input: number, min: number, max: number): number {
function ProgressCircle({
value,
strokeWidth = 2,
size = 24,
strokeWidth = 1.5,
size = 18,
min = 0,
max = 100,
style,
...restSvgProps
}: ProgressCircleProps) {
const normalizedValue = clamp(value, min, max);
const radius = (size - strokeWidth) / 2;
const radius = size / 2 - strokeWidth;
const circumference = 2 * Math.PI * radius;
const progress = (normalizedValue / max) * circumference;
const circleProps = {
@@ -279,6 +280,7 @@ function ProgressCircle({
aria-valuenow={normalizedValue}
aria-valuemin={min}
aria-valuemax={max}
style={{ width: size, height: size, ...style }}
{...restSvgProps}
>
<circle {...circleProps} className="stroke-current/25" />
packages/radix-ui/src/layouts/docs/page/slots/toc.tsx
+6 -4
View File
@@ -210,7 +210,7 @@ function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>
{...props}
>
<ProgressCircle
value={(selectedIdx + 1) / Math.max(1, items.length)}
value={(items.findLastIndex((item) => item.active) + 1) / Math.max(1, items.length)}
max={1}
className={cn('shrink-0', open && 'text-fd-primary')}
/>
@@ -254,14 +254,15 @@ function clamp(input: number, min: number, max: number): number {
function ProgressCircle({
value,
strokeWidth = 2,
size = 24,
strokeWidth = 1.5,
size = 18,
min = 0,
max = 100,
style,
...restSvgProps
}: ProgressCircleProps) {
const normalizedValue = clamp(value, min, max);
const radius = (size - strokeWidth) / 2;
const radius = size / 2 - strokeWidth;
const circumference = 2 * Math.PI * radius;
const progress = (normalizedValue / max) * circumference;
const circleProps = {
@@ -279,6 +280,7 @@ function ProgressCircle({
aria-valuenow={normalizedValue}
aria-valuemin={min}
aria-valuemax={max}
style={{ width: size, height: size, ...style }}
{...restSvgProps}
>
<circle {...circleProps} className="stroke-current/25" />
packages/radix-ui/src/layouts/flux/page/slots/toc.tsx
+6 -4
View File
@@ -184,7 +184,7 @@ function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>
{...props}
>
<ProgressCircle
value={(selectedIdx + 1) / Math.max(1, items.length)}
value={(items.findLastIndex((item) => item.active) + 1) / Math.max(1, items.length)}
max={1}
className={cn('shrink-0', open && 'text-fd-primary')}
/>
@@ -225,14 +225,15 @@ function clamp(input: number, min: number, max: number): number {
function ProgressCircle({
value,
strokeWidth = 2,
size = 24,
strokeWidth = 1.5,
size = 18,
min = 0,
max = 100,
style,
...restSvgProps
}: ProgressCircleProps) {
const normalizedValue = clamp(value, min, max);
const radius = (size - strokeWidth) / 2;
const radius = size / 2 - strokeWidth;
const circumference = 2 * Math.PI * radius;
const progress = (normalizedValue / max) * circumference;
const circleProps = {
@@ -250,6 +251,7 @@ function ProgressCircle({
aria-valuenow={normalizedValue}
aria-valuemin={min}
aria-valuemax={max}
style={{ width: size, height: size, ...style }}
{...restSvgProps}
>
<circle {...circleProps} className="stroke-current/25" />
packages/radix-ui/src/layouts/notebook/page/slots/toc.tsx
+6 -4
View File
@@ -210,7 +210,7 @@ function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>
{...props}
>
<ProgressCircle
value={(selectedIdx + 1) / Math.max(1, items.length)}
value={(items.findLastIndex((item) => item.active) + 1) / Math.max(1, items.length)}
max={1}
className={cn('shrink-0', open && 'text-fd-primary')}
/>
@@ -254,14 +254,15 @@ function clamp(input: number, min: number, max: number): number {
function ProgressCircle({
value,
strokeWidth = 2,
size = 24,
strokeWidth = 1.5,
size = 18,
min = 0,
max = 100,
style,
...restSvgProps
}: ProgressCircleProps) {
const normalizedValue = clamp(value, min, max);
const radius = (size - strokeWidth) / 2;
const radius = size / 2 - strokeWidth;
const circumference = 2 * Math.PI * radius;
const progress = (normalizedValue / max) * circumference;
const circleProps = {
@@ -279,6 +280,7 @@ function ProgressCircle({
aria-valuenow={normalizedValue}
aria-valuemin={min}
aria-valuemax={max}
style={{ width: size, height: size, ...style }}
{...restSvgProps}
>
<circle {...circleProps} className="stroke-current/25" />