@barodoc/theme-docs 0.0.1

package/src/components/MobileNavSheet.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "./ui/sheet";
+import { ScrollArea } from "./ui/scroll-area";
+import { DocsSidebar } from "./DocsSidebar";
+import { cn } from "../lib/utils";
+
+interface NavItem {
+  title: string;
+  href: string;
+  isActive?: boolean;
+}
+
+interface NavGroup {
+  title: string;
+  items: NavItem[];
+  defaultOpen?: boolean;
+}
+
+interface MobileNavSheetProps {
+  groups: NavGroup[];
+  siteName: string;
+  logo?: string;
+}
+
+export function MobileNavSheet({ groups, siteName, logo }: MobileNavSheetProps) {
+  const [open, setOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    const handleToggle = () => setOpen((prev) => !prev);
+    document.addEventListener("toggle-mobile-nav", handleToggle);
+    return () => document.removeEventListener("toggle-mobile-nav", handleToggle);
+  }, []);
+
+  // Close on navigation
+  React.useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.closest("a")) {
+        setOpen(false);
+      }
+    };
+
+    if (open) {
+      document.addEventListener("click", handleClick);
+      return () => document.removeEventListener("click", handleClick);
+    }
+  }, [open]);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetContent side="left" className="w-80 p-0">
+        <SheetHeader className="px-6 py-4 border-b border-[var(--color-border)]">
+          <SheetTitle className="flex items-center gap-2">
+            {logo && <img src={logo} alt={siteName} className="h-6 w-6" />}
+            <span>{siteName}</span>
+          </SheetTitle>
+        </SheetHeader>
+        <ScrollArea className="h-[calc(100vh-65px)]">
+          <div className="px-2 py-4">
+            <DocsSidebar groups={groups} />
+          </div>
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default MobileNavSheet;

package/src/components/Search.tsx

