boltdocs 1.0.0

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

@@ -0,0 +1,64 @@
+/* ═══════════════════════════════════════════════════════════
+   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

@@ -0,0 +1,192 @@
+import React, { useEffect, useState, useRef, useCallback } from "react";
+import { useLocation } from "react-router-dom";
+import { Pencil, CircleHelp } 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>("");
+  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({});
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const location = useLocation();
+  const listRef = useRef<HTMLUListElement>(null);
+
+  // Reset active ID when path changes
+  useEffect(() => {
+    if (headings.length > 0) {
+      // Check if there's a hash in the URL
+      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
+  useEffect(() => {
+    if (!activeId || !listRef.current) return;
+
+    const activeElement = listRef.current.querySelector(
+      `a[href="#${activeId}"]`,
+    ) as HTMLElement;
+
+    if (activeElement) {
+      const { offsetTop, offsetHeight } = activeElement;
+      setIndicatorStyle({
+        transform: `translateY(${offsetTop}px)`,
+        height: `${offsetHeight}px`,
+        opacity: 1,
+      });
+    }
+  }, [activeId, headings]);
+
+  // IntersectionObserver for active heading tracking
+  useEffect(() => {
+    if (headings.length === 0) return;
+
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+    }
+
+    const callback: IntersectionObserverCallback = (entries) => {
+      // Find all entries that are intersecting
+      const visibleEntries = entries.filter((entry) => entry.isIntersecting);
+
+      if (visibleEntries.length > 0) {
+        // If we have visible entries, find the one closest to the top of the viewport
+        // But with a priority for ones that just entered from the top
+        const closest = visibleEntries.reduce((prev, curr) => {
+          return Math.abs(curr.boundingClientRect.top - 100) <
+            Math.abs(prev.boundingClientRect.top - 100)
+            ? curr
+            : prev;
+        });
+        setActiveId(closest.target.id);
+      }
+    };
+
+    observerRef.current = new IntersectionObserver(callback, {
+      rootMargin: "-100px 0px -70% 0px",
+      threshold: [0, 1],
+    });
+
+    const observeHeadings = () => {
+      headings.forEach(({ id }) => {
+        const el = document.getElementById(id);
+        if (el) {
+          observerRef.current!.observe(el);
+        }
+      });
+    };
+
+    // Initial observation
+    observeHeadings();
+
+    // Re-observe if content changes (e.g. after some delay to ensure rendering)
+    const timeoutId = setTimeout(observeHeadings, 1000);
+
+    return () => {
+      observerRef.current?.disconnect();
+      clearTimeout(timeoutId);
+    };
+  }, [headings, location.pathname]);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
+      e.preventDefault();
+      const el = document.getElementById(id);
+      if (el) {
+        const offset = 80;
+        const bodyRect = document.body.getBoundingClientRect().top;
+        const elementRect = el.getBoundingClientRect().top;
+        const elementPosition = elementRect - bodyRect;
+        const offsetPosition = elementPosition - offset;
+
+        window.scrollTo({
+          top: offsetPosition,
+          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="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>
+
+      {/* 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

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

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

@@ -0,0 +1,132 @@
+/* ═══════════════════════════════════════════════════════════
+   ON THIS PAGE (TOC)
+   ═══════════════════════════════════════════════════════════ */
+.boltdocs-on-this-page {
+  width: var(--ld-toc-width);
+  flex-shrink: 0;
+  padding: 1.5rem 1rem;
+  position: sticky;
+  top: var(--ld-navbar-height);
+  height: calc(100vh - var(--ld-navbar-height));
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ld-bg-mute) transparent;
+}
+
+.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;
+}
+
+.on-this-page-container {
+  position: relative;
+  padding-left: 2px;
+}
+
+.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;
+}
+
+.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: 2rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--ld-border-subtle);
+}
+
+.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-muted);
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+.toc-help-link svg {
+  width: 14px;
+  height: 14px;
+  opacity: 0.6;
+}

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

@@ -0,0 +1,18 @@
+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

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

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

@@ -0,0 +1,76 @@
+.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/SearchDialog/SearchDialog.tsx

