@barodoc/theme-docs 6.1.0 → 7.1.0

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@barodoc/theme-docs",
-  "version": "6.1.0",
+  "version": "7.1.0",
   "description": "Documentation theme for Barodoc",
   "type": "module",
+  "sideEffects": false,
   "exports": {
     ".": "./src/index.ts",
+    "./theme": "./src/theme.ts",
     "./components": "./src/components/index.ts",
     "./components/*": "./src/components/*",
     "./layouts/*": "./src/layouts/*",
@@ -34,7 +36,7 @@
     "rehype-katex": "^7.0.1",
     "remark-math": "^6.0.0",
     "tailwind-merge": "^3.4.0",
-    "@barodoc/core": "6.0.0"
+    "@barodoc/core": "7.0.0"
   },
   "peerDependencies": {
     "astro": "^5.0.0",

package/src/components/Contributors.astro

@@ -27,11 +27,21 @@ if (filePath) {
       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`,
+
+        const trimmedEmail = email.trim();
+        const trimmedName = name.trim();
+
+        const noreplyMatch = trimmedEmail.match(
+          /^(\d+\+)?([^@]+)@users\.noreply\.github\.com$/
+        );
+        const avatarUrl = noreplyMatch
+          ? `https://github.com/${noreplyMatch[2]}.png?size=64`
+          : `https://gravatar.com/avatar/${await computeHash(trimmedEmail.toLowerCase())}?s=64&d=mp`;
+
+        seen.set(trimmedEmail, {
+          name: trimmedName,
+          email: trimmedEmail,
+          avatarUrl,
         });
       }
       contributors = Array.from(seen.values());
@@ -55,17 +65,23 @@ async function computeHash(input: string): Promise<string> {
   <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"
-        />
-      ))}
+      <img
+        src={contributors[0].avatarUrl}
+        alt={contributors[0].name}
+        title={contributors[0].name}
+        class="bd-contributor-avatar"
+        loading="lazy"
+        width="28"
+        height="28"
+      />
+      {contributors.length > 1 && (
+        <span
+          class="bd-contributor-count"
+          title={contributors.slice(1).map((c) => c.name).join(", ")}
+        >
+          +{contributors.length - 1}
+        </span>
+      )}
     </div>
   </div>
 )}

package/src/components/DocHeader.tsx

@@ -10,9 +10,15 @@ import {
 } from "./ui/tooltip";
 import { cn } from "../lib/utils";
 
