boltdocs 1.10.2 → 1.11.0

package/src/client/theme/ui/NotFound/not-found.css

@@ -1,64 +0,0 @@
-/* ═══════════════════════════════════════════════════════════
-   404 NOT FOUND
-   ═══════════════════════════════════════════════════════════ */
-.boltdocs-not-found {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 60vh;
-  text-align: center;
-  padding: 2rem;
-}
-
-.not-found-content {
-  max-width: 420px;
-}
-
-.not-found-code {
-  display: block;
-  font-size: 6rem;
-  font-weight: 900;
-  line-height: 1;
-  background: linear-gradient(
-    135deg,
-    var(--ld-gradient-from),
-    var(--ld-gradient-to)
-  );
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin-bottom: 0.5rem;
-}
-
-.not-found-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin: 0 0 0.75rem;
-  color: var(--ld-text-main);
-}
-
-.not-found-text {
-  color: var(--ld-text-muted);
-  margin-bottom: 1.5rem;
-}
-
-a.not-found-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.6rem 1.5rem;
-  background-color: var(--ld-btn-primary-bg);
-  color: var(--ld-btn-primary-text) !important;
-  border-radius: var(--ld-radius-md);
-  text-decoration: none;
-  font-weight: 600;
-  transition: all 0.2s;
-}
-
-a.not-found-link:hover {
-  background-color: var(--ld-btn-primary-bg);
-  opacity: 0.9;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 16px var(--ld-color-primary-glow);
-  color: var(--ld-btn-primary-text) !important;
-}

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

