boltdocs 1.0.0

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

@@ -0,0 +1,343 @@
+/* ═══════════════════════════════════════════════════════════
+   MAIN CONTENT AREA
+   ═══════════════════════════════════════════════════════════ */
+.boltdocs-content {
+  flex: 1;
+  padding: 2rem 2.5rem 2.5rem;
+  max-width: var(--ld-content-max-width);
+  margin: 0 auto;
+  min-width: 0;
+  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%;
+}
+
+/* ─── Breadcrumbs ────────────────────────────────────────── */
+.boltdocs-breadcrumbs {
+  margin-bottom: 1.5rem;
+}
+
+.boltdocs-breadcrumbs-list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 0.8125rem;
+}
+
+.boltdocs-breadcrumbs-item {
+  display: flex;
+  align-items: center;
+}
+
+.boltdocs-breadcrumbs-link {
+  display: flex;
+  align-items: center;
+  color: var(--ld-text-muted);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.boltdocs-breadcrumbs-link:hover {
+  color: var(--ld-color-primary);
+}
+
+.boltdocs-breadcrumbs-separator {
+  display: flex;
+  align-items: center;
+  color: var(--ld-text-dim);
+  margin: 0 0.5rem;
+  opacity: 0.5;
+}
+
+.boltdocs-breadcrumbs-text {
+  color: var(--ld-text-muted);
+}
+
+.boltdocs-breadcrumbs-active {
+  color: var(--ld-text-main);
+  font-weight: 500;
+}
+
+/* ─── Markdown Typography ────────────────────────────────── */
+.boltdocs-page h1 {
+  font-size: 2.25rem;
+  margin: 0 0 0.75rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: var(--ld-text-main);
+}
+
+.boltdocs-page h1 + p {
+  color: var(--ld-text-muted);
+  font-size: 1.05rem;
+  margin-bottom: 2rem;
+}
+
+.boltdocs-page h2 {
+  font-size: 1.4rem;
+  margin-top: 2.5rem;
+  margin-bottom: 0.75rem;
+  font-weight: 700;
+  color: var(--ld-text-main);
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--ld-border-subtle);
+  scroll-margin-top: 5rem;
+  letter-spacing: -0.015em;
+}
+
+.boltdocs-page h3 {
+  font-size: 1.125rem;
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: var(--ld-text-main);
+  scroll-margin-top: 5rem;
+}
+
+.boltdocs-page p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  color: var(--ld-text-muted);
+}
+
+.boltdocs-page a {
+  color: var(--ld-color-primary);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.boltdocs-page a:hover {
+  color: var(--ld-color-primary-hover);
+  text-decoration: underline;
+}
+
+.boltdocs-page ul,
+.boltdocs-page ol {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  padding-left: 1.5rem;
+  color: var(--ld-text-muted);
+}
+
+.boltdocs-page li {
+  margin-bottom: 0.35rem;
+}
+
+.boltdocs-page strong {
+  color: var(--ld-text-main);
+  font-weight: 600;
+}
+
+.boltdocs-page blockquote {
+  margin: 1.5rem 0;
+  padding: 0.75rem 1.25rem;
+  border-left: 3px solid var(--ld-color-primary);
+  background-color: var(--ld-color-primary-muted);
+  border-radius: 0 var(--ld-radius-md) var(--ld-radius-md) 0;
+  color: var(--ld-text-muted);
+}
+
+.boltdocs-page blockquote p {
+  margin: 0;
+}
+
+.boltdocs-page hr {
+  border: none;
+  border-top: 1px solid var(--ld-border-subtle);
+  margin: 2rem 0;
+}
+
+/* ─── Images ─────────────────────────────────────────────── */
+.boltdocs-page img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--ld-radius-md);
+  margin: 1rem 0;
+  display: block;
+}
+
+.boltdocs-page table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  font-size: 0.875rem;
+}
+
+.boltdocs-page th {
+  text-align: left;
+  padding: 0.6rem 0.75rem;
+  border-bottom: 2px solid var(--ld-border-subtle);
+  color: var(--ld-text-main);
+  font-weight: 600;
+}
+
+.boltdocs-page td {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--ld-border-subtle);
+  color: var(--ld-text-muted);
+}
+
+.boltdocs-page tr:hover td {
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+/* ─── Inline Code ────────────────────────────────────────── */
+.boltdocs-page :not(pre) > code {
+  background-color: var(--ld-surface);
+  padding: 0.15rem 0.45rem;
+  border-radius: 5px;
+  font-family: var(--ld-font-mono);
+  font-size: 0.85em;
+  color: var(--ld-color-primary-hover);
+  border: 1px solid var(--ld-border-subtle);
+}
+
+/* ─── Code Blocks ────────────────────────────────────────── */
+.code-block-wrapper {
+  margin: 1.5rem 0;
+  border-radius: var(--ld-radius-md);
+  overflow: hidden;
+  border: 1px solid var(--ld-border-subtle);
+  background-color: var(--ld-code-bg);
+}
+
+.code-block-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1.25rem;
+  background-color: var(--ld-code-header);
+  border-bottom: 1px solid var(--ld-border-subtle);
+  font-size: 0.75rem;
+}
+
+.code-block-lang {
+  color: var(--ld-text-dim);
+  font-family: var(--ld-font-mono);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.code-block-copy {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.2rem 0.55rem;
+  background: none;
+  border: 1px solid var(--ld-border-subtle);
+  border-radius: 5px;
+  color: var(--ld-text-dim);
+  font-family: var(--ld-font-sans);
+  font-size: 0.6875rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.code-block-copy:hover {
+  color: var(--ld-text-main);
+  border-color: var(--ld-border-strong);
+  background-color: rgba(255, 255, 255, 0.04);
+}
+
+.code-block-copy.copied {
+  color: #22c55e;
+  border-color: rgba(34, 197, 94, 0.3);
+}
+
+.code-block-copy svg {
+  width: 18px;
+  height: 18px;
+}
+
+.code-block-wrapper pre {
+  margin: 0 !important;
+  border-radius: 0 !important;
+  border: none !important;
+  background-color: transparent !important;
+}
+
+.code-block-wrapper pre > code {
+  padding: 1.25rem !important;
+  display: block !important;
+}
+
+.code-block-wrapper pre > code .line {
+  padding: 0;
+}
+
+/* Default pre (without wrapper) */
+.boltdocs-page pre {
+  margin: 1.5rem 0;
+  border-radius: var(--ld-radius-md);
+  overflow-x: auto;
+  font-family: var(--ld-font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.7;
+  background-color: var(--ld-code-bg);
+  color: var(--ld-code-text);
+  border: 1px solid var(--ld-border-subtle);
+}
+
+.boltdocs-page pre > code {
+  display: grid;
+  padding: 1rem 0;
+  background-color: transparent;
+  border: none;
+  color: inherit;
+  font-size: inherit;
+}
+
+.boltdocs-page pre > code .line {
+  padding: 0 1.25rem;
+}
+
+.boltdocs-page pre > code .line.highlighted {
+  background-color: var(--ld-color-primary-muted);
+  border-left: 2px solid var(--ld-color-primary);
+}
+
+/* ─── Header Anchors ─────────────────────────────────────── */
+.header-anchor {
+  margin-left: 0.5rem;
+  color: var(--ld-text-dim);
+  opacity: 0;
+  transition: opacity 0.2s;
+  text-decoration: none;
+  font-weight: 400;
+}
+
+.boltdocs-page h2:hover .header-anchor,
+.boltdocs-page h3:hover .header-anchor {
+  opacity: 1;
+}
+
+.header-anchor:hover {
+  color: var(--ld-color-primary);
+}
+
+.boltdocs-heading {
+  display: flex;
+  align-items: center;
+}
+
+.boltdocs-heading .header-anchor {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 0.5rem;
+  color: var(--ld-text-dim);
+  opacity: 0;
+  transition: opacity 0.2s;
+  text-decoration: none;
+}
+
+.boltdocs-heading:hover .header-anchor {
+  opacity: 1;
+}

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

@@ -0,0 +1,162 @@
+/* ═══════════════════════════════════════════════════════════
+   Boltdocs — Dark Theme
+   Font: Inter · Accent: #7f13ec
+   ═══════════════════════════════════════════════════════════ */
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
+
+:root[data-theme="light"],
+:root.theme-light {
+  --ld-bg-main: #ffffff;
+  --ld-bg-soft: #f9fafb;
+  --ld-bg-mute: #f3f4f6;
+
+  --ld-surface: #ffffff;
+
+  --ld-border-subtle: #e5e7eb;
+  --ld-border-strong: #d1d5db;
+
+  --ld-text-main: #111827;
+  --ld-text-muted: #4b5563;
+  --ld-text-dim: #6b7280;
+
+  --ld-color-primary: #7f13ec;
+  --ld-color-primary-hover: #6d0fd0;
+  --ld-color-primary-muted: rgba(127, 19, 236, 0.1);
+  --ld-color-primary-glow: rgba(127, 19, 236, 0.25);
+  --ld-color-primary-text: #ffffff;
+
+  /* ─ Buttons ─ */
+  --ld-btn-primary-bg: #7f13ec;
+  --ld-btn-primary-text: #ffffff;
+  --ld-btn-secondary-bg: #ffffff;
+  --ld-btn-secondary-text: #111827;
+
+  /* ─ Gradients ─ */
+  --ld-gradient-from: var(--ld-color-primary);
+  --ld-gradient-to: #a855f7;
+
+  --ld-code-bg: #f3f4f6;
+  --ld-code-header: #e5e7eb;
+  --ld-code-text: #1f2937;
+
+  /* ─ Customization ─ */
+  --ld-navbar-bg: rgba(255, 255, 255, 0.82);
+  --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);
+
+  /* ─ UI Components (overridable independently from layout) ─ */
+  --ld-ui-btn-primary-bg: var(--ld-btn-primary-bg);
+  --ld-ui-btn-primary-text: var(--ld-btn-primary-text);
+  --ld-ui-btn-secondary-bg: var(--ld-btn-secondary-bg);
+  --ld-ui-btn-secondary-text: var(--ld-btn-secondary-text);
+
+  --ld-ui-success-bg: rgba(34, 197, 94, 0.1);
+  --ld-ui-success-text: #16a34a;
+  --ld-ui-success-border: rgba(34, 197, 94, 0.25);
+  --ld-ui-warning-bg: rgba(245, 158, 11, 0.1);
+  --ld-ui-warning-text: #d97706;
+  --ld-ui-warning-border: rgba(245, 158, 11, 0.25);
+  --ld-ui-danger-bg: rgba(239, 68, 68, 0.1);
+  --ld-ui-danger-text: #dc2626;
+  --ld-ui-danger-border: rgba(239, 68, 68, 0.25);
+  --ld-ui-info-bg: rgba(59, 130, 246, 0.1);
+  --ld-ui-info-text: #2563eb;
+  --ld-ui-info-border: rgba(59, 130, 246, 0.25);
+  --ld-ui-note-bg: rgba(59, 130, 246, 0.06);
+  --ld-ui-note-text: #2563eb;
+  --ld-ui-note-border: rgba(59, 130, 246, 0.3);
+  --ld-ui-tip-bg: rgba(34, 197, 94, 0.06);
+  --ld-ui-tip-text: #16a34a;
+  --ld-ui-tip-border: rgba(34, 197, 94, 0.3);
+}
+
+:root {
+  /* ─ Base palette ─ */
+  --ld-bg-main: #0a0a0f;
+  --ld-bg-soft: rgba(10, 10, 15, 0.2);
+  --ld-bg-mute: #141420;
+  --ld-surface: #1a1a2e;
+  --ld-border-subtle: rgba(255, 255, 255, 0.06);
+  --ld-border-strong: rgba(255, 255, 255, 0.12);
+
+  /* ─ Text ─ */
+  --ld-text-main: #e4e4ed;
+  --ld-text-muted: #9d9db5;
+  --ld-text-dim: #6b6b85;
+
+  /* ─ Accent ─ */
+  --ld-color-primary: #ffffff;
+  --ld-color-primary-hover: #f3f3f3;
+  --ld-color-primary-muted: rgba(255, 255, 255, 0.1);
+  --ld-color-primary-glow: rgba(255, 255, 255, 0.25);
+  --ld-color-primary-text: #0a0a0f;
+  --ld-color-accent: #ffffff; /* White accent for TOC */
+
+  /* ─ Buttons ─ */
+  --ld-btn-primary-bg: #ffffff;
+  --ld-btn-primary-text: #0a0a0f;
+  --ld-btn-secondary-bg: #1a1a2e;
+  --ld-btn-secondary-text: #e4e4ed;
+
+  /* ─ Gradients ─ */
+  --ld-gradient-from: #ffffff;
+  --ld-gradient-to: rgba(255, 255, 255, 0.7);
+
+  /* ─ Code ─ */
+  --ld-code-bg: #0d0d14;
+  --ld-code-header: #111119;
+  --ld-code-text: #d4d4d4;
+
+  /* ─ Customization ─ */
+  --ld-navbar-bg: rgba(10, 10, 15, 0.2);
+  --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);
+
+  /* ─ UI Components (dark) ─ */
+  --ld-ui-btn-primary-bg: var(--ld-btn-primary-bg);
+  --ld-ui-btn-primary-text: var(--ld-btn-primary-text);
+  --ld-ui-btn-secondary-bg: var(--ld-btn-secondary-bg);
+  --ld-ui-btn-secondary-text: var(--ld-btn-secondary-text);
+
+  --ld-ui-success-bg: rgba(34, 197, 94, 0.1);
+  --ld-ui-success-text: #22c55e;
+  --ld-ui-success-border: rgba(34, 197, 94, 0.25);
+  --ld-ui-warning-bg: rgba(245, 158, 11, 0.1);
+  --ld-ui-warning-text: #f59e0b;
+  --ld-ui-warning-border: rgba(245, 158, 11, 0.25);
+  --ld-ui-danger-bg: rgba(239, 68, 68, 0.1);
+  --ld-ui-danger-text: #ef4444;
+  --ld-ui-danger-border: rgba(239, 68, 68, 0.25);
+  --ld-ui-info-bg: rgba(59, 130, 246, 0.1);
+  --ld-ui-info-text: #3b82f6;
+  --ld-ui-info-border: rgba(59, 130, 246, 0.25);
+  --ld-ui-note-bg: rgba(59, 130, 246, 0.06);
+  --ld-ui-note-text: #3b82f6;
+  --ld-ui-note-border: rgba(59, 130, 246, 0.3);
+  --ld-ui-tip-bg: rgba(34, 197, 94, 0.06);
+  --ld-ui-tip-text: #22c55e;
+  --ld-ui-tip-border: rgba(34, 197, 94, 0.3);
+
+  /* ─ Typography ─ */
+  --ld-font-sans: "Inter", system-ui, -apple-system, sans-serif;
+  --ld-font-mono:
+    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    monospace;
+
+  /* ─ Dimensions ─ */
+  --ld-navbar-height: 3.5rem;
+  --ld-sidebar-width: 14.5rem;
+  --ld-toc-width: 13rem;
+  --ld-content-max-width: 820px;
+  --ld-radius-sm: 4px;
+  --ld-radius-md: 8px;
+  --ld-radius-lg: 12px;
+  --ld-radius-full: 9999px;
+}

package/src/client/theme/styles.css

@@ -0,0 +1,38 @@
+/* ═══════════════════════════════════════════════════════════
+   Boltdocs — Dark Theme
+   Main Entry Point
+   ═══════════════════════════════════════════════════════════ */
+
+@import "./styles/variables.css";
+@import "./ui/Layout/base.css";
+
+/* Core Layout Components */
+@import "./ui/Navbar/navbar.css";
+@import "./ui/Sidebar/sidebar.css";
+@import "./ui/OnThisPage/toc.css";
+@import "./ui/Footer/footer.css";
+@import "./ui/LanguageSwitcher/language-switcher.css";
+@import "./ui/PoweredBy/powered-by.css";
+
+/* Markdown Content */
+@import "./styles/markdown.css";
+@import "./components/Video/video.css";
+
+/* UI Components (MDX) */
+@import "./components/mdx/mdx-components.css";
+@import "./components/PackageManagerTabs/pkg-tabs.css";
+
+/* Interactive Elements */
+@import "./ui/SearchDialog/search.css";
+@import "./ui/Layout/pagination.css";
+
+/* Pages */
+@import "./styles/home.css";
+@import "./ui/NotFound/not-found.css";
+@import "./ui/Loading/loading.css";
+
+/* Playground */
+@import "./components/Playground/playground.css";
+
+/* Media Queries */
+@import "./ui/Layout/responsive.css";

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

@@ -0,0 +1,10 @@
+import React from "react";
+
+export function BackgroundGradient() {
+  return (
+    <div className="boltdocs-background-glow">
+      <div className="glow-shape glow-1" />
+      <div className="glow-shape glow-2" />
+    </div>
+  );
+}

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

@@ -0,0 +1 @@
+export { BackgroundGradient } from "./BackgroundGradient";

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

@@ -0,0 +1,68 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+import { Link } from "../Link";
+import { Home, ChevronRight } from "lucide-react";
+import { ComponentRoute } from "../../../app";
+import { BoltdocsConfig } from "../../../../node/config";
+
+export interface BreadcrumbsProps {
+  routes: ComponentRoute[];
+  config: BoltdocsConfig;
+}
+
+export function Breadcrumbs({ routes, config }: BreadcrumbsProps) {
+  const location = useLocation();
+
+  if (config.themeConfig?.breadcrumbs === false) return null;
+  if (location.pathname === "/") return null;
+
+  const currentRoute = routes.find((r) => r.path === location.pathname);
+
+  const groupRoute = currentRoute?.group
+    ? routes.find((r) => r.group === currentRoute.group)
+    : null;
+
+  return (
+    <nav className="boltdocs-breadcrumbs" aria-label="Breadcrumb">
+      <ol className="boltdocs-breadcrumbs-list">
+        <li className="boltdocs-breadcrumbs-item">
+          <Link to="/" className="boltdocs-breadcrumbs-link">
+            {/* Home Icon */}
+            <Home size={14} />
+          </Link>
+          <span className="boltdocs-breadcrumbs-separator">
+            <ChevronRight size={14} />
+          </span>
+        </li>
+
+        {currentRoute?.groupTitle && (
+          <li className="boltdocs-breadcrumbs-item">
+            {groupRoute ? (
+              <Link to={groupRoute.path} className="boltdocs-breadcrumbs-link">
+                {currentRoute.groupTitle}
+              </Link>
+            ) : (
+              <span className="boltdocs-breadcrumbs-text">
+                {currentRoute.groupTitle}
+              </span>
+            )}
+            <span className="boltdocs-breadcrumbs-separator">
+              <ChevronRight size={14} />
+            </span>
+          </li>
+        )}
+
+        {currentRoute?.title && (
+          <li className="boltdocs-breadcrumbs-item">
+            <span
+              className="boltdocs-breadcrumbs-text boltdocs-breadcrumbs-active"
+              aria-current="page"
+            >
+              {currentRoute.title}
+            </span>
+          </li>
+        )}
+      </ol>
+    </nav>
+  );
+}

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

@@ -0,0 +1 @@
+export { Breadcrumbs } from "./Breadcrumbs";

package/src/client/theme/ui/Footer/footer.css

@@ -0,0 +1,32 @@
+/* ═══════════════════════════════════════════════════════════
+   FOOTER
+   ═══════════════════════════════════════════════════════════ */
+.boltdocs-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem 2rem;
+  border-top: 1px solid var(--ld-border-subtle);
+  background-color: var(--ld-bg-soft);
+  font-size: 0.8rem;
+  color: var(--ld-text-dim);
+}
+
+.footer-copy {
+  margin: 0;
+}
+
+.footer-links {
+  display: flex;
+  gap: 1.25rem;
+}
+
+.footer-links a {
+  color: var(--ld-text-dim);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.footer-links a:hover {
+  color: var(--ld-text-muted);
+}