dwindown/woonoow-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Migrate documentation content, rebuild UI components, and update core architecture.

Browse Source
This commit is contained in:
gitfromwildan
2026-03-10 01:38:58 +07:00
parent aac81dff8a
commit ab755844a3
132 changed files with 3947 additions and 12862 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
components/SearchModal.tsx
View File

@@ -1,12 +1,13 @@
"use client";
"use client"
import { useRouter } from "next/navigation";
import { useEffect, useMemo, useState, useRef } from "react";
import { ArrowUpIcon, ArrowDownIcon, CornerDownLeftIcon, FileTextIcon } from "lucide-react";
import Anchor from "./anchor";
import { advanceSearch, cn } from "@/lib/utils";
import { ScrollArea } from "@/components/ui/scroll-area";
import { page_routes } from "@/lib/routes-config";
import { useRouter } from "next/navigation"
import { useEffect, useMemo, useState, useRef } from "react"
import { ArrowUpIcon, ArrowDownIcon, CornerDownLeftIcon, FileTextIcon } from "lucide-react"
import Anchor from "./anchor"
import { cn } from "@/lib/utils"
import { advanceSearch } from "@/lib/search/built-in"
import { ScrollArea } from "@/components/ui/scroll-area"
import { page_routes } from "@/lib/routes"
import {
DialogContent,
DialogHeader,
@@ -14,63 +15,63 @@ import {
DialogClose,
DialogTitle,
DialogDescription,
} from "@/components/ui/dialog";
} from "@/components/ui/dialog"
type ContextInfo = {
icon: string;
description: string;
title?: string;
};
icon: string
description: string
title?: string
}
type SearchResult = {
title: string;
href: string;
noLink?: boolean;
items?: undefined;
score?: number;
context?: ContextInfo;
};
title: string
href: string
noLink?: boolean
items?: undefined
score?: number
context?: ContextInfo
}
const paddingMap = {
1: "pl-2",
2: "pl-4",
3: "pl-10",
} as const;
} as const
interface SearchModalProps {
isOpen: boolean;
setIsOpen: (open: boolean) => void;
isOpen: boolean
setIsOpen: (open: boolean) => void
}
export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
const router = useRouter();
const [searchedInput, setSearchedInput] = useState("");
const [selectedIndex, setSelectedIndex] = useState(0);
const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
const router = useRouter()
const [searchedInput, setSearchedInput] = useState("")
const [selectedIndex, setSelectedIndex] = useState(0)
const itemRefs = useRef<(HTMLDivElement | null)[]>([])
useEffect(() => {
if (!isOpen) {
// eslint-disable-next-line react-hooks/set-state-in-effect
setSearchedInput("");
setSearchedInput("")
}
}, [isOpen]);
}, [isOpen])
const filteredResults = useMemo<SearchResult[]>(() => {
const trimmedInput = searchedInput.trim();
const trimmedInput = searchedInput.trim()
if (trimmedInput.length < 3) {
return page_routes
.filter((route) => !route.href.endsWith('/'))
.filter((route) => !route.href.endsWith("/"))
.slice(0, 6)
.map((route: { title: string; href: string; noLink?: boolean; context?: ContextInfo }) => ({
title: route.title,
href: route.href,
noLink: route.noLink,
context: route.context,
}));
}))
}
return advanceSearch(trimmedInput) as unknown as SearchResult[];
}, [searchedInput]);
return advanceSearch(trimmedInput) as unknown as SearchResult[]
}, [searchedInput])
// useEffect(() => {
// setSelectedIndex(0);
@@ -78,39 +79,39 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
useEffect(() => {
const handleNavigation = (event: KeyboardEvent) => {
if (!isOpen || filteredResults.length === 0) return;
if (!isOpen || filteredResults.length === 0) return
if (event.key === "ArrowDown") {
event.preventDefault();
setSelectedIndex((prev) => (prev + 1) % filteredResults.length);
event.preventDefault()
setSelectedIndex((prev) => (prev + 1) % filteredResults.length)
} else if (event.key === "ArrowUp") {
event.preventDefault();
setSelectedIndex((prev) => (prev - 1 + filteredResults.length) % filteredResults.length);
event.preventDefault()
setSelectedIndex((prev) => (prev - 1 + filteredResults.length) % filteredResults.length)
} else if (event.key === "Enter") {
event.preventDefault();
const selectedItem = filteredResults[selectedIndex];
event.preventDefault()
const selectedItem = filteredResults[selectedIndex]
if (selectedItem) {
router.push(selectedItem.href);
setIsOpen(false);
router.push(`/docs${selectedItem.href}`)
setIsOpen(false)
}
}
};
}
window.addEventListener("keydown", handleNavigation);
return () => window.removeEventListener("keydown", handleNavigation);
}, [isOpen, filteredResults, selectedIndex, router, setIsOpen]);
window.addEventListener("keydown", handleNavigation)
return () => window.removeEventListener("keydown", handleNavigation)
}, [isOpen, filteredResults, selectedIndex, router, setIsOpen])
useEffect(() => {
if (itemRefs.current[selectedIndex]) {
itemRefs.current[selectedIndex]?.scrollIntoView({
behavior: "smooth",
block: "nearest",
});
})
}
}, [selectedIndex]);
}, [selectedIndex])
return (
<DialogContent className="p-0 max-w-[650px] sm:top-[38%] top-[45%] !rounded-md">
<DialogContent className="rounded-md! top-[45%] max-w-[650px] p-0 sm:top-[38%]">
<DialogHeader>
<DialogTitle className="sr-only">Search Documentation</DialogTitle>
<DialogDescription className="sr-only">Search through the documentation</DialogDescription>
@@ -119,84 +120,81 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
<input
value={searchedInput}
onChange={(e) => {
setSearchedInput(e.target.value);
setSelectedIndex(0);
setSearchedInput(e.target.value)
setSelectedIndex(0)
}}
placeholder="Type something to search..."
autoFocus
className="h-14 px-6 bg-transparent border-b text-[14px] outline-none w-full"
className="h-14 w-full border-b bg-transparent px-6 text-[14px] outline-none"
aria-label="Search documentation"
/>
{filteredResults.length == 0 && searchedInput && (
<p className="text-muted-foreground mx-auto mt-2 text-sm">
No results found for{" "}
<span className="text-primary">{`"${searchedInput}"`}</span>
No results found for <span className="text-primary">{`"${searchedInput}"`}</span>
</p>
)}
<ScrollArea className="max-h-[400px] overflow-y-auto">
<div className="flex flex-col items-start overflow-y-auto sm:px-2 px-1 pb-4">
<div className="flex flex-col items-start overflow-y-auto px-1 pb-4 sm:px-2">
{filteredResults.map((item, index) => {
const level = (item.href.split("/").slice(1).length - 1) as keyof typeof paddingMap;
const paddingClass = paddingMap[level] || 'pl-2';
const isActive = index === selectedIndex;
const level = (item.href.split("/").slice(1).length - 1) as keyof typeof paddingMap
const paddingClass = paddingMap[level] || "pl-2"
const isActive = index === selectedIndex
return (
<DialogClose key={item.href} asChild>
<Anchor
ref={(el) => {
itemRefs.current[index] = el as HTMLDivElement | null;
itemRefs.current[index] = el as HTMLDivElement | null
}}
className={cn(
"dark:hover:bg-accent/15 hover:bg-accent/10 w-full px-3 rounded-sm text-sm flex items-center gap-2.5",
"dark:hover:bg-accent/15 hover:bg-accent/10 flex w-full items-center gap-2.5 rounded-sm px-3 text-sm",
isActive && "bg-primary/20 dark:bg-primary/30",
paddingClass
)}
href={item.href}
href={`/docs${item.href}`}
tabIndex={-1}
>
<div
className={cn(
"flex items-center w-full h-full py-3 gap-1.5 px-2 justify-between",
"flex h-full w-full items-center justify-between gap-1.5 px-2 py-3",
level > 1 && "border-l pl-4"
)}
>
<div className="flex items-center">
<FileTextIcon className="h-[1.1rem] w-[1.1rem] mr-1" />
<FileTextIcon className="mr-1 h-[1.1rem] w-[1.1rem]" />
<span>{item.title}</span>
</div>
{isActive && (
<div className="hidden md:flex items-center text-xs text-muted-foreground">
<div className="text-muted-foreground hidden items-center text-xs md:flex">
<span>Return</span>
<CornerDownLeftIcon className="h-3 w-3 ml-1" />
<CornerDownLeftIcon className="ml-1 h-3 w-3" />
</div>
)}
</div>
</Anchor>
</DialogClose>
);
)
})}
</div>
</ScrollArea>
<DialogFooter className="md:flex md:justify-start hidden h-14 px-6 bg-transparent border-t text-[14px] outline-none">
<DialogFooter className="hidden h-14 border-t bg-transparent px-6 text-[14px] outline-none md:flex md:justify-start">
<div className="flex items-center gap-2">
<span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
<ArrowUpIcon className="w-3 h-3" />
<span className="dark:bg-accent/15 rounded border bg-slate-200 p-2">
<ArrowUpIcon className="h-3 w-3" />
</span>
<span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
<ArrowDownIcon className="w-3 h-3" />
<span className="dark:bg-accent/15 rounded border bg-slate-200 p-2">
<ArrowDownIcon className="h-3 w-3" />
</span>
<p className="text-muted-foreground">to navigate</p>
<span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
<CornerDownLeftIcon className="w-3 h-3" />
<span className="dark:bg-accent/15 rounded border bg-slate-200 p-2">
<CornerDownLeftIcon className="h-3 w-3" />
</span>
<p className="text-muted-foreground">to select</p>
<span className="dark:bg-accent/15 bg-slate-200 border rounded px-2 py-1">
esc
</span>
<span className="dark:bg-accent/15 rounded border bg-slate-200 px-2 py-1">esc</span>
<p className="text-muted-foreground">to close</p>
</div>
</DialogFooter>
</DialogContent>
);
}
)
}