docmk 1.0.0

package/src/client/components/SearchBox.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="search-box">
+    <div class="relative w-full">
+      <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+      </svg>
+      <input
+        v-model="searchQuery"
+        type="text"
+        placeholder="Search documentation..."
+        class="w-full h-9 pl-9 pr-4 text-sm bg-secondary border border-border rounded-md placeholder-muted-foreground focus-outline"
+        @input="handleSearch"
+        @focus="showResults = true"
+        @blur="hideResults"
+      />
+      <kbd class="absolute right-3 top-1/2 -translate-y-1/2 hidden sm:inline-flex h-5 items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-xs text-muted-foreground">
+        <span>⌘</span>K
+      </kbd>
+    </div>
+    
+    <!-- Search Results -->
+    <div v-if="showResults && (searchResults.length > 0 || searchQuery)" class="absolute top-full left-0 right-0 mt-2 bg-background border border-border rounded-lg shadow-lg z-50 max-h-96 overflow-y-auto">
+      <div v-if="searchResults.length === 0 && searchQuery" class="p-4 text-center text-muted-foreground text-sm">
+        No results found for "{{ searchQuery }}"
+      </div>
+      <div v-else>
+        <router-link
+          v-for="result in searchResults.slice(0, 8)"
+          :key="result.path"
+          :to="result.route"
+          class="block p-3 hover:bg-accent transition-colors border-b border-border last:border-b-0"
+          @click="hideResults"
+        >
+          <div class="font-medium text-foreground text-sm mb-1">{{ result.title }}</div>
+          <div v-if="result.description" class="text-xs text-muted-foreground mb-1 line-clamp-2">
+            {{ result.description }}
+          </div>
+          <div class="text-xs text-muted-foreground font-mono">{{ result.pathDisplay }}</div>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { SkillFile } from '../../types/index.js'
+import { getFileRoute, getPathDisplay } from '../utils/routes.js'
+
+const props = defineProps<{
+  files: SkillFile[]
+}>()
+
+const router = useRouter()
+const searchQuery = ref('')
+const showResults = ref(false)
+
+interface SearchResult {
+  path: string
+  route: string
+  title: string
+  description?: string
+  pathDisplay: string
+  score: number
+}
+
+const searchResults = computed(() => {
+  if (!searchQuery.value.trim()) return []
+  
+  const query = searchQuery.value.toLowerCase().trim()
+  const results: SearchResult[] = []
+  
+  for (const file of props.files) {
+    const title = file.title || file.name
+    const description = file.description || ''
+    const content = file.content || ''
+    const path = file.path
+    
+    let score = 0
+    
+    // Title match (highest priority)
+    if (title.toLowerCase().includes(query)) {
+      score += 10
+    }
+    
+    // Description match
+    if (description.toLowerCase().includes(query)) {
+      score += 5
+    }
+    
+    // Content match
+    if (content.toLowerCase().includes(query)) {
+      score += 1
+    }
+    
+    // Path match
+    if (path.toLowerCase().includes(query)) {
+      score += 2
+    }
+    
+    if (score > 0) {
+      results.push({
+        path,
+        route: getFileRoute(file),
+        title,
+        description,
+        pathDisplay: getPathDisplay(path),
+        score
+      })
+    }
+  }
+  
+  return results.sort((a, b) => b.score - a.score)
+})
+
+// Route generation functions moved to utils/routes.ts
+
+function handleSearch() {
+  showResults.value = true
+}
+
+function hideResults() {
+  setTimeout(() => {
+    showResults.value = false
+  }, 200) // Delay to allow clicks
+}
+</script>
+
+<style scoped>
+.search-box {
+  position: relative;
+  width: 100%;
+}
+
+.relative { position: relative; }
+.absolute { position: absolute; }
+.w-full { width: 100%; }
+.h-4 { height: 1rem; }
+.w-4 { width: 1rem; }
+.h-5 { height: 1.25rem; }
+.h-9 { height: 2.25rem; }
+.left-3 { left: 0.75rem; }
+.right-3 { right: 0.75rem; }
+.top-1\/2 { top: 50%; }
+.top-full { top: 100%; }
+.left-0 { left: 0; }
+.right-0 { right: 0; }
+.-translate-y-1\/2 { transform: translateY(-50%); }
+.pl-9 { padding-left: 2.25rem; }
+.pr-4 { padding-right: 1rem; }
+.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
+.p-3 { padding: 0.75rem; }
+.p-4 { padding: 1rem; }
+.mt-2 { margin-top: 0.5rem; }
+.mb-1 { margin-bottom: 0.25rem; }
+.gap-1 { gap: 0.25rem; }
+.text-sm { font-size: 0.875rem; }
+.text-xs { font-size: 0.75rem; }
+.font-medium { font-weight: 500; }
+.font-mono { font-family: var(--font-mono); }
+.text-muted-foreground { color: var(--color-muted-foreground); }
+.text-foreground { color: var(--color-foreground); }
+.placeholder-muted-foreground::placeholder { color: var(--color-muted-foreground); }
+.bg-secondary { background-color: var(--color-secondary); }
+.bg-muted { background-color: var(--color-muted); }
+.bg-card { background-color: var(--color-card); }
+.bg-background { background-color: hsl(var(--background)); }
+.bg-accent { background-color: var(--color-accent); }
+.border { border-width: 1px; }
+.border-b { border-bottom-width: 1px; }
+.border-border { border-color: var(--color-border); }
+.rounded-md { border-radius: var(--radius-md); }
+.rounded-lg { border-radius: var(--radius-lg); }
+.rounded { border-radius: var(--radius-sm); }
+.shadow-lg { box-shadow: var(--shadow-lg); }
+.z-50 { z-index: 50; }
+.max-h-96 { max-height: 24rem; }
+.overflow-y-auto { overflow-y: auto; }
+.items-center { align-items: center; }
+.text-center { text-align: center; }
+.block { display: block; }
+.hidden { display: none; }
+.inline-flex { display: inline-flex; }
+.transition-colors { transition: color 0.2s ease, background-color 0.2s ease; }
+.hover\:bg-accent:hover { background-color: var(--color-accent); }
+.last\:border-b-0:last-child { border-bottom-width: 0; }
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.focus-outline:focus {
+  outline: none;
+  border-color: var(--color-ring);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+}
+
+@media (min-width: 640px) {
+  .sm\:inline-flex { display: inline-flex; }
+}
+</style>

