boltdocs 1.10.2 → 2.0.0

package/src/client/theme/ui/Sidebar/sidebar.css

@@ -1,230 +0,0 @@
-/* ═══════════════════════════════════════════════════════════
-   SIDEBAR
-   ═══════════════════════════════════════════════════════════ */
-.boltdocs-sidebar {
-  width: var(--ld-sidebar-width);
-  flex-shrink: 0;
-  background-color: var(--ld-sidebar-bg);
-  backdrop-filter: blur(var(--ld-sidebar-blur));
-  -webkit-backdrop-filter: blur(var(--ld-sidebar-blur));
-  border-right: 1px solid var(--ld-border-subtle);
-  padding: 1.5rem 0.6rem;
-  overflow-y: auto;
-  height: 100%;
-  scrollbar-width: none;
-  display: flex;
-  flex-direction: column;
-  /* Hardware acceleration */
-  transform: translate3d(0, 0, 0);
-  backface-visibility: hidden;
-}
-
-.sidebar-icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.sidebar-icon.lucide-icon,
-.sidebar-icon.svg-icon svg {
-  color: var(--ld-text-muted);
-  width: 18px;
-  height: 18px;
-  stroke-width: 2px;
-  transition: color 0.2s ease;
-}
-
-.sidebar-link:hover .sidebar-icon.lucide-icon,
-.sidebar-link.active .sidebar-icon.lucide-icon {
-  color: var(--ld-color-primary);
-}
-
-.boltdocs-sidebar > nav {
-  flex: 1;
-}
-
-.boltdocs-sidebar::-webkit-scrollbar {
-  display: none;
-}
-
-.boltdocs-sidebar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.boltdocs-sidebar::-webkit-scrollbar-thumb {
-  background: var(--ld-bg-mute);
-  border-radius: 4px;
-}
-
-.sidebar-list {
-  list-style: none;
-  padding: 0;
-  margin: 0 0 0.5rem;
-}
-
-.sidebar-list li {
-  margin-bottom: 2px;
-}
-
-.sidebar-link {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 0.75rem;
-  color: var(--ld-text-muted);
-  text-decoration: none;
-  border-radius: 0.75rem; /* Large rounded corners */
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  margin: 0.15rem 0;
-}
-
-.sidebar-link-title-container {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.sidebar-link-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  gap: 0.5rem;
-}
-
-.sidebar-link-content > span:last-child {
-  flex: 1;
-  word-wrap: break-word;
-}
-
-.sidebar-badge {
-  font-size: 0.45rem;
-  font-weight: 500;
-  padding: 0.1rem 0.3rem;
-  border-radius: 9999px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  white-space: nowrap;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.sidebar-badge.badge-new {
-  color: #38bdf8;
-  background-color: rgba(56, 189, 248, 0.15);
-  border: 1px solid rgba(56, 189, 248, 0.25);
-}
-
-.sidebar-badge.badge-experimental {
-  color: #eab308; /* Yellow */
-  background-color: rgba(234, 179, 8, 0.15);
-  border: 1px solid rgba(234, 179, 8, 0.25);
-}
-
-.sidebar-badge.badge-updated {
-  color: #a1a1aa; /* Grey / Zinc 400 */
-  background-color: rgba(161, 161, 170, 0.15);
-  border: 1px solid rgba(161, 161, 170, 0.25);
-}
-
-.sidebar-badge.badge-default {
-  color: var(--ld-text-muted);
-  background-color: var(--ld-bg-mute);
-  border: 1px solid var(--ld-border-subtle);
-}
-
-.sidebar-link:hover {
-  color: var(--ld-color-primary-hover);
-  background-color: var(--ld-bg-soft);
-}
-
-.sidebar-link.active {
-  color: var(--ld-color-primary);
-  font-weight: 600;
-  background-color: var(--ld-bg-soft);
-}
-
-/* ─── Sidebar Groups ─────────────────────────────────────── */
-.sidebar-group {
-  margin-top: 1.25rem;
-}
-
-.sidebar-group:first-child {
-  margin-top: 0;
-}
-
-.sidebar-group-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  background: none;
-  border: none;
-  border-radius: var(--ld-radius-md);
-  color: var(--ld-text-muted);
-  font-family: var(--ld-font-sans);
-  font-size: 0.8125rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    color 0.2s,
-    background-color 0.2s;
-}
-
-.sidebar-group-header-content {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.sidebar-group-header:hover {
-  color: var(--ld-text-main);
-}
-
-.sidebar-group-header.active {
-  color: var(--ld-text-main);
-}
-
-.sidebar-group-chevron {
-  display: inline-flex;
-  align-items: center;
-  transition: transform 0.25s ease;
-  font-size: 0.75rem;
-  line-height: 1;
-}
-
-.sidebar-group-chevron.open {
-  transform: rotate(90deg);
-}
-
-.sidebar-group-list {
-  list-style: none;
-  padding: 0;
-  margin: 0.35rem 0 0.5rem 0;
-  position: relative;
-}
-
-.sidebar-group-list li {
-  margin-bottom: 2px;
-}
-
-.sidebar-link-nested {
-  padding-left: 0.75rem;
-}
-
-.sidebar-group-list {
-  list-style: none;
-  padding: 0;
-  margin: 0.35rem 0 0.5rem 0;
-  position: relative;
-}
-
-.sidebar-group-list li {
-  margin-bottom: 2px;
-}

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

@@ -1,69 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Sun, Moon } from "lucide-react";
-
-export function ThemeToggle() {
-  const [theme, setTheme] = useState("dark");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-    // On mount, read from localStorage or matchMedia
-    const stored = localStorage.getItem("boltdocs-theme");
-    if (stored === "light" || stored === "dark") {
-      setTheme(stored);
-    } else {
-      const prefersDark = window.matchMedia(
-        "(prefers-color-scheme: dark)",
-      ).matches;
-      setTheme(prefersDark ? "dark" : "light");
-    }
-
-    // Listen to system changes if no localStorage is set
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = (e: MediaQueryListEvent) => {
-      if (!localStorage.getItem("boltdocs-theme")) {
-        setTheme(e.matches ? "dark" : "light");
-      }
-    };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, []);
-
-  useEffect(() => {
-    if (!mounted) return;
-    const root = document.documentElement;
-    if (theme === "light") {
-      root.classList.add("theme-light");
-      root.dataset.theme = "light";
-    } else {
-      root.classList.remove("theme-light");
-      root.dataset.theme = "dark";
-    }
-  }, [theme, mounted]);
-
-  const toggleTheme = () => {
-    const newTheme = theme === "dark" ? "light" : "dark";
-    setTheme(newTheme);
-    localStorage.setItem("boltdocs-theme", newTheme);
-  };
-
-  // Prevent hydration mismatch by rendering a placeholder with same layout
-  if (!mounted) {
-    return (
-      <button className="navbar-icon-btn" aria-label="Toggle theme" disabled>
-        <span style={{ width: 20, height: 20, display: "inline-block" }}></span>
-      </button>
-    );
-  }
-
-  return (
-    <button
-      className="navbar-icon-btn"
-      onClick={toggleTheme}
-      aria-label="Toggle theme"
-      title={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
-    >
-      {theme === "dark" ? <Sun size={20} /> : <Moon size={20} />}
-    </button>
-  );
-}

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

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

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

