dwindown/docs.tutoraddons.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bump docubook version 1.13.6

Browse Source
This commit is contained in:
gitfromwildan
2025-06-14 20:33:39 +07:00
parent 3da46325cf
commit c30eaf295d
39 changed files with 551 additions and 9035 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
components/context-popover.tsx Normal file
View File

@@ -0,0 +1,133 @@
"use client";
import { usePathname, useRouter } from "next/navigation";
import { useState, useEffect } from "react";
import { ROUTES, EachRoute } from "@/lib/routes-config";
import { cn } from "@/lib/utils";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import * as LucideIcons from "lucide-react";
import { ChevronsUpDown, Check, type LucideIcon } from "lucide-react";
interface ContextPopoverProps {
className?: string;
}
// Get all root-level routes with context
function getContextRoutes(): EachRoute[] {
return ROUTES.filter(route => route.context);
}
// Get the first item's href from a route
function getFirstItemHref(route: EachRoute): string {
return route.items?.[0]?.href ? `${route.href}${route.items[0].href}` : route.href;
}
// Get the active context route from the current path
function getActiveContextRoute(path: string): EachRoute | undefined {
if (!path.startsWith('/docs')) return undefined;
const docPath = path.replace(/^\/docs/, '');
return getContextRoutes().find(route => docPath.startsWith(route.href));
}
// Get icon component by name
function getIcon(name: string) {
const Icon = LucideIcons[name as keyof typeof LucideIcons] as LucideIcon | undefined;
if (!Icon) return <LucideIcons.FileQuestion className="h-4 w-4" />;
return <Icon className="h-4 w-4" />;
}
export default function ContextPopover({ className }: ContextPopoverProps) {
const pathname = usePathname();
const router = useRouter();
const [activeRoute, setActiveRoute] = useState<EachRoute>();
const contextRoutes = getContextRoutes();
useEffect(() => {
if (pathname.startsWith("/docs")) {
setActiveRoute(getActiveContextRoute(pathname));
} else {
setActiveRoute(undefined);
}
}, [pathname]);
if (!pathname.startsWith("/docs") || contextRoutes.length === 0) {
return null;
}
return (
<Popover>
<PopoverTrigger asChild>
<Button
variant="ghost"
className={cn(
"w-full max-w-[240px] flex items-center justify-between font-semibold text-foreground px-0 pt-8",
"hover:bg-transparent hover:text-foreground",
className
)}
>
<div className="flex items-center gap-2">
{activeRoute?.context?.icon && (
<span className="text-primary bg-primary/10 border border-primary dark:border dark:border-accent dark:bg-accent/10 dark:text-accent rounded p-0.5">
{getIcon(activeRoute.context.icon)}
</span>
)}
<span className="truncate text-sm">
{activeRoute?.context?.title || activeRoute?.title || 'Select context'}
</span>
</div>
<ChevronsUpDown className="h-4 w-4 text-foreground/50" />
</Button>
</PopoverTrigger>
<PopoverContent
className="w-64 p-2"
align="start"
sideOffset={6}
>
<div className="space-y-1">
{contextRoutes.map((route) => {
const isActive = activeRoute?.href === route.href;
const firstItemPath = getFirstItemHref(route);
const contextPath = `/docs${firstItemPath}`;
return (
<button
key={route.href}
onClick={() => router.push(contextPath)}
className={cn(
"relative flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm",
"text-left outline-none transition-colors",
isActive
? "bg-primary/20 text-primary dark:bg-accent/20 dark:text-accent"
: "text-foreground/80 hover:bg-primary/20 dark:text-foreground/60 dark:hover:bg-accent/20"
)}
>
{route.context?.icon && (
<span className={cn(
"flex h-4 w-4 items-center justify-center",
isActive ? "text-primary dark:text-accent" : "text-foreground/60"
)}>
{getIcon(route.context.icon)}
</span>
)}
<div className="flex-1 min-w-0 overflow-hidden">
<div className="truncate font-medium">
{route.context?.title || route.title}
</div>
{route.context?.description && (
<div className="text-xs text-muted-foreground truncate text-ellipsis overflow-hidden max-w-full">
{route.context.description}
</div>
)}
</div>
{isActive && (
<Check className="h-3.5 w-3.5" />
)}
</button>
);
})}
</div>
</PopoverContent>
</Popover>
);
}

