boltdocs 1.7.0 → 1.8.0

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

@@ -19,11 +19,9 @@
 .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: 
+  box-shadow:
     0 10px 30px -10px rgba(0, 0, 0, 0.2),
     0 4px 10px -5px rgba(0, 0, 0, 0.1);
 }
@@ -48,20 +46,3 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-
-/* 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: #fff;
-}
-
-[data-theme="dark"] .boltdocs-link-preview-summary {
-  color: #94a3b8;
-}

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { Link } from "../Link";
 import * as Icons from "lucide-react";
@@ -16,15 +16,40 @@ interface TabsProps {
 
 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;
 
-    // 1. Raw SVG
     if (iconName.trim().startsWith("<svg")) {
       return (
         <span
@@ -34,33 +59,31 @@ export function Tabs({ tabs, routes }: TabsProps) {
       );
     }
 
-    // 2. Lucide Icon
     const LucideIcon = (Icons as any)[iconName];
     if (LucideIcon) {
       return <LucideIcon size={16} className="tab-icon lucide-icon" />;
     }
 
-    // 3. Fallback to image URL
     return <img src={iconName} alt="" className="tab-icon img-icon" />;
   };
 
   return (
     <div className="boltdocs-tabs-container">
-      <div className="boltdocs-tabs">
+      <div className="boltdocs-tabs" ref={containerRef}>
         {tabs.map((tab, index) => {
-          // If no tab is detected (e.g. root home page), default to the first tab (usually "Guides")
-          const isActive = currentTabId 
-            ? currentTabId === tab.id.toLowerCase()
-            : index === 0;
-          
-          // Find the first route for this tab to link to it
-          const firstRoute = routes.find(r => r.tab && r.tab.toLowerCase() === tab.id.toLowerCase());
+          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)}
@@ -68,6 +91,8 @@ export function Tabs({ tabs, routes }: TabsProps) {
             </Link>
           );
         })}
+        {/* Sliding Indicator */}
+        <div className="boltdocs-tab-indicator" style={indicatorStyle} />
       </div>
     </div>
   );

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

