@barodoc/theme-docs 0.0.1

package/src/components/ui/sheet.tsx

@@ -0,0 +1,137 @@
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-[var(--color-bg)] p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-[var(--color-text)]", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-[var(--color-text-secondary)]", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

package/src/components/ui/tabs.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../../lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-lg bg-[var(--color-bg-secondary)] p-1 text-[var(--color-text-secondary)]",
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[var(--color-bg)] data-[state=active]:text-[var(--color-text)] data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../../lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-[var(--color-text)] px-3 py-1.5 text-xs text-[var(--color-bg)] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/index.ts

@@ -0,0 +1,74 @@
+import type { AstroIntegration } from "astro";
+import type { ThemeExport } from "@barodoc/core";
+import mdx from "@astrojs/mdx";
+import react from "@astrojs/react";
+import tailwindcss from "@tailwindcss/vite";
+
+export interface DocsThemeOptions {
+  customCss?: string[];
+}
+
+function createThemeIntegration(options?: DocsThemeOptions): AstroIntegration {
+  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",
+        });
+
+        // Inject localized routes for non-default locales
+        injectRoute({
+          pattern: "/[locale]",
+          entrypoint: "@barodoc/theme-docs/pages/index.astro",
+        });
+
+        injectRoute({
+          pattern: "/[locale]/docs/[...slug]",
+          entrypoint: "@barodoc/theme-docs/pages/docs/[...slug].astro",
+        });
+
+        // Update Astro config with integrations and Vite plugins
+        updateConfig({
+          integrations: [mdx(), react()],
+          vite: {
+            plugins: [tailwindcss()],
+            resolve: {
+              dedupe: ["react", "react-dom"],
+            },
+          },
+          markdown: {
+            shikiConfig: {
+              themes: {
+                light: "github-light",
+                dark: "github-dark",
+              },
+            },
+          },
+        });
+
+        logger.info("Docs theme routes injected");
+      },
+    },
+  };
+}
+
+export default function docsTheme(options?: DocsThemeOptions): ThemeExport {
+  return {
+    name: "@barodoc/theme-docs",
+    integration: () => createThemeIntegration(options),
+    styles: options?.customCss || [],
+  };
+}
+
+// Re-export components for easy access
+export * from "./components/index.ts";

package/src/layouts/BaseLayout.astro

@@ -0,0 +1,28 @@
+---
+import ThemeScript from "../components/ThemeScript.astro";
+import { SearchDialog } from "../components/SearchDialog";
+import "@barodoc/theme-docs/styles/global.css";
+
+interface Props {
+  title: string;
+  description?: string;
+}
+
+const { title, description = "Documentation" } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content={description} />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <title>{title}</title>
+    <ThemeScript />
+  </head>
+  <body class="min-h-screen bg-[var(--color-bg)] text-[var(--color-text)] antialiased">
+    <slot />
+    <SearchDialog client:load />
+  </body>
+</html>

package/src/layouts/DocsLayout.astro

@@ -0,0 +1,121 @@
+---
+import BaseLayout from "./BaseLayout.astro";
+import Header from "../components/Header.astro";
+import Sidebar from "../components/Sidebar.astro";
+import TableOfContents from "../components/TableOfContents.astro";
+import MobileNav from "../components/MobileNav.astro";
+import CodeCopy from "../components/CodeCopy.astro";
+import { defaultLocale } from "virtual:barodoc/i18n";
+import { getLocaleFromPath } from "@barodoc/core";
+
+interface PageLink {
+  title: string;
+  href: string;
+}
+
+interface Props {
+  title: string;
+  description?: string;
+  headings?: { depth: number; slug: string; text: string }[];
+  prevPage?: PageLink | null;
+  nextPage?: PageLink | null;
+}
+
+const { title, description, headings = [], prevPage, nextPage } = Astro.props;
+const currentPath = Astro.url.pathname;
+
+// Get locale from path
+const i18nConfig = { defaultLocale, locales: [defaultLocale] };
+const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
+---
+
+<BaseLayout title={title} description={description}>
+  <Header currentLocale={currentLocale} />
+  
+  <!-- Centered container for docs layout -->
+  <div class="w-full min-h-[calc(100vh-3.5rem)] flex justify-center">
+    <div class="flex w-full max-w-[1120px]">
+      <!-- Desktop Sidebar -->
+      <aside class="hidden lg:block w-[220px] shrink-0">
+        <div class="sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto py-6 pr-4">
+          <Sidebar currentPath={currentPath} currentLocale={currentLocale} />
+        </div>
+      </aside>
+
+      <!-- Main Content -->
+      <main class="flex-1 min-w-0 min-w-[650px] max-w-[720px]">
+        <div class="px-8 py-8">
+          <article class="prose prose-gray dark:prose-invert max-w-none">
+            <slot />
+          </article>
+          
+          <!-- Page Navigation -->
+          {(prevPage || nextPage) && (
+            <nav class="mt-8 pt-6 border-t border-[var(--color-border)]" aria-label="Page navigation">
+              <div class="grid grid-cols-2 gap-4">
+                <div class="col-span-1">
+                  {prevPage && (
+                    <a 
+                      href={prevPage.href}
+                      class="group flex flex-col gap-1 p-3 rounded-lg border border-[var(--color-border)] hover:border-primary-300 dark:hover:border-primary-700 hover:bg-[var(--color-bg-secondary)] transition-all"
+                    >
+                      <span class="text-xs text-[var(--color-text-muted)] flex items-center gap-1">
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+                        </svg>
+                        Previous
+                      </span>
+                      <span class="text-sm font-medium text-[var(--color-text)] group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
+                        {prevPage.title}
+                      </span>
+                    </a>
+                  )}
+                </div>
+                <div class="col-span-1">
+                  {nextPage && (
+                    <a 
+                      href={nextPage.href}
+                      class="group flex flex-col gap-1 p-3 rounded-lg border border-[var(--color-border)] hover:border-primary-300 dark:hover:border-primary-700 hover:bg-[var(--color-bg-secondary)] transition-all text-right"
+                    >
+                      <span class="text-xs text-[var(--color-text-muted)] flex items-center gap-1 justify-end">
+                        Next
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                        </svg>
+                      </span>
+                      <span class="text-sm font-medium text-[var(--color-text)] group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
+                        {nextPage.title}
+                      </span>
+                    </a>
+                  )}
+                </div>
+              </div>
+            </nav>
+          )}
+
+          <!-- Page footer -->
+          <footer class="mt-6 pt-4 border-t border-[var(--color-border-light)]">
+            <p class="text-sm text-[var(--color-text-muted)]">
+              Was this page helpful? <a href="#" class="text-primary-600 dark:text-primary-400 hover:underline">Give us feedback</a>
+            </p>
+          </footer>
+        </div>
+      </main>
+
+      <!-- Table of Contents -->
+      {headings.length > 0 && (
+        <aside class="hidden xl:block w-[180px] shrink-0">
+          <div class="sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto py-6 pl-6">
+            <TableOfContents headings={headings} />
+          </div>
+        </aside>
+      )}
+    </div>
+  </div>
+
+  <!-- Mobile Navigation -->
+  <MobileNav currentPath={currentPath} currentLocale={currentLocale} />
+  
+  <!-- Code copy functionality -->
+  <CodeCopy />
+</BaseLayout>

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

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

