@barodoc/theme-docs 6.0.0 → 7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barodoc/theme-docs",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "description": "Documentation theme for Barodoc",
   "type": "module",
   "exports": {
@@ -34,7 +34,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

@@ -27,6 +27,7 @@ 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";
 

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>
+  );
+}