60
components/docs-menu.tsx
View File

@@ -1,44 +1,62 @@
"use client";
import { ROUTES } from "@/lib/routes-config";
import { ROUTES, EachRoute } from "@/lib/routes-config";
import SubLink from "./sublink";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
interface DocsMenuProps {
isSheet?: boolean;
className?: string;
}
// Get the current context from the path
function getCurrentContext(path: string): string | undefined {
if (!path.startsWith('/docs')) return undefined;
// Extract the first segment after /docs/
const match = path.match(/^\/docs\/([^\/]+)/);
return match ? match[1] : undefined;
}
// Get the route that matches the current context
function getContextRoute(contextPath: string): EachRoute | undefined {
return ROUTES.find(route => {
const normalizedHref = route.href.replace(/^\/+|\/+$/g, '');
return normalizedHref === contextPath;
});
}
export default function DocsMenu({ isSheet = false, className = "" }: DocsMenuProps) {
const pathname = usePathname();
// Skip rendering if not on a docs page
if (!pathname.startsWith("/docs")) return null;
// Get the current context
const currentContext = getCurrentContext(pathname);
// Get the route for the current context
const contextRoute = currentContext ? getContextRoute(currentContext) : undefined;
// If no context route is found, don't render anything
if (!contextRoute) return null;
return (
<nav
aria-label="Documentation navigation"
className={className}
className={cn("transition-all duration-200", className)}
>
<ul className="flex flex-col gap-3.5 mt-5 pr-2 pb-6">
{ROUTES.map((item, index) => {
// Normalize href - hapus leading/trailing slashes
const normalizedHref = `/${item.href.replace(/^\/+|\/+$/g, '')}`;
const itemHref = `/docs${normalizedHref}`;
const modifiedItems = {
...item,
href: itemHref,
level: 0,
isSheet,
};
return (
<li key={`${item.title}-${index}`}>
<SubLink {...modifiedItems} />
</li>
);
})}
<ul className="flex flex-col gap-1.5 py-4">
{/* Display only the items from the current context */}
<li key={contextRoute.title}>
<SubLink
{...contextRoute}
href={`/docs${contextRoute.href}`}
level={0}
isSheet={isSheet}
/>
</li>
</ul>
</nav>
);

6
components/footer.tsx
View File

@@ -63,8 +63,9 @@ export function FooterButtons() {
target="_blank"
rel="noopener noreferrer"
aria-label={item.name}
className="text-muted-foreground hover:text-foreground transition-colors"
>
<IconComponent className="w-4 h-4 text-gray-800 transition-colors dark:text-gray-400 hover:text-primary" />
<IconComponent className="w-4 h-4" />
</Link>
);
})}
@@ -79,7 +80,8 @@ export function MadeWith() {
<span className="text-primary">
<Link href="https://www.docubook.pro" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2 text-muted-foreground">
DocuBook
</Link></span>
</Link>
</span>
</>
);
}

18
components/leftbar.tsx
View File

