boltdocs 1.5.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/FileTree.tsx

@@ -0,0 +1,229 @@
+import React, { Children, isValidElement, useState } from "react";
+import {
+  Folder,
+  FileText,
+  File,
+  FileCode,
+  FileImage,
+  ChevronRight,
+} from "lucide-react";
+
+export interface FileTreeProps {
+  children: React.ReactNode;
+}
+
+function getTextContent(node: React.ReactNode): string {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return node.toString();
+  if (Array.isArray(node)) return node.map(getTextContent).join("");
+  if (isValidElement(node)) {
+    return getTextContent((node.props as any).children);
+  }
+  return "";
+}
+
+function getFileIcon(filename: string) {
+  const name = filename.toLowerCase();
+
+  if (
+    name.endsWith(".ts") ||
+    name.endsWith(".tsx") ||
+    name.endsWith(".js") ||
+    name.endsWith(".jsx") ||
+    name.endsWith(".json") ||
+    name.endsWith(".mjs") ||
+    name.endsWith(".cjs") ||
+    name.endsWith(".astro") ||
+    name.endsWith(".vue") ||
+    name.endsWith(".svelte")
+  ) {
+    return (
+      <FileCode size={16} strokeWidth={2} className="ld-file-tree__icon-file" />
+    );
+  }
+
+  if (name.endsWith(".md") || name.endsWith(".mdx") || name.endsWith(".txt")) {
+    return (
+      <FileText size={16} strokeWidth={2} className="ld-file-tree__icon-file" />
+    );
+  }
+
+  if (
+    name.endsWith(".png") ||
+    name.endsWith(".jpg") ||
+    name.endsWith(".jpeg") ||
+    name.endsWith(".svg") ||
+    name.endsWith(".gif")
+  ) {
+    return (
+      <FileImage
+        size={16}
+        strokeWidth={2}
+        className="ld-file-tree__icon-file"
+      />
+    );
+  }
+
+  return <File size={16} strokeWidth={2} className="ld-file-tree__icon-file" />;
+}
+
+// Helper to reliably check for ul and li elements, including MDX wrappers
+function isListElement(node: any, tag: "ul" | "li"): boolean {
+  if (typeof node.type === "string") {
+    return node.type === tag;
+  }
+  if (typeof node.type === "function") {
+    return node.type.name === tag || node.type.name?.toLowerCase() === tag;
+  }
+  // MDX specific wrapper detection
+  if (node.props && node.props.originalType === tag) {
+    return true;
+  }
+  if (node.props && node.props.mdxType === tag) {
+    return true;
+  }
+  return false;
+}
+
+function FolderNode({
+  labelText,
+  nestedNodes,
+  depth,
+}: {
+  labelText: string;
+  nestedNodes: React.ReactNode[];
+  depth: number;
+}) {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <li className="ld-file-tree__item">
+      <div
+        className="ld-file-tree__label ld-file-tree__label--folder"
+        onClick={() => setIsOpen(!isOpen)}
+        style={{ cursor: "pointer" }}
+      >
+        <span className="ld-file-tree__icon ld-file-tree__icon--chevron">
+          <ChevronRight
+            size={14}
+            className={`ld-file-tree__chevron ${isOpen ? "ld-file-tree__chevron--open" : ""}`}
+            strokeWidth={3}
+          />
+        </span>
+        <span className="ld-file-tree__icon">
+          <Folder
+            size={16}
+            strokeWidth={2}
+            className="ld-file-tree__icon-folder"
+            fill="currentColor"
+            fillOpacity={0.15}
+          />
+        </span>
+        <span className="ld-file-tree__name">{labelText}</span>
+      </div>
+      {isOpen && nestedNodes.length > 0 && (
+        <div className="ld-file-tree__nested">
+          {nestedNodes.map((child, index) => (
+            <React.Fragment key={index}>
+              {parseNode(child, depth)}
+            </React.Fragment>
+          ))}
+        </div>
+      )}
+    </li>
+  );
+}
+
+function parseNode(node: React.ReactNode, depth: number = 0): React.ReactNode {
+  if (!isValidElement(node)) {
+    return node;
+  }
+
+  if (isListElement(node, "ul")) {
+    return (
+      <ul
+        className={`ld-file-tree__list ${depth === 0 ? "ld-file-tree__list--root" : ""}`}
+      >
+        {Children.map((node.props as any).children, (child, index) => (
+          <React.Fragment key={index}>
+            {parseNode(child, depth + 1)}
+          </React.Fragment>
+        ))}
+      </ul>
+    );
+  }
+
+  if (isListElement(node, "li")) {
+    const children = Children.toArray((node.props as any).children);
+
+    // Find nested list indicating a directory
+    const nestedListIndex = children.findIndex(
+      (child) => isValidElement(child) && isListElement(child, "ul"),
+    );
+    const hasNested = nestedListIndex !== -1;
+
+    // Separate text label from nested items
+    const labelNodes = hasNested
+      ? children.slice(0, nestedListIndex)
+      : children;
+    const nestedNodes = hasNested ? children.slice(nestedListIndex) : [];
+
+    const rawLabelContent = getTextContent(labelNodes).trim();
+    const isExplicitDir = rawLabelContent.endsWith("/");
+    const labelText = isExplicitDir
+      ? rawLabelContent.slice(0, -1)
+      : rawLabelContent;
+
+    const isFolder = hasNested || isExplicitDir;
+
+    if (isFolder) {
+      return (
+        <FolderNode
+          labelText={labelText}
+          nestedNodes={nestedNodes}
+          depth={depth}
+        />
+      );
+    }
+
+    return (
+      <li className="ld-file-tree__item">
+        <div className="ld-file-tree__label ld-file-tree__label--file">
+          <span className="ld-file-tree__icon ld-file-tree__icon--spacer"></span>
+          <span className="ld-file-tree__icon">{getFileIcon(labelText)}</span>
+          <span className="ld-file-tree__name">{labelText}</span>
+        </div>
+      </li>
+    );
+  }
+
+  // If node is e.g. a paragraph injected by MDX wrapping the list
+  if ((node.props as any).children) {
+    return Children.map((node.props as any).children, (child, index) => (
+      <React.Fragment key={index}>{parseNode(child, depth)}</React.Fragment>
+    ));
+  }
+
+  return node;
+}
+
+/**
+ * FileTree component displays a customized, styled tree structure for markdown lists.
+ *
+ * ```mdx
+ * <FileTree>
+ * - src/
+ *   - index.ts
+ *   - components/
+ *     - Button.tsx
+ * - package.json
+ * </FileTree>
+ * ```
+ */
+export function FileTree({ children }: FileTreeProps) {
+  return (
+    <div className="ld-file-tree" dir="ltr">
+      {Children.map(children, (child) => parseNode(child, 0))}
+    </div>
+  );
+}

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/Tabs.tsx

