@barodoc/theme-docs 7.0.0 → 7.1.1

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@barodoc/theme-docs",
-  "version": "7.0.0",
+  "version": "7.1.1",
   "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/*",

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/CodeGroup.tsx

@@ -1,117 +1,18 @@
-import * as React from "react";
+import type { ReactNode } from "react";
 
 interface CodeGroupProps {
-  children: React.ReactNode;
+  children: ReactNode;
   titles?: string[];
 }
 
-function isCodeBlockLike(el: React.ReactElement): boolean {
-  if (el.type === "pre") return true;
-  const className =
-    typeof el.props?.className === "string" ? el.props.className : "";
-  if (
-    className.includes("language-") ||
-    className.includes("astro-code") ||
-    className.includes("code-block")
-  )
-    return true;
-  return false;
-}
-
-function collectCodeBlocks(node: React.ReactNode): React.ReactElement[] {
-  const result: React.ReactElement[] = [];
-  React.Children.forEach(node, (child) => {
-    if (!React.isValidElement(child)) return;
-    if (child.type === React.Fragment && child.props?.children != null) {
-      result.push(...collectCodeBlocks(child.props.children));
-      return;
-    }
-    if (child.type === "pre" || isCodeBlockLike(child)) {
-      result.push(child);
-      return;
-    }
-    if (child.props?.children != null) {
-      result.push(...collectCodeBlocks(child.props.children));
-    }
-  });
-  return result;
-}
-
 export function CodeGroup({ children, titles = [] }: CodeGroupProps) {
-  const [activeIndex, setActiveIndex] = React.useState(0);
-
-  const codeBlocks = React.useMemo(() => {
-    let blocks = collectCodeBlocks(children);
-    if (blocks.length > 0) return blocks;
-    const direct = React.Children.toArray(children).filter(
-      (c): c is React.ReactElement => React.isValidElement(c) && c.type != null
-    );
-    if (direct.length > 1) return direct;
-    if (
-      direct.length === 1 &&
-      direct[0].props?.children != null
-    ) {
-      const inner = React.Children.toArray(direct[0].props.children).filter(
-        (c): c is React.ReactElement =>
-          React.isValidElement(c) && c.type != null
-      );
-      if (inner.length > 0) return inner;
-    }
-    return direct;
-  }, [children]);
-
-  const tabTitles =
-    titles.length >= codeBlocks.length
-      ? titles.slice(0, codeBlocks.length)
-      : [
-          ...titles,
-          ...codeBlocks
-            .slice(titles.length)
-            .map((_, i) => `Tab ${titles.length + i + 1}`),
-        ];
-
-  if (codeBlocks.length === 0) {
-    return (
-      <div className="code-group not-prose my-4 rounded-lg border border-[var(--bd-border)] overflow-hidden p-4 text-[var(--bd-text-muted)] text-sm">
-        No code blocks found inside CodeGroup.
-      </div>
-    );
-  }
-
   return (
-    <div className="code-group not-prose my-4 rounded-lg border border-[var(--bd-border)] overflow-hidden">
-      {/* Tabs */}
-      <div className="flex flex-wrap gap-0 bg-[var(--bd-bg-muted)] border-b border-[var(--bd-border)]">
-        {tabTitles.map((title, index) => {
-          const isActive = activeIndex === index;
-          return (
-            <button
-              key={index}
-              type="button"
-              onClick={() => setActiveIndex(index)}
-              className={`shrink-0 px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap ${
-                isActive
-                  ? "bg-[var(--bd-bg-subtle)] text-[var(--bd-text)] border-b-2 border-primary-500 -mb-px"
-                  : "text-[var(--bd-text-muted)] hover:text-[var(--bd-text)]"
-              }`}
-            >
-              {title}
-            </button>
-          );
-        })}
-      </div>
-
-      {/* Content */}
-      <div className="bg-[var(--bd-bg-subtle)]">
-        {codeBlocks.map((block, index) => (
-          <div
-            key={index}
-            style={{ display: activeIndex === index ? "block" : "none" }}
-          >
-            {block}
-          </div>
-        ))}
-      </div>
+    <div
+      className="code-group not-prose my-4 rounded-lg border border-[var(--bd-border)] overflow-hidden"
+      data-titles={JSON.stringify(titles)}
+    >
+      <div className="code-group-tabs flex flex-wrap gap-0 border-b border-[var(--bd-border)] bg-[var(--bd-bg-muted)]" />
+      <div className="code-group-content bg-[var(--bd-bg-subtle)]">{children}</div>
     </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/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 || [],
+  };
+}