@barodoc/theme-docs 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Barocss
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@barodoc/theme-docs",
+  "version": "0.0.1",
+  "description": "Documentation theme for Barodoc",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./components": "./src/components/index.ts",
+    "./components/*": "./src/components/*",
+    "./layouts/*": "./src/layouts/*",
+    "./pages/*": "./src/pages/*",
+    "./styles/*": "./src/styles/*",
+    "./lib/*": "./src/lib/*"
+  },
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.563.0",
+    "mermaid": "^11.12.2",
+    "tailwind-merge": "^3.4.0",
+    "@barodoc/core": "0.0.1"
+  },
+  "peerDependencies": {
+    "astro": "^5.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@astrojs/mdx": "^4.0.0",
+    "@astrojs/react": "^4.0.0",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "astro": "^5.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.0"
+  },
+  "keywords": [
+    "astro",
+    "astro-integration",
+    "documentation",
+    "barodoc",
+    "theme"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/barocss/barodoc.git",
+    "directory": "packages/theme-docs"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/components/CodeCopy.astro

@@ -0,0 +1,173 @@
+---
+// This component adds copy functionality and filename display to code blocks
+---
+
+<script>
+  function initCodeCopy() {
+    document.querySelectorAll('pre').forEach((pre) => {
+      // Skip if already processed
+      if (pre.closest('.code-block-wrapper')) return;
+      
+      const code = pre.querySelector('code');
+      if (!code) return;
+      
+      // Get filename from data attribute or class (e.g., language-js:filename.js)
+      let filename = pre.getAttribute('data-filename') || '';
+      const langClass = code.className.match(/language-(\S+)/);
+      const lang = langClass ? langClass[1].split(':')[0] : '';
+      
+      // Check if filename is in the language class (e.g., language-js:app.js)
+      if (!filename && langClass && langClass[1].includes(':')) {
+        filename = langClass[1].split(':')[1];
+      }
+      
+      // Create wrapper
+      const wrapper = document.createElement('div');
+      wrapper.className = 'code-block-wrapper';
+      
+      // Create header if filename exists
+      if (filename) {
+        const header = document.createElement('div');
+        header.className = 'code-block-header';
+        header.innerHTML = `
+          <span class="code-block-filename">${filename}</span>
+        `;
+        wrapper.appendChild(header);
+      }
+      
+      // Create copy button
+      const button = document.createElement('button');
+      button.className = 'copy-button';
+      button.innerHTML = `
+        <span class="copy-text">Copy</span>
+        <svg class="copy-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+        </svg>
+        <svg class="check-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="20 6 9 17 4 12"></polyline>
+        </svg>
+      `;
+      button.setAttribute('aria-label', 'Copy code');
+      
+      // Add click handler
+      button.addEventListener('click', async () => {
+        try {
+          await navigator.clipboard.writeText(code.textContent || '');
+          
+          // Show check state
+          button.classList.add('copied');
+          const copyText = button.querySelector('.copy-text');
+          if (copyText) copyText.textContent = 'Copied!';
+          
+          setTimeout(() => {
+            button.classList.remove('copied');
+            if (copyText) copyText.textContent = 'Copy';
+          }, 2000);
+        } catch (err) {
+          console.error('Failed to copy:', err);
+        }
+      });
+      
+      // Insert wrapper
+      pre.parentNode?.insertBefore(wrapper, pre);
+      wrapper.appendChild(pre);
+      wrapper.appendChild(button);
+    });
+  }
+  
+  // Run on page load
+  initCodeCopy();
+  
+  // Re-run on Astro page transitions
+  document.addEventListener('astro:page-load', initCodeCopy);
+</script>
+
+<style is:global>
+  .code-block-wrapper {
+    position: relative;
+    margin: 1rem 0;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background: var(--color-bg-secondary);
+    border: 1px solid var(--color-border);
+  }
+  
+  .code-block-wrapper pre {
+    margin: 0 !important;
+    border: none !important;
+    border-radius: 0 !important;
+    background: transparent !important;
+  }
+  
+  .code-block-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+    background: var(--color-bg-tertiary);
+    border-bottom: 1px solid var(--color-border);
+  }
+  
+  .code-block-filename {
+    font-size: 0.8125rem;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    color: var(--color-text-secondary);
+  }
+  
+  .copy-button {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.625rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
+    border-radius: 0.375rem;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 150ms ease, background 150ms ease;
+    color: var(--color-text-muted);
+    z-index: 10;
+  }
+  
+  .code-block-wrapper:hover .copy-button {
+    opacity: 1;
+  }
+  
+  .copy-button:hover {
+    background: var(--color-bg-secondary);
+    color: var(--color-text);
+  }
+  
+  .copy-button .copy-icon,
+  .copy-button .check-icon {
+    flex-shrink: 0;
+  }
+  
+  .copy-button .check-icon {
+    display: none;
+    color: #22c55e;
+  }
+  
+  .copy-button.copied .copy-icon {
+    display: none;
+  }
+  
+  .copy-button.copied .check-icon {
+    display: block;
+  }
+  
+  .copy-button.copied {
+    color: #22c55e;
+  }
+  
+  /* Adjust button position when header exists */
+  .code-block-wrapper:has(.code-block-header) .copy-button {
+    top: 0.375rem;
+  }
+</style>

