boltdocs 1.7.1 → 1.9.0

package/dist/client/ssr.mjs

@@ -1,6 +1,6 @@
 import {
   AppShell
-} from "../chunk-SFVOGJ2W.mjs";
+} from "../chunk-OZLYRXAD.mjs";
 import "../chunk-FMTOYQLO.mjs";
 
 // src/client/ssr.tsx

package/dist/{config-D68h41CA.d.ts → config-BsFQ-ErD.d.mts}

@@ -93,6 +93,15 @@ interface BoltdocsThemeConfig {
      * Default: 'one-dark-pro'
      */
     codeTheme?: string | Record<string, string>;
+    /**
+     * Configuration for the 'Copy Markdown' button.
+     * Can be a boolean or an object with text and icon.
+     * Default: true
+     */
+    copyMarkdown?: boolean | {
+        text?: string;
+        icon?: string;
+    };
 }
 /**
  * Configuration for internationalization (i18n).

package/dist/{config-D68h41CA.d.mts → config-BsFQ-ErD.d.ts}

@@ -93,6 +93,15 @@ interface BoltdocsThemeConfig {
      * Default: 'one-dark-pro'
      */
     codeTheme?: string | Record<string, string>;
+    /**
+     * Configuration for the 'Copy Markdown' button.
+     * Can be a boolean or an object with text and icon.
+     * Default: true
+     */
+    copyMarkdown?: boolean | {
+        text?: string;
+        icon?: string;
+    };
 }
 /**
  * Configuration for internationalization (i18n).

package/dist/node/index.d.mts

@@ -1,6 +1,6 @@
 import { Plugin } from 'vite';
-import { B as BoltdocsConfig } from '../config-D68h41CA.mjs';
-export { a as BoltdocsThemeConfig } from '../config-D68h41CA.mjs';
+import { B as BoltdocsConfig } from '../config-BsFQ-ErD.mjs';
+export { a as BoltdocsThemeConfig } from '../config-BsFQ-ErD.mjs';
 
 /**
  * Configuration options specifically for the Boltdocs Vite plugin.
@@ -82,6 +82,8 @@ interface RouteMeta {
     tab?: string;
     /** The extracted plain-text content of the page for search indexing */
     _content?: string;
+    /** The raw markdown content of the page */
+    _rawContent?: string;
 }
 
 declare function boltdocs(options?: BoltdocsPluginOptions): Promise<Plugin[]>;

package/dist/node/index.d.ts

@@ -1,6 +1,6 @@
 import { Plugin } from 'vite';
-import { B as BoltdocsConfig } from '../config-D68h41CA.js';
-export { a as BoltdocsThemeConfig } from '../config-D68h41CA.js';
+import { B as BoltdocsConfig } from '../config-BsFQ-ErD.js';
+export { a as BoltdocsThemeConfig } from '../config-BsFQ-ErD.js';
 
 /**
  * Configuration options specifically for the Boltdocs Vite plugin.
@@ -82,6 +82,8 @@ interface RouteMeta {
     tab?: string;
     /** The extracted plain-text content of the page for search indexing */
     _content?: string;
+    /** The raw markdown content of the page */
+    _rawContent?: string;
 }
 
 declare function boltdocs(options?: BoltdocsPluginOptions): Promise<Plugin[]>;

package/dist/node/index.js

@@ -544,7 +544,8 @@ function parseDocFile(file, docsDir, basePath, config) {
       badge: sanitizedBadge,
       icon,
       tab: inferredTab,
-      _content: plainText
+      _content: plainText,
+      _rawContent: content
     },
     relativeDir: cleanDirName,
     isGroupIndex,

package/dist/node/index.mjs

@@ -126,7 +126,8 @@ function parseDocFile(file, docsDir, basePath, config) {
       badge: sanitizedBadge,
       icon,
       tab: inferredTab,
-      _content: plainText
+      _content: plainText,
+      _rawContent: content
     },
     relativeDir: cleanDirName,
     isGroupIndex,

package/dist/{types-BbceAHA0.d.mts → types-Dj-bfnC3.d.mts}

