@barodoc/theme-docs 3.0.0 → 6.0.0

package/src/components/mdx/Tooltip.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { cn } from "../../lib/utils.js";
 
 interface TooltipProps {
   children: React.ReactNode;
@@ -8,28 +7,30 @@ interface TooltipProps {
 }
 
 export function Tooltip({ children, tip }: TooltipProps) {
+  const [container, setContainer] = React.useState<HTMLElement | null>(null);
+
+  React.useEffect(() => {
+    setContainer(document.body);
+  }, []);
+
   return (
-    <TooltipPrimitive.Provider delayDuration={200}>
+    <TooltipPrimitive.Provider delayDuration={150}>
       <TooltipPrimitive.Root>
         <TooltipPrimitive.Trigger asChild>
-          <span className="cursor-help border-b border-dashed border-[var(--color-text-muted)] text-[var(--color-text)]">
-            {children}
-          </span>
+          <span className="bd-tooltip-trigger">{children}</span>
         </TooltipPrimitive.Trigger>
-        <TooltipPrimitive.Portal>
-          <TooltipPrimitive.Content
-            className={cn(
-              "z-50 overflow-hidden rounded-md bg-[var(--color-bg-tertiary)] px-3 py-1.5 text-sm text-[var(--color-text)] shadow-md",
-              "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",
-              "max-w-xs"
-            )}
-            sideOffset={4}
-          >
-            {tip}
-            <TooltipPrimitive.Arrow className="fill-[var(--color-bg-tertiary)]" />
-          </TooltipPrimitive.Content>
-        </TooltipPrimitive.Portal>
+        {container && (
+          <TooltipPrimitive.Portal container={container}>
+            <TooltipPrimitive.Content
+              className="bd-tooltip-content"
+              sideOffset={6}
+              style={{ zIndex: 99999 }}
+            >
+              {tip}
+              <TooltipPrimitive.Arrow className="bd-tooltip-arrow" />
+            </TooltipPrimitive.Content>
+          </TooltipPrimitive.Portal>
+        )}
       </TooltipPrimitive.Root>
     </TooltipPrimitive.Provider>
   );

package/src/components/mdx/Video.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+
+interface VideoProps {
+  url: string;
+  title?: string;
+  caption?: string;
+  className?: string;
+}
+
+function parseVideoUrl(url: string): { provider: string; embedUrl: string } | null {
+  // YouTube: youtube.com/watch?v=ID, youtu.be/ID, youtube.com/embed/ID
+  const ytMatch = url.match(
+    /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
+  );
+  if (ytMatch) {
+    return {
+      provider: "youtube",
+      embedUrl: `https://www.youtube-nocookie.com/embed/${ytMatch[1]}?rel=0`,
+    };
+  }
+
+  // Vimeo: vimeo.com/ID, player.vimeo.com/video/ID
+  const vimeoMatch = url.match(/(?:vimeo\.com\/|player\.vimeo\.com\/video\/)(\d+)/);
+  if (vimeoMatch) {
+    return {
+      provider: "vimeo",
+      embedUrl: `https://player.vimeo.com/video/${vimeoMatch[1]}?dnt=1`,
+    };
+  }
+
+  // Loom: loom.com/share/ID, loom.com/embed/ID
+  const loomMatch = url.match(/loom\.com\/(?:share|embed)\/([a-f0-9]+)/);
+  if (loomMatch) {
+    return {
+      provider: "loom",
+      embedUrl: `https://www.loom.com/embed/${loomMatch[1]}`,
+    };
+  }
+
+  return null;
+}
+
+export function Video({ url, title, caption, className }: VideoProps) {
+  const parsed = parseVideoUrl(url);
+
+  if (!parsed) {
+    return (
+      <div className={cn("bd-video", className)} style={{ paddingTop: 0, padding: "2rem" }}>
+        <p style={{ color: "var(--bd-text-muted)", margin: 0, textAlign: "center" }}>
+          Unsupported video URL: {url}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <figure className={className}>
+      <div className="bd-video">
+        <iframe
+          src={parsed.embedUrl}
+          title={title || `${parsed.provider} video`}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          loading="lazy"
+        />
+      </div>
+      {caption && <figcaption className="bd-video-caption">{caption}</figcaption>}
+    </figure>
+  );
+}

package/src/components/ui/accordion.tsx

@@ -11,7 +11,7 @@ const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AccordionPrimitive.Item
     ref={ref}
-    className={cn("border-b border-[var(--color-border)]", className)}
+    className={cn("border-b border-[var(--bd-border)]", className)}
     {...props}
   />
 ));
@@ -31,7 +31,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDown className="h-4 w-4 shrink-0 text-[var(--color-text-secondary)] transition-transform duration-200" />
+      <ChevronDown className="h-4 w-4 shrink-0 text-[var(--bd-text-secondary)] transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));

package/src/components/ui/alert.tsx

@@ -7,7 +7,7 @@ const alertVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-[var(--color-bg-secondary)] border-l-[var(--color-border)] text-[var(--color-text)]",
+        default: "bg-[var(--bd-bg-subtle)] border-l-[var(--bd-border)] text-[var(--bd-text)]",
         info: "bg-blue-50/70 dark:bg-blue-950/30 border-l-blue-500 text-blue-900 dark:text-blue-100 [&>svg]:text-blue-600",
         warning: "bg-orange-50/70 dark:bg-orange-950/30 border-l-orange-500 text-orange-900 dark:text-orange-100 [&>svg]:text-orange-600",
         success: "bg-green-50/70 dark:bg-green-950/30 border-l-green-500 text-green-900 dark:text-green-100 [&>svg]:text-green-600",

package/src/components/ui/button.tsx

@@ -13,11 +13,11 @@ const buttonVariants = cva(
         destructive:
           "bg-red-600 text-white shadow-sm hover:bg-red-700",
         outline:
-          "border border-[var(--color-border)] bg-transparent shadow-sm hover:bg-[var(--color-bg-secondary)] hover:text-[var(--color-text)]",
+          "border border-[var(--bd-border)] bg-transparent shadow-sm hover:bg-[var(--bd-bg-subtle)] hover:text-[var(--bd-text)]",
         secondary:
-          "bg-[var(--color-bg-secondary)] text-[var(--color-text)] shadow-sm hover:bg-[var(--color-bg-tertiary)]",
+          "bg-[var(--bd-bg-subtle)] text-[var(--bd-text)] shadow-sm hover:bg-[var(--bd-bg-muted)]",
         ghost:
-          "hover:bg-[var(--color-bg-secondary)] hover:text-[var(--color-text)]",
+          "hover:bg-[var(--bd-bg-subtle)] hover:text-[var(--bd-text)]",
         link: "text-primary-600 underline-offset-4 hover:underline",
       },
       size: {

package/src/components/ui/card.tsx

@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-text)] shadow-sm",
+      "rounded-xl border border-[var(--bd-border)] bg-[var(--bd-bg)] text-[var(--bd-text)] shadow-sm",
       className
     )}
     {...props}