@@ -1,244 +0,0 @@
-import React, { useEffect, useState, useRef, useCallback } from "react";
-import { useLocation } from "react-router-dom";
-import { Pencil, CircleHelp, TextAlignStart } from "lucide-react";
-
-interface TocHeading {
-  id: string;
-  text: string;
-  level: number;
-}
-
-export function OnThisPage({
-  headings = [],
-  editLink,
-  communityHelp,
-  filePath,
-}: {
-  headings?: TocHeading[];
-  editLink?: string;
-  communityHelp?: string;
-  filePath?: string;
-}) {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({});
-  const observerRef = useRef<IntersectionObserver | null>(null);
-  const location = useLocation();
-  const listRef = useRef<HTMLUListElement>(null);
-  const visibleIdsRef = useRef<Set<string>>(new Set());
-
-  // Reset active ID when path changes
-  useEffect(() => {
-    if (headings.length > 0) {
-      const hash = window.location.hash.substring(1);
-      if (hash && headings.some((h) => h.id === hash)) {
-        setActiveId(hash);
-      } else {
-        setActiveId(headings[0].id);
-      }
-    }
-  }, [location.pathname, headings]);
-
-  // Update indicator position for the single active ID
-  useEffect(() => {
-    if (!activeId || !listRef.current) return;
-
-    const activeLink = listRef.current.querySelector(
-      `a[href="#${activeId}"]`,
-    ) as HTMLElement;
-
-    if (activeLink) {
-      const top = activeLink.offsetTop;
-      const height = activeLink.offsetHeight;
-
-      setIndicatorStyle({
-        transform: `translateY(${top}px)`,
-        height: `${height}px`,
-        opacity: 1,
-      });
-    }
-  }, [activeId, headings]);
-
-  // IntersectionObserver for active heading tracking
-  useEffect(() => {
-    if (headings.length === 0) return;
-
-    // Reset visible tracking on re-run
-    visibleIdsRef.current.clear();
-
-    if (observerRef.current) {
-      observerRef.current.disconnect();
-    }
-
-    const callback: IntersectionObserverCallback = (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          visibleIdsRef.current.add(entry.target.id);
-        } else {
-          visibleIdsRef.current.delete(entry.target.id);
-        }
-      });
-
-      // Selection logic: first visible heading in document order
-      const firstVisible = headings.find((h) => visibleIdsRef.current.has(h.id));
-
-      if (firstVisible) {
-        setActiveId(firstVisible.id);
-      } else {
-        // Fallback: If nothing is visible, determine if we are at the top or bottom
-        const firstEl = document.getElementById(headings[0].id);
-        if (firstEl) {
-          const rect = firstEl.getBoundingClientRect();
-          if (rect.top > 200) {
-            setActiveId(headings[0].id);
-            return;
-          }
-        }
-        
-        // If we are deep in the doc, don't change it (keep previous)
-      }
-    };
-
-    const observerOptions: IntersectionObserverInit = {
-      root: document.querySelector(".boltdocs-content"),
-      rootMargin: "-20% 0px -70% 0px",
-      threshold: [0, 1],
-    };
-
-    observerRef.current = new IntersectionObserver(callback, observerOptions);
-
-    const observeHeadings = () => {
-      headings.forEach(({ id }) => {
-        const el = document.getElementById(id);
-        if (el) {
-          observerRef.current!.observe(el);
-        }
-      });
-    };
-
-    observeHeadings();
-    const timeoutId = setTimeout(observeHeadings, 1000);
-
-    const handleScroll = () => {
-      const scrollPosition = window.innerHeight + window.pageYOffset;
-      const bodyHeight = document.documentElement.scrollHeight;
-
-      if (scrollPosition >= bodyHeight - 50) {
-        setActiveId(headings[headings.length - 1].id);
-      }
-    };
-
-    window.addEventListener("scroll", handleScroll, { passive: true });
-
-    return () => {
-      observerRef.current?.disconnect();
-      clearTimeout(timeoutId);
-      window.removeEventListener("scroll", handleScroll);
-    };
-  }, [headings, location.pathname]);
-
-  // Autoscroll TOC list when the activeId changes
-  useEffect(() => {
-    if (!activeId || !listRef.current) return;
-
-    const activeLink = listRef.current.querySelector(
-      `a[href="#${activeId}"]`,
-    ) as HTMLElement;
-
-    if (activeLink) {
-      const container = listRef.current.parentElement as HTMLElement;
-      if (!container) return;
-
-      const linkRect = activeLink.getBoundingClientRect();
-      const containerRect = container.getBoundingClientRect();
-
-      const isVisible =
-        linkRect.top >= containerRect.top &&
-        linkRect.bottom <= containerRect.bottom;
-
-      if (!isVisible) {
-        activeLink.scrollIntoView({
-          behavior: "auto",
-          block: "nearest",
-        });
-      }
-    }
-  }, [activeId]);
-
-  const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
-      e.preventDefault();
-      const el = document.getElementById(id);
-      if (el) {
-        el.scrollIntoView({
-          behavior: "smooth",
-        });
-
-        setActiveId(id);
-        window.history.pushState(null, "", `#${id}`);
-      }
-    },
-    [],
-  );
-
-  if (headings.length === 0) return null;
-
-  return (
-    <nav className="boltdocs-on-this-page" aria-label="Table of contents">
-      <p className="on-this-page-title">On this page</p>
-      <div className="on-this-page-container">
-        <div className="on-this-page-list-container">
-          <div className="toc-indicator" style={indicatorStyle} />
-          <ul className="on-this-page-list" ref={listRef}>
-            {headings.map((h) => (
-              <li key={h.id} className={h.level === 3 ? "toc-indent" : ""}>
-                <a
-                  href={`#${h.id}`}
-                  className={`toc-link ${activeId === h.id ? "active" : ""}`}
-                  aria-current={activeId === h.id ? "true" : undefined}
-                  onClick={(e) => handleClick(e, h.id)}
-                >
-                  {h.text}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-
-      {/* Need help? section */}
-      {(editLink || communityHelp) && (
-        <div className="toc-help">
-          <p className="toc-help-title">Need help?</p>
-          <ul className="toc-help-links">
-            {editLink && filePath && (
-              <li>
-                <a
-                  href={editLink.replace(":path", filePath)}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="toc-help-link"
-                >
-                  <Pencil size={16} />
-                  Edit this page
-                </a>
-              </li>
-            )}
-            {communityHelp && (
-              <li>
-                <a
-                  href={communityHelp}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="toc-help-link"
-                >
-                  <CircleHelp size={16} />
-                  Community help
-                </a>
-              </li>
-            )}
-          </ul>
-        </div>
-      )}
-    </nav>
-  );
-}

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

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

package/src/client/theme/ui/OnThisPage/toc.css

@@ -1,152 +0,0 @@
-/* ═══════════════════════════════════════════════════════════
-   ON THIS PAGE (TOC)
-   ═══════════════════════════════════════════════════════════ */
-.boltdocs-on-this-page {
-  width: var(--ld-toc-width);
-  flex-shrink: 0;
-  padding: 1.5rem 1rem;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  /* Hardware acceleration */
-  transform: translate3d(0, 0, 0);
-  backface-visibility: hidden;
-}
-
-.on-this-page-title {
-  font-size: 0.6875rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--ld-text-dim);
-  margin: 0 0 0.75rem;
-  padding-left: 0.75rem;
-  flex-shrink: 0;
-}
-
-.on-this-page-container {
-  position: relative;
-  padding-left: 2px;
-  flex: 0 1 auto;
-  min-height: 0; /* Important for children overflow */
-  display: flex;
-  flex-direction: column;
-}
-
-.on-this-page-list-container {
-  overflow-y: auto;
-  max-height: 50vh; /* Constrain height for large docs */
-  flex: 0 1 auto;
-  position: relative;
-  scrollbar-width: none;
-}
-
-.on-this-page-list-container::-webkit-scrollbar {
-  display: none;
-}
-
-.on-this-page-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  border-left: 1px solid var(--ld-border-subtle);
-}
-
-.toc-indicator {
-  position: absolute;
-  left: 0;
-  width: 2px;
-  background-color: var(--ld-color-accent);
-  transition:
-    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-    height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-    opacity 0.2s ease;
-  z-index: 1;
-  border-radius: 2px;
-  pointer-events: none;
-  opacity: 0;
-}
-
-.on-this-page-list li {
-  margin: 0;
-}
-
-.on-this-page-list li.toc-indent {
-  padding-left: 0.75rem;
-}
-
-.toc-link {
-  display: block;
-  padding: 0.35rem 0.75rem;
-  font-size: 0.8125rem;
-  color: var(--ld-text-dim);
-  text-decoration: none;
-  border-left: 2px solid transparent;
-  margin-left: -2px;
-  line-height: 1.4;
-  transition:
-    color 0.2s,
-    font-weight 0.2s;
-}
-
-.toc-link:hover {
-  color: var(--ld-text-main);
-}
-
-.toc-link.active {
-  color: var(--ld-color-primary);
-  font-weight: 500;
-}
-
-/* ─── Need Help Section ──────────────────────────────────── */
-.toc-help {
-  margin-top: 1.5rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--ld-border-subtle);
-  flex-shrink: 0;
-}
-
-.toc-help-title {
-  font-size: 0.6875rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--ld-text-dim);
-  margin: 0 0 0.5rem;
-  padding-left: 0.75rem;
-}
-
-.toc-help-links {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.toc-help-links li {
-  margin-bottom: 2px;
-}
-
-.toc-help-link {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.3rem 0.75rem;
-  font-size: 0.8rem;
-  color: var(--ld-text-dim);
-  text-decoration: none;
-  border-radius: var(--ld-radius-md);
-  transition:
-    color 0.2s,
-    background-color 0.2s;
-}
-
-.toc-help-link:hover {
-  color: var(--ld-text-main);
-  background-color: var(--ld-bg-mute);
-}
-
-.toc-help-link svg {
-  width: 14px;
-  height: 14px;
-  opacity: 0.6;
-}

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

@@ -1,18 +0,0 @@
-import { Zap } from "lucide-react";
-
-export function PoweredBy() {
-  return (
-    <div className="powered-by-container">
-      <a
-        href="https://github.com/jesusalcaladev/boltdocs"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="powered-by-link"
-      >
-        <Zap className="powered-by-icon" size={12} fill="currentColor" />
-        <span>Powered by</span>
-        <span className="powered-by-brand">LiteDocs</span>
-      </a>
-    </div>
-  );
-}

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

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

package/src/client/theme/ui/PoweredBy/powered-by.css

@@ -1,76 +0,0 @@
-.powered-by-container {
-  display: flex;
-  justify-content: center;
-  padding: 1rem 0.6rem;
-}
-
-.powered-by-link {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-  padding: 0.45rem 1rem;
-  border-radius: var(--ld-radius-full);
-  background: rgba(255, 255, 255, 0.03);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  color: var(--ld-text-dim);
-  font-size: 0.725rem;
-  font-weight: 500;
-  text-decoration: none;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  letter-spacing: 0.01em;
-  overflow: hidden;
-}
-
-.powered-by-link::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.05),
-    transparent
-  );
-  transition: 0.5s;
-}
-
-.powered-by-link:hover::before {
-  left: 100%;
-}
-
-.powered-by-link:hover {
-  background: rgba(255, 255, 255, 0.06);
-  border-color: rgba(255, 255, 255, 0.2);
-  color: var(--ld-text-main);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-}
-
-.powered-by-icon {
-  color: var(--ld-color-primary);
-  filter: drop-shadow(0 0 4px var(--ld-color-primary));
-  transition: transform 0.3s ease;
-}
-
-.powered-by-link:hover .powered-by-icon {
-  transform: scale(1.2) rotate(-10deg);
-  filter: drop-shadow(0 0 8px var(--ld-color-primary));
-}
-
-.powered-by-brand {
-  color: var(--ld-color-primary);
-  font-weight: 700;
-  text-shadow: 0 0 10px rgba(var(--ld-color-primary-rgb, 56, 189, 248), 0.3);
-}
-
-@media (max-width: 768px) {
-  .powered-by-container {
-    padding: 0.75rem 0.5rem;
-  }
-}

