@barodoc/theme-docs 5.0.0 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barodoc/theme-docs",
-  "version": "5.0.0",
+  "version": "6.1.0",
   "description": "Documentation theme for Barodoc",
   "type": "module",
   "exports": {
@@ -28,9 +28,13 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.563.0",
+    "medium-zoom": "^1.1.0",
     "mermaid": "^11.12.2",
+    "reading-time": "^1.5.0",
+    "rehype-katex": "^7.0.1",
+    "remark-math": "^6.0.0",
     "tailwind-merge": "^3.4.0",
-    "@barodoc/core": "5.0.0"
+    "@barodoc/core": "6.0.0"
   },
   "peerDependencies": {
     "astro": "^5.0.0",

package/src/components/Contributors.astro

@@ -0,0 +1,71 @@
+---
+import { execSync } from "node:child_process";
+
+interface Props {
+  filePath?: string;
+}
+
+interface Contributor {
+  name: string;
+  email: string;
+  avatarUrl: string;
+}
+
+const { filePath } = Astro.props;
+
+let contributors: Contributor[] = [];
+
+if (filePath) {
+  try {
+    const raw = execSync(
+      `git log --format='%aN|%aE' -- "${filePath}"`,
+      { encoding: "utf-8", timeout: 5000 }
+    ).trim();
+
+    if (raw) {
+      const seen = new Map<string, Contributor>();
+      for (const line of raw.split("\n")) {
+        const [name, email] = line.split("|");
+        if (!name || seen.has(email)) continue;
+        const hash = email.trim().toLowerCase();
+        seen.set(email, {
+          name: name.trim(),
+          email: email.trim(),
+          avatarUrl: `https://gravatar.com/avatar/${await computeHash(hash)}?s=64&d=mp`,
+        });
+      }
+      contributors = Array.from(seen.values());
+    }
+  } catch {
+    // git not available or file not tracked
+  }
+}
+
+async function computeHash(input: string): Promise<string> {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(input);
+  const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+  return Array.from(new Uint8Array(hashBuffer))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+}
+---
+
+{contributors.length > 0 && (
+  <div class="bd-contributors">
+    <span class="bd-contributors-label">Contributors</span>
+    <div class="bd-contributors-avatars">
+      {contributors.map((c) => (
+        <img
+          src={c.avatarUrl}
+          alt={c.name}
+          title={c.name}
+          class="bd-contributor-avatar"
+          loading="lazy"
+          width="28"
+          height="28"
+        />
+      ))}
+    </div>
+  </div>
+)}

package/src/components/KeyboardShortcuts.astro

@@ -0,0 +1,108 @@
+---
+// Keyboard shortcuts: Cmd/Ctrl+K → search, ←/→ → prev/next, ? → help modal
+---
+
+<script>
+  function initKeyboardShortcuts() {
+    if (window.__bdShortcutsInit) return;
+    window.__bdShortcutsInit = true;
+
+    const isMac = navigator.platform.toUpperCase().includes('MAC');
+    const modLabel = isMac ? '⌘' : 'Ctrl';
+
+    function isInputFocused(): boolean {
+      const el = document.activeElement;
+      if (!el) return false;
+      const tag = el.tagName;
+      return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || (el as HTMLElement).isContentEditable;
+    }
+
+    function showShortcutsModal() {
+      if (document.querySelector('.bd-shortcuts-overlay')) return;
+
+      const overlay = document.createElement('div');
+      overlay.className = 'bd-shortcuts-overlay';
+      overlay.addEventListener('click', (e) => {
+        if (e.target === overlay) overlay.remove();
+      });
+
+      overlay.innerHTML = `
+        <div class="bd-shortcuts-modal">
+          <h3>Keyboard Shortcuts</h3>
+          <div class="bd-shortcut-row">
+            <span class="bd-shortcut-desc">Search</span>
+            <span class="bd-shortcut-keys"><kbd class="bd-kbd">${modLabel}</kbd><kbd class="bd-kbd">K</kbd></span>
+          </div>
+          <div class="bd-shortcut-row">
+            <span class="bd-shortcut-desc">Previous page</span>
+            <span class="bd-shortcut-keys"><kbd class="bd-kbd">←</kbd></span>
+          </div>
+          <div class="bd-shortcut-row">
+            <span class="bd-shortcut-desc">Next page</span>
+            <span class="bd-shortcut-keys"><kbd class="bd-kbd">→</kbd></span>
+          </div>
+          <div class="bd-shortcut-row">
+            <span class="bd-shortcut-desc">Show shortcuts</span>
+            <span class="bd-shortcut-keys"><kbd class="bd-kbd">?</kbd></span>
+          </div>
+        </div>
+      `;
+
+      document.body.appendChild(overlay);
+    }
+
+    document.addEventListener('keydown', (e: KeyboardEvent) => {
+      // Close modal on Escape
+      if (e.key === 'Escape') {
+        const modal = document.querySelector('.bd-shortcuts-overlay');
+        if (modal) { modal.remove(); return; }
+      }
+
+      // Cmd/Ctrl+K → open search
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        const searchBtn = document.querySelector('[data-search-trigger]') as HTMLButtonElement;
+        if (searchBtn) searchBtn.click();
+        return;
+      }
+
+      if (isInputFocused()) return;
+
+      // ? → show shortcuts
+      if (e.key === '?' || (e.shiftKey && e.key === '/')) {
+        e.preventDefault();
+        showShortcutsModal();
+        return;
+      }
+
+      // ← → prev page
+      if (e.key === 'ArrowLeft' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        const prev = document.querySelector('nav[aria-label="Page navigation"] a:first-of-type') as HTMLAnchorElement;
+        if (prev) { prev.click(); return; }
+      }
+
+      // → → next page
+      if (e.key === 'ArrowRight' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        const links = document.querySelectorAll('nav[aria-label="Page navigation"] a');
+        const next = links[links.length - 1] as HTMLAnchorElement;
+        if (next && links.length > 1) { next.click(); return; }
+        if (next && links.length === 1) {
+          const parent = next.closest('.col-span-1');
+          if (parent && parent === parent.parentElement?.lastElementChild) { next.click(); }
+        }
+      }
+    });
+  }
+
+  initKeyboardShortcuts();
+  document.addEventListener('astro:page-load', () => {
+    window.__bdShortcutsInit = false;
+    initKeyboardShortcuts();
+  });
+
+  declare global {
+    interface Window {
+      __bdShortcutsInit?: boolean;
+    }
+  }
+</script>

