boltdocs 1.0.4 → 1.3.1

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

@@ -1,213 +1,202 @@
-import React, { useState } from "react";
-import { useLocation } from "react-router-dom";
-import { Link } from "../Link";
-import { ChevronLeft, ChevronRight, Menu } from "lucide-react";
-import { usePreload } from "../../../app/preload";
-import { BoltdocsConfig } from "../../../../node/config";
-import { ComponentRoute } from "../../../types";
-export { Navbar } from "../Navbar";
-export { Sidebar } from "../Sidebar";
-export { OnThisPage } from "../OnThisPage";
-export { Head } from "../Head";
-export { Breadcrumbs } from "../Breadcrumbs";
-export { BackgroundGradient } from "../BackgroundGradient";
-
-import { Navbar } from "../Navbar";
-import { Sidebar } from "../Sidebar";
-import { OnThisPage } from "../OnThisPage";
-import { Head } from "../Head";
-import { Breadcrumbs } from "../Breadcrumbs";
-import { BackgroundGradient } from "../BackgroundGradient";
-import "../../styles.css";
-
-export interface ThemeLayoutProps {
-  config: BoltdocsConfig;
-  routes: ComponentRoute[];
-  children: React.ReactNode;
-  /** Custom navbar component (slots) */
-  navbar?: React.ReactNode;
-  /** Custom sidebar component (slots) */
-  sidebar?: React.ReactNode;
-  /** Custom table of contents (OnThisPage) component (slots) */
-  toc?: React.ReactNode;
-  /** Custom background component (slots) */
-  background?: React.ReactNode;
-  /** Custom head/metadata component (slots) */
-  head?: React.ReactNode;
-  /** Custom breadcrumbs component (slots) */
-  breadcrumbs?: React.ReactNode;
-  /** Custom class name for the root layout element */
-  className?: string;
-  /** Custom styles for the root layout element */
-  style?: React.CSSProperties;
-}
-
-/**
- * The main structural layout for documentation pages.
- * Integrates the Navbar, Sidebar, and OnThisPage components into a cohesive shell.
- * It also manages mobile interaction states like the sidebar overlay toggle.
- *
- * @param config - The global Boltdocs configuration object
- * @param routes - The array of available doc routes (used to render the sidebar)
- */
-export function ThemeLayout({
-  config,
-  routes,
-  children,
-  navbar,
-  sidebar,
-  toc,
-  background,
-  head,
-  breadcrumbs,
-  className = "",
-  style,
-}: ThemeLayoutProps) {
-  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
-  const siteTitle = config.themeConfig?.title || "Boltdocs";
-  const siteDescription = config.themeConfig?.description || "";
-  const location = useLocation();
-
-  // Compute prev/next pages and locale
-  const currentIndex = routes.findIndex((r) => r.path === location.pathname);
-  const currentRoute = routes[currentIndex];
-  // Determine current locale (fallback to default)
-  const currentLocale = config.i18n
-    ? currentRoute?.locale || config.i18n.defaultLocale
-    : undefined;
-
-  // Determine current version (fallback to default)
-  const currentVersion = config.versions
-    ? currentRoute?.version || config.versions.defaultVersion
-    : undefined;
-
-  // Filter routes for sidebar, search, and navigation to only ones in the current locale and version
-  const filteredRoutes = routes.filter((r) => {
-    const localeMatch = config.i18n
-      ? (r.locale || config.i18n.defaultLocale) === currentLocale
-      : true;
-    const versionMatch = config.versions
-      ? (r.version || config.versions.defaultVersion) === currentVersion
-      : true;
-    return localeMatch && versionMatch;
-  });
-
-  const localIndex = filteredRoutes.findIndex(
-    (r) => r.path === location.pathname,
-  );
-  const prevPage = localIndex > 0 ? filteredRoutes[localIndex - 1] : null;
-  const nextPage =
-    localIndex >= 0 && localIndex < filteredRoutes.length - 1
-      ? filteredRoutes[localIndex + 1]
-      : null;
-
-  const { preload } = usePreload();
-  React.useEffect(() => {
-    if (prevPage?.path) preload(prevPage.path);
-    if (nextPage?.path) preload(nextPage.path);
-  }, [prevPage, nextPage, preload]);
-
-  return (
-    <div className={`boltdocs-layout ${className}`} style={style}>
-      {background !== undefined ? background : <BackgroundGradient />}
-      {head !== undefined ? (
-        head
-      ) : (
-        <Head
-          siteTitle={siteTitle}
-          siteDescription={siteDescription}
-          routes={routes}
-        />
-      )}
-      {navbar !== undefined ? (
-        navbar
-      ) : (
-        <Navbar
-          config={config}
-          routes={filteredRoutes}
-          allRoutes={routes}
-          currentLocale={currentLocale}
-          currentVersion={currentVersion}
-        />
-      )}
-      <div
-        className={`boltdocs-main-container ${!isSidebarOpen ? "sidebar-collapsed" : ""}`}
-      >
-        {sidebar !== undefined ? (
-          sidebar
-        ) : (
-          <Sidebar
-            routes={filteredRoutes}
-            config={config}
-            onCollapse={() => setIsSidebarOpen(false)}
-          />
-        )}
-
-        {/* Floating Expand Button when Sidebar is Collapsed */}
-        {sidebar === undefined && (
-          <button
-            className="sidebar-toggle-floating"
-            onClick={() => setIsSidebarOpen(true)}
-            aria-label="Expand Sidebar"
-            title="Expand Sidebar"
-          >
-            <Menu size={20} />
-          </button>
-        )}
-
-        <main className="boltdocs-content">
-          {breadcrumbs !== undefined ? (
-            breadcrumbs
-          ) : (
-            <Breadcrumbs routes={filteredRoutes} config={config} />
-          )}
-          <div className="boltdocs-page">{children}</div>
-
-          {/* Prev / Next Navigation */}
-          {(prevPage || nextPage) && (
-            <nav className="page-nav" aria-label="Pagination">
-              {prevPage ? (
-                <Link
-                  to={prevPage.path || "/"}
-                  className="page-nav-link page-nav-link--prev"
-                >
-                  <div className="page-nav-info">
-                    <span className="page-nav-label">Previous</span>
-                    <span className="page-nav-title">{prevPage.title}</span>
-                  </div>
-                  <ChevronLeft className="page-nav-arrow" size={16} />
-                </Link>
-              ) : (
-                <span />
-              )}
-              {nextPage ? (
-                <Link
-                  to={nextPage.path || "/"}
-                  className="page-nav-link page-nav-link--next"
-                >
-                  <div className="page-nav-info">
-                    <span className="page-nav-label">Next</span>
-                    <span className="page-nav-title">{nextPage.title}</span>
-                  </div>
-                  <ChevronRight className="page-nav-arrow" size={16} />
-                </Link>
-              ) : (
-                <span />
-              )}
-            </nav>
-          )}
-        </main>
-        {toc !== undefined ? (
-          toc
-        ) : (
-          <OnThisPage
-            headings={routes[currentIndex]?.headings}
-            editLink={config.themeConfig?.editLink}
-            communityHelp={config.themeConfig?.communityHelp}
-            filePath={routes[currentIndex]?.filePath}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
+import React, { useState } from "react";
+import { useLocation } from "react-router-dom";
+import { Link } from "../Link";
+import { ChevronLeft, ChevronRight, Menu } from "lucide-react";
+import { usePreload } from "../../../app/preload";
+import { BoltdocsConfig } from "../../../../node/config";
+import { ComponentRoute } from "../../../types";
+export { Navbar } from "../Navbar";
+export { Sidebar } from "../Sidebar";
+export { OnThisPage } from "../OnThisPage";
+export { Head } from "../Head";
+export { Breadcrumbs } from "../Breadcrumbs";
+export { BackgroundGradient } from "../BackgroundGradient";
+
+import { Navbar } from "../Navbar";
+import { Sidebar } from "../Sidebar";
+import { OnThisPage } from "../OnThisPage";
+import { Head } from "../Head";
+import { Breadcrumbs } from "../Breadcrumbs";
+import { BackgroundGradient } from "../BackgroundGradient";
+import "../../styles.css";
+
+export interface ThemeLayoutProps {
+  config: BoltdocsConfig;
+  routes: ComponentRoute[];
+  children: React.ReactNode;
+  /** Custom navbar component (slots) */
+  navbar?: React.ReactNode;
+  /** Custom sidebar component (slots) */
+  sidebar?: React.ReactNode;
+  /** Custom table of contents (OnThisPage) component (slots) */
+  toc?: React.ReactNode;
+  /** Custom background component (slots) */
+  background?: React.ReactNode;
+  /** Custom head/metadata component (slots) */
+  head?: React.ReactNode;
+  /** Custom breadcrumbs component (slots) */
+  breadcrumbs?: React.ReactNode;
+  /** Custom class name for the root layout element */
+  className?: string;
+  /** Custom styles for the root layout element */
+  style?: React.CSSProperties;
+}
+
+/**
+ * The main structural layout for documentation pages.
+ * Integrates the Navbar, Sidebar, and OnThisPage components into a cohesive shell.
+ * It also manages mobile interaction states like the sidebar overlay toggle.
+ *
+ * @param config - The global Boltdocs configuration object
+ * @param routes - The array of available doc routes (used to render the sidebar)
+ */
+export function ThemeLayout({
+  config,
+  routes,
+  children,
+  navbar,
+  sidebar,
+  toc,
+  background,
+  head,
+  breadcrumbs,
+  className = "",
+  style,
+}: ThemeLayoutProps) {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const siteTitle = config.themeConfig?.title || "Boltdocs";
+  const siteDescription = config.themeConfig?.description || "";
+  const location = useLocation();
+
+  // Compute prev/next pages and locale
+  const currentIndex = routes.findIndex((r) => r.path === location.pathname);
+  const currentRoute = routes[currentIndex];
+  // Determine current locale (fallback to default)
+  const currentLocale = config.i18n
+    ? currentRoute?.locale || config.i18n.defaultLocale
+    : undefined;
+
+  // Determine current version (fallback to default)
+  const currentVersion = config.versions
+    ? currentRoute?.version || config.versions.defaultVersion
+    : undefined;
+
+  // Filter routes for sidebar, search, and navigation to only ones in the current locale and version
+  const filteredRoutes = routes.filter((r) => {
+    const localeMatch = config.i18n
+      ? (r.locale || config.i18n.defaultLocale) === currentLocale
+      : true;
+    const versionMatch = config.versions
+      ? (r.version || config.versions.defaultVersion) === currentVersion
+      : true;
+    return localeMatch && versionMatch;
+  });
+
+  const localIndex = filteredRoutes.findIndex(
+    (r) => r.path === location.pathname,
+  );
+  const prevPage = localIndex > 0 ? filteredRoutes[localIndex - 1] : null;
+  const nextPage =
+    localIndex >= 0 && localIndex < filteredRoutes.length - 1
+      ? filteredRoutes[localIndex + 1]
+      : null;
+
+  const { preload } = usePreload();
+  React.useEffect(() => {
+    if (prevPage?.path) preload(prevPage.path);
+    if (nextPage?.path) preload(nextPage.path);
+  }, [prevPage, nextPage, preload]);
+
+  return (
+    <div className={`boltdocs-layout ${className}`} style={style}>
+      {background !== undefined ? background : <BackgroundGradient />}
+      {head !== undefined ? (
+        head
+      ) : (
+        <Head
+          siteTitle={siteTitle}
+          siteDescription={siteDescription}
+          routes={routes}
+        />
+      )}
+      {navbar !== undefined ? (
+        navbar
+      ) : (
+        <Navbar
+          config={config}
+          routes={filteredRoutes}
+          allRoutes={routes}
+          currentLocale={currentLocale}
+          currentVersion={currentVersion}
+        />
+      )}
+      <div
+        className={`boltdocs-main-container ${!isSidebarOpen ? "sidebar-collapsed" : ""}`}
+      >
+        {sidebar !== undefined ? (
+          sidebar
+        ) : (
+          <Sidebar
+            routes={filteredRoutes}
+            config={config}
+            isCollapsed={!isSidebarOpen}
+            onToggle={() => setIsSidebarOpen(!isSidebarOpen)}
+          />
+        )}
+
+        <main className="boltdocs-content">
+          {breadcrumbs !== undefined ? (
+            breadcrumbs
+          ) : (
+            <Breadcrumbs routes={filteredRoutes} config={config} />
+          )}
+          <div className="boltdocs-page">{children}</div>
+
+          {/* Prev / Next Navigation */}
+          {(prevPage || nextPage) && (
+            <nav className="page-nav" aria-label="Pagination">
+              {prevPage ? (
+                <Link
+                  to={prevPage.path || "/"}
+                  className="page-nav-link page-nav-link--prev"
+                >
+                  <div className="page-nav-info">
+                    <span className="page-nav-label">Previous</span>
+                    <span className="page-nav-title">{prevPage.title}</span>
+                  </div>
+                  <ChevronLeft className="page-nav-arrow" size={16} />
+                </Link>
+              ) : (
+                <span />
+              )}
+              {nextPage ? (
+                <Link
+                  to={nextPage.path || "/"}
+                  className="page-nav-link page-nav-link--next"
+                >
+                  <div className="page-nav-info">
+                    <span className="page-nav-label">Next</span>
+                    <span className="page-nav-title">{nextPage.title}</span>
+                  </div>
+                  <ChevronRight className="page-nav-arrow" size={16} />
+                </Link>
+              ) : (
+                <span />
+              )}
+            </nav>
+          )}
+        </main>
+        {toc !== undefined ? (
+          toc
+        ) : (
+          <OnThisPage
+            headings={routes[currentIndex]?.headings}
+            editLink={config.themeConfig?.editLink}
+            communityHelp={config.themeConfig?.communityHelp}
+            filePath={routes[currentIndex]?.filePath}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -1,76 +1,76 @@
-/* ─── Reset ──────────────────────────────────────────────── */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  font-family: var(--ld-font-sans);
-  background-color: var(--ld-bg-main);
-  color: var(--ld-text-main);
-  line-height: 1.7;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-/* ─── Layout Shell ───────────────────────────────────────── */
-.boltdocs-layout {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.boltdocs-main-container {
-  display: flex;
-  flex: 1;
-  width: 100%;
-  max-width: 1440px;
-  margin: 0 auto;
-  padding: 0 1.5rem;
-  /* aligns with navbar */
-}
-
-/* ─── Background Glow ────────────────────────────────────── */
-.boltdocs-background-glow {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100vh;
-  overflow: hidden;
-  z-index: -1;
-  pointer-events: none;
-}
-
-.glow-shape {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(100px);
-  opacity: 0.15;
-  top: -100px;
-}
-
-.glow-1 {
-  width: 600px;
-  height: 600px;
-  background: var(--ld-glow-1-bg);
-  left: -200px;
-}
-
-.glow-2 {
-  width: 800px;
-  height: 800px;
-  background: var(--ld-glow-2-bg);
-  right: -300px;
-  top: -200px;
-}
+/* ─── Reset ──────────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--ld-font-sans);
+  background-color: var(--ld-bg-main);
+  color: var(--ld-text-main);
+  line-height: 1.7;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+/* ─── Layout Shell ───────────────────────────────────────── */
+.boltdocs-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.boltdocs-main-container {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+  /* aligns with navbar */
+}
+
+/* ─── Background Glow ────────────────────────────────────── */
+.boltdocs-background-glow {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100vh;
+  overflow: hidden;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.glow-shape {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(100px);
+  opacity: 0.15;
+  top: -100px;
+}
+
+.glow-1 {
+  width: 600px;
+  height: 600px;
+  background: var(--ld-glow-1-bg);
+  left: -200px;
+}
+
+.glow-2 {
+  width: 800px;
+  height: 800px;
+  background: var(--ld-glow-2-bg);
+  right: -300px;
+  top: -200px;
+}

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

@@ -1,2 +1,2 @@
-export { ThemeLayout } from "./Layout";
-export type { ThemeLayoutProps } from "./Layout";
+export { ThemeLayout } from "./Layout";
+export type { ThemeLayoutProps } from "./Layout";