boltdocs 1.10.2 → 1.11.0

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

@@ -1,193 +0,0 @@
-import React, { Suspense, lazy } from "react";
-import { Link, useLocation } from "react-router-dom";
-import { ChevronDown } from "lucide-react";
-import { BoltdocsConfig } from "../../../../node/config";
-import { ComponentRoute } from "../../../types";
-import { LanguageSwitcher } from "../LanguageSwitcher";
-import { VersionSwitcher } from "../VersionSwitcher";
-import { ThemeToggle } from "../ThemeToggle";
-import { Discord } from "../../icons/discord";
-import { XformerlyTwitter } from "../../icons/twitter";
-import { GithubStars } from "./GithubStars";
-import { Tabs } from "./Tabs";
-
-const SearchDialog = lazy(() =>
-  import("../SearchDialog").then((m) => ({ default: m.SearchDialog })),
-);
-
-const ICON_MAP: Record<string, React.FC> = {
-  discord: Discord,
-  x: XformerlyTwitter,
-};
-
-function formatStars(stars: number) {
-  if (stars >= 1000) {
-    return (stars / 1000).toFixed(1) + "K";
-  }
-  return stars.toString();
-}
-
-/**
- * The top navigation bar of the documentation site.
- */
-export function Navbar({
-  config,
-  routes,
-  allRoutes,
-  currentLocale,
-  currentVersion,
-}: {
-  config: BoltdocsConfig;
-  routes?: ComponentRoute[];
-  allRoutes?: ComponentRoute[];
-  currentLocale?: string;
-  currentVersion?: string;
-}) {
-  const location = useLocation();
-  const isHomePage = location.pathname === "/";
-  const title = config.themeConfig?.title || "Boltdocs";
-  const navItems = config.themeConfig?.navbar || [];
-  const socialLinks = config.themeConfig?.socialLinks || [];
-  const hasTabs =
-    !isHomePage &&
-    config.themeConfig?.tabs &&
-    config.themeConfig.tabs.length > 0;
-
-  const leftItems = navItems.filter((item) => item.position !== "right");
-  const rightItems = navItems.filter((item) => item.position === "right");
-
-  const renderNavItem = (item: any, i: number) => {
-    const text = item.label || item.text || "";
-    const href = item.to || item.href || item.link || "";
-    const isExternal =
-      href.startsWith("http") || href.startsWith("//") || href.includes("://");
-
-    return (
-      <Link key={i} to={href} target={isExternal ? "_blank" : undefined}>
-        {text}
-        {isExternal && (
-          <span className="navbar-external-icon">
-            <svg
-              viewBox="0 0 24 24"
-              width="13"
-              height="13"
-              stroke="currentColor"
-              strokeWidth="2"
-              fill="none"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
-              <polyline points="15 3 21 3 21 9"></polyline>
-              <line x1="10" y1="14" x2="21" y2="3"></line>
-            </svg>
-          </span>
-        )}
-      </Link>
-    );
-  };
-
-  return (
-    <header className={`boltdocs-navbar ${hasTabs ? "has-tabs" : ""}`}>
-      <div
-        className="navbar-container"
-        style={{ height: "var(--ld-navbar-height)" }}
-      >
-        {/* LEFT SECTION */}
-        <div className="navbar-left">
-          <div className="navbar-logo">
-            <Link to="/">
-              {config.themeConfig?.logo ? (
-                config.themeConfig.logo.trim().startsWith("<svg") ? (
-                  <span
-                    className="navbar-logo-svg"
-                    dangerouslySetInnerHTML={{
-                      __html: config.themeConfig.logo,
-                    }}
-                  />
-                ) : (
-                  <img
-                    src={config.themeConfig.logo}
-                    alt={title}
-                    className="navbar-logo-img"
-                  />
-                )
-              ) : null}
-              {title}
-            </Link>
-          </div>
-
-          {config.versions && currentVersion && allRoutes ? (
-            <VersionSwitcher
-              versions={config.versions}
-              currentVersion={currentVersion}
-              currentLocale={currentLocale}
-              allRoutes={allRoutes}
-            />
-          ) : config.themeConfig?.version ? (
-            <div className="navbar-version">
-              {config.themeConfig.version} <ChevronDown size={14} />
-            </div>
-          ) : null}
-
-          <nav className="navbar-links" aria-label="Top Navigation Left">
-            {leftItems.map(renderNavItem)}
-          </nav>
-        </div>
-
-        {/* RIGHT SECTION */}
-        <div className="navbar-right">
-          <nav className="navbar-links" aria-label="Top Navigation Right">
-            {rightItems.map(renderNavItem)}
-          </nav>
-
-          <Suspense fallback={<div className="navbar-search-placeholder" />}>
-            <SearchDialog routes={routes || []} />
-          </Suspense>
-
-          {config.i18n && currentLocale && allRoutes && (
-            <LanguageSwitcher
-              i18n={config.i18n}
-              currentLocale={currentLocale}
-              allRoutes={allRoutes}
-            />
-          )}
-
-          <ThemeToggle />
-
-          {config.themeConfig?.githubRepo && (
-            <GithubStars repo={config.themeConfig.githubRepo} />
-          )}
-
-          {/* Optional Divider if both groups have items */}
-          {socialLinks.length > 0 && <div className="navbar-divider" />}
-
-          <div className="navbar-icons">
-            {socialLinks.map((link, i) => {
-              const IconComp = ICON_MAP[link.icon.toLowerCase()];
-              return (
-                <a
-                  key={i}
-                  href={link.link}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="navbar-icon-btn"
-                  aria-label={link.icon}
-                >
-                  {IconComp ? <IconComp /> : <span>{link.icon}</span>}
-                </a>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-
-      {hasTabs && config.themeConfig?.tabs && (
-        <Tabs
-          tabs={config.themeConfig.tabs}
-          routes={allRoutes || routes || []}
-        />
-      )}
-    </header>
-  );
-}

package/src/client/theme/ui/Navbar/Tabs.tsx

@@ -1,99 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { useLocation } from "react-router-dom";
-import { Link } from "../Link";
-import * as Icons from "lucide-react";
-
-interface TabConfig {
-  id: string;
-  text: string;
-  icon?: string;
-}
-
-interface TabsProps {
-  tabs: TabConfig[];
-  routes: any[];
-}
-
-export function Tabs({ tabs, routes }: TabsProps) {
-  const location = useLocation();
-  const containerRef = useRef<HTMLDivElement>(null);
-  const tabRefs = useRef<(HTMLAnchorElement | null)[]>([]);
-  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({
-    opacity: 0,
-    transform: "translateX(0) scaleX(0)",
-    width: 0,
-  });
-
-  const currentRoute = routes.find((r) => r.path === location.pathname);
-  const currentTabId = currentRoute?.tab?.toLowerCase();
-
-  // Find the active index - default to 0 if no tab detected
-  const activeIndex = tabs.findIndex((tab) =>
-    currentTabId ? currentTabId === tab.id.toLowerCase() : false
-  );
-  
-  const finalActiveIndex = activeIndex === -1 ? 0 : activeIndex;
-
-  useEffect(() => {
-    const activeTab = tabRefs.current[finalActiveIndex];
-    if (activeTab) {
-      setIndicatorStyle({
-        opacity: 1,
-        width: activeTab.offsetWidth,
-        transform: `translateX(${activeTab.offsetLeft}px)`,
-      });
-    }
-  }, [finalActiveIndex, tabs, location.pathname]);
-
-  if (!tabs || tabs.length === 0) return null;
-
-  const renderTabIcon = (iconName?: string) => {
-    if (!iconName) return null;
-
-    if (iconName.trim().startsWith("<svg")) {
-      return (
-        <span
-          className="tab-icon svg-icon"
-          dangerouslySetInnerHTML={{ __html: iconName }}
-        />
-      );
-    }
-
-    const LucideIcon = (Icons as any)[iconName];
-    if (LucideIcon) {
-      return <LucideIcon size={16} className="tab-icon lucide-icon" />;
-    }
-
-    return <img src={iconName} alt="" className="tab-icon img-icon" />;
-  };
-
-  return (
-    <div className="boltdocs-tabs-container">
-      <div className="boltdocs-tabs" ref={containerRef}>
-        {tabs.map((tab, index) => {
-          const isActive = index === finalActiveIndex;
-          const firstRoute = routes.find(
-            (r) => r.tab && r.tab.toLowerCase() === tab.id.toLowerCase()
-          );
-          const linkTo = firstRoute ? firstRoute.path : "#";
-
-          return (
-            <Link
-              key={tab.id}
-              to={linkTo}
-              ref={(el) => {
-                tabRefs.current[index] = el;
-              }}
-              className={`boltdocs-tab-item ${isActive ? "active" : ""}`}
-            >
-              {renderTabIcon(tab.icon)}
-              <span>{tab.text}</span>
-            </Link>
-          );
-        })}
-        {/* Sliding Indicator */}
-        <div className="boltdocs-tab-indicator" style={indicatorStyle} />
-      </div>
-    </div>
-  );
-}

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

@@ -1,2 +0,0 @@
-export { Navbar } from "./Navbar";
-export { GithubStars } from "./GithubStars";

package/src/client/theme/ui/Navbar/navbar.css

@@ -1,347 +0,0 @@
-/* ═══════════════════════════════════════════════════════════
-   NAVBAR
-   ═══════════════════════════════════════════════════════════ */
-.boltdocs-navbar {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  background-color: var(--ld-navbar-bg);
-  border-bottom: 1px solid var(--ld-border-subtle);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-.boltdocs-navbar.has-tabs {
-  --ld-header-height: 102px !important;
-  height: 102px;
-}
-
-.boltdocs-navbar:not(.has-tabs) {
-  --ld-header-height: var(--ld-navbar-height);
-  height: var(--ld-navbar-height);
-}
-
-.navbar-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  max-width: 1440px;
-  margin: 0 auto;
-  padding: 0 1.5rem; /* Aligned exactly with main-container */
-}
-
-.navbar-logo {
-  flex: 1;
-}
-
-.navbar-logo a {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-weight: 700;
-  font-size: 1.15rem;
-  color: var(--ld-text-main);
-  text-decoration: none;
-  letter-spacing: -0.01em;
-}
-
-.navbar-logo a:hover {
-  color: var(--ld-text-main);
-}
-
-.navbar-logo-img {
-  height: 20px;
-  width: auto;
-  object-fit: contain;
-  display: block;
-}
-
-.navbar-logo-svg {
-  display: flex;
-  align-items: center;
-}
-
-.navbar-logo-svg svg {
-  height: 36px;
-  width: auto;
-  fill: currentColor;
-  display: block;
-}
-
-.navbar-left {
-  display: flex;
-  align-items: center;
-  gap: 1.25rem;
-}
-
-.navbar-version {
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--ld-text-muted);
-  background-color: var(--ld-bg-soft);
-  padding: 0.25rem 0.5rem;
-  border-radius: var(--ld-radius-md);
-  border: 1px solid var(--ld-border-subtle);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.navbar-version:hover {
-  background-color: var(--ld-bg-mute);
-  color: var(--ld-text-main);
-  border-color: var(--ld-border-strong);
-}
-
-.navbar-right {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.navbar-links {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.navbar-links a {
-  position: relative;
-  padding: 0.4rem 0.75rem;
-  color: var(--ld-text-muted);
-  text-decoration: none;
-  font-weight: 500;
-  font-size: 0.875rem;
-  border-radius: var(--ld-radius-md);
-  transition:
-    color 0.2s,
-    background-color 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-}
-
-.navbar-external-icon {
-  display: inline-flex;
-  align-items: center;
-  opacity: 0.6;
-  margin-top: 1px;
-}
-
-.navbar-links a:hover {
-  color: var(--ld-text-main);
-  background-color: var(--ld-color-primary-muted);
-}
-
-.navbar-links a.active {
-  color: var(--ld-color-primary);
-}
-
-.navbar-search {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.35rem 0.75rem;
-  background-color: transparent; /* Cleaner flat base */
-  border: 1px solid transparent; /* Invisible border initially */
-  border-radius: var(--ld-radius-full);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  color: var(--ld-text-dim);
-  font-size: 0.8125rem;
-  min-width: 220px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.navbar-search:hover {
-  background-color: var(--ld-bg-mute);
-  color: var(--ld-text-muted);
-}
-
-.navbar-search svg {
-  width: 15px;
-  height: 15px;
-  opacity: 0.7;
-}
-
-.navbar-search kbd {
-  margin-left: auto;
-  padding: 0.15rem 0.4rem;
-  font-family: var(--ld-font-sans);
-  font-weight: 500;
-  font-size: 0.65rem;
-  background-color: var(--ld-bg-mute);
-  border: 1px solid var(--ld-border-strong);
-  border-radius: var(--ld-radius-md);
-  color: var(--ld-text-dim);
-}
-
-/* ─── Github Stars Pill ────────────────────────────────── */
-.navbar-github-stars {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.3rem 0.65rem;
-  border-radius: var(--ld-radius-full);
-  border: 1px solid var(--ld-border-subtle);
-  background: var(--ld-bg-soft);
-  color: var(--ld-text-muted);
-  text-decoration: none;
-  font-size: 0.8rem;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.navbar-github-stars:hover {
-  color: var(--ld-text-main);
-  background: var(--ld-bg-mute);
-  border-color: var(--ld-border-strong);
-}
-
-.navbar-github-stars svg {
-  width: 15px;
-  height: 15px;
-}
-
-.navbar-divider {
-  width: 1px;
-  height: 18px;
-  background-color: var(--ld-border-subtle);
-  margin: 0 0.25rem;
-}
-
-.navbar-icons {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.navbar-icon-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.15rem;
-  height: 2.15rem;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  border-radius: var(--ld-radius-full);
-  color: var(--ld-text-muted);
-  text-decoration: none;
-  transition:
-    color 0.2s,
-    background-color 0.2s;
-}
-
-.navbar-icon-btn:hover {
-  color: var(--ld-text-main);
-  background-color: var(--ld-bg-mute);
-}
-
-.navbar-icon-btn svg {
-  width: 18px;
-  height: 18px;
-}
-
-/* Tabs Styles */
-.boltdocs-tabs-container {
-  position: relative;
-  background: var(--ld-navbar-bg);
-  padding: 0;
-  height: 46px;
-}
-
-/* Border pseudo-element to allow indicator overlap */
-.boltdocs-tabs-container::after {
-  content: "";
-  position: absolute;
-  bottom: 0px;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: var(--ld-border-subtle);
-  z-index: 10;
-}
-
-.boltdocs-tabs {
-  max-width: 1440px;
-  margin: 0 auto;
-  display: flex;
-  gap: 2rem;
-  overflow-x: auto;
-  scrollbar-width: none;
-  padding: 0 1.5rem;
-  position: relative;
-  height: 100%;
-}
-
-.boltdocs-tabs::-webkit-scrollbar {
-  display: none;
-}
-
-.boltdocs-tab-item {
-  padding: 0.85rem 0;
-  padding-bottom: calc(0.85rem + 1px);
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--ld-text-muted);
-  text-decoration: none;
-  position: relative;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  opacity: 0.7;
-  z-index: 20;
-}
-
-.boltdocs-tab-item:hover {
-  color: var(--ld-text-main);
-  opacity: 1;
-}
-
-.tab-icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.2s ease;
-}
-
-.boltdocs-tab-item:hover .tab-icon {
-  transform: translateY(-1px);
-}
-
-.tab-icon.lucide-icon,
-.tab-icon.svg-icon svg {
-  width: 18px;
-  height: 18px;
-  stroke-width: 2.25px;
-}
-
-.boltdocs-tab-item.active {
-  color: var(--ld-text-main);
-  font-weight: 600;
-  opacity: 1;
-  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
-}
-
-.boltdocs-tab-indicator {
-  position: absolute;
-  bottom: 0px; /* Aligned with the border pseudo-element */
-  left: 0;
-  height: 3px;
-  background: var(--ld-color-primary);
-  border-radius: 2px 2px 0 0;
-  box-shadow: 0 -2px 15px var(--ld-color-primary-glow);
-  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
-  z-index: 100; /* Higher than border pseudo-element */
-  pointer-events: none;
-  transform-origin: left;
-}

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

@@ -1,19 +0,0 @@
-import { Link } from "../Link";
-import { ArrowLeft } from "lucide-react";
-
-export function NotFound() {
-  return (
-    <div className="boltdocs-not-found">
-      <div className="not-found-content">
-        <span className="not-found-code">404</span>
-        <h1 className="not-found-title">Page Not Found</h1>
-        <p className="not-found-text">
-          The page you're looking for doesn't exist or has been moved.
-        </p>
-        <Link to="/" className="not-found-link">
-          <ArrowLeft size={16} /> Go to Home
-        </Link>
-      </div>
-    </div>
-  );
-}

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

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