boltdocs 1.6.0 → 1.7.1

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

@@ -232,7 +232,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
           onClick={handleClick}
           {...rest}
         />
-        {shouldShowPreview && (
+        {preview.visible && shouldShowPreview && (
           <LinkPreview
             isVisible={preview.visible}
             title={preview.title}
@@ -376,7 +376,7 @@ export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
           onClick={handleClick}
           {...rest}
         />
-        {shouldShowPreview && (
+        {preview.visible && shouldShowPreview && (
           <LinkPreview
             isVisible={preview.visible}
             title={preview.title}

package/src/client/theme/ui/Link/LinkPreview.tsx

@@ -17,35 +17,28 @@ export function LinkPreview({
   x,
   y,
 }: LinkPreviewProps) {
-  const [mounted, setMounted] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
   const [position, setPosition] = useState({ top: 0, left: 0 });
 
   useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  useEffect(() => {
-    if (isVisible && ref.current) {
+    if (ref.current) {
       const rect = ref.current.getBoundingClientRect();
-      const padding = 15;
+      const padding = 12;
 
       let top = y + padding;
       let left = x + padding;
 
       // Keep within viewport
-      if (left + rect.width > window.innerWidth) {
+      if (left + rect.width > window.innerWidth - 20) {
         left = x - rect.width - padding;
       }
-      if (top + rect.height > window.innerHeight) {
+      if (top + rect.height > window.innerHeight - 20) {
         top = y - rect.height - padding;
       }
 
       setPosition({ top, left });
     }
-  }, [isVisible, x, y]);
-
-  if (!mounted) return null;
+  }, [x, y, isVisible]);
 
   return createPortal(
     <div
@@ -56,8 +49,10 @@ export function LinkPreview({
         left: position.left,
       }}
     >
-      <span className="boltdocs-link-preview-title">{title}</span>
-      {summary && <p className="boltdocs-link-preview-summary">{summary}</p>}
+      <div className="boltdocs-link-preview-content">
+        <span className="boltdocs-link-preview-title">{title}</span>
+        {summary && <p className="boltdocs-link-preview-summary">{summary}</p>}
+      </div>
     </div>,
     document.body,
   );

package/src/client/theme/ui/Link/link-preview.css

@@ -1,22 +1,13 @@
 .boltdocs-link-preview {
   position: fixed;
   z-index: 1000;
-  width: 320px;
-  padding: 1rem;
-  background-color: var(--ld-navbar-bg);
-  backdrop-filter: blur(var(--ld-navbar-blur));
-  -webkit-backdrop-filter: blur(var(--ld-navbar-blur));
-  border: 1px solid var(--ld-border-subtle);
-  border-radius: var(--ld-radius-md);
-  box-shadow:
-    0 10px 25px -5px rgba(0, 0, 0, 0.1),
-    0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  width: 260px;
   pointer-events: none;
   opacity: 0;
-  transform: translateY(10px) scale(0.95);
+  transform: translateY(8px) scale(0.98);
   transition:
-    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
   font-family: var(--ld-font-sans);
 }
 
@@ -25,38 +16,50 @@
   transform: translateY(0) scale(1);
 }
 
+.boltdocs-link-preview-content {
+  padding: 0.85rem 1rem;
+  background-color: var(--ld-navbar-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--ld-border-subtle);
+  border-radius: var(--ld-radius-lg);
+  box-shadow: 
+    0 10px 30px -10px rgba(0, 0, 0, 0.2),
+    0 4px 10px -5px rgba(0, 0, 0, 0.1);
+}
+
 .boltdocs-link-preview-title {
   display: block;
   font-weight: 600;
-  font-size: 0.95rem;
+  font-size: 0.875rem;
   color: var(--ld-text-main);
-  margin-bottom: 0.5rem;
-  line-height: 1.4;
+  margin-bottom: 0.35rem;
+  line-height: 1.3;
 }
 
 .boltdocs-link-preview-summary {
   display: block;
-  font-size: 0.85rem;
+  font-size: 0.775rem;
   color: var(--ld-text-muted);
   line-height: 1.5;
   display: -webkit-box;
-  -webkit-line-clamp: 4;
-  line-clamp: 4;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
-/* Dark mode adjustments */
-[data-theme="dark"] .boltdocs-link-preview {
-  background-color: var(--ld-navbar-bg);
-  border-color: var(--ld-border-subtle);
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.3),
-    0 10px 10px -5px rgba(0, 0, 0, 0.2);
+/* Dark mode refinements */
+[data-theme="dark"] .boltdocs-link-preview-content {
+  background-color: rgba(15, 15, 20, 0.8);
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow: 
+    0 20px 40px -15px rgba(0, 0, 0, 0.5),
+    0 8px 16px -8px rgba(0, 0, 0, 0.3);
 }
 
 [data-theme="dark"] .boltdocs-link-preview-title {
-  color: #f8fafc;
+  color: #fff;
 }
 
 [data-theme="dark"] .boltdocs-link-preview-summary {

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

@@ -1,17 +1,17 @@
-import React, { useEffect, useState } from "react";
-import { Link } from "../Link";
-import { Book, ChevronDown } from "lucide-react";
+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 { getStarsRepo } from "../../../utils";
 import { Discord } from "../../icons/discord";
 import { XformerlyTwitter } from "../../icons/twitter";
 import { GithubStars } from "./GithubStars";
+import { Tabs } from "./Tabs";
 
-const SearchDialog = React.lazy(() =>
+const SearchDialog = lazy(() =>
   import("../SearchDialog").then((m) => ({ default: m.SearchDialog })),
 );
 
@@ -43,13 +43,56 @@ export function Navbar({
   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">
-      <div className="navbar-container">
+    <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">
@@ -87,22 +130,20 @@ export function Navbar({
             </div>
           ) : null}
 
-          <nav className="navbar-links" aria-label="Top Navigation">
-            {navItems.map((item, i) => (
-              <Link key={i} to={item.link}>
-                {item.text}
-              </Link>
-            ))}
+          <nav className="navbar-links" aria-label="Top Navigation Left">
+            {leftItems.map(renderNavItem)}
           </nav>
         </div>
 
         {/* RIGHT SECTION */}
         <div className="navbar-right">
-          <React.Suspense
-            fallback={<div className="navbar-search-placeholder" />}
-          >
+          <nav className="navbar-links" aria-label="Top Navigation Right">
+            {rightItems.map(renderNavItem)}
+          </nav>
+
+          <Suspense fallback={<div className="navbar-search-placeholder" />}>
             <SearchDialog routes={routes || []} />
-          </React.Suspense>
+          </Suspense>
 
           {config.i18n && currentLocale && allRoutes && (
             <LanguageSwitcher
@@ -140,6 +181,13 @@ export function Navbar({
           </div>
         </div>
       </div>
+
+      {hasTabs && config.themeConfig?.tabs && (
+        <Tabs
+          tabs={config.themeConfig.tabs}
+          routes={allRoutes || routes || []}
+        />
+      )}
     </header>
   );
 }

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

@@ -0,0 +1,99 @@
+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/navbar.css

@@ -3,19 +3,25 @@
    ═══════════════════════════════════════════════════════════ */
 .boltdocs-navbar {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   justify-content: center;
-  height: var(--ld-navbar-height);
-  padding: 0; /* Padding moved to container */
   background-color: var(--ld-navbar-bg);
-  backdrop-filter: blur(var(--ld-navbar-blur));
-  -webkit-backdrop-filter: blur(var(--ld-navbar-blur));
   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;
@@ -114,6 +120,16 @@
   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 {
@@ -231,3 +247,101 @@
   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;
+}