package/src/components/DocHeader.tsx

@@ -0,0 +1,166 @@
+import * as React from "react";
+import { Search, Menu, Moon, Sun, Github } from "lucide-react";
+import { Button } from "./ui/button";
+import { Separator } from "./ui/separator";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./ui/tooltip";
+import { cn } from "../lib/utils";
+
+interface DocHeaderProps {
+  siteName: string;
+  logo?: string;
+  githubUrl?: string;
+  hasMultipleLocales?: boolean;
+  currentLocale?: string;
+  localeLabels?: Record<string, string>;
+}
+
+export function DocHeader({
+  siteName,
+  logo,
+  githubUrl,
+  hasMultipleLocales,
+  currentLocale,
+  localeLabels,
+}: DocHeaderProps) {
+  const [theme, setTheme] = React.useState<"light" | "dark">("light");
+
+  React.useEffect(() => {
+    const isDark = document.documentElement.classList.contains("dark");
+    setTheme(isDark ? "dark" : "light");
+  }, []);
+
+  const toggleTheme = () => {
+    const newTheme = theme === "light" ? "dark" : "light";
+    setTheme(newTheme);
+    document.documentElement.classList.toggle("dark", newTheme === "dark");
+    localStorage.setItem("theme", newTheme);
+  };
+
+  const openSearch = () => {
+    document.dispatchEvent(new CustomEvent("toggle-search"));
+  };
+
+  const openMobileNav = () => {
+    document.dispatchEvent(new CustomEvent("toggle-mobile-nav"));
+  };
+
+  return (
+    <TooltipProvider>
+      <header className="sticky top-0 z-50 w-full border-b border-[var(--color-border)] bg-[var(--color-bg)]/95 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-bg)]/80">
+        <div className="flex h-14 items-center justify-between px-4 max-w-[1120px] mx-auto">
+          {/* Logo */}
+          <div className="flex items-center gap-6">
+            <a
+              href="/"
+              className="flex items-center gap-2.5 font-semibold text-[var(--color-text)] hover:opacity-80 transition-opacity"
+            >
+              {logo && <img src={logo} alt={siteName} className="h-7 w-7" />}
+              <span className="text-lg">{siteName}</span>
+            </a>
+          </div>
+
+          {/* Right side actions */}
+          <div className="flex items-center gap-1">
+            {/* Search button */}
+            <Button
+              variant="outline"
+              className="hidden md:flex items-center gap-3 px-4 py-2 h-10 min-w-[200px] justify-start rounded-xl"
+              onClick={openSearch}
+            >
+              <Search className="h-4 w-4 shrink-0 text-[var(--color-text-muted)]" />
+              <span className="flex-1 text-left text-[var(--color-text-muted)]">
+                Search...
+              </span>
+              <kbd className="hidden lg:inline-flex items-center gap-0.5 px-2 py-1 text-xs font-medium bg-[var(--color-bg)] border border-[var(--color-border)] rounded-md text-[var(--color-text-muted)]">
+                <span>⌘</span>K
+              </kbd>
+            </Button>
+
+            {/* Mobile search button */}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="md:hidden rounded-xl"
+                  onClick={openSearch}
+                >
+                  <Search className="h-5 w-5" />
+                  <span className="sr-only">Search</span>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Search</TooltipContent>
+            </Tooltip>
+
+            {/* Divider */}
+            <Separator orientation="vertical" className="hidden md:block h-6 mx-2" />
+
+            {/* GitHub link */}
+            {githubUrl && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="rounded-xl"
+                    asChild
+                  >
+                    <a
+                      href={githubUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <Github className="h-5 w-5" />
+                      <span className="sr-only">GitHub</span>
+                    </a>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>GitHub</TooltipContent>
+              </Tooltip>
+            )}
+
+            {/* Theme toggle */}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="rounded-xl"
+                  onClick={toggleTheme}
+                >
+                  {theme === "light" ? (
+                    <Moon className="h-5 w-5" />
+                  ) : (
+                    <Sun className="h-5 w-5" />
+                  )}
+                  <span className="sr-only">Toggle theme</span>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {theme === "light" ? "Dark mode" : "Light mode"}
+              </TooltipContent>
+            </Tooltip>
+
+            {/* Mobile menu button */}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="lg:hidden rounded-xl"
+              onClick={openMobileNav}
+            >
+              <Menu className="h-5 w-5" />
+              <span className="sr-only">Menu</span>
+            </Button>
+          </div>
+        </div>
+      </header>
+    </TooltipProvider>
+  );
+}
+
+export default DocHeader;