@@ -46,7 +46,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("text-sm text-[var(--color-text-secondary)]", className)}
+    className={cn("text-sm text-[var(--bd-text-secondary)]", className)}
     {...props}
   />
 ));

package/src/components/ui/dialog.tsx

@@ -35,7 +35,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-[var(--color-border)] bg-[var(--color-bg)] p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-[var(--bd-border)] bg-[var(--bd-bg)] p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
@@ -99,7 +99,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-[var(--color-text-secondary)]", className)}
+    className={cn("text-sm text-[var(--bd-text-secondary)]", className)}
     {...props}
   />
 ));

package/src/components/ui/scroll-area.tsx

@@ -37,7 +37,7 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-[var(--color-border)]" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-[var(--bd-border)]" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

package/src/components/ui/separator.tsx

@@ -15,7 +15,7 @@ const Separator = React.forwardRef<
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-[var(--color-border)]",
+        "shrink-0 bg-[var(--bd-border)]",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
         className
       )}

package/src/components/ui/sheet.tsx

@@ -28,7 +28,7 @@ const SheetOverlay = React.forwardRef<
 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",
+  "fixed z-50 gap-4 bg-[var(--bd-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: {
@@ -105,7 +105,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold text-[var(--color-text)]", className)}
+    className={cn("text-lg font-semibold text-[var(--bd-text)]", className)}
     {...props}
   />
 ));
@@ -117,7 +117,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-[var(--color-text-secondary)]", className)}
+    className={cn("text-sm text-[var(--bd-text-secondary)]", className)}
     {...props}
   />
 ));

package/src/components/ui/tabs.tsx

@@ -11,7 +11,7 @@ const TabsList = React.forwardRef<
   <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)]",
+      "inline-flex h-10 items-center justify-center rounded-lg bg-[var(--bd-bg-subtle)] p-1 text-[var(--bd-text-secondary)]",
       className
     )}
     {...props}
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
   <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",
+      "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(--bd-bg)] data-[state=active]:text-[var(--bd-text)] data-[state=active]:shadow",
       className
     )}
     {...props}

package/src/components/ui/tooltip.tsx

@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
       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",
+        "z-50 overflow-hidden rounded-md bg-[var(--bd-text)] px-3 py-1.5 text-xs text-[var(--bd-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}

package/src/index.ts

@@ -3,6 +3,8 @@ 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[];
@@ -79,11 +81,41 @@ function createThemeIntegration(
           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(), react()],
