Skip to main content

DocsPage Component

Interactive documentation page with Docusaurus-style navigation, markdown rendering, table of contents, and dark mode support.

Overview​

The DocsPage component provides a complete documentation reading experience:

  • Sidebar navigation with nested categories
  • Markdown content rendering with syntax highlighting
  • Table of contents (TOC) for current page
  • Breadcrumb navigation
  • Previous/Next navigation
  • Search functionality
  • Dark mode toggle
graph TD
    A[DocsPage] --> B[Header]
    A --> C[DocsSidebar]
    A --> D[MarkdownRenderer]
    A --> E[DocsTableOfContents]
    
    B --> F[Logo/Title]
    B --> G[Search]
    B --> H[Dark Mode]
    B --> I[GitHub Link]
    
    C --> J[Navigation Items]
    C --> K[Nested Categories]
    
    D --> L[Markdown Content]
    D --> M[Code Blocks]
    D --> N[Tables]
    
    E --> O[Heading Links]

Props & State​

interface DocsPageState {
    sidebarOpen: boolean;
    docContent: DocContent | null;
    loading: boolean;
    error: string | null;
    searchQuery: string;
    searchResults: Array<{ title: string; path: string }>;
    showSearch: boolean;
    darkMode: boolean;
}

interface DocContent {
    title: string;
    content: string;
    frontmatter?: Record<string, unknown>;
}

Features​

  • Sidebar: Collapsible sidebar with nested navigation items
  • Breadcrumbs: Path-based breadcrumb trail
  • Prev/Next: Sequential document navigation
  • Mobile: Responsive overlay sidebar on mobile
  • Real-time search with debounce
  • Search results dropdown with keyboard navigation
  • Result highlighting

Content Rendering​

  • Full Markdown support via MarkdownRenderer
  • Syntax highlighting for code blocks
  • Table rendering
  • Image optimization

Theming​

  • Light/Dark mode toggle
  • Persistent preference in localStorage
  • System preference detection

Usage​

// In App.tsx router
import DocsPage from './pages/DocsPage';

<Route path="/docs/*" element={<DocsPage />} />

Key Hooks​

// Path-based content loading
useEffect(() => {
    const loadContent = async () => {
        const content = await loadDocContent(location.pathname);
        setDocContent(content);
        document.title = `${content.title} | HCMC Traffic Docs`;
    };
    loadContent();
}, [location.pathname]);

// Navigation helpers
const { prev, next } = useMemo(() => getPrevNextDocs(currentPath), [currentPath]);
const breadcrumbs = useMemo(() => getBreadcrumbs(currentPath), [currentPath]);

Dependencies​

  • react-router-dom: Routing and navigation
  • framer-motion: Animations
  • lucide-react: Icons (Menu, ChevronLeft, Moon, Sun, Search, etc.)
  • docsService: Content loading and navigation structure
  • DocsSidebar, MarkdownRenderer, DocsTableOfContents: Child components

Accessibility​

  • Keyboard navigation support
  • Focus management on route change
  • ARIA labels for interactive elements
  • Screen reader announcements

See Also​