@@ -46,6 +46,8 @@ interface ComponentRoute {
     groupIcon?: string;
     /** The extracted plain-text content of the page for search indexing */
     _content?: string;
+    /** The raw markdown content of the page */
+    _rawContent?: string;
 }
 /**
  * Configuration options for initializing the Boltdocs client app.

package/dist/{types-BbceAHA0.d.ts → types-Dj-bfnC3.d.ts}

@@ -46,6 +46,8 @@ interface ComponentRoute {
     groupIcon?: string;
     /** The extracted plain-text content of the page for search indexing */
     _content?: string;
+    /** The raw markdown content of the page */
+    _rawContent?: string;
 }
 /**
  * Configuration options for initializing the Boltdocs client app.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boltdocs",
-  "version": "1.7.1",
+  "version": "1.9.0",
   "description": "A lightweight documentation generator for React projects.",
   "main": "dist/node/index.js",
   "module": "dist/node/index.mjs",

package/src/client/index.ts

@@ -30,6 +30,7 @@ export {
   List,
   FileTree,
   Table,
+  Field,
 } from "./theme/components/mdx";
 export type {
   ButtonProps,
@@ -42,4 +43,5 @@ export type {
   ListProps,
   FileTreeProps,
   TableProps,
+  FieldProps,
 } from "./theme/components/mdx";

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

@@ -0,0 +1,60 @@
+import React from "react";
+
+export interface FieldProps {
+  /** The name of the property or field */
+  name: string;
+  /** The data type of the field (e.g., "string", "number", "boolean") */
+  type?: string;
+  /** The default value if not provided */
+  defaultValue?: string;
+  /** Whether the field is required */
+  required?: boolean;
+  /** Description or additional content */
+  children: React.ReactNode;
+  /** Optional anchor ID for linking */
+  id?: string;
+  /** Optional extra class name */
+  className?: string;
+}
+
+/**
+ * A highly aesthetic and readable component for documenting API fields/properties.
+ */
+export function Field({
+  name,
+  type,
+  defaultValue,
+  required = false,
+  children,
+  id,
+  className = "",
+}: FieldProps) {
+  return (
+    <div className={`ld-field ${className}`.trim()} id={id}>
+      <div className="ld-field__header">
+        <div className="ld-field__signature">
+          <code className="ld-field__name">{name}</code>
+          {type && (
+            <span className="ld-field__type-badge">
+              {type}
+            </span>
+          )}
+          {required && (
+            <span className="ld-field__required-badge">required</span>
+          )}
+        </div>
+        
+        {defaultValue && (
+          <div className="ld-field__default">
+            <span className="ld-field__default-label">Default:</span>
+            <code className="ld-field__default-value">{defaultValue}</code>
+          </div>
+        )}
+      </div>
+      
+      <div className="ld-field__content">
+        {children}
+      </div>
+    </div>
+  );
+}

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

@@ -22,3 +22,6 @@ export type { FileTreeProps } from "./FileTree";
 
 export { Table } from "./Table";
 export type { TableProps } from "./Table";
+
+export { Field } from "./Field";
+export type { FieldProps } from "./Field";

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

@@ -667,3 +667,98 @@
   opacity: 0.4;
   cursor: not-allowed;
 }
+/* ─── Field ───────────────────────────────────────────────── */
+.ld-field {
+  margin: 1.5rem 0;
+  padding: 1.25rem;
+  border-radius: var(--ld-radius-lg);
+  border: 1px solid var(--ld-border-subtle);
+  background: var(--ld-bg-soft);
+  position: relative;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.ld-field:hover {
+  border-color: var(--ld-color-primary);
+  box-shadow: 0 4px 20px -8px rgba(127, 19, 236, 0.15);
+}
+
+.ld-field__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.85rem;
+  padding-bottom: 0.85rem;
+  border-bottom: 1px solid var(--ld-border-subtle);
+}
+
+.ld-field__signature {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.ld-field__name {
+  font-family: var(--ld-font-mono);
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--ld-text-main);
+  background: rgba(127, 19, 236, 0.08);
+  padding: 0.2rem 0.6rem;
+  border-radius: var(--ld-radius-sm);
+  letter-spacing: -0.01em;
+}
+
+.ld-field__type-badge {
+  font-family: var(--ld-font-mono);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--ld-color-primary);
+  background: var(--ld-color-primary-muted);
+  padding: 0.15rem 0.5rem;
+  border-radius: var(--ld-radius-full);
+  border: 1px solid rgba(127, 19, 236, 0.2);
+}
+
+.ld-field__required-badge {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--ld-ui-danger-text);
+  background: var(--ld-ui-danger-bg);
+  padding: 0.1rem 0.4rem;
+  border-radius: var(--ld-radius-sm);
+  letter-spacing: 0.05em;
+}
+
+.ld-field__default {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+}
+
+.ld-field__default-label {
+  color: var(--ld-text-dim);
+  font-weight: 500;
+}
+
+.ld-field__default-value {
+  font-family: var(--ld-font-mono);
+  color: var(--ld-text-main);
+  background: var(--ld-bg-mute);
+  padding: 0.15rem 0.4rem;
+  border-radius: var(--ld-radius-sm);
+}
+
+.ld-field__content {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--ld-text-muted);
+}
+
+.ld-field__content p {
+  margin: 0;
+}

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