@@ -9,12 +9,12 @@ import {
} from "@/components/ui/sheet";
import { Logo, NavMenu } from "@/components/navbar";
import { Button } from "@/components/ui/button";
import { AlignLeftIcon, PanelLeftClose, PanelLeftOpen } from "lucide-react";
import { FooterButtons } from "@/components/footer";
import { LayoutGrid, PanelLeftClose, PanelLeftOpen } from "lucide-react";
import { DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { ScrollArea } from "@/components/ui/scroll-area";
import DocsMenu from "@/components/docs-menu";
import { ModeToggle } from "@/components/theme-toggle";
import ContextPopover from "@/components/context-popover";
// Toggle Button Component
export function ToggleButton({
@@ -52,9 +52,14 @@ export function Leftbar() {
${collapsed ? "w-[24px]" : "w-[280px]"} flex flex-col pr-2`}
>
<ToggleButton collapsed={collapsed} onToggle={toggleCollapse} />
{/* Scrollable DocsMenu */}
{/* Scrollable Content */}
<ScrollArea className="flex-1 px-0.5 pb-4">
{!collapsed && <DocsMenu />}
{!collapsed && (
<div className="space-y-2">
<ContextPopover />
<DocsMenu />
</div>
)}
</ScrollArea>
</aside>
);
@@ -65,7 +70,7 @@ export function SheetLeftbar() {
<Sheet>
<SheetTrigger asChild>
<Button variant="ghost" size="icon" className="max-lg:flex hidden">
<AlignLeftIcon />
<LayoutGrid />
</Button>
</SheetTrigger>
<SheetContent className="flex flex-col gap-4 px-0" side="left">
@@ -82,7 +87,8 @@ export function SheetLeftbar() {
<div className="flex flex-col gap-2.5 mt-3 mx-2 px-5">
<NavMenu isSheet />
</div>
<div className="mx-2 px-5">
<div className="mx-2 px-5 space-y-2">
<ContextPopover />
<DocsMenu isSheet />
</div>
<div className="flex w-2/4 px-5">

2
components/markdown/CardGroupMdx.tsx
View File

@@ -13,7 +13,7 @@ const CardGroup: React.FC<CardGroupProps> = ({ children, cols = 2, className })
return (
<div
className={clsx(
"grid gap-4",
"grid gap-4 text-foreground",
`grid-cols-1 sm:grid-cols-${cols}`,
className
)}

9
components/markdown/CardMdx.tsx
View File

@@ -20,8 +20,9 @@ const Card: React.FC<CardProps> = ({ title, icon, href, horizontal, children, cl
const content = (
<div
className={clsx(
"border rounded-lg shadow-sm p-4 transition-all duration-200 bg-white dark:bg-gray-900",
"hover:bg-gray-50 dark:hover:bg-gray-800",
"border rounded-lg shadow-sm p-4 transition-all duration-200",
"bg-card text-card-foreground border-border",
"hover:bg-accent/5 hover:border-accent/30",
"flex gap-2",
horizontal ? "flex-row items-center gap-1" : "flex-col space-y-1",
className
@@ -29,8 +30,8 @@ const Card: React.FC<CardProps> = ({ title, icon, href, horizontal, children, cl
>
{Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" />}
<div className="flex-1 min-w-0 my-auto h-full">
<span className="text-base font-semibold">{title}</span>
<div className="text-sm text-gray-600 dark:text-gray-400 -mt-3">{children}</div>
<span className="text-base font-semibold text-foreground">{title}</span>
<div className="text-sm text-muted-foreground -mt-3">{children}</div>
</div>
</div>
);

138
components/markdown/FileTreeMdx.tsx Normal file
View File

@@ -0,0 +1,138 @@
'use client';
import React, { useState, ReactNode, Children, isValidElement, cloneElement } from 'react';
import { ChevronRight, File as FileIcon, Folder as FolderIcon, FolderOpen } from 'lucide-react';
interface FileProps {
name: string;
children?: ReactNode;
}
const FileComponent = ({ name }: FileProps) => {
const [isHovered, setIsHovered] = useState(false);
const fileExtension = name.split('.').pop()?.toUpperCase();
return (
<div
className={`
flex items-center gap-2 py-1.5 pl-7 pr-3 text-sm rounded-md
transition-colors duration-150 cursor-default select-none
${isHovered ? 'bg-accent/10' : 'hover:bg-muted/50'}
`}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
tabIndex={-1}
>
<FileIcon className={`
h-3.5 w-3.5 flex-shrink-0 transition-colors
${isHovered ? 'text-accent' : 'text-muted-foreground'}
`} />
<span className="font-mono text-sm text-foreground truncate">{name}</span>
{isHovered && fileExtension && (
<span className="ml-auto text-xs text-muted-foreground/80">
{fileExtension}
</span>
)}
</div>
);
};
const FolderComponent = ({ name, children }: FileProps) => {
const [isOpen, setIsOpen] = useState(true); // Set to true by default
const [isHovered, setIsHovered] = useState(false);
const hasChildren = React.Children.count(children) > 0;
return (
<div className="relative">
<div
className={`
flex items-center gap-2 py-1.5 pl-4 pr-3 rounded-md
transition-colors duration-150 select-none
${isHovered ? 'bg-muted/60' : ''}
${isOpen ? 'text-foreground' : 'text-foreground/80'}
${hasChildren ? 'cursor-pointer' : 'cursor-default'}
`}
onClick={() => hasChildren && setIsOpen(!isOpen)}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
tabIndex={-1}
onKeyDown={(e) => e.preventDefault()}
>
{hasChildren ? (
<ChevronRight
className={`
h-3.5 w-3.5 flex-shrink-0 transition-transform duration-200
${isOpen ? 'rotate-90' : ''}
${isHovered ? 'text-foreground/70' : 'text-muted-foreground'}
`}
/>
) : (
<div className="w-3.5" />
)}
{isOpen ? (
<FolderOpen className={`
h-4 w-4 flex-shrink-0 transition-colors
${isHovered ? 'text-accent' : 'text-muted-foreground'}
`} />
) : (
<FolderIcon className={`
h-4 w-4 flex-shrink-0 transition-colors
${isHovered ? 'text-accent/80' : 'text-muted-foreground/80'}
`} />
)}
<span className={`
font-medium transition-colors duration-150
${isHovered ? 'text-accent' : ''}
`}>
{name}
</span>
</div>
{isOpen && hasChildren && (
<div className="ml-5 border-l-2 border-muted/50 pl-2">
{children}
</div>
)}
</div>
);
};
export const Files = ({ children }: { children: ReactNode }) => {
return (
<div
className="
rounded-xl border border-muted/50
bg-card/50 backdrop-blur-sm
shadow-sm overflow-hidden
transition-all duration-200
hover:shadow-md hover:border-muted/60
"
onKeyDown={(e) => e.preventDefault()}
>
<div className="p-2">
{Children.map(children, (child, index) => {
if (isValidElement(child)) {
return cloneElement(child, { key: index });
}
return null;
})}
</div>
</div>
);
};
export const Folder = ({ name, children }: FileProps) => {
return <FolderComponent name={name}>{children}</FolderComponent>;
};
export const File = ({ name }: FileProps) => {
return <FileComponent name={name} />;
};
// MDX Components
export const FileTreeMdx = {
Files,
File,
Folder,
};
export default FileTreeMdx;

2
components/markdown/KeyboardMdx.tsx
View File

@@ -88,7 +88,7 @@ const KbdComponent: React.FC<KbdProps> = ({
return (
<kbd
className="inline-flex items-center justify-center px-2 py-1 mx-0.5 text-xs font-mono font-medium text-gray-800 bg-gray-100 border border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
className="inline-flex items-center justify-center px-2 py-1 mx-0.5 text-xs font-mono font-medium text-foreground bg-secondary/70 border rounded-md"
{...props}
>
{renderContent()}

2
components/markdown/NoteMdx.tsx
View File

@@ -29,7 +29,7 @@ export default function Note({
"dark:bg-stone-950/25 bg-stone-50": type === "note",
"dark:bg-red-950 bg-red-100 border-red-200 dark:border-red-900":
type === "danger",
"dark:bg-orange-950 bg-orange-100 border-orange-200 dark:border-orange-900":
"bg-orange-50 border-orange-200 dark:border-orange-900 dark:bg-orange-900/50":
type === "warning",
"dark:bg-green-950 bg-green-100 border-green-200 dark:border-green-900":
type === "success",

4
components/markdown/StepperMdx.tsx
View File

@@ -11,13 +11,13 @@ export function Stepper({ children }: PropsWithChildren) {
return (
<div
className={cn(
"border-l pl-9 ml-3 relative",
"border-l border-muted pl-9 ml-3 relative",
clsx({
"pb-5 ": index < length - 1,
})
)}
>
<div className="bg-muted w-8 h-8 text-xs font-medium rounded-md border flex items-center justify-center absolute -left-4 font-code">
<div className="bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code">
{index + 1}
</div>
{child}

9
components/markdown/TooltipsMdx.tsx
View File

@@ -11,14 +11,17 @@ const Tooltip: React.FC<TooltipProps> = ({ text, tip }) => {
return (
<span
className="relative inline-block cursor-pointer underline decoration-dotted text-blue-500"
className="relative inline-flex items-center cursor-help text-primary hover:text-primary/80 transition-colors"
onMouseEnter={() => setVisible(true)}
onMouseLeave={() => setVisible(false)}
>
{text}
<span className="border-b border-dashed border-primary/60 pb-0.5">
{text}
</span>
{visible && (
<span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl bg-background text-foreground text-sm p-2 rounded shadow-md break-words text-center outline outline-1 outline-offset-2">
<span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-64 bg-popover text-popover-foreground text-sm p-3 rounded-md shadow-lg border border-border/50 break-words text-left z-50">
{tip}
<span className="absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-popover rotate-45 border-b border-r border-border/50 -z-10" />
</span>
)}
</span>

6
components/navbar.tsx
View File

@@ -63,15 +63,15 @@ export function NavMenu({ isSheet = false }) {
const Comp = (
<Anchor
key={`${item.title}-${item.href}`}
activeClassName="!text-primary md:font-semibold font-medium"
activeClassName="text-primary dark:text-accent md:font-semibold font-medium"
absolute
className="flex items-center gap-1 dark:text-stone-300/85 text-stone-800"
className="flex items-center gap-1 text-foreground/80 hover:text-foreground transition-colors"
href={item.href}
target={isExternal ? "_blank" : undefined}
rel={isExternal ? "noopener noreferrer" : undefined}
>
{item.title}
{isExternal && <ArrowUpRight className="w-4 h-4 text-muted-foreground" />}
{isExternal && <ArrowUpRight className="w-4 h-4 text-foreground/80" />}
</Anchor>
);
return isSheet ? (

2
components/pagination.tsx
View File

@@ -1,7 +1,7 @@
import { getPreviousNext } from "@/lib/markdown";
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
import Link from "next/link";
import { buttonVariants } from "./ui/button";
import { buttonVariants } from "@/components/ui/button";
export default function Pagination({ pathname }: { pathname: string }) {
const res = getPreviousNext(pathname);

44
components/search.tsx
View File

@@ -17,6 +17,23 @@ import {
import Anchor from "./anchor";
import { advanceSearch, cn } from "@/lib/utils";
import { ScrollArea } from "@/components/ui/scroll-area";
import { page_routes } from "@/lib/routes-config";
// Define the ContextInfo type to match the one in routes-config
type ContextInfo = {
icon: string;
description: string;
title?: string;
};
type SearchResult = {
title: string;
href: string;
noLink?: boolean;
items?: undefined;
score?: number;
context?: ContextInfo;
};
export default function Search() {
const router = useRouter();
@@ -39,10 +56,25 @@ export default function Search() {
};
}, []);
const filteredResults = useMemo(
() => advanceSearch(searchedInput.trim()),
[searchedInput]
);
const filteredResults = useMemo<SearchResult[]>(() => {
const trimmedInput = searchedInput.trim();
// If search input is empty or less than 3 characters, show initial suggestions
if (trimmedInput.length < 3) {
return page_routes
.filter((route: { href: string }) => !route.href.endsWith('/')) // Filter out directory routes
.slice(0, 6) // Limit to 6 posts
.map((route: { title: string; href: string; noLink?: boolean; context?: ContextInfo }) => ({
title: route.title,
href: route.href,
noLink: route.noLink,
context: route.context
}));
}
// For search with 3 or more characters, use the advance search
return advanceSearch(trimmedInput) as unknown as SearchResult[];
}, [searchedInput]);
useEffect(() => {
setSelectedIndex(0);
@@ -100,10 +132,10 @@ export default function Search() {
<div className="relative flex-1 cursor-pointer max-w-[140px]">
<div className="flex items-center">
<div className="md:hidden p-2 -ml-2">
<SearchIcon className="h-5 w-5 text-stone-500 dark:text-stone-400" />
<SearchIcon className="h-5 w-5 text-muted-foreground" />
</div>
<div className="hidden md:block w-full">
<SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-stone-500 dark:text-stone-400" />
<SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
className="w-full rounded-full dark:bg-background/95 bg-background border h-9 pl-10 pr-0 sm:pr-4 text-sm shadow-sm overflow-ellipsis"
placeholder="Search"

13
components/sublink.tsx
View File

@@ -54,9 +54,10 @@ export default function SubLink({
// Only apply active styles if it's an exact match and not a parent with active children
const Comp = useMemo(() => (
<Anchor
activeClassName={!hasActiveChild ? "text-primary font-medium" : ""}
activeClassName={!hasActiveChild ? "dark:text-accent text-primary font-medium" : ""}
href={fullHref}
className={cn(
"text-foreground/80 hover:text-foreground transition-colors",
hasActiveChild && "font-medium text-foreground"
)}
>
@@ -72,8 +73,8 @@ export default function SubLink({
)
) : (
<h4 className={cn(
"font-medium sm:text-sm",
hasActiveChild ? "text-foreground" : "text-primary"
"font-medium sm:text-sm text-foreground/90 hover:text-foreground transition-colors",
hasActiveChild ? "text-foreground" : "text-foreground/80"
)}>
{title}
</h4>
@@ -93,7 +94,7 @@ export default function SubLink({
>
<div className="flex items-center justify-between w-full">
{titleOrLink}
<span className="ml-2">
<span className="ml-2 text-muted-foreground">
{!isOpen ? (
<ChevronRight className="h-[0.9rem] w-[0.9rem]" aria-hidden="true" />
) : (
@@ -111,8 +112,8 @@ export default function SubLink({
>
<div
className={cn(
"flex flex-col items-start sm:text-sm dark:text-stone-300/85 text-stone-800 ml-0.5 mt-2.5 gap-3",
level > 0 && "pl-4 border-l ml-1.5"
"flex flex-col items-start sm:text-sm text-foreground/80 ml-0.5 mt-2.5 gap-3 hover:[&_a]:text-foreground transition-colors",
level > 0 && "pl-4 border-l border-border ml-1.5"
)}
>
{items?.map((innerLink) => (

20
components/theme-toggle.tsx
View File

@@ -28,7 +28,7 @@ export function ModeToggle() {
setSelectedTheme(value);
}
}}
className="flex items-center gap-1 rounded-full border border-gray-300 dark:border-gray-700 p-1 transition-all"
className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-1 transition-all"
>
<ToggleGroupItem
value="light"
@@ -36,11 +36,11 @@ export function ModeToggle() {
aria-label="Light Mode"
className={`rounded-full p-1 transition-all ${
selectedTheme === "light"
? "bg-blue-500 text-white"
: "bg-transparent"
? "bg-primary text-primary-foreground"
: "bg-transparent hover:bg-muted/50"
}`}
>
<Sun className={`h-4 w-4 ${selectedTheme === "light" ? "text-white" : "text-gray-600 dark:text-gray-300"}`} />
<Sun className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem
value="system"
@@ -48,11 +48,11 @@ export function ModeToggle() {
aria-label="System Mode"
className={`rounded-full p-1 transition-all ${
selectedTheme === "system"
? "bg-blue-500 text-white"
: "bg-transparent"
? "bg-primary text-primary-foreground"
: "bg-transparent hover:bg-muted/50"
}`}
>
<Monitor className={`h-4 w-4 ${selectedTheme === "system" ? "text-white" : "text-gray-600 dark:text-gray-300"}`} />
<Monitor className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem
value="dark"
@@ -60,11 +60,11 @@ export function ModeToggle() {
aria-label="Dark Mode"
className={`rounded-full p-1 transition-all ${
selectedTheme === "dark"
? "bg-blue-500 text-white"
: "bg-transparent"
? "bg-primary text-primary-foreground"
: "bg-transparent hover:bg-muted/50"
}`}
>
<Moon className={`h-4 w-4 ${selectedTheme === "dark" ? "text-white" : "text-gray-600 dark:text-gray-300"}`} />
<Moon className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
);

18
components/toc-observer.tsx
View File

@@ -149,7 +149,7 @@ export default function TocObserver({
return (
<div className="relative">
<div className="relative text-sm text-stone-600 dark:text-stone-400">
<div className="relative text-sm text-foreground/70 hover:text-foreground transition-colors">
<div className="flex flex-col gap-0">
{data.map(({ href, level, text }, index) => {
const id = href.slice(1);
@@ -172,7 +172,7 @@ export default function TocObserver({
{/* Vertical line */}
<div className={clsx(
"absolute left-0 top-0 h-full w-px",
isActive ? "bg-primary/20" : "bg-stone-300 dark:bg-stone-600"
isActive ? "bg-primary/20 dark:bg-primary/30" : "bg-border/50 dark:bg-border/50"
)}>
{isActive && (
<motion.div
@@ -187,11 +187,11 @@ export default function TocObserver({
{/* Horizontal line */}
<div className={clsx(
"absolute left-0 top-1/2 h-px w-6",
isActive ? "bg-primary/20" : "bg-stone-300 dark:bg-stone-600"
isActive ? "bg-primary/20 dark:bg-primary/30" : "bg-border/50 dark:bg-border/50"
)}>
{isActive && (
<motion.div
className="absolute left-0 top-0 h-full w-full bg-primary origin-left"
className="absolute left-0 top-0 h-full w-full bg-primary dark:bg-accent origin-left"
initial={{ scaleX: 0 }}
animate={{ scaleX: scrollProgress }}
transition={{ duration: 0.3, delay: 0.1 }}
@@ -207,8 +207,8 @@ export default function TocObserver({
className={clsx(
"relative flex items-center py-2 transition-colors",
{
"text-primary dark:text-primary-400 font-medium": isActive,
"text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-200": !isActive,
"text-primary dark:text-primary font-medium": isActive,
"text-muted-foreground hover:text-foreground dark:hover:text-foreground/90": !isActive,
}
)}
style={{
@@ -229,13 +229,13 @@ export default function TocObserver({
<div className={clsx(
"w-1.5 h-1.5 rounded-full transition-all duration-300 relative z-10",
{
"bg-primary scale-100": isActive,
"bg-stone-300 dark:bg-stone-600 scale-75 group-hover:scale-100 group-hover:bg-primary/50": !isActive,
"bg-primary scale-100 dark:bg-primary/90": isActive,
"bg-muted-foreground/30 dark:bg-muted-foreground/30 scale-75 group-hover:scale-100 group-hover:bg-primary/50 dark:group-hover:bg-primary/50": !isActive,
}
)}>
{isActive && (
<motion.div
className="absolute inset-0 rounded-full bg-primary/20"
className="absolute inset-0 rounded-full bg-primary/20 dark:bg-primary/30"
initial={{ scale: 1 }}
animate={{ scale: 1.8 }}
transition={{