@@ -250,10 +250,22 @@
 
 /* Tabs Styles */
 .boltdocs-tabs-container {
-  border-bottom: 1px solid var(--ld-border-subtle);
+  position: relative;
   background: var(--ld-navbar-bg);
   padding: 0;
-  height: 46px; /* 102px total = 56px navbar + 46px tabs */
+  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 {
@@ -264,6 +276,8 @@
   overflow-x: auto;
   scrollbar-width: none;
   padding: 0 1.5rem;
+  position: relative;
+  height: 100%;
 }
 
 .boltdocs-tabs::-webkit-scrollbar {
@@ -272,7 +286,7 @@
 
 .boltdocs-tab-item {
   padding: 0.85rem 0;
-  padding-bottom: calc(0.85rem + 1px); /* avoid clipping the indicator */
+  padding-bottom: calc(0.85rem + 1px);
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--ld-text-muted);
@@ -284,6 +298,7 @@
   align-items: center;
   gap: 0.6rem;
   opacity: 0.7;
+  z-index: 20;
 }
 
 .boltdocs-tab-item:hover {
@@ -317,23 +332,16 @@
   text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
 }
 
-.boltdocs-tab-item::after {
-  content: "";
+.boltdocs-tab-indicator {
   position: absolute;
-  bottom: 0px;
+  bottom: 0px; /* Aligned with the border pseudo-element */
   left: 0;
-  right: 0;
   height: 3px;
-  background: var(--ld-primary);
+  background: var(--ld-color-primary);
   border-radius: 2px 2px 0 0;
-  box-shadow: 0 0 12px rgba(var(--ld-primary-rgb), 0.6);
-  opacity: 0;
-  transform: scaleX(0);
-  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 10;
-}
-
-.boltdocs-tab-item.active::after {
-  opacity: 1;
-  transform: scaleX(1);
+  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/OnThisPage/OnThisPage.tsx

@@ -169,14 +169,7 @@ export function OnThisPage({
       e.preventDefault();
       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,
+        el.scrollIntoView({
           behavior: "smooth",
         });
 

package/src/client/theme/ui/ProgressBar/ProgressBar.css

@@ -0,0 +1,17 @@
+.boltdocs-progress-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  z-index: 1000;
+  pointer-events: none;
+  background: transparent;
+}
+
+.boltdocs-progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, var(--ld-color-primary), var(--ld-gradient-to, var(--ld-color-primary)));
+  box-shadow: 0 0 8px var(--ld-color-primary-glow);
+  transition: width 0.1s ease-out;
+}

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

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from "react";
+import "./ProgressBar.css";
+
+export function ProgressBar() {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    let container: Element | null = null;
+    let timer: any;
+
+    const handleScroll = () => {
+      if (!container) return;
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      if (scrollHeight <= clientHeight) {
+        setProgress(0);
+        return;
+      }
+      const scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100;
+      setProgress(Math.min(100, Math.max(0, scrollPercent)));
+    };
+
+    const attachListener = () => {
+      container = document.querySelector(".boltdocs-content");
+      if (container) {
+        container.addEventListener("scroll", handleScroll);
+        handleScroll();
+        if (timer) clearInterval(timer);
+        return true;
+      }
+      return false;
+    };
+
+    if (!attachListener()) {
+      timer = setInterval(attachListener, 100);
+    }
+
+    return () => {
+      if (container) container.removeEventListener("scroll", handleScroll);
+      if (timer) clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <div className="boltdocs-progress-container">
+      <div 
+        className="boltdocs-progress-bar" 
+        style={{ width: `${progress}%` }} 
+      />
+    </div>
+  );
+}

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

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

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

@@ -49,7 +49,7 @@ export function SearchDialog({ routes }: { routes: ComponentRoute[] }) {
 
     const results: SearchResult[] = [];
     const lowerQuery = query.toLowerCase();
-
+    
     for (const route of routes) {
       if (route.title && route.title.toLowerCase().includes(lowerQuery)) {
         results.push({
@@ -71,6 +71,16 @@ export function SearchDialog({ routes }: { routes: ComponentRoute[] }) {
           }
         }
       }
+
+      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

package/src/client/types.ts

@@ -37,6 +37,8 @@ export interface ComponentRoute {
   badge?: string | { text: string; expires?: string };
   /** Optional icon for the route's group */
   groupIcon?: string;
+  /** The extracted plain-text content of the page for search indexing */
+  _content?: string;
 }
 
 /**

package/src/node/routes/index.ts

@@ -29,6 +29,7 @@ export async function generateRoutes(
 ): Promise<RouteMeta[]> {
   // Load persistent cache on first call
   docCache.load();
+  docCache.invalidateAll(); // FORCE RE-PARSE to pick up new _content field
 
   const files = await fastGlob(["**/*.md", "**/*.mdx"], {
     cwd: docsDir,

package/src/node/routes/parser.ts

@@ -151,6 +151,16 @@ export function parseDocFile(
   const sanitizedBadge = data.badge ? data.badge : undefined;
   const icon = data.icon ? String(data.icon) : undefined;
 
+  // Extract full content as plain text for search indexing
+  const plainText = content
+    .replace(/^#+.*$/gm, "") // Remove headers
+    .replace(/\[([^\]]+)\]\([^\)]+\)/g, "$1") // Simplify links
+    .replace(/<[^>]+>/g, "") // Remove HTML/JSX tags
+    .replace(/\{[^\}]+\}/g, "") // Remove JS expressions/curly braces
+    .replace(/[_*`]/g, "") // Remove formatting
+    .replace(/\n+/g, " ") // Normalize whitespace
+    .trim();
+
   return {
     route: {
       path: finalPath,
@@ -165,6 +175,7 @@ export function parseDocFile(
       badge: sanitizedBadge,
       icon,
       tab: inferredTab,
+      _content: plainText,
     },
     relativeDir: cleanDirName,
     isGroupIndex,

package/src/node/routes/types.ts

@@ -35,6 +35,8 @@ export interface RouteMeta {
   icon?: string;
   /** The tab this route belongs to, if tabs are configured */
   tab?: string;
+  /** The extracted plain-text content of the page for search indexing */
+  _content?: string;
 }
 
 /**