boltdocs 1.10.2 → 2.0.0

package/src/client/theme/styles/variables.css

@@ -1,175 +0,0 @@
-/* ═══════════════════════════════════════════════════════════
-   Boltdocs — Dark Theme
-   Font: Inter · Accent: #7f13ec
-   ═══════════════════════════════════════════════════════════ */
-
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
-
-:root[data-theme="light"],
-:root.theme-light {
-  --ld-bg-main: #ffffff;
-  --ld-bg-soft: #eeeeee;
-  --ld-bg-mute: #f3f4f6;
-
-  --ld-surface: #ffffff;
-
-  --ld-border-subtle: #e5e7eb;
-  --ld-border-strong: #d1d5db;
-
-  --ld-text-main: #111827;
-  --ld-text-muted: #4b5563;
-  --ld-text-dim: #6b7280;
-
-  --ld-color-primary: #7f13ec;
-  --ld-color-primary-hover: #6d0fd0;
-  --ld-color-primary-muted: rgba(127, 19, 236, 0.1);
-  --ld-color-primary-glow: rgba(127, 19, 236, 0.25);
-  --ld-color-primary-text: #ffffff;
-
-  /* ─ Buttons ─ */
-  --ld-btn-primary-bg: #7f13ec;
-  --ld-btn-primary-text: #ffffff;
-  --ld-btn-secondary-bg: #ffffff;
-  --ld-btn-secondary-text: #111827;
-
-  --ld-code-bg: #f3f4f6;
-  --ld-code-header: #e5e7eb;
-  --ld-code-text: #1f2937;
-
-  /* ─ Customization ─ */
-  --ld-navbar-bg: #ffffff;
-  --ld-navbar-blur: 12px;
-  --ld-sidebar-bg: transparent;
-  --ld-sidebar-blur: 0px;
-
-  /* ─ UI Components (overridable independently from layout) ─ */
-  --ld-ui-btn-primary-bg: var(--ld-btn-primary-bg);
-  --ld-ui-btn-primary-text: var(--ld-btn-primary-text);
-  --ld-ui-btn-secondary-bg: var(--ld-btn-secondary-bg);
-  --ld-ui-btn-secondary-text: var(--ld-btn-secondary-text);
-
-  --ld-ui-success-bg: rgba(34, 197, 94, 0.1);
-  --ld-ui-success-text: #16a34a;
-  --ld-ui-success-border: rgba(34, 197, 94, 0.25);
-  --ld-ui-warning-bg: rgba(245, 158, 11, 0.1);
-  --ld-ui-warning-text: #d97706;
-  --ld-ui-warning-border: rgba(245, 158, 11, 0.25);
-  --ld-ui-danger-bg: rgba(239, 68, 68, 0.1);
-  --ld-ui-danger-text: #dc2626;
-  --ld-ui-danger-border: rgba(239, 68, 68, 0.25);
-  --ld-ui-info-bg: rgba(59, 130, 246, 0.1);
-  --ld-ui-info-text: #2563eb;
-  --ld-ui-info-border: rgba(59, 130, 246, 0.25);
-  --ld-ui-note-bg: rgba(59, 130, 246, 0.06);
-  --ld-ui-note-text: #2563eb;
-  --ld-ui-note-border: rgba(59, 130, 246, 0.3);
-  --ld-ui-tip-bg: rgba(34, 197, 94, 0.06);
-  --ld-ui-tip-text: #16a34a;
-  --ld-ui-tip-border: rgba(34, 197, 94, 0.3);
-}
-
-:root {
-  /* ─ Base palette ─ */
-  --ld-bg-main: #000;
-  --ld-bg-soft: #12121272;
-  --ld-bg-mute: #090909;
-  --ld-surface: #1a1a1a;
-  --ld-border-subtle: rgba(255, 255, 255, 0.06);
-  --ld-border-strong: rgba(255, 255, 255, 0.12);
-
-  /* ─ Text ─ */
-  --ld-text-main: #e4e4ed;
-  --ld-text-muted: #9d9db5;
-  --ld-text-dim: #6b6b85;
-
-  /* ─ Accent ─ */
-  --ld-color-primary: #ffffff;
-  --ld-color-primary-hover: #f3f3f3;
-  --ld-color-primary-muted: rgba(255, 255, 255, 0.1);
-  --ld-color-primary-glow: rgba(255, 255, 255, 0.25);
-  --ld-color-primary-text: #0a0a0f;
-  --ld-color-accent: #ffffff; /* White accent for TOC */
-
-  /* ─ Buttons ─ */
-  --ld-btn-primary-bg: #ffffff;
-  --ld-btn-primary-text: #0a0a0f;
-  --ld-btn-secondary-bg: #1a1a2e;
-  --ld-btn-secondary-text: #e4e4ed;
-
-  /* ─ Code ─ */
-  --ld-code-bg: #050505;
-  --ld-code-header: #111119;
-  --ld-code-text: #d4d4d4;
-
-  /* ─ Customization ─ */
-  --ld-navbar-bg: #000;
-  --ld-navbar-blur: 12px;
-  --ld-sidebar-bg: transparent;
-  --ld-sidebar-blur: 0px;
-
-  /* ─ UI Components (dark) ─ */
-  --ld-ui-btn-primary-bg: var(--ld-btn-primary-bg);
-  --ld-ui-btn-primary-text: var(--ld-btn-primary-text);
-  --ld-ui-btn-secondary-bg: var(--ld-btn-secondary-bg);
-  --ld-ui-btn-secondary-text: var(--ld-btn-secondary-text);
-
-  --ld-ui-success-bg: rgba(34, 197, 94, 0.1);
-  --ld-ui-success-text: #22c55e;
-  --ld-ui-success-border: rgba(34, 197, 94, 0.25);
-  --ld-ui-warning-bg: rgba(245, 158, 11, 0.1);
-  --ld-ui-warning-text: #f59e0b;
-  --ld-ui-warning-border: rgba(245, 158, 11, 0.25);
-  --ld-ui-danger-bg: rgba(239, 68, 68, 0.1);
-  --ld-ui-danger-text: #ef4444;
-  --ld-ui-danger-border: rgba(239, 68, 68, 0.25);
-  --ld-ui-info-bg: rgba(59, 130, 246, 0.1);
-  --ld-ui-info-text: #3b82f6;
-  --ld-ui-info-border: rgba(59, 130, 246, 0.25);
-  --ld-ui-note-bg: rgba(59, 130, 246, 0.06);
-  --ld-ui-note-text: #3b82f6;
-  --ld-ui-note-border: rgba(59, 130, 246, 0.3);
-  --ld-ui-tip-bg: rgba(34, 197, 94, 0.06);
-  --ld-ui-tip-text: #22c55e;
-  --ld-ui-tip-border: rgba(34, 197, 94, 0.3);
-
-  /* ─ Typography ─ */
-  --ld-font-sans: "Inter", system-ui, -apple-system, sans-serif;
-  --ld-font-mono:
-    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    monospace;
-
-  /* ─ Dimensions ─ */
-  --ld-navbar-height: 3.5rem;
-  --ld-header-height: var(--ld-navbar-height); /* Default sync */
-  --ld-sidebar-width: 14.5rem;
-  --ld-toc-width: 13rem;
-  --ld-content-max-width: 820px;
-  --ld-radius-sm: 4px;
-  --ld-radius-md: 8px;
-  --ld-radius-lg: 12px;
-  --ld-radius-full: 9999px;
-
-  /* ─ Custom Scrollbar ─ */
-  scrollbar-width: thin;
-  scrollbar-color: var(--ld-border-strong) transparent;
-}
-
-/* Chrome, Edge, and Safari */
-*::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-*::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-  background-color: var(--ld-border-strong);
-  border-radius: 20px;
-  border: transparent;
-}
-
-*::-webkit-scrollbar-thumb:hover {
-  background-color: var(--ld-text-dim);
-}