package/src/components/VersionSwitcher.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+
+interface VersionConfig {
+  label: string;
+  path: string;
+}
+
+interface VersionSwitcherProps {
+  versions: VersionConfig[];
+  currentPath: string;
+}
+
+export function VersionSwitcher({ versions, currentPath }: VersionSwitcherProps) {
+  if (!versions || versions.length <= 1) return null;
+
+  const current = versions.find((v) => currentPath.includes(`/docs/${v.path}/`)) || versions[0];
+
+  function switchVersion(target: VersionConfig) {
+    const regex = /\/docs\/([^/]+)\//;
+    const match = currentPath.match(regex);
+    if (match) {
+      const newPath = currentPath.replace(`/docs/${match[1]}/`, `/docs/${target.path}/`);
+      window.location.href = newPath;
+    } else {
+      window.location.href = `/docs/${target.path}/`;
+    }
+  }
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button className="bd-version-trigger">
+          {current.label}
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content className="bd-version-menu" sideOffset={4} align="start">
+          {versions.map((v) => (
+            <DropdownMenu.Item
+              key={v.path}
+              className={`bd-version-item ${v.path === current.path ? "bd-version-active" : ""}`}
+              onSelect={() => switchVersion(v)}
+            >
+              {v.label}
+              {v.path === current.path && (
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              )}
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+}

package/src/components/index.ts

@@ -24,6 +24,12 @@ export { Expandable, ExpandableList, ExpandableItem } from "./mdx/Expandable.tsx
 export { Icon, CheckIcon, XIcon, InfoIcon, WarningIcon } from "./mdx/Icon.tsx";
 export { Steps, Step } from "./mdx/Steps.tsx";
 export { Mermaid } from "./mdx/Mermaid.tsx";
+export { ImageZoom } from "./mdx/ImageZoom.tsx";
+export { Video } from "./mdx/Video.tsx";
+export { ApiPlayground } from "./mdx/ApiPlayground.tsx";
+export { ApiEndpoint } from "./mdx/ApiEndpoint.tsx";
+
+export { VersionSwitcher } from "./VersionSwitcher.tsx";
 
 // Legacy exports for backwards compatibility
 export { Tabs, Tab } from "./mdx/Tabs.tsx";

package/src/components/mdx/ApiEndpoint.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+
+interface ApiEndpointProps {
+  method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+  path: string;
+  summary?: string;
+  id?: string;
+}
+
+const METHOD_COLORS: Record<string, string> = {
+  GET: "bd-method-get",
+  POST: "bd-method-post",
+  PUT: "bd-method-put",
+  PATCH: "bd-method-patch",
+  DELETE: "bd-method-delete",
+};
+
+export function ApiEndpoint({ method, path, summary, id }: ApiEndpointProps) {
+  const slug = id || `${method.toLowerCase()}-${path.replace(/[^a-z0-9]+/gi, "-").replace(/^-|-$/g, "")}`;
+
+  return (
+    <div className="bd-api-endpoint" id={slug}>
+      <a href={`#${slug}`} className="bd-api-endpoint-anchor" aria-label={`${method} ${path}`}>
+        <div className="bd-api-endpoint-header">
+          <span className={cn("bd-api-endpoint-method", METHOD_COLORS[method])}>
+            {method}
+          </span>
+          <code className="bd-api-endpoint-path">{path}</code>
+        </div>
+        {summary && <p className="bd-api-endpoint-summary">{summary}</p>}
+      </a>
+    </div>
+  );
+}