@@ -4,7 +4,6 @@ import { NPM } from "../../icons/npm";
 import { Pnpm } from "../../icons/pnpm";
 import { Bun } from "../../icons/bun";
 import { Deno } from "../../icons/deno";
-import { Yarn } from "../../icons/yarn";
 
 /* ─── Tab (individual panel) ──────────────────────────────── */
 export interface TabProps {
@@ -43,9 +42,8 @@ export interface TabsProps {
 
 const getIconForLabel = (label: string) => {
   const l = label.toLowerCase();
-  if (l.includes("npm")) return <NPM />;
   if (l.includes("pnpm")) return <Pnpm />;
-  if (l.includes("yarn")) return <Yarn />;
+  if (l.includes("npm")) return <NPM />;
   if (l.includes("bun")) return <Bun />;
   if (l.includes("deno")) return <Deno />;
   return null;
@@ -58,7 +56,6 @@ const getIconForLabel = (label: string) => {
  * <Tabs>
  *   <Tab label="npm">npm install boltdocs</Tab>
  *   <Tab label="pnpm">pnpm add boltdocs</Tab>
- *   <Tab label="yarn">yarn add boltdocs</Tab>
  * </Tabs>
  * ```
  */

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

@@ -16,3 +16,9 @@ export type { AdmonitionProps } from "./Admonition";
 
 export { List } from "./List";
 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

@@ -430,3 +430,161 @@
 .ld-list--arrow .ld-list__icon {
   color: var(--ld-color-primary);
 }
+
+/* ─── FileTree ────────────────────────────────────────────── */
+.ld-file-tree {
+  margin: 1.5rem 0;
+  padding: 1rem;
+  border-radius: var(--ld-radius-lg);
+  border: 1px solid var(--ld-border-subtle);
+  background: var(--ld-bg-soft);
+  font-family: var(--ld-font-mono);
+  font-size: 0.875rem;
+  overflow-x: auto;
+}
+
+.ld-file-tree__list {
+  list-style: none !important;
+  margin: 0 !important;
+  padding: 0;
+  position: relative;
+}
+
+.ld-file-tree__list:not(.ld-file-tree__list--root) {
+  padding-left: 1.25rem;
+  margin-top: 0.25rem !important;
+  position: relative;
+}
+
+/* Vertical line for nested folders */
+.ld-file-tree__list:not(.ld-file-tree__list--root)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0.45rem; /* align with folder icon */
+  width: 1px;
+  background-color: var(--ld-border-subtle);
+  z-index: 0;
+}
+
+.ld-file-tree__item {
+  position: relative;
+  margin: 0.2rem 0 !important;
+  padding: 0 !important;
+  display: block !important;
+}
+
+.ld-file-tree__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--ld-text-muted);
+  user-select: none;
+  border-radius: var(--ld-radius-sm);
+  padding: 0.25rem 0.6rem 0.25rem 0.4rem;
+  transition: all 0.2s ease;
+  position: relative;
+  z-index: 1;
+}
+
+.ld-file-tree__label:hover {
+  background: var(--ld-bg-mute);
+  color: var(--ld-text-main);
+}
+
+.ld-file-tree__label--folder {
+  color: var(--ld-text-main);
+  font-weight: 500;
+}
+
+.ld-file-tree__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+
+.ld-file-tree__icon-folder {
+  color: var(--ld-color-primary);
+}
+
+.ld-file-tree__name {
+  white-space: nowrap;
+}
+
+.ld-file-tree__icon--chevron {
+  width: 14px;
+  height: 14px;
+  opacity: 0.5;
+  transition: opacity 0.2s ease;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}
+
+.ld-file-tree__label:hover .ld-file-tree__icon--chevron {
+  opacity: 1;
+}
+
+.ld-file-tree__chevron {
+  transition: transform 0.2s ease;
+}
+
+.ld-file-tree__chevron--open {
+  transform: rotate(90deg);
+}
+
+.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/icons/pnpm.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type { SVGProps } from "react";
 
 const Pnpm = (props: SVGProps<SVGSVGElement>) => (
   <svg
@@ -54,16 +54,16 @@ const Pnpm = (props: SVGProps<SVGSVGElement>) => (
         <use xlinkHref="#pnpm_dark__dqv5133G8" fill="#f9ad00" />
       </g>
       <g>
-        <use xlinkHref="#pnpm_dark__b1Lv79ypvm" fill="currentColor" />
+        <use xlinkHref="#pnpm_dark__b1Lv79ypvm" fill="#ffffff" />
       </g>
       <g>
-        <use xlinkHref="#pnpm_dark__hy1IZWwLX" fill="currentColor" />
+        <use xlinkHref="#pnpm_dark__hy1IZWwLX" fill="#ffffff" />
       </g>
       <g>
-        <use xlinkHref="#pnpm_dark__akQfjxQes" fill="currentColor" />
+        <use xlinkHref="#pnpm_dark__akQfjxQes" fill="#ffffff" />
       </g>
       <g>
-        <use xlinkHref="#pnpm_dark__bdSrwE5pk" fill="currentColor" />
+        <use xlinkHref="#pnpm_dark__bdSrwE5pk" fill="#ffffff" />
       </g>
     </g>
   </svg>

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