package/src/client/theme/styles.css

@@ -1,39 +0,0 @@
-/* ═══════════════════════════════════════════════════════════
-   Boltdocs — Dark Theme
-   Main Entry Point
-   ═══════════════════════════════════════════════════════════ */
-
-@import "./styles/variables.css";
-@import "./ui/Layout/base.css";
-
-/* Core Layout Components */
-@import "./ui/Navbar/navbar.css";
-@import "./ui/Sidebar/sidebar.css";
-@import "./ui/OnThisPage/toc.css";
-@import "./ui/Footer/footer.css";
-@import "./ui/LanguageSwitcher/language-switcher.css";
-@import "./ui/PoweredBy/powered-by.css";
-@import "./ui/CopyMarkdown/copy-markdown.css";
-
-/* Markdown Content */
-@import "./styles/markdown.css";
-@import "./components/Video/video.css";
-
-/* UI Components (MDX) */
-@import "./components/mdx/mdx-components.css";
-@import "./components/PackageManagerTabs/pkg-tabs.css";
-
-/* Interactive Elements */
-@import "./ui/SearchDialog/search.css";
-@import "./ui/Layout/pagination.css";
-
-/* Pages */
-@import "./ui/NotFound/not-found.css";
-@import "./ui/Loading/loading.css";
-@import "./ui/ErrorBoundary/error-boundary.css";
-
-/* Playground */
-@import "./components/Playground/playground.css";
-
-/* Media Queries */
-@import "./ui/Layout/responsive.css";

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