@@ -1,136 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-import { Layers, ChevronDown } from "lucide-react";
-import { useNavigate, useLocation } from "react-router-dom";
-import { BoltdocsVersionsConfig } from "../../../../node/config";
-import { ComponentRoute } from "../../../types";
-
-function getBaseFilePath(
-  filePath: string,
-  version: string | undefined,
-  locale: string | undefined,
-): string {
-  let path = filePath;
-  if (version && (path === version || path.startsWith(version + "/"))) {
-    path = path === version ? "index.md" : path.slice(version.length + 1);
-  }
-  if (locale && (path === locale || path.startsWith(locale + "/"))) {
-    path = path === locale ? "index.md" : path.slice(locale.length + 1);
-  }
-  return path;
-}
-
-export function VersionSwitcher({
-  versions,
-  currentVersion,
-  currentLocale,
-  allRoutes,
-}: {
-  versions: BoltdocsVersionsConfig;
-  currentVersion: string;
-  currentLocale?: string;
-  allRoutes: ComponentRoute[];
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  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);
-  }, []);
-
-  const handleSelect = (version: string) => {
-    setIsOpen(false);
-    if (version === currentVersion) return;
-
-    const currentRoute = allRoutes.find((r) => r.path === location.pathname);
-    let targetPath = `/docs/${version}`; // Default to root of the new version
-
-    if (currentRoute) {
-      const baseFile = getBaseFilePath(
-        currentRoute.filePath,
-        currentRoute.version,
-        currentRoute.locale,
-      );
-
-      const targetRoute = allRoutes.find(
-        (r) =>
-          getBaseFilePath(r.filePath, r.version, r.locale) === baseFile &&
-          (r.version || versions.defaultVersion) === version &&
-          (currentLocale ? r.locale === currentLocale : !r.locale),
-      );
-
-      if (targetRoute) {
-        targetPath = targetRoute.path;
-      } else {
-        // Fallback to version index
-        const versionIndexRoute = allRoutes.find(
-          (r) =>
-            getBaseFilePath(r.filePath, r.version, r.locale) === "index.md" &&
-            (r.version || versions.defaultVersion) === version &&
-            (currentLocale ? r.locale === currentLocale : !r.locale),
-        );
-        targetPath = versionIndexRoute
-          ? versionIndexRoute.path
-          : `/docs/${version}${currentLocale ? `/${currentLocale}` : ""}`;
-      }
-    }
-
-    navigate(targetPath);
-  };
-
-  return (
-    <div
-      className="boltdocs-version-switcher"
-      ref={dropdownRef}
-      style={{ position: "relative", display: "flex", alignItems: "center" }}
-    >
-      <button
-        className="navbar-version"
-        onClick={() => setIsOpen(!isOpen)}
-        aria-label="Switch version"
-        aria-expanded={isOpen}
-        aria-haspopup="listbox"
-        style={{
-          fontFamily: "inherit",
-          padding: "0.25rem 0.5rem",
-          marginLeft: "0.5rem",
-        }}
-      >
-        <span>{versions.versions[currentVersion] || currentVersion}</span>
-        <ChevronDown size={14} />
-      </button>
-
-      {isOpen && (
-        <div
-          className="language-dropdown"
-          style={{
-            left: "0.5rem",
-            right: "auto",
-            minWidth: "150px",
-            top: "calc(100% + 8px)",
-          }}
-        >
-          {Object.entries(versions.versions).map(([key, label]) => (
-            <button
-              key={key}
-              className={`language-option ${key === currentVersion ? "active" : ""}`}
-              onClick={() => handleSelect(key)}
-            >
-              {label}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

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

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

package/src/client/utils.ts

@@ -1,49 +0,0 @@
-/**
- * Get the number of stars for a GitHub repository.
- * @param repo - The repository name in the format "owner/repo".
- * @returns The number of stars for the repository.
- */
-export async function getStarsRepo(repo: string) {
-  const response = await fetch(`https://api.github.com/repos/${repo}`);
-  const data = await response.json();
-  if (data.stargazers_count !== undefined) {
-    return formatStars(data.stargazers_count);
-  } else {
-    return "0"; // Fallback
-  }
-}
-
-/**
- * Format a number of stars in a compact form.
- * @param count - The number of stars to format.
- * @returns The formatted number of stars.
- */
-const formatStars = (count: number): string => {
-  return Intl.NumberFormat("en", {
-    notation: "compact",
-    compactDisplay: "short",
-  }).format(count);
-};
-
-/**
- * Copy text to clipboard.
- * @param text - The text to copy.
- * @returns True if the text was copied successfully.
- */
-export const copyToClipboard = async (text: string) => {
-  try {
-    await navigator.clipboard.writeText(text);
-    return true;
-  } catch {
-    // Fallback
-    const textarea = document.createElement("textarea");
-    textarea.value = text;
-    textarea.style.position = "fixed";
-    textarea.style.opacity = "0";
-    document.body.appendChild(textarea);
-    textarea.select();
-    document.execCommand("copy");
-    document.body.removeChild(textarea);
-    return true;
-  }
-};