boltdocs 1.6.0 → 1.7.1

package/src/client/app/index.tsx

@@ -89,6 +89,7 @@ const mdxComponents = {
 export function AppShell({
   initialRoutes,
   initialConfig,
+  docsDirName,
   modules,
   hot,
   homePage: HomePage,
@@ -96,6 +97,7 @@ export function AppShell({
 }: {
   initialRoutes: ComponentRoute[];
   initialConfig: any;
+  docsDirName: string;
   modules: Record<string, () => Promise<any>>;
   hot?: any;
   homePage?: React.ComponentType;
@@ -110,8 +112,8 @@ export function AppShell({
         (route) => !(HomePage && (route.path === "/" || route.path === "")),
       )
       .map((route) => {
-        const loaderKey = Object.keys(modules).find((k) =>
-          k.endsWith("/" + route.filePath),
+        const loaderKey = Object.keys(modules).find(
+          (k) => k === `/${docsDirName}/${route.filePath}`,
         );
         const loader = loaderKey ? modules[loaderKey] : null;
 
@@ -142,7 +144,7 @@ export function AppShell({
   // Sync resolved routes when info or modules change
   useEffect(() => {
     setResolvedRoutes(resolveRoutes(routesInfo));
-  }, [routesInfo, modules]);
+  }, [routesInfo, modules, docsDirName]);
 
   return (
     <ConfigContext.Provider value={config}>
@@ -214,26 +216,27 @@ function ScrollHandler() {
   const { pathname, hash } = useLocation();
 
   useLayoutEffect(() => {
-    // Only scroll if we are not in a pending transition state (if we were using useTransition)
-    // For now, we ensure the scroll happens.
+    const container = document.querySelector(".boltdocs-content");
+    if (!container) return;
+
     if (hash) {
       const id = hash.replace("#", "");
       const element = document.getElementById(id);
       if (element) {
         const offset = 80;
-        const bodyRect = document.body.getBoundingClientRect().top;
+        const containerRect = container.getBoundingClientRect().top;
         const elementRect = element.getBoundingClientRect().top;
-        const elementPosition = elementRect - bodyRect;
-        const offsetPosition = elementPosition - offset;
+        const elementPosition = elementRect - containerRect;
+        const offsetPosition = elementPosition - offset + container.scrollTop;
 
-        window.scrollTo({
+        container.scrollTo({
           top: offsetPosition,
           behavior: "smooth",
         });
         return;
       }
     }
-    window.scrollTo(0, 0);
+    container.scrollTo(0, 0);
   }, [pathname, hash]);
 
   return null;
@@ -302,7 +305,8 @@ function MdxPage({
  * ```
  */
 export function createBoltdocsApp(options: CreateBoltdocsAppOptions) {
-  const { target, routes, config, modules, hot, homePage } = options;
+  const { target, routes, docsDirName, config, modules, hot, homePage } =
+    options;
   const container = document.querySelector(target);
   if (!container) {
     throw new Error(
@@ -316,6 +320,7 @@ export function createBoltdocsApp(options: CreateBoltdocsAppOptions) {
         <AppShell
           initialRoutes={routes}
           initialConfig={config}
+          docsDirName={docsDirName}
           modules={modules}
           hot={hot}
           homePage={homePage}

package/src/client/index.ts

@@ -29,6 +29,7 @@ export {
   InfoBox,
   List,
   FileTree,
+  Table,
 } from "./theme/components/mdx";
 export type {
   ButtonProps,
@@ -40,4 +41,5 @@ export type {
   AdmonitionProps,
   ListProps,
   FileTreeProps,
+  TableProps,
 } from "./theme/components/mdx";

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,151 @@
+import React, { useState, useMemo } from "react";
+import { ChevronUp, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+
+export interface TableProps {
+  headers?: string[];
+  data?: (string | React.ReactNode)[][];
+  children?: React.ReactNode;
+  className?: string;
+  sortable?: boolean;
+  paginated?: boolean;
+  pageSize?: number;
+}
+
+export function Table({
+  headers,
+  data,
+  children,
+  className = "",
+  sortable = false,
+  paginated = false,
+  pageSize = 10,
+}: TableProps) {
+  const [sortConfig, setSortConfig] = useState<{ key: number; direction: 'asc' | 'desc' } | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const processedData = useMemo(() => {
+    if (!data) return [];
+    let items = [...data];
+
+    if (sortable && sortConfig !== null) {
+      items.sort((a, b) => {
+        const aVal = a[sortConfig.key];
+        const bVal = b[sortConfig.key];
+        
+        // Simple string comparison for sorting
+        const aStr = typeof aVal === 'string' ? aVal : '';
+        const bStr = typeof bVal === 'string' ? bVal : '';
+
+        if (aStr < bStr) return sortConfig.direction === 'asc' ? -1 : 1;
+        if (aStr > bStr) return sortConfig.direction === 'asc' ? 1 : -1;
+        return 0;
+      });
+    }
+
+    return items;
+  }, [data, sortConfig, sortable]);
+
+  const totalPages = Math.ceil(processedData.length / pageSize);
+  const paginatedData = useMemo(() => {
+    if (!paginated) return processedData;
+    const start = (currentPage - 1) * pageSize;
+    return processedData.slice(start, start + pageSize);
+  }, [processedData, paginated, currentPage, pageSize]);
+
+  const requestSort = (index: number) => {
+    if (!sortable) return;
+    let direction: 'asc' | 'desc' = 'asc';
+    if (sortConfig && sortConfig.key === index && sortConfig.direction === 'asc') {
+      direction = 'desc';
+    }
+    setSortConfig({ key: index, direction });
+  };
+
+  const renderSortIcon = (index: number) => {
+    if (!sortable) return null;
+    if (sortConfig?.key !== index) return <ChevronDown size={14} className="ld-table-sort-icon ld-table-sort-icon--hidden" />;
+    return sortConfig.direction === 'asc' ? <ChevronUp size={14} className="ld-table-sort-icon" /> : <ChevronDown size={14} className="ld-table-sort-icon" />;
+  };
+
+  const tableContent = children ? (
+    children
+  ) : (
+    <>
+      {headers && (
+        <thead>
+          <tr>
+            {headers.map((header, i) => (
+              <th 
+                key={i} 
+                onClick={() => requestSort(i)}
+                className={sortable ? "ld-table-header--sortable" : ""}
+              >
+                <div className="ld-table-header-content">
+                  {header}
+                  {renderSortIcon(i)}
+                </div>
+              </th>
+            ))}
+          </tr>
+        </thead>
+      )}
+      {paginatedData && (
+        <tbody>
+          {paginatedData.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()}>
+      <div className="ld-table-wrapper">
+        <table className="ld-table">{tableContent}</table>
+      </div>
+      
+      {paginated && totalPages > 1 && (
+        <div className="ld-table-pagination">
+          <div className="ld-table-pagination-info">
+            Page {currentPage} of {totalPages}
+          </div>
+          <div className="ld-table-pagination-controls">
+            <button 
+              onClick={() => setCurrentPage(1)} 
+              disabled={currentPage === 1}
+              className="ld-table-pagination-btn"
+            >
+              <ChevronsLeft size={16} />
+            </button>
+            <button 
+              onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))} 
+              disabled={currentPage === 1}
+              className="ld-table-pagination-btn"
+            >
+              <ChevronLeft size={16} />
+            </button>
+            <button 
+              onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))} 
+              disabled={currentPage === totalPages}
+              className="ld-table-pagination-btn"
+            >
+              <ChevronRight size={16} />
+            </button>
+            <button 
+              onClick={() => setCurrentPage(totalPages)} 
+              disabled={currentPage === totalPages}
+              className="ld-table-pagination-btn"
+            >
+              <ChevronsRight size={16} />
+            </button>
+          </div>
+        </div>
+      )}
+    </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,131 @@
 .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);
+  display: flex;
+  flex-direction: column;
+}
+
+.ld-table-wrapper {
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
+.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;
+  white-space: nowrap;
+}
+
+.ld-table-header--sortable {
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.ld-table-header--sortable:hover {
+  background-color: var(--ld-bg-soft);
+}
+
+.ld-table-header-content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ld-table-sort-icon {
+  opacity: 0.8;
+  color: var(--ld-color-primary);
+  transition: opacity 0.2s;
+}
+
+.ld-table-sort-icon--hidden {
+  opacity: 0;
+}
+
+.ld-table-header--sortable:hover .ld-table-sort-icon--hidden {
+  opacity: 0.3;
+}
+
+.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;
+}
+
+/* Pagination */
+.ld-table-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: var(--ld-bg-mute);
+  border-top: 1px solid var(--ld-border-subtle);
+  font-size: 0.75rem;
+  color: var(--ld-text-dim);
+}
+
+.ld-table-pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.ld-table-pagination-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--ld-radius-md);
+  border: 1px solid var(--ld-border-subtle);
+  background: var(--ld-bg-soft);
+  color: var(--ld-text-muted);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ld-table-pagination-btn:hover:not(:disabled) {
+  background: var(--ld-bg-mute);
+  color: var(--ld-text-main);
+  border-color: var(--ld-border-strong);
+}
+
+.ld-table-pagination-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

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;
@@ -159,4 +160,28 @@
   --ld-radius-md: 8px;
   --ld-radius-lg: 12px;
   --ld-radius-full: 9999px;
+
+  /* ─ Custom Scrollbar ─ */
+  scrollbar-width: thin;
+  scrollbar-color: var(--ld-border-strong) transparent;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--ld-border-strong);
+  border-radius: 20px;
+  border: transparent;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: var(--ld-text-dim);
 }

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

@@ -0,0 +1,46 @@
+import React, { Component, ErrorInfo, ReactNode } from "react";
+
+interface Props {
+  children?: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("Uncaught error in Boltdocs Layout:", error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return this.props.fallback || (
+        <div className="boltdocs-error-boundary">
+          <div className="boltdocs-error-title">Something went wrong</div>
+          <p className="boltdocs-error-message">
+            {this.state.error?.message || "An unexpected error occurred while rendering this page."}
+          </p>
+          <button 
+            className="boltdocs-error-retry"
+            onClick={() => this.setState({ hasError: false })}
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

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

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

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

@@ -18,6 +18,8 @@ import { OnThisPage } from "../OnThisPage";
 import { Head } from "../Head";
 import { Breadcrumbs } from "../Breadcrumbs";
 import { BackgroundGradient } from "../BackgroundGradient";
+import { ProgressBar } from "../ProgressBar";
+import { ErrorBoundary } from "../ErrorBoundary";
 import "../../styles.css";
 
 export interface ThemeLayoutProps {
@@ -63,7 +65,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();
@@ -109,6 +110,7 @@ export function ThemeLayout({
 
   return (
     <div className={`boltdocs-layout ${className}`} style={style}>
+      <ProgressBar />
       {background !== undefined ? background : <BackgroundGradient />}
       {head !== undefined ? (
         head
@@ -130,18 +132,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">
@@ -150,7 +145,11 @@ export function ThemeLayout({
           ) : (
             <Breadcrumbs routes={filteredRoutes} config={config} />
           )}
-          <div className="boltdocs-page">{children}</div>
+          <div className="boltdocs-page">
+            <ErrorBoundary>
+              {children}
+            </ErrorBoundary>
+          </div>
 
           {/* Prev / Next Navigation */}
           {(prevPage || nextPage) && (

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 ────────────────────────────────────── */