@@ -1,68 +0,0 @@
-import React from "react";
-import { useLocation } from "react-router-dom";
-import { Link } from "../Link";
-import { Home, ChevronRight } from "lucide-react";
-import { ComponentRoute } from "../../../types";
-import { BoltdocsConfig } from "../../../../node/config";
-
-export interface BreadcrumbsProps {
-  routes: ComponentRoute[];
-  config: BoltdocsConfig;
-}
-
-export function Breadcrumbs({ routes, config }: BreadcrumbsProps) {
-  const location = useLocation();
-
-  if (config.themeConfig?.breadcrumbs === false) return null;
-  if (location.pathname === "/") return null;
-
-  const currentRoute = routes.find((r) => r.path === location.pathname);
-
-  const groupRoute = currentRoute?.group
-    ? routes.find((r) => r.group === currentRoute.group)
-    : null;
-
-  return (
-    <nav className="boltdocs-breadcrumbs" aria-label="Breadcrumb">
-      <ol className="boltdocs-breadcrumbs-list">
-        <li className="boltdocs-breadcrumbs-item">
-          <Link to="/" className="boltdocs-breadcrumbs-link">
-            {/* Home Icon */}
-            <Home size={14} />
-          </Link>
-          <span className="boltdocs-breadcrumbs-separator">
-            <ChevronRight size={14} />
-          </span>
-        </li>
-
-        {currentRoute?.groupTitle && (
-          <li className="boltdocs-breadcrumbs-item">
-            {groupRoute ? (
-              <Link to={groupRoute.path} className="boltdocs-breadcrumbs-link">
-                {currentRoute.groupTitle}
-              </Link>
-            ) : (
-              <span className="boltdocs-breadcrumbs-text">
-                {currentRoute.groupTitle}
-              </span>
-            )}
-            <span className="boltdocs-breadcrumbs-separator">
-              <ChevronRight size={14} />
-            </span>
-          </li>
-        )}
-
-        {currentRoute?.title && (
-          <li className="boltdocs-breadcrumbs-item">
-            <span
-              className="boltdocs-breadcrumbs-text boltdocs-breadcrumbs-active"
-              aria-current="page"
-            >
-              {currentRoute.title}
-            </span>
-          </li>
-        )}
-      </ol>
-    </nav>
-  );
-}

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

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

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

