boltdocs 1.10.2 → 2.0.0

package/src/client/theme/ui/SearchDialog/SearchDialog.tsx

@@ -1,209 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { createPortal } from "react-dom";
-import { Link } from "../Link";
-import { Search } from "lucide-react";
-import { ComponentRoute } from "../../../types";
-
-interface SearchResult {
-  title: string;
-  path: string;
-  groupTitle?: string;
-  isHeading?: boolean;
-}
-
-export function SearchDialog({ routes }: { routes: ComponentRoute[] }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [query, setQuery] = useState("");
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
-        e.preventDefault();
-        setIsOpen((prev) => !prev);
-      }
-      if (e.key === "Escape" && isOpen) {
-        setIsOpen(false);
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (isOpen) {
-      setTimeout(() => inputRef.current?.focus(), 50);
-    } else {
-      setQuery("");
-    }
-  }, [isOpen]);
-
-  const searchResults: SearchResult[] = React.useMemo(() => {
-    if (!query) {
-      return routes.slice(0, 10).map((r) => ({
-        title: r.title,
-        path: r.path,
-        groupTitle: r.groupTitle,
-      }));
-    }
-
-    const results: SearchResult[] = [];
-    const lowerQuery = query.toLowerCase();
-    
-    for (const route of routes) {
-      if (route.title && route.title.toLowerCase().includes(lowerQuery)) {
-        results.push({
-          title: route.title,
-          path: route.path,
-          groupTitle: route.groupTitle,
-        });
-      }
-
-      if (route.headings) {
-        for (const heading of route.headings) {
-          if (heading.text.toLowerCase().includes(lowerQuery)) {
-            results.push({
-              title: heading.text,
-              path: `${route.path}#${heading.id}`,
-              groupTitle: route.title,
-              isHeading: true,
-            });
-          }
-        }
-      }
-
-      if (route._content && route._content.toLowerCase().includes(lowerQuery)) {
-        // If it's a content match but not a title/heading match, add it
-        // We only add the page itself for now
-        results.push({
-          title: route.title,
-          path: route.path,
-          groupTitle: route.groupTitle,
-        });
-      }
-    }
-
-    // Deduplicate results by path
-    const uniqueResults = [];
-    const seenPaths = new Set();
-    for (const res of results) {
-      if (!seenPaths.has(res.path)) {
-        seenPaths.add(res.path);
-        uniqueResults.push(res);
-      }
-    }
-
-    return uniqueResults.slice(0, 10);
-  }, [routes, query]);
-
-  return (
-    <>
-      <div
-        className="navbar-search"
-        role="button"
-        tabIndex={0}
-        onClick={() => setIsOpen(true)}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            setIsOpen(true);
-          }
-        }}
-        aria-label="Open search dialog"
-      >
-        <Search className="boltdocs-search-icon" size={18} />
-        Search docs...
-        <kbd>⌘K</kbd>
-      </div>
-
-      {isOpen &&
-        createPortal(
-          <div
-            className="boltdocs-search-overlay"
-            onPointerDown={() => setIsOpen(false)}
-          >
-            <div
-              className="boltdocs-search-modal"
-              role="dialog"
-              aria-modal="true"
-              aria-label="Search"
-              onPointerDown={(e) => e.stopPropagation()}
-            >
-              <div className="boltdocs-search-header">
-                <Search size={18} />
-                <input
-                  ref={inputRef}
-                  type="text"
-                  aria-label="Search documentation input"
-                  placeholder="Search documentation..."
-                  value={query}
-                  onChange={(e) => setQuery(e.target.value)}
-                />
-                <button
-                  className="boltdocs-search-close"
-                  onClick={() => setIsOpen(false)}
-                  aria-label="Close search"
-                >
-                  ESC
-                </button>
-              </div>
-
-              <div className="boltdocs-search-results">
-                {searchResults.length > 0 ? (
-                  searchResults.map((result) => (
-                    <Link
-                      key={result.path}
-                      to={result.path === "" ? "/" : result.path}
-                      className={`boltdocs-search-result-item ${result.isHeading ? "is-heading" : ""}`}
-                      onClick={(e) => {
-                        const isSamePath =
-                          result.path.split("#")[0] ===
-                          window.location.pathname;
-                        if (isSamePath && result.isHeading) {
-                          e.preventDefault();
-                          const id = result.path.split("#")[1];
-                          const el = document.getElementById(id);
-                          if (el) {
-                            const offset = 80;
-                            const bodyRect =
-                              document.body.getBoundingClientRect().top;
-                            const elementRect = el.getBoundingClientRect().top;
-                            const elementPosition = elementRect - bodyRect;
-                            const offsetPosition = elementPosition - offset;
-
-                            window.scrollTo({
-                              top: offsetPosition,
-                              behavior: "smooth",
-                            });
-                            window.history.pushState(null, "", `#${id}`);
-                          }
-                        }
-                        setIsOpen(false);
-                      }}
-                    >
-                      <span className="boltdocs-search-result-title">
-                        {result.isHeading ? (
-                          <span className="heading-indicator">#</span>
-                        ) : null}
-                        {result.title}
-                      </span>
-                      {result.groupTitle && (
-                        <span className="boltdocs-search-result-group">
-                          {result.groupTitle}
-                        </span>
-                      )}
-                    </Link>
-                  ))
-                ) : (
-                  <div className="boltdocs-search-empty">
-                    No results found for "{query}"
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>,
-          document.body,
-        )}
-    </>
-  );
-}