@@ -41,7 +41,7 @@
   --ld-code-text: #1f2937;
 
   /* ─ Customization ─ */
-  --ld-navbar-bg: rgba(255, 255, 255, 0.82);
+  --ld-navbar-bg: #ffffff;
   --ld-navbar-blur: 12px;
   --ld-sidebar-bg: transparent;
   --ld-sidebar-blur: 0px;

package/src/client/theme/styles.css

@@ -13,6 +13,7 @@
 @import "./ui/Footer/footer.css";
 @import "./ui/LanguageSwitcher/language-switcher.css";
 @import "./ui/PoweredBy/powered-by.css";
+@import "./ui/CopyMarkdown/copy-markdown.css";
 
 /* Markdown Content */
 @import "./styles/markdown.css";

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

@@ -0,0 +1,82 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Copy, ChevronDown, Check, ExternalLink } from "lucide-react";
+import "./copy-markdown.css";
+
+export interface CopyMarkdownProps {
+  content?: string;
+  config?: boolean | { text?: string; icon?: string };
+}
+
+export function CopyMarkdown({ content, config }: CopyMarkdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const isEnabled = config !== false;
+  const buttonText = typeof config === "object" ? config.text || "Copy Markdown" : "Copy Markdown";
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  if (!isEnabled || !content) return null;
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(content);
+    setCopied(true);
+    setIsOpen(false);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleOpenRaw = () => {
+    const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    window.open(url, "_blank");
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="boltdocs-copy-markdown" ref={dropdownRef}>
+      <div className="copy-btn-group">
+        <button
+          className="copy-btn"
+          onClick={handleCopy}
+          aria-label="Copy Markdown"
+        >
+          {copied ? <Check size={16} /> : <Copy size={16} />}
+          <span className="copy-label">{copied ? "Copied!" : buttonText}</span>
+        </button>
+        <button
+          className={`copy-dropdown-toggle ${isOpen ? "is-active" : ""}`}
+          onClick={() => setIsOpen(!isOpen)}
+          aria-label="More options"
+          aria-expanded={isOpen}
+        >
+          <ChevronDown size={14} className="arrow-icon" />
+        </button>
+      </div>
+
+      {isOpen && (
+        <div className="copy-dropdown">
+          <button className="copy-option" onClick={handleCopy}>
+            <Copy size={14} />
+            Copy Markdown
+          </button>
+          <button className="copy-option" onClick={handleOpenRaw}>
+            <ExternalLink size={14} />
+            View as Markdown
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/theme/ui/CopyMarkdown/copy-markdown.css

@@ -0,0 +1,114 @@
+.boltdocs-copy-markdown {
+  position: relative;
+  display: inline-block;
+  z-index: 100;
+}
+
+.copy-btn-group {
+  display: flex;
+  align-items: stretch;
+  background-color: var(--ld-bg-mute);
+  border: 1px solid var(--ld-border-subtle);
+  border-radius: var(--ld-radius-full);
+  overflow: hidden;
+  transition: all 0.2s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.copy-btn-group:hover {
+  border-color: var(--ld-color-primary-hover);
+  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
+}
+
+.copy-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: transparent;
+  border: none;
+  color: var(--ld-text-main);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.copy-btn:hover {
+  background-color: var(--ld-bg-soft);
+}
+
+.copy-label {
+  white-space: nowrap;
+}
+
+.copy-dropdown-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10px;
+  background: rgba(255, 255, 255, 0.03);
+  border: none;
+  border-left: 1px solid var(--ld-border-subtle);
+  color: var(--ld-text-muted);
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.copy-dropdown-toggle:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--ld-text-main);
+}
+
+.copy-dropdown-toggle .arrow-icon {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.copy-dropdown-toggle.is-active .arrow-icon {
+  transform: rotate(180deg);
+}
+
+.copy-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  width: 200px;
+  background: var(--ld-bg-main);
+  border: 1px solid var(--ld-border-subtle);
+  border-radius: var(--ld-radius-lg);
+  padding: 4px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  animation: boltdocs-fade-in 0.2s ease;
+}
+
+.copy-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 12px;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  color: var(--ld-text-main);
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.copy-option:hover {
+  background-color: var(--ld-bg-soft);
+}
+
+@keyframes boltdocs-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

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

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

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

@@ -20,6 +20,7 @@ import { Breadcrumbs } from "../Breadcrumbs";
 import { BackgroundGradient } from "../BackgroundGradient";
 import { ProgressBar } from "../ProgressBar";
 import { ErrorBoundary } from "../ErrorBoundary";
+import { CopyMarkdown } from "../CopyMarkdown";
 import "../../styles.css";
 
 export interface ThemeLayoutProps {
@@ -146,6 +147,12 @@ export function ThemeLayout({
             <Breadcrumbs routes={filteredRoutes} config={config} />
           )}
           <div className="boltdocs-page">
+            <div className="boltdocs-page-header">
+              <CopyMarkdown 
+                content={routes[currentIndex]?._rawContent} 
+                config={config.themeConfig?.copyMarkdown}
+              />
+            </div>
             <ErrorBoundary>
               {children}
             </ErrorBoundary>

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

@@ -83,6 +83,23 @@ a {
   width: 800px;
   height: 800px;
   background: var(--ld-glow-2-bg);
-  right: -300px;
   top: -200px;
 }
+
+.boltdocs-page {
+  position: relative;
+}
+
+.boltdocs-page-header {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  justify-content: flex-end;
+  padding: 1rem 0;
+  pointer-events: none;
+}
+
+.boltdocs-page-header > * {
+  pointer-events: auto;
+}

package/src/client/theme/ui/Link/link-preview.css

@@ -19,11 +19,9 @@
 .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: 
+  box-shadow:
     0 10px 30px -10px rgba(0, 0, 0, 0.2),
     0 4px 10px -5px rgba(0, 0, 0, 0.1);
 }
@@ -48,20 +46,3 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-
-/* 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: #fff;
-}
-
-[data-theme="dark"] .boltdocs-link-preview-summary {
-  color: #94a3b8;
-}

package/src/client/types.ts

@@ -39,6 +39,8 @@ export interface ComponentRoute {
   groupIcon?: string;
   /** The extracted plain-text content of the page for search indexing */
   _content?: string;
+  /** The raw markdown content of the page */
+  _rawContent?: string;
 }
 
 /**

package/src/node/config.ts

@@ -91,6 +91,12 @@ export interface BoltdocsThemeConfig {
    * Default: 'one-dark-pro'
    */
   codeTheme?: string | Record<string, string>;
+  /**
+   * Configuration for the 'Copy Markdown' button.
+   * Can be a boolean or an object with text and icon.
+   * Default: true
+   */
+  copyMarkdown?: boolean | { text?: string; icon?: string };
 }
 
 /**

package/src/node/routes/parser.ts

@@ -176,6 +176,7 @@ export function parseDocFile(
       icon,
       tab: inferredTab,
       _content: plainText,
+      _rawContent: content,
     },
     relativeDir: cleanDirName,
     isGroupIndex,

package/src/node/routes/types.ts

@@ -37,6 +37,8 @@ export interface RouteMeta {
   tab?: string;
   /** The extracted plain-text content of the page for search indexing */
   _content?: string;
+  /** The raw markdown content of the page */
+  _rawContent?: string;
 }
 
 /**