@@ -1,82 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import { Copy, ChevronDown, Check, ExternalLink } from "lucide-react";
-import "./copy-markdown.css";
-
-export interface CopyMarkdownProps {
-  content?: string;
-  config?: boolean | { text?: string; icon?: string };
-}
-
-export function CopyMarkdown({ content, config }: CopyMarkdownProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [copied, setCopied] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const isEnabled = config !== false;
-  const buttonText = typeof config === "object" ? config.text || "Copy Markdown" : "Copy Markdown";
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  if (!isEnabled || !content) return null;
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(content);
-    setCopied(true);
-    setIsOpen(false);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  const handleOpenRaw = () => {
-    const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
-    const url = URL.createObjectURL(blob);
-    window.open(url, "_blank");
-    setIsOpen(false);
-  };
-
-  return (
-    <div className="boltdocs-copy-markdown" ref={dropdownRef}>
-      <div className="copy-btn-group">
-        <button
-          className="copy-btn"
-          onClick={handleCopy}
-          aria-label="Copy Markdown"
-        >
-          {copied ? <Check size={16} /> : <Copy size={16} />}
-          <span className="copy-label">{copied ? "Copied!" : buttonText}</span>
-        </button>
-        <button
-          className={`copy-dropdown-toggle ${isOpen ? "is-active" : ""}`}
-          onClick={() => setIsOpen(!isOpen)}
-          aria-label="More options"
-          aria-expanded={isOpen}
-        >
-          <ChevronDown size={14} className="arrow-icon" />
-        </button>
-      </div>
-
-      {isOpen && (
-        <div className="copy-dropdown">
-          <button className="copy-option" onClick={handleCopy}>
-            <Copy size={14} />
-            Copy Markdown
-          </button>
-          <button className="copy-option" onClick={handleOpenRaw}>
-            <ExternalLink size={14} />
-            View as Markdown
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/client/theme/ui/CopyMarkdown/copy-markdown.css

@@ -1,112 +0,0 @@
-.boltdocs-copy-markdown {
-  position: relative;
-  display: inline-block;
-  z-index: 100;
-}
-
-.copy-btn-group {
-  display: flex;
-  align-items: stretch;
-  background-color: var(--ld-bg-mute);
-  border: 1px solid var(--ld-border-subtle);
-  border-radius: var(--ld-radius-full);
-  overflow: hidden;
-  transition: all 0.2s ease;
-}
-
-.copy-btn-group:hover {
-  border-color: var(--ld-color-primary-hover);
-}
-
-.copy-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  background: transparent;
-  border: none;
-  color: var(--ld-text-main);
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.2s ease;
-}
-
-.copy-btn:hover {
-  background-color: var(--ld-bg-soft);
-}
-
-.copy-label {
-  white-space: nowrap;
-}
-
-.copy-dropdown-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 10px;
-  background: rgba(255, 255, 255, 0.03);
-  border: none;
-  border-left: 1px solid var(--ld-border-subtle);
-  color: var(--ld-text-muted);
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.copy-dropdown-toggle:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--ld-text-main);
-}
-
-.copy-dropdown-toggle .arrow-icon {
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.copy-dropdown-toggle.is-active .arrow-icon {
-  transform: rotate(180deg);
-}
-
-.copy-dropdown {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  width: 200px;
-  background: var(--ld-bg-main);
-  border: 1px solid var(--ld-border-subtle);
-  border-radius: var(--ld-radius-lg);
-  padding: 4px;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
-  overflow: hidden;
-  animation: boltdocs-fade-in 0.2s ease;
-}
-
-.copy-option {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 10px 12px;
-  background: transparent;
-  border: none;
-  border-radius: 8px;
-  color: var(--ld-text-main);
-  font-size: 14px;
-  text-align: left;
-  cursor: pointer;
-  transition: background 0.2s ease;
-}
-
-.copy-option:hover {
-  background-color: var(--ld-bg-soft);
-}
-
-@keyframes boltdocs-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

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

@@ -1 +0,0 @@
-export * from "./CopyMarkdown";

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

@@ -1,50 +0,0 @@
-import { Component, ErrorInfo, ReactNode } from "react";
-import "./error-boundary.css";
-
-interface Props {
-  children?: ReactNode;
-  fallback?: ReactNode;
-}
-
-interface State {
-  hasError: boolean;
-  error?: Error;
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-  public state: State = {
-    hasError: false,
-  };
-
-  public static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error };
-  }
-
-  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error("Uncaught error in Boltdocs Layout:", error, errorInfo);
-  }
-
-  public render() {
-    if (this.state.hasError) {
-      return (
-        this.props.fallback || (
-          <div className="boltdocs-error-boundary">
-            <div className="boltdocs-error-title">Something went wrong</div>
-            <p className="boltdocs-error-message">
-              {this.state.error?.message ||
-                "An unexpected error occurred while rendering this page."}
-            </p>
-            <button
-              className="boltdocs-error-retry"
-              onClick={() => this.setState({ hasError: false })}
-            >
-              Try again
-            </button>
-          </div>
-        )
-      );
-    }
-
-    return this.props.children;
-  }
-}

package/src/client/theme/ui/ErrorBoundary/error-boundary.css

