@barodoc/theme-docs 0.0.1

package/src/pages/index.astro

@@ -0,0 +1,217 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import { ThemeToggle } from "../components/ThemeToggle";
+import config from "virtual:barodoc/config";
+
+const features = [
+  {
+    icon: "📝",
+    title: "MDX Support",
+    description: "Write documentation in MDX with full React component support."
+  },
+  {
+    icon: "🌙",
+    title: "Dark Mode",
+    description: "Built-in dark mode with system preference detection."
+  },
+  {
+    icon: "🔍",
+    title: "Full-text Search",
+    description: "Client-side search powered by Pagefind for fast results."
+  },
+  {
+    icon: "🌐",
+    title: "Internationalization",
+    description: "Multi-language support out of the box with Astro i18n."
+  },
+  {
+    icon: "⚡",
+    title: "Lightning Fast",
+    description: "Static site generation for optimal performance."
+  },
+  {
+    icon: "🎨",
+    title: "Customizable",
+    description: "Easily customize colors, fonts, and components."
+  }
+];
+---
+
+<BaseLayout title={config.name}>
+  <div class="min-h-screen flex flex-col">
+    <!-- Header -->
+    <header class="sticky top-0 z-50 border-b border-[var(--color-border)] bg-[var(--color-bg)]/95 backdrop-blur-md">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex h-16 items-center justify-between">
+          <a href="/" class="flex items-center gap-2.5 font-semibold text-[var(--color-text)]">
+            {config.logo && <img src={config.logo} alt={config.name} class="h-7 w-7" />}
+            <span class="text-lg">{config.name}</span>
+          </a>
+          <div class="flex items-center gap-2">
+            {config.topbar?.github && (
+              <a
+                href={config.topbar.github}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="p-2.5 rounded-xl text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-all"
+                aria-label="GitHub"
+              >
+                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
+                </svg>
+              </a>
+            )}
+            <ThemeToggle client:load />
+            <a
+              href="/docs/introduction"
+              class="ml-2 px-4 py-2 bg-primary-600 text-white rounded-xl hover:bg-primary-700 transition-all text-sm font-medium shadow-sm hover:shadow-md"
+            >
+              Get Started
+            </a>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Hero Section -->
+    <main class="flex-1">
+      <div class="relative overflow-hidden">
+        <!-- Background gradient -->
+        <div class="absolute inset-0 bg-gradient-to-b from-primary-50/50 to-transparent dark:from-primary-950/20 dark:to-transparent pointer-events-none"></div>
+        <div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.15),rgba(255,255,255,0))] dark:bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.1),rgba(0,0,0,0))] pointer-events-none"></div>
+        
+        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24 sm:pt-28 sm:pb-32">
+          <div class="text-center max-w-4xl mx-auto">
+            <!-- Badge -->
+            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-50 dark:bg-primary-950/50 border border-primary-200 dark:border-primary-800 mb-8">
+              <span class="relative flex h-2 w-2">
+                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary-400 opacity-75"></span>
+                <span class="relative inline-flex rounded-full h-2 w-2 bg-primary-500"></span>
+              </span>
+              <span class="text-sm font-medium text-primary-700 dark:text-primary-300">Powered by Astro</span>
+            </div>
+            
+            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-[var(--color-text)] mb-6 leading-tight">
+              Build beautiful
+              <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-primary-400"> documentation</span>
+            </h1>
+            
+            <p class="text-lg sm:text-xl text-[var(--color-text-secondary)] mb-10 max-w-2xl mx-auto leading-relaxed">
+              Create stunning documentation sites with MDX, Astro, and Tailwind CSS. 
+              Deploy anywhere with static site generation.
+            </p>
+            
+            <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
+              <a
+                href="/docs/introduction"
+                class="w-full sm:w-auto px-8 py-3.5 bg-primary-600 text-white rounded-xl hover:bg-primary-700 transition-all font-medium shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5"
+              >
+                Get Started
+              </a>
+              <a
+                href="/docs/quickstart"
+                class="w-full sm:w-auto px-8 py-3.5 border border-[var(--color-border)] text-[var(--color-text)] rounded-xl hover:bg-[var(--color-bg-secondary)] hover:border-[var(--color-text-muted)] transition-all font-medium"
+              >
+                Quick Start
+              </a>
+            </div>
+            
+            <!-- Install command -->
+            <div class="mt-12 inline-flex items-center gap-3 px-5 py-3 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-xl">
+              <code class="text-sm text-[var(--color-text-secondary)] font-mono">
+                npx create-barodoc my-docs
+              </code>
+              <button 
+                class="p-1.5 rounded-lg hover:bg-[var(--color-bg-tertiary)] text-[var(--color-text-muted)] hover:text-[var(--color-text)] transition-colors"
+                onclick="navigator.clipboard.writeText('npx create-barodoc my-docs')"
+                aria-label="Copy command"
+              >
+                <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Features Section -->
+      <div class="py-20 bg-[var(--color-bg-secondary)] border-y border-[var(--color-border)]">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="text-center mb-16">
+            <h2 class="text-3xl font-bold text-[var(--color-text)] mb-4">
+              Everything you need
+            </h2>
+            <p class="text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto">
+              Barodoc comes with all the features you need to create beautiful documentation.
+            </p>
+          </div>
+          
+          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {features.map((feature) => (
+              <div class="group p-6 bg-[var(--color-bg)] rounded-2xl border border-[var(--color-border)] hover:border-primary-300 dark:hover:border-primary-700 hover:shadow-lg transition-all duration-200">
+                <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-primary-50 dark:bg-primary-950/50 mb-4 group-hover:scale-110 transition-transform">
+                  <span class="text-2xl">{feature.icon}</span>
+                </div>
+                <h3 class="text-lg font-semibold text-[var(--color-text)] mb-2">
+                  {feature.title}
+                </h3>
+                <p class="text-sm text-[var(--color-text-secondary)] leading-relaxed">
+                  {feature.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <!-- CTA Section -->
+      <div class="py-20">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h2 class="text-3xl font-bold text-[var(--color-text)] mb-4">
+            Ready to get started?
+          </h2>
+          <p class="text-lg text-[var(--color-text-secondary)] mb-8">
+            Create your documentation site in minutes.
+          </p>
+          <a
+            href="/docs/introduction"
+            class="inline-flex px-8 py-3.5 bg-primary-600 text-white rounded-xl hover:bg-primary-700 transition-all font-medium shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5"
+          >
+            Read the docs
+          </a>
+        </div>
+      </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="border-t border-[var(--color-border)] bg-[var(--color-bg-secondary)]">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
+          <div class="flex items-center gap-2 text-[var(--color-text-secondary)]">
+            {config.logo && <img src={config.logo} alt={config.name} class="h-5 w-5 opacity-60" />}
+            <span class="text-sm">Built with Barodoc</span>
+          </div>
+          <div class="flex items-center gap-6">
+            {config.topbar?.github && (
+              <a
+                href={config.topbar.github}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"
+              >
+                GitHub
+              </a>
+            )}
+            <a
+              href="/docs/introduction"
+              class="text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"
+            >
+              Documentation
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </div>
+</BaseLayout>

package/src/styles/global.css

@@ -0,0 +1,342 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+/* Scan theme package files */
+@source "../**/*.{astro,tsx}";
+
+@theme {
+  /* Primary color palette - Blue */
+  --color-primary-50: oklch(0.97 0.02 250);
+  --color-primary-100: oklch(0.94 0.04 250);
+  --color-primary-200: oklch(0.88 0.08 250);
+  --color-primary-300: oklch(0.78 0.12 250);
+  --color-primary-400: oklch(0.68 0.16 250);
+  --color-primary-500: oklch(0.58 0.18 250);
+  --color-primary-600: oklch(0.50 0.18 250);
+  --color-primary-700: oklch(0.42 0.16 250);
+  --color-primary-800: oklch(0.35 0.12 250);
+  --color-primary-900: oklch(0.28 0.08 250);
+  --color-primary-950: oklch(0.20 0.04 250);
+}
+
+@layer base {
+  :root {
+    /* Mintlify-style soft colors */
+    --color-bg: #ffffff;
+    --color-bg-secondary: #f8fafc;
+    --color-bg-tertiary: #f1f5f9;
+    --color-bg-hover: #f1f5f9;
+    --color-text: #0f172a;
+    --color-text-secondary: #64748b;
+    --color-text-muted: #94a3b8;
+    --color-border: #e2e8f0;
+    --color-border-light: #f1f5f9;
+    
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  }
+
+  .dark {
+    --color-bg: #0c0c0c;
+    --color-bg-secondary: #141414;
+    --color-bg-tertiary: #1c1c1c;
+    --color-bg-hover: #1c1c1c;
+    --color-text: #fafafa;
+    --color-text-secondary: #a1a1aa;
+    --color-text-muted: #71717a;
+    --color-border: #27272a;
+    --color-border-light: #1c1c1c;
+    
+    /* Dark shadows */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+
+  /* Smooth transitions for all interactive elements */
+  a, button, input, [role="button"] {
+    transition: all 150ms ease-out;
+  }
+  
+  /* Ensure cursor pointer for interactive elements */
+  a[href], button, [role="button"] {
+    cursor: pointer;
+  }
+}
+
+/* Prose styling for MDX content - Mintlify style */
+.prose {
+  --tw-prose-body: var(--color-text);
+  --tw-prose-headings: var(--color-text);
+  --tw-prose-links: var(--color-primary-600);
+  --tw-prose-code: var(--color-text);
+  --tw-prose-pre-bg: var(--color-bg-secondary);
+  font-size: 0.875rem !important;
+  line-height: 1.6 !important;
+}
+
+.dark .prose {
+  --tw-prose-links: var(--color-primary-400);
+}
+
+/* Headings - Mintlify style */
+.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  font-size: 1.75rem !important;
+  font-weight: 700 !important;
+  letter-spacing: -0.025em !important;
+  margin-top: 0 !important;
+  margin-bottom: 0.375rem !important;
+  line-height: 1.25 !important;
+}
+
+.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  font-size: 1.1875rem !important;
+  font-weight: 600 !important;
+  letter-spacing: -0.02em !important;
+  margin-top: 1.25rem !important;
+  margin-bottom: 0.375rem !important;
+  padding-bottom: 0.25rem !important;
+  border-bottom: 1px solid var(--color-border) !important;
+}
+
+.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  font-size: 1rem !important;
+  font-weight: 600 !important;
+  margin-top: 1rem !important;
+  margin-bottom: 0.25rem !important;
+}
+
+.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  font-size: 0.9375rem !important;
+  font-weight: 600 !important;
+  margin-top: 0.875rem !important;
+  margin-bottom: 0.25rem !important;
+}
+
+/* Paragraphs - tighter spacing */
+.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+}
+
+/* Links with underline on hover */
+.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  font-weight: 500 !important;
+  text-decoration: none !important;
+}
+
+.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)):hover {
+  text-decoration: underline !important;
+  text-underline-offset: 2px !important;
+}
+
+/* Code block styling - Mintlify style */
+.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  background-color: var(--color-bg) !important;
+  border: 1px solid var(--color-border) !important;
+  border-radius: 0.5rem !important;
+  padding: 0.75rem 1rem !important;
+  font-size: 0.8125rem !important;
+  line-height: 1.5 !important;
+  overflow-x: auto !important;
+  margin: 0.75rem 0 !important;
+}
+
+.prose :where(code):not(:where(pre code, [class~="not-prose"],[class~="not-prose"] *)) {
+  background-color: var(--color-bg-tertiary) !important;
+  padding: 0.125rem 0.375rem !important;
+  border-radius: 0.25rem !important;
+  font-size: 0.85em !important;
+  font-weight: 500 !important;
+  border: 1px solid var(--color-border) !important;
+}
+
+.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before,
+.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
+  content: none !important;
+}
+
+/* Lists - tighter spacing */
+.prose :where(ul, ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0.375rem !important;
+  margin-bottom: 0.375rem !important;
+  padding-left: 1.25rem !important;
+}
+
+.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0.125rem !important;
+  margin-bottom: 0.125rem !important;
+}
+
+.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
+  color: var(--color-text-muted) !important;
+}
+
+/* Blockquotes - Mintlify style */
+.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  border-left: 3px solid var(--color-primary-500) !important;
+  background-color: var(--color-bg-secondary) !important;
+  padding: 0.5rem 0.75rem !important;
+  margin: 0.625rem 0 !important;
+  border-radius: 0 0.5rem 0.5rem 0 !important;
+  font-style: normal !important;
+}
+
+.prose :where(blockquote p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin: 0 !important;
+}
+
+/* Tables - cleaner look */
+.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  width: 100% !important;
+  border-collapse: collapse !important;
+  margin: 0.625rem 0 !important;
+  font-size: 0.8125rem !important;
+}
+
+.prose :where(th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  background-color: var(--color-bg-secondary) !important;
+  font-weight: 600 !important;
+  text-align: left !important;
+  padding: 0.5rem 0.75rem !important;
+  border-bottom: 2px solid var(--color-border) !important;
+}
+
+.prose :where(td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  padding: 0.5rem 0.75rem !important;
+  border-bottom: 1px solid var(--color-border) !important;
+}
+
+.prose :where(tr:last-child td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  border-bottom: none !important;
+}
+
+/* Horizontal rule */
+.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  border: none !important;
+  border-top: 1px solid var(--color-border) !important;
+  margin: 1.5rem 0 !important;
+}
+
+/* Images */
+.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  border-radius: 0.5rem !important;
+  border: 1px solid var(--color-border) !important;
+}
+
+/* Shiki dual theme support */
+.astro-code {
+  background-color: var(--color-bg) !important;
+  border-radius: 0.5rem;
+}
+
+.dark .astro-code,
+.dark .astro-code span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+}
+
+/* Pagefind search styling */
+.pagefind-ui {
+  --pagefind-ui-scale: 1;
+  --pagefind-ui-primary: var(--color-primary-600);
+  --pagefind-ui-text: var(--color-text);
+  --pagefind-ui-background: var(--color-bg);
+  --pagefind-ui-border: var(--color-border);
+  --pagefind-ui-tag: var(--color-bg-secondary);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-muted);
+}
+
+/* Selection styling */
+::selection {
+  background-color: var(--color-primary-200);
+  color: var(--color-primary-900);
+}
+
+.dark ::selection {
+  background-color: var(--color-primary-800);
+  color: var(--color-primary-100);
+}
+
+/* Animations for shadcn/ui components */
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@keyframes collapsible-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+.animate-accordion-down {
+  animation: accordion-down 0.2s ease-out;
+}
+
+.animate-accordion-up {
+  animation: accordion-up 0.2s ease-out;
+}
+
+.animate-collapsible-down {
+  animation: collapsible-down 0.2s ease-out;
+}
+
+.animate-collapsible-up {
+  animation: collapsible-up 0.2s ease-out;
+}