@@ -0,0 +1,210 @@
+import { useEffect, useState, useRef, useCallback } from "react";
+
+interface SearchResult {
+  url: string;
+  meta: {
+    title: string;
+  };
+  excerpt: string;
+}
+
+// Pagefind loader - only runs on client side
+async function loadPagefind() {
+  if (typeof window === "undefined") return null;
+  
+  try {
+    // @ts-expect-error - Pagefind exposes itself on window when loaded
+    if (window.pagefind) {
+      // @ts-expect-error
+      return window.pagefind;
+    }
+    
+    // Dynamic import using Function constructor to avoid Vite bundling
+    const pagefindPath = "/pagefind/pagefind.js";
+    const pagefind = await new Function(`return import("${pagefindPath}")`)();
+    await pagefind.init();
+    // @ts-expect-error
+    window.pagefind = pagefind;
+    return pagefind;
+  } catch (e) {
+    console.warn("Pagefind not available:", e);
+    return null;
+  }
+}
+
+export function Search() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [pagefind, setPagefind] = useState<any>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  // Load Pagefind
+  useEffect(() => {
+    loadPagefind().then(setPagefind);
+  }, []);
+
+  // Listen for toggle-search event
+  useEffect(() => {
+    const handler = () => setIsOpen(true);
+    document.addEventListener("toggle-search", handler);
+    return () => document.removeEventListener("toggle-search", handler);
+  }, []);
+
+  // Handle keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setIsOpen(true);
+      }
+      if (e.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  // Focus input when opening
+  useEffect(() => {
+    if (isOpen) {
+      inputRef.current?.focus();
+      dialogRef.current?.showModal();
+    } else {
+      dialogRef.current?.close();
+      setQuery("");
+      setResults([]);
+      setSelectedIndex(0);
+    }
+  }, [isOpen]);
+
+  // Search with debounce
+  const search = useCallback(
+    async (searchQuery: string) => {
+      if (!pagefind || !searchQuery.trim()) {
+        setResults([]);
+        return;
+      }
+      try {
+        const searchResults = await pagefind.search(searchQuery);
+        const data = await Promise.all(
+          searchResults.results.slice(0, 8).map((r: any) => r.data())
+        );
+        setResults(data);
+        setSelectedIndex(0);
+      } catch (e) {
+        console.error("Search error:", e);
+        setResults([]);
+      }
+    },
+    [pagefind]
+  );
+
+  useEffect(() => {
+    const timer = setTimeout(() => search(query), 150);
+    return () => clearTimeout(timer);
+  }, [query, search]);
+
+  // Navigate results with keyboard
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedIndex((prev) => Math.min(prev + 1, results.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedIndex((prev) => Math.max(prev - 1, 0));
+    } else if (e.key === "Enter" && results[selectedIndex]) {
+      window.location.href = results[selectedIndex].url;
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className="fixed inset-0 z-50 bg-transparent p-0 m-0 max-w-none max-h-none w-full h-full"
+      onClick={(e) => {
+        if (e.target === dialogRef.current) setIsOpen(false);
+      }}
+    >
+      <div className="fixed inset-0 bg-black/50" aria-hidden="true" />
+      <div className="fixed inset-x-4 top-[15%] md:inset-x-auto md:left-1/2 md:-translate-x-1/2 md:w-full md:max-w-lg">
+        <div className="bg-[var(--color-bg)] rounded-xl shadow-2xl border border-[var(--color-border)] overflow-hidden">
+          <div className="flex items-center px-4 border-b border-[var(--color-border)]">
+            <svg
+              className="w-5 h-5 text-[var(--color-text-secondary)]"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+              />
+            </svg>
+            <input
+              ref={inputRef}
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Search documentation..."
+              className="flex-1 px-4 py-4 bg-transparent text-[var(--color-text)] placeholder-[var(--color-text-secondary)] focus:outline-none"
+            />
+            <button
+              onClick={() => setIsOpen(false)}
+              className="px-2 py-1 text-xs text-[var(--color-text-secondary)] bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded"
+            >
+              ESC
+            </button>
+          </div>
+
+          {query.trim() && (
+            <div className="max-h-[60vh] overflow-y-auto">
+              {results.length === 0 ? (
+                <div className="px-4 py-8 text-center text-[var(--color-text-secondary)]">
+                  {pagefind ? "No results found" : "Search index not available"}
+                </div>
+              ) : (
+                <ul>
+                  {results.map((result, index) => (
+                    <li key={result.url}>
+                      <a
+                        href={result.url}
+                        className={`block px-4 py-3 transition-colors ${
+                          index === selectedIndex
+                            ? "bg-primary-50 dark:bg-primary-900/30"
+                            : "hover:bg-[var(--color-bg-secondary)]"
+                        }`}
+                      >
+                        <div className="font-medium text-[var(--color-text)]">
+                          {result.meta.title}
+                        </div>
+                        <div
+                          className="text-sm text-[var(--color-text-secondary)] line-clamp-2 mt-0.5"
+                          dangerouslySetInnerHTML={{ __html: result.excerpt }}
+                        />
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          )}
+
+          {!query.trim() && (
+            <div className="px-4 py-6 text-center text-[var(--color-text-secondary)] text-sm">
+              Start typing to search...
+            </div>
+          )}
+        </div>
+      </div>
+    </dialog>
+  );
+}

package/src/components/SearchDialog.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { Search as SearchIcon } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import { cn } from "../lib/utils";
+
+interface SearchDialogProps {
+  className?: string;
+}
+
+export function SearchDialog({ className }: SearchDialogProps) {
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+
+  React.useEffect(() => {
+    const handleToggle = () => setOpen((prev) => !prev);
+    document.addEventListener("toggle-search", handleToggle);
+    
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
+    };
+    document.addEventListener("keydown", down);
+    
+    return () => {
+      document.removeEventListener("toggle-search", handleToggle);
+      document.removeEventListener("keydown", down);
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (open && typeof window !== "undefined" && (window as any).pagefind) {
+      // Initialize pagefind when dialog opens
+    }
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className={cn("sm:max-w-2xl p-0 gap-0", className)}>
+        <DialogHeader className="px-4 py-3 border-b border-[var(--color-border)]">
+          <DialogTitle className="sr-only">Search documentation</DialogTitle>
+          <div className="flex items-center gap-3">
+            <SearchIcon className="h-5 w-5 text-[var(--color-text-muted)]" />
+            <input
+              type="text"
+              placeholder="Search documentation..."
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              className="flex-1 bg-transparent text-base outline-none placeholder:text-[var(--color-text-muted)]"
+              autoFocus
+            />
+            <kbd className="hidden sm:inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded text-[var(--color-text-muted)]">
+              Esc
+            </kbd>
+          </div>
+        </DialogHeader>
+        <div className="min-h-[300px] max-h-[60vh] overflow-y-auto p-4">
+          {query ? (
+            <div id="pagefind-results" className="pagefind-ui" />
+          ) : (
+            <div className="flex flex-col items-center justify-center h-full py-12 text-center">
+              <SearchIcon className="h-12 w-12 text-[var(--color-text-muted)] mb-4" />
+              <p className="text-sm text-[var(--color-text-secondary)]">
+                Start typing to search the documentation
+              </p>
+              <p className="text-xs text-[var(--color-text-muted)] mt-2">
+                Press <kbd className="px-1.5 py-0.5 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded text-xs">⌘K</kbd> to open search
+              </p>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default SearchDialog;

package/src/components/Sidebar.astro

@@ -0,0 +1,56 @@
+---
+import config from "virtual:barodoc/config";
+import { defaultLocale } from "virtual:barodoc/i18n";
+import { getLocalizedNavGroup } from "@barodoc/core";
+import { SidebarWrapper } from "./SidebarWrapper";
+
+interface Props {
+  currentPath: string;
+  currentLocale?: string;
+}
+
+const { currentPath, currentLocale = defaultLocale } = Astro.props;
+
+// Normalize path for comparison
+function normalizePath(path: string): string {
+  return path.replace(/\/$/, '').replace(/^\//, '');
+}
+
+function isActive(page: string): boolean {
+  const normalized = normalizePath(currentPath);
+  const pagePath = normalizePath(page);
+  return normalized === pagePath || 
+    normalized === `docs/${pagePath}` ||
+    normalized === `${currentLocale}/docs/${pagePath}`;
+}
+
+function getPageHref(page: string): string {
+  if (currentLocale === defaultLocale) {
+    return `/docs/${page}`;
+  }
+  return `/${currentLocale}/docs/${page}`;
+}
+
+// Get page title from the page slug
+function getPageTitle(page: string): string {
+  const parts = page.split('/');
+  const name = parts[parts.length - 1];
+  return name
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+}
+
+// Transform config.navigation to the format expected by DocsSidebar
+const groups = config.navigation.map((group) => ({
+  title: getLocalizedNavGroup(group, currentLocale, defaultLocale),
+  defaultOpen: true,
+  items: group.pages.map((page) => ({
+    title: getPageTitle(page),
+    href: getPageHref(page),
+    isActive: isActive(page),
+  })),
+}));
+---
+
+<SidebarWrapper groups={groups} client:load />

package/src/components/SidebarWrapper.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { DocsSidebar } from "./DocsSidebar";
+
+interface NavItem {
+  title: string;
+  href: string;
+  isActive?: boolean;
+}
+
+interface NavGroup {
+  title: string;
+  items: NavItem[];
+  defaultOpen?: boolean;
+}
+
+interface SidebarWrapperProps {
+  groups: NavGroup[];
+}
+
+export function SidebarWrapper({ groups }: SidebarWrapperProps) {
+  return <DocsSidebar groups={groups} />;
+}
+
+export default SidebarWrapper;

package/src/components/TableOfContents.astro

@@ -0,0 +1,98 @@
+---
+interface Heading {
+  depth: number;
+  slug: string;
+  text: string;
+}
+
+interface Props {
+  headings: Heading[];
+}
+
+const { headings } = Astro.props;
+
+// Filter to only show h2 and h3
+const filteredHeadings = headings.filter(h => h.depth >= 2 && h.depth <= 3);
+---
+
+{filteredHeadings.length > 0 && (
+  <div class="toc-container">
+    <h4 class="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-muted)] mb-4">
+      On this page
+    </h4>
+    <nav class="relative">
+      <div class="absolute left-0 top-0 bottom-0 w-px bg-[var(--color-border)]"></div>
+      <ul class="space-y-1">
+        {filteredHeadings.map((heading) => (
+          <li class="relative">
+            <a
+              href={`#${heading.slug}`}
+              class:list={[
+                "toc-link block text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-all duration-150",
+                heading.depth === 2 ? "py-1.5 pl-4" : "py-1 pl-6 text-xs"
+              ]}
+              data-heading={heading.slug}
+            >
+              <span class="relative">{heading.text}</span>
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  </div>
+)}
+
+<style>
+  .toc-link.active {
+    color: var(--color-primary-600);
+    font-weight: 500;
+  }
+  
+  .toc-link.active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 2px;
+    height: 1.25rem;
+    background: var(--color-primary-500);
+    border-radius: 1px;
+  }
+  
+  :global(.dark) .toc-link.active {
+    color: var(--color-primary-400);
+  }
+</style>
+
+<script>
+  function initTOCHighlight() {
+    const headings = document.querySelectorAll('article h2, article h3');
+    const tocLinks = document.querySelectorAll('.toc-link');
+    
+    if (headings.length === 0 || tocLinks.length === 0) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const id = entry.target.id;
+            tocLinks.forEach((link) => {
+              const isActive = link.getAttribute('data-heading') === id;
+              link.classList.toggle('active', isActive);
+            });
+          }
+        });
+      },
+      {
+        rootMargin: '-80px 0px -80% 0px',
+        threshold: 0
+      }
+    );
+
+    headings.forEach((heading) => observer.observe(heading));
+  }
+
+  initTOCHighlight();
+  document.addEventListener('astro:page-load', initTOCHighlight);
+</script>

package/src/components/ThemeScript.astro

@@ -0,0 +1,11 @@
+---
+// This script runs before the page renders to prevent flash of wrong theme
+---
+<script is:inline>
+  (function() {
+    const theme = localStorage.getItem('theme');
+    if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      document.documentElement.classList.add('dark');
+    }
+  })();
+</script>

package/src/components/ThemeToggle.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+
+export function ThemeToggle() {
+  const [theme, setTheme] = useState<"light" | "dark">("light");
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const stored = localStorage.getItem("theme");
+    if (stored === "dark" || stored === "light") {
+      setTheme(stored);
+    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      setTheme("dark");
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+    
+    if (theme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+    localStorage.setItem("theme", theme);
+  }, [theme, mounted]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === "light" ? "dark" : "light"));
+  };
+
+  if (!mounted) {
+    return (
+      <button
+        className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+        aria-label="Toggle theme"
+      >
+        <div className="w-5 h-5" />
+      </button>
+    );
+  }
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+      aria-label={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
+    >
+      {theme === "light" ? (
+        <Moon className="w-5 h-5 text-gray-600" />
+      ) : (
+        <Sun className="w-5 h-5 text-gray-300" />
+      )}
+    </button>
+  );
+}

package/src/components/api/ApiEndpoint.astro

@@ -0,0 +1,36 @@
+---
+interface Props {
+  method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+  path: string;
+  description?: string;
+}
+
+const { method, path, description } = Astro.props;
+
+const methodColors = {
+  GET: "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400",
+  POST: "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400",
+  PUT: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400",
+  PATCH: "bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400",
+  DELETE: "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400",
+};
+---
+
+<div class="not-prose my-6 rounded-lg border border-[var(--color-border)] overflow-hidden">
+  <div class="flex items-center gap-3 px-4 py-3 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border)]">
+    <span class:list={["px-2 py-1 text-xs font-bold rounded uppercase", methodColors[method]]}>
+      {method}
+    </span>
+    <code class="text-sm font-mono text-[var(--color-text)]">{path}</code>
+  </div>
+  
+  {description && (
+    <div class="px-4 py-3 border-b border-[var(--color-border)]">
+      <p class="text-sm text-[var(--color-text-secondary)]">{description}</p>
+    </div>
+  )}
+  
+  <div class="p-4">
+    <slot />
+  </div>
+</div>

package/src/components/api/ApiParam.astro

@@ -0,0 +1,26 @@
+---
+interface Props {
+  name: string;
+  type: string;
+  required?: boolean;
+  description?: string;
+}
+
+const { name, type, required = false, description } = Astro.props;
+---
+
+<div class="flex flex-col gap-1 py-3 border-b border-[var(--color-border)] last:border-b-0">
+  <div class="flex items-center gap-2">
+    <code class="text-sm font-semibold text-[var(--color-text)]">{name}</code>
+    <span class="text-xs text-[var(--color-text-secondary)]">{type}</span>
+    {required && (
+      <span class="px-1.5 py-0.5 text-xs font-medium text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/30 rounded">
+        required
+      </span>
+    )}
+  </div>
+  {description && (
+    <p class="text-sm text-[var(--color-text-secondary)]">{description}</p>
+  )}
+  <slot />
+</div>