boltdocs 1.6.0 → 1.7.0

package/src/client/ssr.tsx

@@ -14,6 +14,8 @@ export interface RenderOptions {
   routes: ComponentRoute[];
   /** Site configuration (`virtual:boltdocs-config`) */
   config: any;
+  /** The name of the documentation directory (e.g. 'docs') */
+  docsDirName: string;
   /** Optional custom React component to render when visiting the root path ('/') */
   homePage?: React.ComponentType;
   /** Preloaded modules (since SSR cannot use dynamic imports easily) */
@@ -25,7 +27,7 @@ export interface RenderOptions {
  * This is called by the Node SSG script during the Vite build process.
  */
 export async function render(options: RenderOptions): Promise<string> {
-  const { path, routes, config, modules, homePage } = options;
+  const { path, routes, config, modules, homePage, docsDirName } = options;
 
   // For SSR, we must resolve modules synchronously. We create a mock 'loader'
   // that instantly returns the module since the SSG script already loaded it.
@@ -40,6 +42,7 @@ export async function render(options: RenderOptions): Promise<string> {
         <AppShell
           initialRoutes={routes}
           initialConfig={config}
+          docsDirName={docsDirName}
           modules={resolvedModules}
           homePage={homePage}
         />

package/src/client/theme/components/mdx/Table.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+export interface TableProps {
+  headers?: string[];
+  data?: (string | React.ReactNode)[][];
+  children?: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * A consistent, themed table component for documentation.
+ * Can be used by passing structured 'headers' and 'data' props,
+ * or by wrapping standard <thead>/<tbody> elements.
+ */
+export function Table({
+  headers,
+  data,
+  children,
+  className = "",
+}: TableProps) {
+  const tableContent = children ? (
+    children
+  ) : (
+    <>
+      {headers && (
+        <thead>
+          <tr>
+            {headers.map((header, i) => (
+              <th key={i}>{header}</th>
+            ))}
+          </tr>
+        </thead>
+      )}
+      {data && (
+        <tbody>
+          {data.map((row, i) => (
+            <tr key={i}>
+              {row.map((cell, j) => (
+                <td key={j}>{cell}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      )}
+    </>
+  );
+
+  return (
+    <div className={`ld-table-container ${className}`.trim()}>
+      <table className="ld-table">{tableContent}</table>
+    </div>
+  );
+}

package/src/client/theme/components/mdx/index.ts

@@ -19,3 +19,6 @@ export type { ListProps } from "./List";
 
 export { FileTree } from "./FileTree";
 export type { FileTreeProps } from "./FileTree";
+
+export { Table } from "./Table";
+export type { TableProps } from "./Table";

package/src/client/theme/components/mdx/mdx-components.css

@@ -539,3 +539,52 @@
 .ld-file-tree__icon--spacer {
   width: 14px;
 }
+
+/* ─── Table ───────────────────────────────────────────────── */
+.ld-table-container {
+  margin: 1.5rem 0;
+  border: 1px solid var(--ld-border-subtle);
+  border-radius: var(--ld-radius-lg);
+  overflow: hidden;
+  background: var(--ld-bg-soft);
+  overflow-x: auto;
+}
+
+.ld-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.ld-table thead {
+  background: var(--ld-bg-mute);
+  border-bottom: 1px solid var(--ld-border-subtle);
+}
+
+.ld-table th {
+  padding: 0.75rem 1rem;
+  font-weight: 600;
+  color: var(--ld-text-main);
+  font-size: 0.8125rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.ld-table td {
+  padding: 0.875rem 1rem;
+  color: var(--ld-text-muted);
+  border-bottom: 1px solid var(--ld-border-subtle);
+}
+
+.ld-table tr:last-child td {
+  border-bottom: none;
+}
+
+.ld-table code {
+  font-size: 0.8rem;
+  padding: 0.2rem 0.4rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+}

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

@@ -3,19 +3,24 @@
    ═══════════════════════════════════════════════════════════ */
 .boltdocs-content {
   flex: 1;
-  padding: 2rem 2.5rem 2.5rem;
+  padding: 2rem 2.5rem 6rem; /* Extra padding bottom for fixed layout */
   max-width: var(--ld-content-max-width);
   margin: 0 auto;
   min-width: 0;
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: none;
+  scroll-behavior: smooth;
   transition:
     max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
     padding 0.3s ease;
 }
 
-.boltdocs-main-container.sidebar-collapsed .boltdocs-content {
-  max-width: 100%;
+.boltdocs-content::-webkit-scrollbar {
+  display: none;
 }
 
+
 /* ─── Breadcrumbs ────────────────────────────────────────── */
 .boltdocs-breadcrumbs {
   margin-bottom: 1.5rem;

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

@@ -8,7 +8,7 @@
 :root[data-theme="light"],
 :root.theme-light {
   --ld-bg-main: #ffffff;
-  --ld-bg-soft: #f9fafb;
+  --ld-bg-soft: #eeeeee;
   --ld-bg-mute: #f3f4f6;
 
   --ld-surface: #ffffff;
@@ -46,7 +46,7 @@
   --ld-sidebar-bg: transparent;
   --ld-sidebar-blur: 0px;
   --ld-glow-1-bg: var(--ld-color-primary-glow);
-  --ld-glow-2-bg: rgba(59, 130, 246, 0.15);
+  --ld-glow-2-bg: rgba(215, 59, 246, 0.15);
 
   /* ─ UI Components (overridable independently from layout) ─ */
   --ld-ui-btn-primary-bg: var(--ld-btn-primary-bg);
@@ -76,10 +76,10 @@
 
 :root {
   /* ─ Base palette ─ */
-  --ld-bg-main: #0a0a0f;
-  --ld-bg-soft: rgba(10, 10, 15, 0.2);
-  --ld-bg-mute: #141420;
-  --ld-surface: #1a1a2e;
+  --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);
 
@@ -107,17 +107,17 @@
   --ld-gradient-to: rgba(255, 255, 255, 0.7);
 
   /* ─ Code ─ */
-  --ld-code-bg: #0d0d14;
+  --ld-code-bg: #050505;
   --ld-code-header: #111119;
   --ld-code-text: #d4d4d4;
 
   /* ─ Customization ─ */
-  --ld-navbar-bg: rgba(10, 10, 15, 0.2);
+  --ld-navbar-bg: #000;
   --ld-navbar-blur: 12px;
   --ld-sidebar-bg: transparent;
   --ld-sidebar-blur: 0px;
   --ld-glow-1-bg: var(--ld-color-primary-glow);
-  --ld-glow-2-bg: rgba(59, 130, 246, 0.15);
+  --ld-glow-2-bg: rgba(246, 59, 187, 0.15);
 
   /* ─ UI Components (dark) ─ */
   --ld-ui-btn-primary-bg: var(--ld-btn-primary-bg);
@@ -152,6 +152,7 @@
 
   /* ─ 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;

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

@@ -63,7 +63,6 @@ export function ThemeLayout({
   className = "",
   style,
 }: ThemeLayoutProps) {
-  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
   const siteTitle = config.themeConfig?.title || "Boltdocs";
   const siteDescription = config.themeConfig?.description || "";
   const location = useLocation();
@@ -130,18 +129,11 @@ export function ThemeLayout({
           currentVersion={currentVersion}
         />
       )}
-      <div
-        className={`boltdocs-main-container ${!isSidebarOpen ? "sidebar-collapsed" : ""}`}
-      >
+      <div className="boltdocs-main-container">
         {sidebar !== undefined ? (
           sidebar
         ) : (
-          <Sidebar
-            routes={filteredRoutes}
-            config={config}
-            isCollapsed={!isSidebarOpen}
-            onToggle={() => setIsSidebarOpen(!isSidebarOpen)}
-          />
+          <Sidebar routes={filteredRoutes} config={config} />
         )}
 
         <main className="boltdocs-content">

package/src/client/theme/ui/Layout/base.css

@@ -5,8 +5,15 @@
   box-sizing: border-box;
 }
 
+html,
 body {
   margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden; /* Lock the window scroll */
+}
+
+body {
   font-family: var(--ld-font-sans);
   background-color: var(--ld-bg-main);
   color: var(--ld-text-main);
@@ -27,7 +34,9 @@ a {
 .boltdocs-layout {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
 }
 
 .boltdocs-main-container {
@@ -36,8 +45,11 @@ a {
   width: 100%;
   max-width: 1440px;
   margin: 0 auto;
-  padding: 0 1.5rem;
-  /* aligns with navbar */
+  padding: 0 0.5rem;
+  /* Fixed height layout */
+  height: calc(100vh - var(--ld-header-height));
+  overflow: hidden;
+  align-items: stretch; /* Sidebars fill height naturally */
 }
 
 /* ─── Background Glow ────────────────────────────────────── */

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,74 @@
+import React 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 currentRoute = routes.find((r) => r.path === location.pathname);
+  const currentTabId = currentRoute?.tab?.toLowerCase();
+
+  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
+          className="tab-icon svg-icon"
+          dangerouslySetInnerHTML={{ __html: iconName }}
+        />
+      );
+    }
+
+    // 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">
+        {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 linkTo = firstRoute ? firstRoute.path : "#";
+
+          return (
+            <Link
+              key={tab.id}
+              to={linkTo}
+              className={`boltdocs-tab-item ${isActive ? "active" : ""}`}
+            >
+              {renderTabIcon(tab.icon)}
+              <span>{tab.text}</span>
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}