package/src/components/DocsSidebar.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import { ScrollArea } from "./ui/scroll-area";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "./ui/collapsible";
+
+interface NavItem {
+  title: string;
+  href: string;
+  isActive?: boolean;
+}
+
+interface NavGroup {
+  title: string;
+  items: NavItem[];
+  defaultOpen?: boolean;
+}
+
+interface DocsSidebarProps {
+  groups: NavGroup[];
+  className?: string;
+}
+
+export function DocsSidebar({ groups, className }: DocsSidebarProps) {
+  return (
+    <ScrollArea className={cn("h-full", className)}>
+      <nav className="space-y-4">
+        {groups.map((group, index) => (
+          <SidebarGroup key={index} group={group} />
+        ))}
+      </nav>
+    </ScrollArea>
+  );
+}
+
+function SidebarGroup({ group }: { group: NavGroup }) {
+  const [isOpen, setIsOpen] = React.useState(group.defaultOpen ?? true);
+  const hasActiveItem = group.items.some((item) => item.isActive);
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <CollapsibleTrigger className="group flex w-full items-center gap-1.5 py-1 text-xs font-semibold uppercase tracking-wide text-[var(--color-text-muted)] hover:text-[var(--color-text)] transition-colors">
+        <ChevronRight
+          className={cn(
+            "h-3 w-3 transition-transform duration-200",
+            isOpen && "rotate-90"
+          )}
+        />
+        {group.title}
+      </CollapsibleTrigger>
+      <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+        <ul className="mt-1 space-y-0.5 border-l border-[var(--color-border)] ml-1.5">
+          {group.items.map((item, index) => (
+            <SidebarItem key={index} item={item} />
+          ))}
+        </ul>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+function SidebarItem({ item }: { item: NavItem }) {
+  return (
+    <li className="relative">
+      <a
+        href={item.href}
+        className={cn(
+          "block pl-4 pr-2 py-1.5 text-sm transition-all duration-150 -ml-px border-l-2",
+          item.isActive
+            ? "border-primary-500 text-primary-600 dark:text-primary-400 font-medium bg-primary-50/50 dark:bg-primary-950/30"
+            : "border-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:border-[var(--color-border)]"
+        )}
+      >
+        <span className="truncate">{item.title}</span>
+      </a>
+    </li>
+  );
+}
+
+export default DocsSidebar;

package/src/components/Header.astro

@@ -0,0 +1,32 @@
+---
+import { DocHeader } from "./DocHeader";
+import LanguageSwitcher from "./LanguageSwitcher.astro";
+import config from "virtual:barodoc/config";
+import { locales, defaultLocale } from "virtual:barodoc/i18n";
+
+interface Props {
+  currentLocale?: string;
+}
+
+const { currentLocale = defaultLocale } = Astro.props;
+const hasMultipleLocales = locales.length > 1;
+
+// Build locale labels from config
+const localeLabels: Record<string, string> = config.i18n?.labels || {};
+---
+
+<DocHeader 
+  client:load
+  siteName={config.name}
+  logo={config.logo}
+  githubUrl={config.topbar?.github}
+  hasMultipleLocales={hasMultipleLocales}
+  currentLocale={currentLocale}
+  localeLabels={localeLabels}
+/>
+
+{hasMultipleLocales && (
+  <div class="hidden">
+    <LanguageSwitcher currentLocale={currentLocale} />
+  </div>
+)}

package/src/components/LanguageSwitcher.astro

@@ -0,0 +1,77 @@
+---
+import { i18n, locales, defaultLocale } from "virtual:barodoc/i18n";
+import { getLocaleLabel, getLocalizedPath } from "@barodoc/core";
+
+interface Props {
+  currentLocale: string;
+}
+
+const { currentLocale } = Astro.props;
+const currentPath = Astro.url.pathname;
+
+function getLocalizedUrl(locale: string): string {
+  // Remove current locale from path if present
+  let path = currentPath;
+  for (const loc of locales) {
+    if (path.startsWith(`/${loc}/`) || path === `/${loc}`) {
+      path = path.slice(loc.length + 1) || "/";
+      break;
+    }
+  }
+  
+  // Add new locale
+  if (locale === defaultLocale) {
+    return path;
+  }
+  return `/${locale}${path}`;
+}
+---
+
+<div class="relative">
+  <button
+    id="lang-switcher-btn"
+    class="flex items-center gap-1 px-2 py-1.5 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] rounded-lg hover:bg-[var(--color-bg-secondary)] transition-colors"
+    aria-label="Select language"
+  >
+    <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="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path>
+    </svg>
+    <span class="hidden sm:inline">{getLocaleLabel(currentLocale, i18n?.labels)}</span>
+    <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="M19 9l-7 7-7-7"></path>
+    </svg>
+  </button>
+  
+  <div
+    id="lang-switcher-menu"
+    class="hidden absolute right-0 mt-1 py-1 w-32 bg-[var(--color-bg)] border border-[var(--color-border)] rounded-lg shadow-lg z-50"
+  >
+    {locales.map((locale) => (
+      <a
+        href={getLocalizedUrl(locale)}
+        class:list={[
+          "block px-3 py-1.5 text-sm transition-colors",
+          locale === currentLocale
+            ? "bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300"
+            : "text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)]"
+        ]}
+      >
+        {getLocaleLabel(locale, i18n?.labels)}
+      </a>
+    ))}
+  </div>
+</div>
+
+<script>
+  const btn = document.getElementById('lang-switcher-btn');
+  const menu = document.getElementById('lang-switcher-menu');
+  
+  btn?.addEventListener('click', (e) => {
+    e.stopPropagation();
+    menu?.classList.toggle('hidden');
+  });
+  
+  document.addEventListener('click', () => {
+    menu?.classList.add('hidden');
+  });
+</script>

package/src/components/MobileNav.astro

@@ -0,0 +1,61 @@
+---
+import { MobileNavSheet } from "./MobileNavSheet";
+import config from "virtual:barodoc/config";
+import { defaultLocale } from "virtual:barodoc/i18n";
+import { getLocalizedNavGroup } from "@barodoc/core";
+
+interface Props {
+  currentPath: string;
+  currentLocale?: string;
+}
+
+const { currentPath, currentLocale = defaultLocale } = Astro.props;
+
+// Normalize path for comparison
+function normalizePath(path: string): string {
+  return path.replace(/\/$/, '').replace(/^\//, '');
+}
+
+function isActive(page: string): boolean {
+  const normalized = normalizePath(currentPath);
+  const pagePath = normalizePath(page);
+  return normalized === pagePath || 
+    normalized === `docs/${pagePath}` ||
+    normalized === `${currentLocale}/docs/${pagePath}`;
+}
+
+function getPageHref(page: string): string {
+  if (currentLocale === defaultLocale) {
+    return `/docs/${page}`;
+  }
+  return `/${currentLocale}/docs/${page}`;
+}
+
+// Get page title from the page slug
+function getPageTitle(page: string): string {
+  const parts = page.split('/');
+  const name = parts[parts.length - 1];
+  return name
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+}
+
+// Transform config.navigation to the format expected by MobileNavSheet
+const groups = config.navigation.map((group) => ({
+  title: getLocalizedNavGroup(group, currentLocale, defaultLocale),
+  defaultOpen: true,
+  items: group.pages.map((page) => ({
+    title: getPageTitle(page),
+    href: getPageHref(page),
+    isActive: isActive(page),
+  })),
+}));
+---
+
+<MobileNavSheet 
+  client:load 
+  groups={groups} 
+  siteName={config.name}
+  logo={config.logo}
+/>