+          integrations: [
+            mdx({
+              remarkPlugins: [remarkMath],
+              rehypePlugins: [rehypeKatex],
+            }),
+            react(),
+          ],
           vite: {
             plugins: [tailwindcss()],
+            optimizeDeps: {
+              include: ["mermaid"],
+            },
+            ssr: {
+              noExternal: [],
+            },
             resolve: {
               dedupe: ["react", "react-dom"],
             },

package/src/layouts/BaseLayout.astro

@@ -1,7 +1,9 @@
 ---
 import ThemeScript from "../components/ThemeScript.astro";
 import { SearchDialog } from "../components/SearchDialog";
+import { ClientRouter } from "astro:transitions";
 import config from "virtual:barodoc/config";
+import { generateThemeCSS } from "@barodoc/core";
 import "@barodoc/theme-docs/styles/global.css";
 
 interface Props {
@@ -16,6 +18,8 @@ const canonicalUrl = config.site ? new URL(Astro.url.pathname, config.site).href
 const ogImageUrl = ogImage
   ? (config.site ? new URL(ogImage, config.site).href : ogImage)
   : undefined;
+
+const themeCSS = config.theme?.colors ? generateThemeCSS(config.theme.colors) : "";
 ---
 
 <!doctype html>
@@ -41,10 +45,15 @@ const ogImageUrl = ogImage
     <meta name="twitter:description" content={description} />
     {ogImageUrl && <meta name="twitter:image" content={ogImageUrl} />}
 
+    <!-- KaTeX math rendering -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css" crossorigin="anonymous" />
+
     <title>{title}</title>
     <ThemeScript />
+    <ClientRouter />
+    {themeCSS && <style set:html={themeCSS} />}
   </head>
-  <body class="min-h-screen bg-[var(--color-bg)] text-[var(--color-text)] antialiased">
+  <body class="min-h-screen bg-[var(--bd-bg)] text-[var(--bd-text)] antialiased">
     <slot />
     <SearchDialog client:load />
   </body>

package/src/layouts/BlogLayout.astro

@@ -0,0 +1,93 @@
+---
+import BaseLayout from "./BaseLayout.astro";
+import Header from "../components/Header.astro";
+import Banner from "../components/Banner.astro";
+import { defaultLocale } from "virtual:barodoc/i18n";
+import { getLocaleFromPath } from "@barodoc/core";
+
+interface Props {
+  title: string;
+  description?: string;
+  date?: Date;
+  author?: string;
+  image?: string;
+  tags?: string[];
+  readingTime?: string;
+}
+
+const { title, description, date, author, image, tags = [], readingTime } = Astro.props;
+const currentPath = Astro.url.pathname;
+const i18nConfig = { defaultLocale, locales: [defaultLocale] };
+const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
+---
+
+<BaseLayout title={title} description={description} ogImage={image}>
+  <Banner />
+  <Header currentLocale={currentLocale} currentPath={currentPath} />
+  
+  <div class="w-full min-w-0 min-h-[calc(100vh-3.5rem)] flex justify-center">
+    <article class="w-full max-w-[720px] px-4 py-10 sm:px-6 lg:px-8">
+      <!-- Blog post header -->
+      <header class="mb-10">
+        {tags.length > 0 && (
+          <div class="flex flex-wrap gap-2 mb-4">
+            {tags.map((tag) => (
+              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300">
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+        <h1 class="text-3xl sm:text-4xl font-bold tracking-tight text-[var(--bd-text-heading)] leading-tight">
+          {title}
+        </h1>
+        {description && (
+          <p class="mt-3 text-lg text-[var(--bd-text-secondary)] leading-relaxed">
+            {description}
+          </p>
+        )}
+        <div class="mt-4 flex items-center gap-3 text-sm text-[var(--bd-text-muted)]">
+          {author && <span>{author}</span>}
+          {author && date && <span class="text-[var(--bd-border)]">&middot;</span>}
+          {date && (
+            <time datetime={date.toISOString()}>
+              {date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}
+            </time>
+          )}
+          {readingTime && (
+            <>
+              <span class="text-[var(--bd-border)]">&middot;</span>
+              <span>{readingTime}</span>
+            </>
+          )}
+        </div>
+      </header>
+
+      {image && (
+        <img
+          src={image}
+          alt={title}
+          class="w-full rounded-lg mb-10 bd-no-zoom"
+          loading="eager"
+        />
+      )}
+
+      <div class="prose prose-gray dark:prose-invert max-w-none">
+        <slot />
+      </div>
+
+      <!-- Back to blog -->
+      <div class="mt-12 pt-8 border-t border-[var(--bd-border)]">
+        <a
+          href="/blog"
+          class="inline-flex items-center gap-1.5 text-sm text-[var(--bd-text-secondary)] hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
+        >
+          <svg class="w-4 h-4" 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" />
+          </svg>
+          Back to Blog
+        </a>
+      </div>
+    </article>
+  </div>
+</BaseLayout>