@@ -0,0 +1,199 @@
+import React, { useState, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { Link } from "../Link";
+import { Search } from "lucide-react";
+import { ComponentRoute } from "../../../app";
+
+interface SearchResult {
+  title: string;
+  path: string;
+  groupTitle?: string;
+  isHeading?: boolean;
+}
+
+export function SearchDialog({ routes }: { routes: ComponentRoute[] }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setIsOpen((prev) => !prev);
+      }
+      if (e.key === "Escape" && isOpen) {
+        setIsOpen(false);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+    } else {
+      setQuery("");
+    }
+  }, [isOpen]);
+
+  const searchResults: SearchResult[] = React.useMemo(() => {
+    if (!query) {
+      return routes.slice(0, 10).map((r) => ({
+        title: r.title,
+        path: r.path,
+        groupTitle: r.groupTitle,
+      }));
+    }
+
+    const results: SearchResult[] = [];
+    const lowerQuery = query.toLowerCase();
+
+    for (const route of routes) {
+      if (route.title && route.title.toLowerCase().includes(lowerQuery)) {
+        results.push({
+          title: route.title,
+          path: route.path,
+          groupTitle: route.groupTitle,
+        });
+      }
+
+      if (route.headings) {
+        for (const heading of route.headings) {
+          if (heading.text.toLowerCase().includes(lowerQuery)) {
+            results.push({
+              title: heading.text,
+              path: `${route.path}#${heading.id}`,
+              groupTitle: route.title,
+              isHeading: true,
+            });
+          }
+        }
+      }
+    }
+
+    // Deduplicate results by path
+    const uniqueResults = [];
+    const seenPaths = new Set();
+    for (const res of results) {
+      if (!seenPaths.has(res.path)) {
+        seenPaths.add(res.path);
+        uniqueResults.push(res);
+      }
+    }
+
+    return uniqueResults.slice(0, 10);
+  }, [routes, query]);
+
+  return (
+    <>
+      <div
+        className="navbar-search"
+        role="button"
+        tabIndex={0}
+        onClick={() => setIsOpen(true)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setIsOpen(true);
+          }
+        }}
+        aria-label="Open search dialog"
+      >
+        <Search className="boltdocs-search-icon" size={18} />
+        Search docs...
+        <kbd>⌘K</kbd>
+      </div>
+
+      {isOpen &&
+        createPortal(
+          <div
+            className="boltdocs-search-overlay"
+            onPointerDown={() => setIsOpen(false)}
+          >
+            <div
+              className="boltdocs-search-modal"
+              role="dialog"
+              aria-modal="true"
+              aria-label="Search"
+              onPointerDown={(e) => e.stopPropagation()}
+            >
+              <div className="boltdocs-search-header">
+                <Search size={18} />
+                <input
+                  ref={inputRef}
+                  type="text"
+                  aria-label="Search documentation input"
+                  placeholder="Search documentation..."
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                />
+                <button
+                  className="boltdocs-search-close"
+                  onClick={() => setIsOpen(false)}
+                  aria-label="Close search"
+                >
+                  ESC
+                </button>
+              </div>
+
+              <div className="boltdocs-search-results">
+                {searchResults.length > 0 ? (
+                  searchResults.map((result) => (
+                    <Link
+                      key={result.path}
+                      to={result.path === "" ? "/" : result.path}
+                      className={`boltdocs-search-result-item ${result.isHeading ? "is-heading" : ""}`}
+                      onClick={(e) => {
+                        const isSamePath =
+                          result.path.split("#")[0] ===
+                          window.location.pathname;
+                        if (isSamePath && result.isHeading) {
+                          e.preventDefault();
+                          const id = result.path.split("#")[1];
+                          const el = document.getElementById(id);
+                          if (el) {
+                            const offset = 80;
+                            const bodyRect =
+                              document.body.getBoundingClientRect().top;
+                            const elementRect = el.getBoundingClientRect().top;
+                            const elementPosition = elementRect - bodyRect;
+                            const offsetPosition = elementPosition - offset;
+
+                            window.scrollTo({
+                              top: offsetPosition,
+                              behavior: "smooth",
+                            });
+                            window.history.pushState(null, "", `#${id}`);
+                          }
+                        }
+                        setIsOpen(false);
+                      }}
+                    >
+                      <span className="boltdocs-search-result-title">
+                        {result.isHeading ? (
+                          <span className="heading-indicator">#</span>
+                        ) : null}
+                        {result.title}
+                      </span>
+                      {result.groupTitle && (
+                        <span className="boltdocs-search-result-group">
+                          {result.groupTitle}
+                        </span>
+                      )}
+                    </Link>
+                  ))
+                ) : (
+                  <div className="boltdocs-search-empty">
+                    No results found for "{query}"
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+}

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

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