package/src/client/components/Sidebar.vue

@@ -0,0 +1,18 @@
+<template>
+  <nav class="space-y-1">
+    <SidebarItem
+      v-for="item in navigation"
+      :key="item.text"
+      :item="item"
+    />
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { Navigation } from '../../types/index.js'
+import SidebarItem from './SidebarItem.vue'
+
+defineProps<{
+  navigation: Navigation[]
+}>()
+</script>

package/src/client/components/SidebarItem.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="sidebar-item">
+    <!-- Main Item (Parent with Children) -->
+    <div v-if="item.children && item.children.length > 0">
+      <button
+        @click="toggleExpanded"
+        class="flex items-center justify-between w-full px-3 py-2 text-sm font-medium text-foreground hover:bg-accent rounded-md transition-colors"
+      >
+        <div class="flex items-center gap-2">
+          <!-- Fallback icon logic: check item text or use generic -->
+          <component :is="getIcon(item.text)" class="h-4 w-4 text-muted-foreground" />
+          {{ item.text }}
+        </div>
+        <component 
+          :is="isExpanded ? ChevronDown : ChevronRight" 
+          class="h-4 w-4 text-muted-foreground" 
+        />
+      </button>
+      
+      <!-- Children -->
+      <div 
+        v-if="isExpanded" 
+        class="ml-6 mt-1 space-y-1 border-l border-border pl-3"
+      >
+        <SidebarItem
+          v-for="child in item.children"
+          :key="child.text"
+          :item="child"
+        />
+      </div>
+    </div>
+
+    <!-- Leaf Item (Link) -->
+    <router-link
+      v-else-if="item.link"
+      :to="item.link"
+      class="block px-3 py-1.5 text-sm rounded-md transition-colors"
+      :class="[
+        isActive(item.link)
+          ? 'text-primary font-medium bg-primary/5'
+          : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+      ]"
+    >
+      {{ item.text }}
+    </router-link>
+    
+    <!-- Leaf Item (Text only, rare case) -->
+    <span v-else class="block px-3 py-1.5 text-sm text-muted-foreground">
+      {{ item.text }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { Navigation } from '../../types/index.js'
+import { 
+  ChevronDown, 
+  ChevronRight, 
+  BookOpen, 
+  Layers, 
+  Code, 
+  FileText, 
+  Folder 
+} from 'lucide-vue-next'
+
+const props = defineProps<{
+  item: Navigation
+}>()
+
+const route = useRoute()
+const isExpanded = ref(false)
+
+// Simple icon mapping based on text (Acme Docs style)
+const getIcon = (text: string) => {
+  const lower = text.toLowerCase()
+  if (lower.includes('getting started') || lower.includes('introduction')) return BookOpen
+  if (lower.includes('core') || lower.includes('concept')) return Layers
+  if (lower.includes('api') || lower.includes('reference')) return Code
+  if (lower.includes('guide') || lower.includes('tutorial')) return FileText
+  return Folder // Default
+}
+
+// Check if active
+const isActive = (link?: string) => {
+  if (!link) return false
+  return route.path === link
+}
+
+// Auto-expand if current route is within this section
+const shouldAutoExpand = computed(() => {
+  if (!props.item.children) return false
+  return props.item.children.some(child => 
+    (child.link && isActive(child.link)) || 
+    (child.children && child.children.some(c => c.link && isActive(c.link)))
+  )
+})
+
+// Initialize expansion state
+if (shouldAutoExpand.value) {
+  isExpanded.value = true
+}
+
+function toggleExpanded() {
+  isExpanded.value = !isExpanded.value
+}
+</script>

package/src/client/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Modern documentation site">
+  <title>Documentation</title>
+</head>
+<body>
+  <div id="app">
+    <div class="loading">
+      <div style="text-align: center;">
+        <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">📚</div>
+        <div>Loading Documentation...</div>
+      </div>
+    </div>
+  </div>
+  <script type="module" src="/main.ts"></script>
+</body>
+</html>

package/src/client/layouts/AppLayout.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="min-h-screen bg-background font-sans antialiased">
+    <!-- Header -->
+    <header class="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur">
+      <div class="flex h-14 items-center px-4 lg:px-6">
+        <!-- Mobile Menu Toggle -->
+        <button 
+          class="inline-flex items-center justify-center rounded-md p-2 mr-2 md:hidden hover:bg-accent" 
+          @click="toggleMobileMenu"
+        >
+          <Menu v-if="!mobileMenuOpen" class="h-5 w-5" />
+          <X v-else class="h-5 w-5" />
+        </button>
+
+        <!-- Logo -->
+        <router-link to="/" class="flex items-center space-x-2">
+          <Zap class="h-6 w-6" />
+          <span class="font-bold">{{ config?.siteConfig.title || 'Docs' }}</span>
+        </router-link>
+
+        <!-- Search -->
+        <div class="flex-1 mx-4 lg:mx-8 max-w-md">
+          <SearchBox v-if="config" :files="config.files" />
+        </div>
+          
+        <!-- GitHub -->
+        <a 
+          href="https://github.com" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          class="p-2 hover:bg-accent rounded-md"
+        >
+          <Github class="h-5 w-5" />
+        </a>
+      </div>
+    </header>
+
+    <div class="flex">
+      <!-- Mobile Sidebar Overlay -->
+      <div 
+        v-if="mobileMenuOpen" 
+        class="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm md:hidden" 
+        @click="toggleMobileMenu"
+      />
+
+      <!-- Sidebar -->
+      <aside 
+        :class="[
+          'fixed md:sticky top-14 z-40 h-[calc(100vh-3.5rem)] w-64 border-r border-border bg-background overflow-y-auto transition-transform md:translate-x-0',
+          mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
+        ]"
+      >
+        <div class="p-4">
+          <Sidebar v-if="config" :navigation="config.navigation" />
+        </div>
+      </aside>
+
+      <!-- Main Content -->
+      <main class="flex-1 min-w-0">
+        <div class="mx-auto px-6 py-10 lg:px-12 xl:px-16 max-w-[1400px]">
+          <router-view v-if="config" :config="config" />
+          <div v-else class="flex h-[50vh] items-center justify-center text-muted-foreground">
+            Loading...
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { DocGenConfig } from '../../types/index.js'
+import Sidebar from '../components/Sidebar.vue'
+import SearchBox from '../components/SearchBox.vue'
+import { Menu, X, Github, Zap } from 'lucide-vue-next'
+
+const config = ref<DocGenConfig | null>(null)
+const mobileMenuOpen = ref(false)
+
+const toggleMobileMenu = () => {
+  mobileMenuOpen.value = !mobileMenuOpen.value
+}
+
+onMounted(async () => {
+  try {
+    if (typeof globalThis.__DOCGEN_CONFIG__ !== 'undefined' && globalThis.__DOCGEN_CONFIG__) {
+      config.value = globalThis.__DOCGEN_CONFIG__
+    } else {
+      const response = await fetch('/api/config')
+      if (response.ok) {
+        config.value = await response.json()
+      }
+    }
+  } catch (error) {
+    console.error('Failed to load configuration:', error)
+  }
+})
+</script>

package/src/client/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/client/main.ts

@@ -0,0 +1,42 @@
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import App from './App.vue'
+import { routes } from './router.js'
+import './styles/global.css'
+
+// Load config from API in dev mode
+async function loadConfig() {
+  if (!globalThis.__DOCGEN_CONFIG__) {
+    try {
+      const response = await fetch('/api/config')
+      if (response.ok) {
+        globalThis.__DOCGEN_CONFIG__ = await response.json()
+      }
+    } catch (error) {
+      console.error('Failed to load config from API:', error)
+    }
+  }
+}
+
+// Initialize app
+async function init() {
+  await loadConfig()
+  
+  // Create router
+  const router = createRouter({
+    history: createWebHistory(),
+    routes
+  })
+
+  // Create and mount app
+  const app = createApp(App)
+  app.use(router)
+  app.mount('#app')
+
+  // Global error handler
+  app.config.errorHandler = (err, instance, info) => {
+    console.error('Vue Error:', err, info)
+  }
+}
+
+init()