Initial commit: add project files and README
This commit is contained in:
80
src/components/ApiDocViewer.tsx
Normal file
80
src/components/ApiDocViewer.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { DocTree } from './DocTree'
|
||||
import { DocContent } from './DocContent'
|
||||
import { parseMarkdown, buildFileTree } from '@/lib/parser'
|
||||
import type { DocFile, ParsedDoc } from '@/lib/types'
|
||||
import { config } from '@/config'
|
||||
|
||||
const modules = import.meta.glob('../docs/**/*.md', { as: 'raw', eager: true })
|
||||
|
||||
const DOCS_FILES: Record<string, string> = Object.fromEntries(
|
||||
Object.entries(modules).map(([path, content]) => {
|
||||
const relativePath = path.replace('../docs/', '')
|
||||
return [relativePath, content as string]
|
||||
})
|
||||
)
|
||||
|
||||
export const ApiDocViewer = () => {
|
||||
const [fileTree, setFileTree] = useState<DocFile[]>([])
|
||||
const [selectedPath, setSelectedPath] = useState<string | undefined>()
|
||||
const [currentDoc, setCurrentDoc] = useState<ParsedDoc | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const files = Object.keys(DOCS_FILES)
|
||||
const tree = buildFileTree(files, '/')
|
||||
setFileTree(tree)
|
||||
|
||||
if (files.length > 0) {
|
||||
setSelectedPath(files[0])
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedPath) {
|
||||
const content = DOCS_FILES[selectedPath]
|
||||
if (content) {
|
||||
const parsed = parseMarkdown(content)
|
||||
setCurrentDoc(parsed)
|
||||
}
|
||||
}
|
||||
}, [selectedPath])
|
||||
|
||||
const handleSelect = useCallback((file: DocFile) => {
|
||||
if (!file.isDir) {
|
||||
setSelectedPath(file.relativePath)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleReferenceClick = useCallback((ref: string) => {
|
||||
const normalizedRef = ref.replace('.md', '').replace(/^\.\.\//, '')
|
||||
const allFiles = Object.keys(DOCS_FILES)
|
||||
const match = allFiles.find(f => f.replace('.md', '') === normalizedRef)
|
||||
if (match) {
|
||||
setSelectedPath(match)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-[#1e1e1e]">
|
||||
<aside className="w-64 bg-[#252526] border-r border-[#3c3c3c] flex flex-col">
|
||||
<div className="p-3 border-b border-[#3c3c3c]">
|
||||
<h2 className="text-sm font-semibold text-gray-200">{config.sidebarTitle}</h2>
|
||||
</div>
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<DocTree
|
||||
files={fileTree}
|
||||
selectedPath={selectedPath}
|
||||
onSelect={handleSelect}
|
||||
/>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main className="flex-1 overflow-hidden">
|
||||
<DocContent
|
||||
doc={currentDoc}
|
||||
onReferenceClick={handleReferenceClick}
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
179
src/components/DocContent.tsx
Normal file
179
src/components/DocContent.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
import { clsx } from 'clsx'
|
||||
import type { ParsedDoc, DocTable, DocCodeBlock } from '@/lib/types'
|
||||
|
||||
interface DocContentProps {
|
||||
doc: ParsedDoc | null
|
||||
onReferenceClick: (ref: string) => void
|
||||
}
|
||||
|
||||
export const DocContent = ({ doc, onReferenceClick }: DocContentProps) => {
|
||||
if (!doc) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full text-gray-500">
|
||||
<p>Select a document from the sidebar</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-auto p-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-2xl font-bold text-white mb-4">{doc.title}</h1>
|
||||
|
||||
{doc.metadata.namespace && (
|
||||
<div className="mb-4">
|
||||
<span className="text-gray-400">Namespace: </span>
|
||||
<code className="bg-gray-800 px-2 py-1 rounded text-blue-400">{doc.metadata.namespace}</code>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{doc.metadata.package && (
|
||||
<div className="mb-4">
|
||||
<span className="text-gray-400">Package: </span>
|
||||
<code className="bg-gray-800 px-2 py-1 rounded text-blue-400">{doc.metadata.package}</code>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{doc.metadata.type && (
|
||||
<div className="mb-4">
|
||||
<span className="text-gray-400">Type: </span>
|
||||
<span className="text-yellow-400">{doc.metadata.type}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{doc.metadata.inherits && (
|
||||
<div className="mb-4">
|
||||
<span className="text-gray-400">Inherits: </span>
|
||||
<code className="bg-gray-800 px-2 py-1 rounded text-purple-400">{doc.metadata.inherits}</code>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{doc.metadata.description && (
|
||||
<p className="text-gray-300 mb-6">{doc.metadata.description}</p>
|
||||
)}
|
||||
|
||||
{doc.sections.map((section, idx) => (
|
||||
<Section
|
||||
key={idx}
|
||||
section={section}
|
||||
onReferenceClick={onReferenceClick}
|
||||
/>
|
||||
))}
|
||||
|
||||
{doc.references.length > 0 && (
|
||||
<div className="mt-8 pt-4 border-t border-gray-700">
|
||||
<h3 className="text-lg font-semibold text-white mb-2">See Also</h3>
|
||||
<ul className="space-y-1">
|
||||
{doc.references.map((ref, idx) => (
|
||||
<li key={idx}>
|
||||
<button
|
||||
onClick={() => onReferenceClick(ref)}
|
||||
className="text-blue-400 hover:text-blue-300 hover:underline"
|
||||
>
|
||||
{ref}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface SectionProps {
|
||||
section: import('@/lib/types').DocSection
|
||||
onReferenceClick: (ref: string) => void
|
||||
}
|
||||
|
||||
const Section = ({ section, onReferenceClick }: SectionProps) => {
|
||||
const HeadingTag = `h${Math.min(section.level + 1, 6)}` as keyof JSX.IntrinsicElements
|
||||
|
||||
return (
|
||||
<section className="mb-6">
|
||||
<HeadingTag className={clsx(
|
||||
'font-semibold text-white mb-3',
|
||||
section.level === 1 ? 'text-xl' : 'text-lg'
|
||||
)}>
|
||||
{section.title}
|
||||
</HeadingTag>
|
||||
|
||||
<div className="space-y-3">
|
||||
{section.content.map((item, idx) => {
|
||||
if (item.type === 'table') {
|
||||
return <TableContent key={idx} table={item.data as DocTable} />
|
||||
}
|
||||
if (item.type === 'code') {
|
||||
return <CodeContent key={idx} code={item.data as DocCodeBlock} />
|
||||
}
|
||||
return <TextContent key={idx} text={item.data as string} onReferenceClick={onReferenceClick} />
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
const TextContent = ({ text, onReferenceClick }: { text: string; onReferenceClick: (ref: string) => void }) => {
|
||||
const renderText = () => {
|
||||
const parts = text.split(/(@see\s+[^\s]+)/g)
|
||||
return parts.map((part, idx) => {
|
||||
const match = part.match(/@see\s+([^\s]+)/)
|
||||
if (match) {
|
||||
return (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => onReferenceClick(match[1])}
|
||||
className="text-blue-400 hover:text-blue-300 hover:underline"
|
||||
>
|
||||
{part}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
return <span key={idx}>{part}</span>
|
||||
})
|
||||
}
|
||||
|
||||
return <p className="text-gray-300">{renderText()}</p>
|
||||
}
|
||||
|
||||
const TableContent = ({ table }: { table: DocTable }) => {
|
||||
if (!table.headers.length || !table.rows.length) return null
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse text-sm">
|
||||
<thead>
|
||||
<tr className="bg-gray-800">
|
||||
{table.headers.map((header, idx) => (
|
||||
<th key={idx} className="border border-gray-600 px-3 py-2 text-left text-gray-200 font-semibold">
|
||||
{header}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{table.rows.map((row, rowIdx) => (
|
||||
<tr key={rowIdx} className="hover:bg-gray-800/50">
|
||||
{row.map((cell, cellIdx) => (
|
||||
<td key={cellIdx} className="border border-gray-600 px-3 py-2 text-gray-300">
|
||||
{cell}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const CodeContent = ({ code }: { code: DocCodeBlock }) => {
|
||||
return (
|
||||
<pre className="bg-gray-900 border border-gray-700 rounded-lg p-4 overflow-x-auto">
|
||||
<code className={`language-${code.language || 'text'} text-sm text-gray-200`}>
|
||||
{code.code}
|
||||
</code>
|
||||
</pre>
|
||||
)
|
||||
}
|
||||
97
src/components/DocTree.tsx
Normal file
97
src/components/DocTree.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import React, { useState } from 'react'
|
||||
import { ChevronRight, ChevronDown, Folder, FileText } from 'lucide-react'
|
||||
import { clsx } from 'clsx'
|
||||
import type { DocFile } from '@/lib/types'
|
||||
import { getDisplayName } from '@/lib/parser'
|
||||
|
||||
interface DocTreeProps {
|
||||
files: DocFile[]
|
||||
selectedPath?: string
|
||||
onSelect: (file: DocFile) => void
|
||||
}
|
||||
|
||||
interface DocTreeNodeProps {
|
||||
file: DocFile
|
||||
level: number
|
||||
selectedPath?: string
|
||||
onSelect: (file: DocFile) => void
|
||||
}
|
||||
|
||||
const DocTreeNode = React.memo(({ file, level, selectedPath, onSelect }: DocTreeNodeProps) => {
|
||||
const [expanded, setExpanded] = useState(level === 0)
|
||||
|
||||
const isSelected = selectedPath === file.relativePath
|
||||
const isDir = file.isDir
|
||||
|
||||
const handleClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
if (isDir) {
|
||||
setExpanded(!expanded)
|
||||
} else {
|
||||
onSelect(file)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
className={clsx(
|
||||
'flex items-center gap-2 py-1 px-2 rounded-md cursor-pointer transition-colors text-sm',
|
||||
isSelected
|
||||
? 'bg-gray-600 text-white'
|
||||
: 'hover:bg-gray-700 text-gray-300'
|
||||
)}
|
||||
onClick={handleClick}
|
||||
style={{ paddingLeft: `${level * 16 + 8}px` }}
|
||||
>
|
||||
<span className="text-gray-400 shrink-0">
|
||||
{isDir ? (
|
||||
expanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />
|
||||
) : (
|
||||
<span className="w-4" />
|
||||
)}
|
||||
</span>
|
||||
|
||||
<span className="text-gray-400 shrink-0">
|
||||
{isDir ? <Folder size={16} /> : <FileText size={16} />}
|
||||
</span>
|
||||
|
||||
<span className="truncate">{getDisplayName(file.name)}</span>
|
||||
</div>
|
||||
|
||||
{isDir && expanded && file.children && (
|
||||
<div>
|
||||
{file.children.map((child) => (
|
||||
<DocTreeNode
|
||||
key={child.relativePath}
|
||||
file={child}
|
||||
level={level + 1}
|
||||
selectedPath={selectedPath}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
DocTreeNode.displayName = 'DocTreeNode'
|
||||
|
||||
export const DocTree = ({ files, selectedPath, onSelect }: DocTreeProps) => {
|
||||
return (
|
||||
<div className="select-none w-full h-full overflow-auto py-2">
|
||||
<div className="space-y-1">
|
||||
{files.map((file) => (
|
||||
<DocTreeNode
|
||||
key={file.relativePath}
|
||||
file={file}
|
||||
level={0}
|
||||
selectedPath={selectedPath}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user