@@ -0,0 +1,116 @@
+---
+import { getCollection } from "astro:content";
+import DocsLayout from "../../layouts/DocsLayout.astro";
+import config from "virtual:barodoc/config";
+import { defaultLocale, locales } from "virtual:barodoc/i18n";
+import { getLocalizedNavGroup } from "@barodoc/core";
+
+export async function getStaticPaths() {
+  const docs = await getCollection("docs");
+  
+  return docs.map((doc) => {
+    // Handle locale in slug
+    const slugParts = doc.slug.split("/");
+    const hasLocale = locales.includes(slugParts[0]);
+    
+    let locale = defaultLocale;
+    let cleanSlug = doc.slug;
+    
+    if (hasLocale) {
+      locale = slugParts[0];
+      cleanSlug = slugParts.slice(1).join("/");
+    }
+    
+    // Build the path
+    const path = locale === defaultLocale 
+      ? cleanSlug 
+      : `${locale}/${cleanSlug}`;
+    
+    return {
+      params: { slug: path || undefined },
+      props: { doc, locale, cleanSlug },
+    };
+  });
+}
+
+interface Props {
+  doc: Awaited<ReturnType<typeof getCollection<"docs">>>[number];
+  locale: string;
+  cleanSlug: string;
+}
+
+const { doc, locale, cleanSlug } = Astro.props;
+const { Content, headings } = await doc.render();
+
+// Find the category (navigation group) for this page
+function findCategory(slug: string): string | null {
+  for (const group of config.navigation) {
+    if (group.pages.includes(slug)) {
+      return getLocalizedNavGroup(group, locale, defaultLocale);
+    }
+  }
+  return null;
+}
+
+// Get all pages in order from navigation
+function getAllPages(): string[] {
+  const pages: string[] = [];
+  for (const group of config.navigation) {
+    pages.push(...group.pages);
+  }
+  return pages;
+}
+
+// Get page title from slug
+function getPageTitle(slug: string): string {
+  const parts = slug.split('/');
+  const name = parts[parts.length - 1];
+  return name
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+}
+
+// Get page href
+function getPageHref(slug: string): string {
+  if (locale === defaultLocale) {
+    return `/docs/${slug}`;
+  }
+  return `/${locale}/docs/${slug}`;
+}
+
+// Find prev/next pages
+const allPages = getAllPages();
+const currentIndex = allPages.indexOf(cleanSlug);
+
+const prevPage = currentIndex > 0 
+  ? { title: getPageTitle(allPages[currentIndex - 1]), href: getPageHref(allPages[currentIndex - 1]) }
+  : null;
+
+const nextPage = currentIndex < allPages.length - 1 
+  ? { title: getPageTitle(allPages[currentIndex + 1]), href: getPageHref(allPages[currentIndex + 1]) }
+  : null;
+
+const category = findCategory(cleanSlug);
+---
+
+<DocsLayout 
+  title={doc.data.title} 
+  description={doc.data.description}
+  headings={headings}
+  prevPage={prevPage}
+  nextPage={nextPage}
+>
+  {category && (
+    <p class="text-xs font-medium uppercase tracking-wider text-primary-600 dark:text-primary-400 mb-2">
+      {category}
+    </p>
+  )}
+  <h1>{doc.data.title}</h1>
+  {doc.data.description && (
+    <p class="lead text-sm text-[var(--color-text-secondary)] mt-1 mb-4">
+      {doc.data.description}
+    </p>
+  )}
+  <Content />
+</DocsLayout>