@@ -1,55 +0,0 @@
-.boltdocs-error-boundary {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 3rem 2rem;
-  margin: 2rem 0;
-  background-color: var(--ld-bg-soft);
-  border: 1px solid var(--ld-ui-danger-border);
-  border-radius: var(--ld-radius-lg);
-  text-align: center;
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-}
-
-.boltdocs-error-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--ld-ui-danger-text);
-  margin-bottom: 0.75rem;
-  font-family: var(--ld-font-sans);
-}
-
-.boltdocs-error-message {
-  font-size: 1rem;
-  color: var(--ld-text-muted);
-  max-width: 100%;
-  margin-bottom: 1.5rem;
-  line-height: 1.6;
-  overflow-wrap: break-word;
-  word-break: break-word;
-}
-
-.boltdocs-error-retry {
-  padding: 0.6rem 1.25rem;
-  background-color: var(--ld-ui-btn-primary-bg);
-  color: var(--ld-ui-btn-primary-text);
-  border: none;
-  border-radius: var(--ld-radius-full);
-  font-size: 0.875rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: 0 4px 12px var(--ld-color-primary-glow);
-}
-
-.boltdocs-error-retry:hover {
-  background-color: var(--ld-color-primary-hover);
-  transform: translateY(-1px);
-  box-shadow: 0 6px 16px var(--ld-color-primary-glow);
-}
-
-.boltdocs-error-retry:active {
-  transform: translateY(0);
-}

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

@@ -1 +0,0 @@
-export * from "./ErrorBoundary";

package/src/client/theme/ui/Footer/footer.css

@@ -1,32 +0,0 @@
-/* ═══════════════════════════════════════════════════════════
-   FOOTER
-   ═══════════════════════════════════════════════════════════ */
-.boltdocs-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1.5rem 2rem;
-  border-top: 1px solid var(--ld-border-subtle);
-  background-color: var(--ld-bg-soft);
-  font-size: 0.8rem;
-  color: var(--ld-text-dim);
-}
-
-.footer-copy {
-  margin: 0;
-}
-
-.footer-links {
-  display: flex;
-  gap: 1.25rem;
-}
-
-.footer-links a {
-  color: var(--ld-text-dim);
-  text-decoration: none;
-  transition: color 0.2s;
-}
-
-.footer-links a:hover {
-  color: var(--ld-text-muted);
-}

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

@@ -1,69 +0,0 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-
-interface HeadProps {
-  siteTitle: string;
-  siteDescription?: string;
-  routes: Array<{ path: string; title: string; description?: string }>;
-}
-
-export function Head({ siteTitle, siteDescription, routes }: HeadProps) {
-  const location = useLocation();
-
-  useEffect(() => {
-    // Find the current route's metadata
-    const currentRoute = routes.find((r) => r.path === location.pathname);
-    const pageTitle = currentRoute?.title;
-    const pageDescription = currentRoute?.description || siteDescription || "";
-
-    // Update document title
-    document.title = pageTitle ? `${pageTitle} | ${siteTitle}` : siteTitle;
-
-    // Update or create meta description
-    let metaDesc = document.querySelector(
-      'meta[name="description"]',
-    ) as HTMLMetaElement | null;
-    if (!metaDesc) {
-      metaDesc = document.createElement("meta");
-      metaDesc.name = "description";
-      document.head.appendChild(metaDesc);
-    }
-    metaDesc.content = pageDescription;
-
-    // Update OG tags
-    setMetaTag("property", "og:title", document.title);
-    setMetaTag("property", "og:description", pageDescription);
-    setMetaTag("property", "og:type", "article");
-    setMetaTag("property", "og:url", window.location.href);
-
-    // Twitter card
-    setMetaTag("name", "twitter:card", "summary");
-    setMetaTag("name", "twitter:title", document.title);
-    setMetaTag("name", "twitter:description", pageDescription);
-
-    // Canonical URL
-    let canonical = document.querySelector(
-      'link[rel="canonical"]',
-    ) as HTMLLinkElement | null;
-    if (!canonical) {
-      canonical = document.createElement("link");
-      canonical.rel = "canonical";
-      document.head.appendChild(canonical);
-    }
-    canonical.href = window.location.origin + location.pathname;
-  }, [location.pathname, siteTitle, siteDescription, routes]);
-
-  return null; // This component only manages <head>, no visual output
-}
-
-function setMetaTag(attr: "name" | "property", key: string, content: string) {
-  let tag = document.querySelector(
-    `meta[${attr}="${key}"]`,
-  ) as HTMLMetaElement | null;
-  if (!tag) {
-    tag = document.createElement("meta");
-    tag.setAttribute(attr, key);
-    document.head.appendChild(tag);
-  }
-  tag.content = content;
-}

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

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