+interface TabItem {
+  label: string;
+  href: string;
+}
+
 interface DocHeaderProps {
   siteName: string;
   logo?: string;
+  tabs?: TabItem[];
   githubUrl?: string;
   hasMultipleLocales?: boolean;
   currentLocale?: string;
@@ -46,6 +52,7 @@ function getLocalizedUrl(
 export function DocHeader({
   siteName,
   logo,
+  tabs = [],
   githubUrl,
   hasMultipleLocales,
   currentLocale = "en",
@@ -92,7 +99,7 @@ export function DocHeader({
     <TooltipProvider>
       <header className="sticky top-0 z-50 w-full min-w-0 border-b border-[var(--bd-border)] bg-[var(--bd-bg)]/95 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--bd-bg)]/80">
         <div className="flex h-14 items-center justify-between gap-2 px-4 sm:px-6 max-w-[1280px] mx-auto min-w-0">
-          {/* Logo */}
+          {/* Logo + Tabs */}
           <div className="flex items-center gap-6 min-w-0 shrink">
             <a
               href="/"
@@ -101,6 +108,27 @@ export function DocHeader({
               {logo && <img src={logo} alt={siteName} className="h-7 w-7 shrink-0" />}
               <span className="text-[15px] tracking-tight truncate">{siteName}</span>
             </a>
+            {tabs.length > 0 && (
+              <nav className="hidden md:flex items-center gap-1">
+                {tabs.map((tab) => {
+                  const isActive = currentPath === tab.href || currentPath.startsWith(tab.href + "/");
+                  return (
+                    <a
+                      key={tab.href}
+                      href={tab.href}
+                      className={cn(
+                        "px-3 py-1.5 text-[13px] font-medium rounded-lg transition-colors",
+                        isActive
+                          ? "text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-950/50"
+                          : "text-[var(--bd-text-secondary)] hover:text-[var(--bd-text)] hover:bg-[var(--bd-bg-subtle)]"
+                      )}
+                    >
+                      {tab.label}
+                    </a>
+                  );
+                })}
+              </nav>
+            )}
           </div>
 
           {/* Right side actions */}

package/src/components/Header.astro

@@ -18,6 +18,7 @@ const localeLabels: Record<string, string> = config.i18n?.labels || {};
   client:load
   siteName={config.name}
   logo={config.logo}
+  tabs={config.tabs}
   githubUrl={config.topbar?.github}
   hasMultipleLocales={hasMultipleLocales}
   currentLocale={currentLocale}

package/src/components/MobileNav.astro

@@ -58,4 +58,6 @@ const groups = config.navigation.map((group) => ({
   groups={groups} 
   siteName={config.name}
   logo={config.logo}
+  tabs={config.tabs}
+  currentPath={currentPath}
 />

package/src/components/MobileNavSheet.tsx

@@ -21,13 +21,20 @@ interface NavGroup {
   defaultOpen?: boolean;
 }
 
+interface TabItem {
+  label: string;
+  href: string;
+}
+
 interface MobileNavSheetProps {
   groups: NavGroup[];
   siteName: string;
   logo?: string;
+  tabs?: TabItem[];
+  currentPath?: string;
 }
 
-export function MobileNavSheet({ groups, siteName, logo }: MobileNavSheetProps) {
+export function MobileNavSheet({ groups, siteName, logo, tabs = [], currentPath = "" }: MobileNavSheetProps) {
   const [open, setOpen] = React.useState(false);
 
   React.useEffect(() => {
@@ -61,6 +68,27 @@ export function MobileNavSheet({ groups, siteName, logo }: MobileNavSheetProps)
           </SheetTitle>
         </SheetHeader>
         <ScrollArea className="h-[calc(100vh-65px)]">
+          {tabs.length > 0 && (
+            <div className="px-4 pt-4 pb-2 flex flex-col gap-1 border-b border-[var(--bd-border)]">
+              {tabs.map((tab) => {
+                const isActive = currentPath === tab.href || currentPath.startsWith(tab.href + "/");
+                return (
+                  <a
+                    key={tab.href}
+                    href={tab.href}
+                    className={cn(
+                      "px-3 py-2 text-sm font-medium rounded-lg transition-colors",
+                      isActive
+                        ? "text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-950/50"
+                        : "text-[var(--bd-text-secondary)] hover:text-[var(--bd-text)] hover:bg-[var(--bd-bg-subtle)]"
+                    )}
+                  >
+                    {tab.label}
+                  </a>
+                );
+              })}
+            </div>
+          )}
           <div className="px-2 py-4">
             <DocsSidebar groups={groups} />
           </div>

package/src/components/index.ts

@@ -12,6 +12,7 @@ export { DocTabs } from "./mdx/DocTabs.tsx";
 export { DocAccordion, SimpleAccordion } from "./mdx/DocAccordion.tsx";
 
 // New MDX Components (Mintlify-style)
+export { Callout } from "./mdx/Callout.tsx";
 export { CodeGroup } from "./mdx/CodeGroup.tsx";
 export { Badge } from "./mdx/Badge.tsx";
 export { Frame } from "./mdx/Frame.tsx";
@@ -28,6 +29,11 @@ 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 { Card, CardGroup } from "./mdx/Card.tsx";
+export { CodeItem } from "./mdx/CodeItem.tsx";
+export { ApiParams } from "./mdx/ApiParams.tsx";
+export { ApiParam } from "./mdx/ApiParam.tsx";
+export { ApiResponse } from "./mdx/ApiResponse.tsx";
 
 export { VersionSwitcher } from "./VersionSwitcher.tsx";
 

package/src/components/mdx/ApiParam.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+
+interface ApiParamProps {
+  name: string;
+  type: string;
+  required?: boolean;
+  description?: string;
+  children?: ReactNode;
+}
+
+export function ApiParam({ name, type, required = false, description, children }: ApiParamProps) {
+  return (
+    <div className="flex flex-col gap-1 py-3 border-b border-[var(--bd-border)] last:border-b-0">
+      <div className="flex items-center gap-2">
+        <code className="text-sm font-semibold text-[var(--bd-text)]">{name}</code>
+        <span className="text-xs text-[var(--bd-text-secondary)]">{type}</span>
+        {required && (
+          <span className="px-1.5 py-0.5 text-xs font-medium text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/30 rounded">
+            required
+          </span>
+        )}
+      </div>
+      {description && <p className="text-sm text-[var(--bd-text-secondary)]">{description}</p>}
+      {children}
+    </div>
+  );
+}

package/src/components/mdx/ApiParams.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+interface ApiParamsProps {
+  title?: string;
+  children?: ReactNode;
+}
+
+export function ApiParams({ title = "Parameters", children }: ApiParamsProps) {
+  return (
+    <div className="my-4 px-2">
+      <h4 className="text-sm font-semibold text-[var(--bd-text)] mb-2">{title}</h4>
+      <div className="border border-[var(--bd-border)] rounded-lg overflow-hidden">
+        <div className="divide-y divide-[var(--bd-border)] px-4">{children}</div>
+      </div>
+    </div>
+  );
+}

package/src/components/mdx/ApiResponse.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+interface ApiResponseProps {
+  status: number;
+  description?: string;
+  children?: ReactNode;
+}
+
+const statusColors: Record<number, string> = {
+  200: "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400",
+  201: "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400",
+  204: "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400",
+  400: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400",
+  401: "bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400",
+  403: "bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400",
+  404: "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400",
+  500: "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400",
+};
+
+export function ApiResponse({ status, description, children }: ApiResponseProps) {
+  const statusColor = statusColors[status] || "bg-gray-100 dark:bg-gray-900/30 text-gray-700 dark:text-gray-400";
+
+  return (
+    <div className="my-4 px-2">
+      <div className="flex items-center gap-2 mb-2">
+        <span className={`px-2 py-0.5 text-xs font-bold rounded ${statusColor}`}>{status}</span>
+        {description && <span className="text-sm text-[var(--bd-text-secondary)]">{description}</span>}
+      </div>
+      <div className="border border-[var(--bd-border)] rounded-lg overflow-hidden px-2">{children}</div>
+    </div>
+  );
+}

package/src/components/mdx/Callout.tsx

@@ -0,0 +1,104 @@
+import type { ReactNode } from "react";
+
+type CalloutType = "info" | "warning" | "tip" | "danger" | "note";
+
+interface CalloutProps {
+  type?: CalloutType;
+  title?: string;
+  children?: ReactNode;
+}
+
+const styles: Record<CalloutType, { container: string; iconBg: string; icon: string; title: string }> = {
+  info: {
+    container: "bg-blue-50/70 dark:bg-blue-500/10 border-l-blue-500",
+    iconBg: "bg-blue-100 dark:bg-blue-500/20",
+    icon: "text-blue-600 dark:text-blue-400",
+    title: "text-blue-900 dark:text-blue-200",
+  },
+  note: {
+    container: "bg-gray-50/70 dark:bg-gray-500/10 border-l-gray-400",
+    iconBg: "bg-gray-100 dark:bg-gray-500/20",
+    icon: "text-gray-600 dark:text-gray-400",
+    title: "text-gray-900 dark:text-gray-200",
+  },
+  warning: {
+    container: "bg-orange-50/70 dark:bg-orange-500/10 border-l-orange-500",
+    iconBg: "bg-orange-100 dark:bg-orange-500/20",
+    icon: "text-orange-600 dark:text-orange-400",
+    title: "text-orange-900 dark:text-orange-200",
+  },
+  tip: {
+    container: "bg-green-50/70 dark:bg-green-500/10 border-l-green-500",
+    iconBg: "bg-green-100 dark:bg-green-500/20",
+    icon: "text-green-600 dark:text-green-400",
+    title: "text-green-900 dark:text-green-200",
+  },
+  danger: {
+    container: "bg-red-50/70 dark:bg-red-500/10 border-l-red-500",
+    iconBg: "bg-red-100 dark:bg-red-500/20",
+    icon: "text-red-600 dark:text-red-400",
+    title: "text-red-900 dark:text-red-200",
+  },
+};
+
+const icons: Record<CalloutType, ReactNode> = {
+  info: (
+    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+  ),
+  note: (
+    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+    </svg>
+  ),
+  warning: (
+    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+    </svg>
+  ),
+  tip: (
+    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+    </svg>
+  ),
+  danger: (
+    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+  ),
+};
+
+const defaultTitles: Record<CalloutType, string> = {
+  info: "Info",
+  note: "Note",
+  warning: "Warning",
+  tip: "Tip",
+  danger: "Danger",
+};
+
+export function Callout({ type = "info", title, children }: CalloutProps) {
+  const style = styles[type];
+  const icon = icons[type];
+  const displayTitle = title || defaultTitles[type];
+
+  return (
+    <div className={`not-prose my-5 rounded-lg border-l-4 overflow-hidden ${style.container}`}>
+      <div className="px-4 py-3.5">
+        <div className="flex items-start gap-3">
+          <div className={`shrink-0 flex items-center justify-center w-6 h-6 rounded-md ${style.iconBg}`}>
+            <div className={style.icon}>{icon}</div>
+          </div>
+          <div className="flex-1 min-w-0">
+            {displayTitle && (
+              <p className={`font-semibold text-[13px] mb-1 ${style.title}`}>{displayTitle}</p>
+            )}
+            <div className="text-[13px] text-zinc-700 dark:text-zinc-300 leading-relaxed [&>p]:m-0 [&>p+p]:mt-1.5">
+              {children}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/mdx/Card.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from "react";
+
+interface CardProps {
+  title: string;
+  icon?: string;
+  href?: string;
+  children?: ReactNode;
+}
+
+export function Card({ title, icon, href, children }: CardProps) {
+  const Tag = href ? "a" : "div";
+  return (
+    <Tag
+      href={href}
+      className={`card-component not-prose group block p-4 rounded-lg border border-[var(--bd-border)] bg-[var(--bd-bg)] no-underline ${
+        href
+          ? "cursor-pointer hover:border-primary-300 dark:hover:border-primary-600 hover:shadow-md transition-all duration-200"
+          : ""
+      }`}
+    >
+      <div className="flex flex-col gap-3">
+        {icon && (
+          <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-[var(--bd-bg-subtle)] group-hover:bg-primary-50 dark:group-hover:bg-primary-950/50 transition-colors">
+            <span className="text-xl">{icon}</span>
+          </div>
+        )}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <h3 className="font-semibold text-[var(--bd-text)] group-hover:text-primary-700 dark:group-hover:text-primary-300 transition-colors">
+              {title}
+            </h3>
+            {href && (
+              <svg
+                className="w-4 h-4 text-[var(--bd-text-muted)] opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            )}
+          </div>
+          <div className="mt-1 text-sm text-[var(--bd-text-secondary)] group-hover:text-[var(--bd-text)] leading-relaxed transition-colors">
+            {children}
+          </div>
+        </div>
+      </div>
+    </Tag>
+  );
+}
+
+interface CardGroupProps {
+  cols?: 1 | 2 | 3 | 4;
+  children?: ReactNode;
+}
+
+const gridCols: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+};
+
+export function CardGroup({ cols = 2, children }: CardGroupProps) {
+  return <div className={`not-prose grid gap-5 my-6 ${gridCols[cols]}`}>{children}</div>;
+}

package/src/components/mdx/CodeItem.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+
+interface CodeItemProps {
+  title?: string;
+  children?: ReactNode;
+}
+
+export function CodeItem({ title = "", children }: CodeItemProps) {
+  return (
+    <div className="code-item" data-title={title}>
+      {children}
+    </div>
+  );
+}

package/src/index.ts

@@ -1,152 +1,2 @@
-import type { AstroIntegration } from "astro";
-import type { ThemeExport, ResolvedBarodocConfig } from "@barodoc/core";
-import mdx from "@astrojs/mdx";
-import react from "@astrojs/react";
-import tailwindcss from "@tailwindcss/vite";
-import remarkMath from "remark-math";
-import rehypeKatex from "rehype-katex";
-
-export interface DocsThemeOptions {
-  customCss?: string[];
-}
-
-/** HAST node with optional children and properties */
-interface HastNode {
-  type: string;
-  children?: HastNode[];
-  properties?: Record<string, unknown>;
-  tagName?: string;
-  value?: string;
-}
-
-function getTextContent(node: HastNode): string {
-  if (node.type === "text") return node.value ?? "";
-  if (node.children?.length) return node.children.map(getTextContent).join("");
-  return "";
-}
-
-function isEmptyLine(node: HastNode): boolean {
-  if (node.type !== "element" || node.tagName !== "span") return false;
-  const cls = node.properties?.className;
-  const isLine =
-    Array.isArray(cls) && cls.some((c) => c === "line" || (typeof c === "string" && c.includes("line")));
-  if (!isLine) return false;
-  return /^\s*$/.test(getTextContent(node));
-}
-
-/** Removes leading and trailing empty span.line so only the code area is visible. */
-function createTrimEmptyLinesTransformer() {
-  return {
-    name: "barodoc-trim-empty-lines",
-    code(node: HastNode) {
-      const lines = node.children;
-      if (!lines?.length) return;
-      let start = 0;
-      let end = lines.length;
-      while (start < end && isEmptyLine(lines[start])) start++;
-      while (end > start && isEmptyLine(lines[end - 1])) end--;
-      node.children = lines.slice(start, end);
-    },
-  };
-}
-
-function createLineNumbersTransformer() {
-  return {
-    name: "barodoc-line-numbers",
-    pre(node: { properties?: Record<string, unknown> }) {
-      (this as { addClassToHast: (node: unknown, cls: string) => void }).addClassToHast(node, "line-numbers");
-    },
-  };
-}
-
-function createThemeIntegration(
-  config: ResolvedBarodocConfig,
-  options?: DocsThemeOptions
-): AstroIntegration {
-  const lineNumbers = config?.lineNumbers === true;
-  return {
-    name: "@barodoc/theme-docs",
-    hooks: {
-      "astro:config:setup": async ({ updateConfig, injectRoute, logger }) => {
-        logger.info("Setting up Barodoc docs theme...");
-
-        // Inject routes
-        injectRoute({
-          pattern: "/",
-          entrypoint: "@barodoc/theme-docs/pages/index.astro",
-        });
-
-        injectRoute({
-          pattern: "/docs/[...slug]",
-          entrypoint: "@barodoc/theme-docs/pages/docs/[...slug].astro",
-        });
-
-        // Blog routes
-        if (config?.blog?.enabled !== false) {
-          injectRoute({
-            pattern: "/blog",
-            entrypoint: "@barodoc/theme-docs/pages/blog/index.astro",
-          });
-          injectRoute({
-            pattern: "/blog/[...slug]",
-            entrypoint: "@barodoc/theme-docs/pages/blog/[...slug].astro",
-          });
-        }
-
-        // Changelog route
-        injectRoute({
-          pattern: "/changelog",
-          entrypoint: "@barodoc/theme-docs/pages/changelog/index.astro",
-        });
-
-        // Update Astro config with integrations and Vite plugins
-        updateConfig({
-          integrations: [
-            mdx({
-              remarkPlugins: [remarkMath],
-              rehypePlugins: [rehypeKatex],
-            }),
-            react(),
-          ],
-          vite: {
-            plugins: [tailwindcss()],
-            optimizeDeps: {
-              include: ["mermaid"],
-            },
-            ssr: {
-              noExternal: [],
-            },
-            resolve: {
-              dedupe: ["react", "react-dom"],
-            },
-          },
-          markdown: {
-            shikiConfig: {
-              themes: {
-                light: "github-light",
-                dark: "github-dark",
-              },
-              transformers: [
-                createTrimEmptyLinesTransformer(),
-                ...(lineNumbers ? [createLineNumbersTransformer()] : []),
-              ],
-            },
-          },
-        });
-
-        logger.info("Docs theme routes injected");
-      },
-    },
-  };
-}
-
-export default function docsTheme(options?: DocsThemeOptions): ThemeExport {
-  return {
-    name: "@barodoc/theme-docs",
-    integration: (config) => createThemeIntegration(config, options),
-    styles: options?.customCss || [],
-  };
-}
-
-// Re-export components for easy access
+// Component exports - safe for client-side bundling
 export * from "./components/index.ts";

package/src/layouts/BlogLayout.astro

@@ -2,6 +2,7 @@
 import BaseLayout from "./BaseLayout.astro";
 import Header from "../components/Header.astro";
 import Banner from "../components/Banner.astro";
+import CodeCopy from "../components/CodeCopy.astro";
 import { defaultLocale } from "virtual:barodoc/i18n";
 import { getLocaleFromPath } from "@barodoc/core";
 
@@ -10,12 +11,13 @@ interface Props {
   description?: string;
   date?: Date;
   author?: string;
+  avatar?: string;
   image?: string;
   tags?: string[];
   readingTime?: string;
 }
 
-const { title, description, date, author, image, tags = [], readingTime } = Astro.props;
+const { title, description, date, author, avatar, image, tags = [], readingTime } = Astro.props;
 const currentPath = Astro.url.pathname;
 const i18nConfig = { defaultLocale, locales: [defaultLocale] };
 const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
@@ -47,7 +49,18 @@ const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
           </p>
         )}
         <div class="mt-4 flex items-center gap-3 text-sm text-[var(--bd-text-muted)]">
-          {author && <span>{author}</span>}
+          {author && (
+            <span class="flex items-center gap-2">
+              {avatar && (
+                <img
+                  src={avatar}
+                  alt={author}
+                  class="w-6 h-6 rounded-full object-cover ring-1 ring-[var(--bd-border)]"
+                />
+              )}
+              <span>{author}</span>
+            </span>
+          )}
           {author && date && <span class="text-[var(--bd-border)]">&middot;</span>}
           {date && (
             <time datetime={date.toISOString()}>
@@ -75,6 +88,7 @@ const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
       <div class="prose prose-gray dark:prose-invert max-w-none">
         <slot />
       </div>
+      <CodeCopy />
 
       <!-- Back to blog -->
       <div class="mt-12 pt-8 border-t border-[var(--bd-border)]">

package/src/pages/blog/[...slug].astro

@@ -31,6 +31,7 @@ const readTime = readingTime(post.body ?? "");
   description={post.data.description || post.data.excerpt}
   date={post.data.date ? new Date(post.data.date) : undefined}
   author={post.data.author}
+  avatar={post.data.avatar}
   image={post.data.image}
   tags={post.data.tags}
   readingTime={readTime.text}

package/src/pages/blog/index.astro

@@ -74,7 +74,18 @@ const sortedPosts = posts.sort((a, b) => {
                   </p>
                 )}
                 <div class="mt-auto pt-2 flex items-center gap-2 text-xs text-[var(--bd-text-muted)]">
-                  {post.data.author && <span>{post.data.author}</span>}
+                  {post.data.author && (
+                    <span class="flex items-center gap-1.5">
+                      {post.data.avatar && (
+                        <img
+                          src={post.data.avatar}
+                          alt={post.data.author}
+                          class="w-4 h-4 rounded-full object-cover"
+                        />
+                      )}
+                      <span>{post.data.author}</span>
+                    </span>
+                  )}
                   {post.data.author && post.data.date && <span>&middot;</span>}
                   {post.data.date && (
                     <time datetime={new Date(post.data.date).toISOString()}>

package/src/pages/docs/[...slug].astro

@@ -125,7 +125,7 @@ breadcrumbs.push({ label: doc.data.title });
   lastUpdated={lastUpdated}
   breadcrumbs={breadcrumbs}
   readingTime={readTime.text}
-  filePath={doc.id}
+  filePath={`src/content/docs/${doc.id}`}
 >
   {category && (
     <p class="text-xs font-semibold uppercase tracking-widest text-primary-600 dark:text-primary-400 mb-3">

package/src/pages/index.astro

@@ -43,10 +43,24 @@ const features = [
     <header class="sticky top-0 z-50 border-b border-[var(--bd-border)] bg-[var(--bd-bg)]/95 backdrop-blur-md">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex h-16 items-center justify-between">
-          <a href="/" class="flex items-center gap-2.5 font-semibold text-[var(--bd-text)]">
-            {config.logo && <img src={config.logo} alt={config.name} class="h-7 w-7" />}
-            <span class="text-lg">{config.name}</span>
-          </a>
+          <div class="flex items-center gap-6">
+            <a href="/" class="flex items-center gap-2.5 font-semibold text-[var(--bd-text)]">
+              {config.logo && <img src={config.logo} alt={config.name} class="h-7 w-7" />}
+              <span class="text-lg">{config.name}</span>
+            </a>
+            {config.tabs && config.tabs.length > 0 && (
+              <nav class="hidden md:flex items-center gap-1">
+                {config.tabs.map((tab: { label: string; href: string }) => (
+                  <a
+                    href={tab.href}
+                    class="px-3 py-1.5 text-sm font-medium rounded-lg text-[var(--bd-text-secondary)] hover:text-[var(--bd-text)] hover:bg-[var(--bd-bg-subtle)] transition-colors"
+                  >
+                    {tab.label}
+                  </a>
+                ))}
+              </nav>
+            )}
+          </div>
           <div class="flex items-center gap-2">
             {config.topbar?.github && (
               <a

package/src/styles/global.css

@@ -983,6 +983,22 @@
   margin-left: 0;
 }
 
+.bd-contributor-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 9999px;
+  border: 2px solid var(--bd-bg);
+  margin-left: -0.375rem;
+  background: var(--bd-bg-subtle);
+  color: var(--bd-text-muted);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  cursor: default;
+}
+
 /* ==========================================================================
    Version Switcher
    ========================================================================== */

package/src/theme.ts

@@ -0,0 +1,145 @@
+import type { AstroIntegration } from "astro";
+import type { ThemeExport, ResolvedBarodocConfig } from "@barodoc/core";
+import mdx from "@astrojs/mdx";
+import react from "@astrojs/react";
+import tailwindcss from "@tailwindcss/vite";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+
+export interface DocsThemeOptions {
+  customCss?: string[];
+}
+
+/** HAST node with optional children and properties */
+interface HastNode {
+  type: string;
+  children?: HastNode[];
+  properties?: Record<string, unknown>;
+  tagName?: string;
+  value?: string;
+}
+
+function getTextContent(node: HastNode): string {
+  if (node.type === "text") return node.value ?? "";
+  if (node.children?.length) return node.children.map(getTextContent).join("");
+  return "";
+}
+
+function isEmptyLine(node: HastNode): boolean {
+  if (node.type !== "element" || node.tagName !== "span") return false;
+  const cls = node.properties?.className;
+  const isLine =
+    Array.isArray(cls) && cls.some((c) => c === "line" || (typeof c === "string" && c.includes("line")));
+  if (!isLine) return false;
+  return /^\s*$/.test(getTextContent(node));
+}
+
+/** Removes leading and trailing empty span.line so only the code area is visible. */
+function createTrimEmptyLinesTransformer() {
+  return {
+    name: "barodoc-trim-empty-lines",
+    code(node: HastNode) {
+      const lines = node.children;
+      if (!lines?.length) return;
+      let start = 0;
+      let end = lines.length;
+      while (start < end && isEmptyLine(lines[start])) start++;
+      while (end > start && isEmptyLine(lines[end - 1])) end--;
+      node.children = lines.slice(start, end);
+    },
+  };
+}
+
+function createLineNumbersTransformer() {
+  return {
+    name: "barodoc-line-numbers",
+    pre(node: { properties?: Record<string, unknown> }) {
+      (this as { addClassToHast: (node: unknown, cls: string) => void }).addClassToHast(node, "line-numbers");
+    },
+  };
+}
+
+function createThemeIntegration(
+  config: ResolvedBarodocConfig,
+  options?: DocsThemeOptions
+): AstroIntegration {
+  const lineNumbers = config?.lineNumbers === true;
+  return {
+    name: "@barodoc/theme-docs",
+    hooks: {
+      "astro:config:setup": async ({ updateConfig, injectRoute, logger }) => {
+        logger.info("Setting up Barodoc docs theme...");
+
+        injectRoute({
+          pattern: "/",
+          entrypoint: "@barodoc/theme-docs/pages/index.astro",
+        });
+
+        injectRoute({
+          pattern: "/docs/[...slug]",
+          entrypoint: "@barodoc/theme-docs/pages/docs/[...slug].astro",
+        });
+
+        if (config?.blog?.enabled !== false) {
+          injectRoute({
+            pattern: "/blog",
+            entrypoint: "@barodoc/theme-docs/pages/blog/index.astro",
+          });
+          injectRoute({
+            pattern: "/blog/[...slug]",
+            entrypoint: "@barodoc/theme-docs/pages/blog/[...slug].astro",
+          });
+        }
+
+        injectRoute({
+          pattern: "/changelog",
+          entrypoint: "@barodoc/theme-docs/pages/changelog/index.astro",
+        });
+
+        updateConfig({
+          integrations: [
+            mdx({
+              remarkPlugins: [remarkMath],
+              rehypePlugins: [rehypeKatex],
+            }),
+            react(),
+          ],
+          vite: {
+            plugins: [tailwindcss()],
+            optimizeDeps: {
+              include: ["mermaid"],
+            },
+            ssr: {
+              noExternal: [],
+            },
+            resolve: {
+              dedupe: ["react", "react-dom"],
+            },
+          },
+          markdown: {
+            shikiConfig: {
+              themes: {
+                light: "github-light",
+                dark: "github-dark",
+              },
+              transformers: [
+                createTrimEmptyLinesTransformer(),
+                ...(lineNumbers ? [createLineNumbersTransformer()] : []),
+              ],
+            },
+          },
+        });
+
+        logger.info("Docs theme routes injected");
+      },
+    },
+  };
+}
+
+export default function docsTheme(options?: DocsThemeOptions): ThemeExport {
+  return {
+    name: "@barodoc/theme-docs",
+    integration: (config) => createThemeIntegration(config, options),
+    styles: options?.customCss || [],
+  };
+}