package/src/client/theme/ui/SearchDialog/index.ts

@@ -1 +0,0 @@
-export { SearchDialog } from "./SearchDialog";

package/src/client/theme/ui/SearchDialog/search.css

@@ -1,152 +0,0 @@
-/* ═══════════════════════════════════════════════════════════
-   SEARCH MODAL
-   ═══════════════════════════════════════════════════════════ */
-.boltdocs-search-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  z-index: 999;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  padding-top: 10vh;
-}
-
-.boltdocs-search-modal {
-  width: 100%;
-  max-width: 560px;
-  background-color: var(--ld-bg-main);
-  border: 1px solid var(--ld-border-subtle);
-  border-radius: var(--ld-radius-lg);
-  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.4);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  animation: boltdocs-search-appear 0.15s ease-out forwards;
-}
-
-@keyframes boltdocs-search-appear {
-  from {
-    opacity: 0;
-    transform: scale(0.96) translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-.boltdocs-search-header {
-  display: flex;
-  align-items: center;
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid transparent; /* Seamless header */
-  background-color: transparent;
-  gap: 0.75rem;
-}
-
-.boltdocs-search-header svg {
-  width: 18px;
-  height: 18px;
-  color: var(--ld-color-primary);
-  opacity: 0.8;
-}
-
-.boltdocs-search-header input {
-  flex: 1;
-  background: transparent;
-  border: none;
-  color: var(--ld-text-main);
-  font-size: 1.05rem;
-  font-weight: 500;
-  font-family: var(--ld-font-sans);
-  outline: none;
-  box-shadow: none;
-}
-
-.boltdocs-search-header input::placeholder {
-  color: var(--ld-text-dim);
-}
-
-.boltdocs-search-close {
-  background: var(--ld-bg-mute);
-  border: 1px solid var(--ld-border-subtle);
-  color: var(--ld-text-dim);
-  font-size: 0.6875rem;
-  padding: 0.2rem 0.4rem;
-  border-radius: 4px;
-  cursor: pointer;
-  font-family: var(--ld-font-sans);
-  transition: all 0.2s;
-}
-
-.boltdocs-search-close:hover {
-  background: var(--ld-border-strong);
-  color: var(--ld-text-main);
-}
-
-.boltdocs-search-results {
-  max-height: 50vh;
-  overflow-y: auto;
-  padding: 0.5rem;
-}
-
-.boltdocs-search-results::-webkit-scrollbar {
-  width: 6px;
-}
-.boltdocs-search-results::-webkit-scrollbar-thumb {
-  background: var(--ld-bg-mute);
-  border-radius: 4px;
-}
-
-.boltdocs-search-result-item {
-  display: flex;
-  flex-direction: column;
-  padding: 0.75rem 1rem;
-  border-radius: var(--ld-radius-md);
-  text-decoration: none;
-  transition: background-color 0.15s;
-  margin-bottom: 2px;
-}
-
-.boltdocs-search-result-item.is-heading {
-  padding-left: 2rem;
-  border-left: 2px solid transparent;
-}
-
-.heading-indicator {
-  color: var(--ld-text-muted);
-  font-weight: 500;
-  margin-right: 0.35rem;
-  font-family: var(--ld-font-mono);
-}
-
-.boltdocs-search-result-item:hover,
-.boltdocs-search-result-item:focus {
-  background-color: var(--ld-bg-mute);
-  outline: none;
-}
-
-.boltdocs-search-result-title {
-  color: var(--ld-text-main);
-  font-weight: 500;
-  font-size: 0.95rem;
-}
-
-.boltdocs-search-result-group {
-  color: var(--ld-text-muted);
-  font-size: 0.75rem;
-  margin-top: 0.15rem;
-}
-
-.boltdocs-search-empty {
-  padding: 2rem;
-  text-align: center;
-  color: var(--ld-text-dim);
-  font-size: 0.9rem;
-}

package/src/client/theme/ui/Sidebar/Sidebar.tsx

@@ -1,244 +0,0 @@
-import { useState } from "react";
-import { useLocation } from "react-router-dom";
-import { Link } from "../Link";
-import { BoltdocsConfig } from "../../../../node/config";
-import { PoweredBy } from "../PoweredBy";
-import { ChevronRight } from "lucide-react";
-import * as LucideIcons from "lucide-react";
-
-interface RouteItem {
-  path: string;
-  title: string;
-  group?: string;
-  groupTitle?: string;
-  sidebarPosition?: number;
-  badge?: string | { text: string; expires?: string };
-  icon?: string;
-  tab?: string;
-  groupIcon?: string;
-}
-
-interface SidebarGroup {
-  slug: string;
-  title: string;
-  routes: RouteItem[];
-  icon?: string;
-}
-
-/**
- * Renders a small badge next to sidebar items if one exists and hasn't expired.
- */
-function renderBadge(badgeRaw: RouteItem["badge"]) {
-  if (!badgeRaw) return null;
-
-  let text = "";
-  let expires = "";
-
-  if (typeof badgeRaw === "string") {
-    text = badgeRaw;
-  } else {
-    text = badgeRaw.text;
-    expires = badgeRaw.expires || "";
-  }
-
-  // Check expiration
-  if (expires) {
-    const expireDate = new Date(expires);
-    const now = new Date();
-    // Reset time components for accurate day comparison
-    expireDate.setHours(0, 0, 0, 0);
-    now.setHours(0, 0, 0, 0);
-    if (now > expireDate) {
-      return null;
-    }
-  }
-
-  if (!text) return null;
-
-  let typeClass = "badge-default";
-  const lowerText = text.toLowerCase();
-  if (lowerText === "new") {
-    typeClass = "badge-new";
-  } else if (lowerText === "experimental") {
-    typeClass = "badge-experimental";
-  } else if (lowerText === "updated") {
-    typeClass = "badge-updated";
-  }
-
-  return <span className={`sidebar-badge ${typeClass}`}>{text}</span>;
-}
-
-/**
- * Renders an icon from a string (Lucide name or SVG).
- */
-function renderIcon(iconName?: string, size = 16) {
-  if (!iconName) return null;
-
-  const trimmed = iconName.trim();
-
-  // Check if it's a raw SVG
-  if (trimmed.startsWith("<svg") || trimmed.includes("http")) {
-    if (trimmed.startsWith("<svg")) {
-      return (
-        <span
-          className="sidebar-icon svg-icon"
-          dangerouslySetInnerHTML={{ __html: trimmed }}
-        />
-      );
-    }
-    return (
-      <img
-        src={trimmed}
-        className="sidebar-icon"
-        style={{ width: size, height: size }}
-        alt=""
-      />
-    );
-  }
-
-  // Check if it's a Lucide icon
-  const IconComponent = (LucideIcons as any)[iconName];
-  if (IconComponent) {
-    return <IconComponent size={size} className="sidebar-icon lucide-icon" />;
-  }
-
-  return null;
-}
-
-/**
- * The sidebar navigation component.
- * Groups documentation routes logically based on the `group` property.
- * Highlights the active link based on the current URL path.
- *
- * @param routes - Array of all generated routes to be displayed
- * @param config - Global configuration (which can contain sidebar overrides)
- */
-export function Sidebar({
-  routes,
-  config,
-}: {
-  routes: RouteItem[];
-  config: BoltdocsConfig;
-}) {
-  const location = useLocation();
-
-  // Find active tab based on the current route's metadata
-  const currentRoute = routes.find((r) => r.path === location.pathname);
-  const activeTabId = currentRoute?.tab?.toLowerCase();
-
-  // Filter routes by active tab if any tab is active
-  const filteredRoutes = activeTabId
-    ? routes.filter((r) => {
-        if (!r.tab) return true; // Fallback for untabbed routes
-        return r.tab.toLowerCase() === activeTabId;
-      })
-    : routes;
-
-  const ungrouped: RouteItem[] = [];
-  const groupMap = new Map<string, SidebarGroup & { icon?: string }>();
-
-  for (const route of filteredRoutes) {
-    if (!route.group) {
-      ungrouped.push(route);
-    } else {
-      if (!groupMap.has(route.group)) {
-        groupMap.set(route.group, {
-          slug: route.group,
-          title: route.groupTitle || route.group,
-          routes: [],
-          icon: (route as any).groupIcon,
-        });
-      }
-      groupMap.get(route.group)!.routes.push(route);
-    }
-  }
-
-  const groups = Array.from(groupMap.values());
-
-  return (
-    <aside className="boltdocs-sidebar">
-      <nav aria-label="Main Navigation">
-        <ul className="sidebar-list">
-          {ungrouped.map((route) => (
-            <li key={route.path}>
-              <Link
-                to={route.path === "" ? "/" : route.path}
-                className={`sidebar-link ${location.pathname === route.path ? "active" : ""}`}
-                aria-current={
-                  location.pathname === route.path ? "page" : undefined
-                }
-              >
-                <div className="sidebar-link-content">
-                  <div className="sidebar-link-title-container">
-                    {renderIcon((route as any).icon)}
-                    <span>{route.title}</span>
-                  </div>
-                  {renderBadge(route.badge)}
-                </div>
-              </Link>
-            </li>
-          ))}
-        </ul>
-
-        {groups.map((group) => (
-          <SidebarGroupSection
-            key={group.slug}
-            group={group}
-            currentPath={location.pathname}
-          />
-        ))}
-      </nav>
-      {config.themeConfig?.poweredBy !== false && <PoweredBy />}
-    </aside>
-  );
-}
-
-function SidebarGroupSection({
-  group,
-  currentPath,
-}: {
-  group: SidebarGroup;
-  currentPath: string;
-}) {
-  const isActive = group.routes.some((r) => currentPath === r.path);
-  const [open, setOpen] = useState(true);
-
-  return (
-    <div className="sidebar-group">
-      <button
-        className={`sidebar-group-header ${isActive ? "active" : ""}`}
-        onClick={() => setOpen(!open)}
-        aria-expanded={open}
-        aria-controls={`sidebar-group-${group.slug}`}
-      >
-        <div className="sidebar-group-header-content">
-          <span className="sidebar-group-title">{group.title}</span>
-        </div>
-        <span className={`sidebar-group-chevron ${open ? "open" : ""}`}>
-          <ChevronRight size={16} />
-        </span>
-      </button>
-      {open && (
-        <ul className="sidebar-group-list" id={`sidebar-group-${group.slug}`}>
-          {group.routes.map((route) => (
-            <li key={route.path}>
-              <Link
-                to={route.path === "" ? "/" : route.path}
-                className={`sidebar-link sidebar-link-nested ${currentPath === route.path ? "active" : ""}`}
-                aria-current={currentPath === route.path ? "page" : undefined}
-              >
-                <div className="sidebar-link-content">
-                  <div className="sidebar-link-title-container">
-                    {renderIcon((route as any).icon)}
-                    <span>{route.title}</span>
-                  </div>
-                  {renderBadge(route.badge)}
-                </div>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}

package/src/client/theme/ui/Sidebar/index.ts

@@ -1 +0,0 @@
-export { Sidebar } from "./Sidebar";