package/src/client/theme/ui/ProgressBar/ProgressBar.css

@@ -1,17 +0,0 @@
-.boltdocs-progress-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  z-index: 1000;
-  pointer-events: none;
-  background: transparent;
-}
-
-.boltdocs-progress-bar {
-  height: 100%;
-  background: linear-gradient(90deg, var(--ld-color-primary), var(--ld-gradient-to, var(--ld-color-primary)));
-  box-shadow: 0 0 8px var(--ld-color-primary-glow);
-  transition: width 0.1s ease-out;
-}

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

@@ -1,51 +0,0 @@
-import React, { useEffect, useState } from "react";
-import "./ProgressBar.css";
-
-export function ProgressBar() {
-  const [progress, setProgress] = useState(0);
-
-  useEffect(() => {
-    let container: Element | null = null;
-    let timer: any;
-
-    const handleScroll = () => {
-      if (!container) return;
-      const { scrollTop, scrollHeight, clientHeight } = container;
-      if (scrollHeight <= clientHeight) {
-        setProgress(0);
-        return;
-      }
-      const scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100;
-      setProgress(Math.min(100, Math.max(0, scrollPercent)));
-    };
-
-    const attachListener = () => {
-      container = document.querySelector(".boltdocs-content");
-      if (container) {
-        container.addEventListener("scroll", handleScroll);
-        handleScroll();
-        if (timer) clearInterval(timer);
-        return true;
-      }
-      return false;
-    };
-
-    if (!attachListener()) {
-      timer = setInterval(attachListener, 100);
-    }
-
-    return () => {
-      if (container) container.removeEventListener("scroll", handleScroll);
-      if (timer) clearInterval(timer);
-    };
-  }, []);
-
-  return (
-    <div className="boltdocs-progress-container">
-      <div 
-        className="boltdocs-progress-bar" 
-        style={{ width: `${progress}%` }} 
-      />
-    </div>
-  );
-}

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

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