bump docubook version 1.13.6
This commit is contained in:
@@ -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
|
||||
)}
|
||||
|
||||
@@ -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
138
components/markdown/FileTreeMdx.tsx
Normal 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;
|
||||
@@ -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()}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user