docmk 1.0.0

package/src/client/pages/SkillPage.vue

@@ -0,0 +1,565 @@
+<template>
+  <div class="skill-page xl:grid xl:grid-cols-[minmax(0,1fr)_240px] gap-12">
+    <div v-if="currentFile" class="skill-content max-w-4xl">
+      <!-- Breadcrumb -->
+      <nav class="flex items-center gap-2 text-sm text-muted-foreground mb-6 overflow-hidden">
+        <router-link to="/" class="hover:text-foreground transition-colors truncate">
+          Docs
+        </router-link>
+        <ChevronRight class="h-4 w-4 shrink-0" />
+        <span v-if="currentFile.category" class="flex items-center gap-2 truncate">
+          <span class="hover:text-foreground transition-colors truncate">
+            {{ currentFile.category }}
+          </span>
+          <ChevronRight class="h-4 w-4 shrink-0" />
+        </span>
+        <span class="text-foreground font-medium truncate">{{ currentFile.title }}</span>
+      </nav>
+
+      <!-- Header -->
+      <header class="mb-10 space-y-4">
+        <div class="flex items-start justify-between gap-4">
+          <h1 class="scroll-m-20 text-4xl font-bold tracking-tight text-foreground">{{ currentFile.title }}</h1>
+          <button
+            @click="copyPage"
+            class="shrink-0 flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground border border-border rounded-md hover:bg-accent transition-colors"
+          >
+            <Check v-if="copied" class="h-4 w-4 text-green-500" />
+            <Copy v-else class="h-4 w-4" />
+            {{ copied ? 'Copied!' : 'Copy page' }}
+          </button>
+        </div>
+        <p v-if="currentFile.description" class="text-lg text-muted-foreground leading-relaxed">
+          {{ currentFile.description }}
+        </p>
+      </header>
+      
+      <!-- Content -->
+      <article class="doc-content">
+        <div v-html="renderedContent" ref="contentRef"></div>
+      </article>
+      
+      <!-- Footer Navigation -->
+      <div class="flex items-center justify-between pt-8 mt-12 border-t border-border">
+        <div class="flex-1 min-w-0">
+          <router-link
+            v-if="navigation.prev"
+            :to="navigation.prev.route"
+            class="group flex flex-col gap-1 pr-4"
+          >
+            <span class="text-xs font-medium text-muted-foreground group-hover:text-foreground transition-colors">
+              Previous
+            </span>
+            <span class="text-base font-medium text-foreground group-hover:text-primary transition-colors flex items-center gap-1 truncate">
+              <ChevronLeft class="h-4 w-4 transition-transform group-hover:-translate-x-1" />
+              {{ navigation.prev.title }}
+            </span>
+          </router-link>
+        </div>
+        
+        <div class="flex-1 min-w-0 text-right">
+          <router-link
+            v-if="navigation.next"
+            :to="navigation.next.route"
+            class="group flex flex-col gap-1 pl-4 items-end"
+          >
+            <span class="text-xs font-medium text-muted-foreground group-hover:text-foreground transition-colors">
+              Next
+            </span>
+            <span class="text-base font-medium text-foreground group-hover:text-primary transition-colors flex items-center gap-1 truncate">
+              {{ navigation.next.title }}
+              <ChevronRight class="h-4 w-4 transition-transform group-hover:translate-x-1" />
+            </span>
+          </router-link>
+        </div>
+      </div>
+    </div>
+    
+    <div v-else class="not-found py-20 text-center">
+      <h1 class="text-2xl font-bold text-foreground mb-4">Page Not Found</h1>
+      <p class="text-muted-foreground mb-8">The requested documentation page could not be found.</p>
+      <router-link to="/" class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2">
+        Return to Home
+      </router-link>
+    </div>
+
+    <!-- Right Sidebar (Table of Contents) -->
+    <aside v-if="currentFile && headings.length > 0" class="hidden xl:block">
+      <div class="sticky top-20">
+        <p class="text-sm font-medium text-foreground mb-3">On this page</p>
+        <nav class="flex flex-col space-y-2 text-sm">
+          <a
+            v-for="heading in headings"
+            :key="heading.anchor"
+            :href="`#${heading.anchor}`"
+            class="text-muted-foreground hover:text-foreground transition-colors"
+            :class="{ 'pl-3': heading.level === 3, 'pl-6': heading.level === 4 }"
+            @click.prevent="scrollToHeading(heading.anchor)"
+          >
+            {{ heading.text }}
+          </a>
+        </nav>
+      </div>
+    </aside>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, nextTick, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { DocGenConfig, SkillFile } from '../../types/index.js'
+import { getFileRoute } from '../utils/routes.js'
+import { ChevronRight, ChevronLeft, Github, Check, Copy } from 'lucide-vue-next'
+
+const props = defineProps<{
+  config: DocGenConfig
+}>()
+
+const route = useRoute()
+const contentRef = ref<HTMLElement | null>(null)
+const copied = ref(false)
+
+const currentFile = computed(() => {
+  const path = route.path
+  
+  // Find matching file based on route
+  for (const file of props.config.files) {
+    const fileRoute = getFileRoute(file)
+    if (fileRoute === path) {
+      return file
+    }
+  }
+  
+  return null
+})
+
+const renderedContent = computed(() => {
+  if (!currentFile.value) return ''
+  
+  // Use pre-rendered HTML if available
+  if (currentFile.value.frontmatter.html) {
+    // Post-process HTML to add copy buttons to code blocks if needed
+    // But since we are using v-html, we'll handle interactivity in onMounted/watch
+    return currentFile.value.frontmatter.html
+  }
+  
+  // Fallback: basic markdown rendering
+  return currentFile.value.content
+    .replace(/^### (.*$)/gim, '<h3 id="$1">$1</h3>')
+    .replace(/^## (.*$)/gim, '<h2 id="$1">$1</h2>')
+    .replace(/^# (.*$)/gim, '<h1 id="$1">$1</h1>')
+    .replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>')
+    .replace(/\*(.*?)\*/gim, '<em>$1</em>')
+    .replace(/```([\s\S]*?)```/gim, '<pre><code>$1</code></pre>')
+    .replace(/`(.*?)`/gim, '<code>$1</code>')
+    .replace(/\n/g, '<br>')
+})
+
+const headings = computed(() => {
+  return currentFile.value?.frontmatter.headings || []
+})
+
+const navigation = computed(() => {
+  if (!currentFile.value) return { prev: null, next: null }
+  
+  const allFiles = props.config.files
+  const currentIndex = allFiles.findIndex(f => f.path === currentFile.value!.path)
+  
+  const prev = currentIndex > 0 ? allFiles[currentIndex - 1] : null
+  const next = currentIndex < allFiles.length - 1 ? allFiles[currentIndex + 1] : null
+  
+  return {
+    prev: prev ? {
+      title: prev.title,
+      route: getFileRoute(prev)
+    } : null,
+    next: next ? {
+      title: next.title,
+      route: getFileRoute(next)
+    } : null
+  }
+})
+
+function formatDate(timestamp: number): string {
+  return new Date(timestamp).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
+}
+
+function scrollToHeading(id: string) {
+  const element = document.getElementById(id)
+  if (element) {
+    const offset = 80 // Header height + padding
+    const bodyRect = document.body.getBoundingClientRect().top
+    const elementRect = element.getBoundingClientRect().top
+    const elementPosition = elementRect - bodyRect
+    const offsetPosition = elementPosition - offset
+
+    window.scrollTo({
+      top: offsetPosition,
+      behavior: 'smooth'
+    })
+    
+    // Update URL hash without jumping
+    history.pushState(null, '', `#${id}`)
+  }
+}
+
+// Copy entire page content (markdown source)
+function copyPage() {
+  if (!currentFile.value) return
+
+  const content = currentFile.value.content
+  navigator.clipboard.writeText(content).then(() => {
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 2000)
+  })
+}
+
+// Add copy functionality to code blocks (GitHub style)
+function setupCodeBlocks() {
+  if (!contentRef.value) return
+
+  const preElements = contentRef.value.querySelectorAll('pre.shiki')
+  preElements.forEach((pre) => {
+    // Skip if already processed
+    if (pre.parentElement?.classList.contains('code-block-wrapper')) return
+
+    // Create wrapper
+    const wrapper = document.createElement('div')
+    wrapper.className = 'code-block-wrapper group relative my-4'
+
+    // Copy button (appears on hover)
+    const button = document.createElement('button')
+    button.className = 'copy-btn absolute top-2 right-2 p-2 rounded-md bg-zinc-700/80 text-zinc-400 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity z-10'
+    button.innerHTML = `<svg class="w-4 h-4" viewBox="0 0 16 16" fill="currentColor"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg>`
+
+    button.onclick = () => {
+      const code = pre.textContent || ''
+      navigator.clipboard.writeText(code).then(() => {
+        button.innerHTML = `<svg class="w-4 h-4 text-green-400" viewBox="0 0 16 16" fill="currentColor"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path></svg>`
+        setTimeout(() => {
+          button.innerHTML = `<svg class="w-4 h-4" viewBox="0 0 16 16" fill="currentColor"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg>`
+        }, 2000)
+      })
+    }
+
+    // Wrap pre element in place (don't clone to preserve shiki styles)
+    pre.parentNode?.insertBefore(wrapper, pre)
+    wrapper.appendChild(pre)
+    wrapper.appendChild(button)
+
+    // Style pre element
+    pre.style.margin = '0'
+    pre.style.padding = '16px'
+    pre.style.borderRadius = '6px'
+    pre.style.fontSize = '14px'
+    pre.style.lineHeight = '1.45'
+    pre.style.overflow = 'auto'
+  })
+}
+
+// Watch for content changes to re-setup code blocks
+watch(renderedContent, () => {
+  nextTick(() => {
+    setupCodeBlocks()
+  })
+})
+
+onMounted(() => {
+  // Smooth scroll to anchor if present
+  nextTick(() => {
+    if (route.hash) {
+      scrollToHeading(route.hash.slice(1))
+    }
+    setupCodeBlocks()
+  })
+})
+</script>
+
+<style scoped>
+.skill-page {
+  width: 100%;
+}
+
+/* Document content styles */
+:deep(.doc-content) {
+  line-height: 1.75;
+  color: var(--color-foreground);
+}
+
+:deep(.doc-content h2) {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-top: 2.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+:deep(.doc-content h3) {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: 2rem;
+  margin-bottom: 0.75rem;
+}
+
+:deep(.doc-content p) {
+  margin-bottom: 1.25rem;
+}
+
+:deep(.doc-content ul, .doc-content ol) {
+  margin: 1rem 0;
+  padding-left: 1.5rem;
+}
+
+:deep(.doc-content li) {
+  margin: 0.5rem 0;
+}
+
+:deep(.doc-content a) {
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+
+/* Inline code */
+:deep(.doc-content code:not(pre code)) {
+  background: var(--color-muted);
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-size: 0.875em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+/* Code blocks - shiki handles colors via inline styles */
+:deep(.doc-content pre.shiki) {
+  margin: 1.5rem 0;
+  padding: 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+:deep(.doc-content pre.shiki code) {
+  background: transparent;
+  padding: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.skill-header {
+  margin-bottom: 3rem;
+  padding-bottom: 2rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.skill-title {
+  font-size: 2.25rem;
+  font-weight: 700;
+  color: var(--color-foreground);
+  margin-bottom: 1rem;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+.skill-description {
+  font-size: 1.125rem;
+  color: var(--color-muted-foreground);
+  margin-bottom: 1.5rem;
+  line-height: 1.6;
+}
+
+.skill-meta {
+  color: var(--color-muted-foreground);
+  font-size: 0.875rem;
+}
+
+/* TOC - Simplified */
+.toc {
+  background: var(--color-muted);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  margin-bottom: 3rem;
+  border: 1px solid var(--color-border);
+}
+
+.toc h3 {
+  margin: 0 0 1rem;
+  color: var(--color-foreground);
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+}
+
+.toc-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.toc-list li {
+  margin-bottom: 0.5rem;
+}
+
+.toc-level-1 { padding-left: 0; }
+.toc-level-2 { padding-left: 0; }
+.toc-level-3 { padding-left: 1rem; }
+.toc-level-4 { padding-left: 2rem; }
+
+.toc-link {
+  color: var(--color-muted-foreground);
+  text-decoration: none;
+  font-size: 0.875rem;
+  transition: color 0.2s ease;
+}
+
+.toc-link:hover {
+  color: var(--color-primary);
+}
+
+/* Content Typography */
+:deep(.markdown-content) {
+  line-height: 1.7;
+  color: var(--color-foreground);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  color: var(--color-foreground);
+  border: 1px solid var(--color-code-border);
+}
+
+:deep(.markdown-content pre) {
+  background: var(--color-code-bg);
+  border: 1px solid var(--color-code-border);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem;
+  overflow-x: auto;
+  margin: 1.5rem 0;
+}
+
+:deep(.markdown-content pre code) {
+  background: none;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  color: inherit;
+  font-size: 0.875rem;
+}
+
+:deep(.markdown-content blockquote) {
+  border-left: 4px solid var(--color-primary);
+  background: var(--color-muted);
+  padding: 1rem 1.5rem;
+  margin: 1.5rem 0;
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  color: var(--color-muted-foreground);
+  font-style: italic;
+}
+
+:deep(.markdown-content table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 2rem 0;
+  font-size: 0.875rem;
+}
+
+:deep(.markdown-content th),
+:deep(.markdown-content td) {
+  border-bottom: 1px solid var(--color-border);
+  padding: 0.75rem 1rem;
+  text-align: left;
+}
+
+:deep(.markdown-content th) {
+  color: var(--color-foreground);
+  font-weight: 600;
+  background: var(--color-muted);
+}
+
+/* Page Navigation */
+.page-navigation {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 4rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--color-border);
+  gap: 1.5rem;
+}
+
+.nav-link {
+  flex: 1;
+  text-decoration: none;
+  color: inherit;
+  padding: 1.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  transition: all 0.2s ease;
+  background: var(--color-card);
+}
+
+.nav-link:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.nav-prev { text-align: left; }
+.nav-next { text-align: right; }
+
+.nav-direction {
+  color: var(--color-muted-foreground);
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.nav-title {
+  color: var(--color-foreground);
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+/* Not Found */
+.not-found {
+  text-align: center;
+  padding: 4rem 0;
+}
+
+.not-found h1 {
+  font-size: 2.5rem;
+  color: var(--color-foreground);
+  margin-bottom: 1rem;
+}
+
+.not-found p {
+  color: var(--color-muted-foreground);
+  margin-bottom: 2rem;
+  font-size: 1.125rem;
+}
+
+.back-home {
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  background: var(--color-primary);
+  color: var(--color-primary-foreground);
+  border-radius: var(--radius-md);
+  font-weight: 500;
+  transition: opacity 0.2s ease;
+}
+
+.back-home:hover {
+  opacity: 0.9;
+  text-decoration: none;
+}
+
+@media (max-width: 768px) {
+  .skill-title { font-size: 1.875rem; }
+  .page-navigation { flex-direction: column; }
+  .nav-next { text-align: left; }
+}
+</style>

package/src/client/router.ts

@@ -0,0 +1,16 @@
+import { RouteRecordRaw } from 'vue-router'
+import Home from './pages/Home.vue'
+import SkillPage from './pages/SkillPage.vue'
+
+export const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'Skill',
+    component: SkillPage
+  }
+]

package/src/client/styles/global.css

@@ -0,0 +1,92 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Shiki code block styles - GitHub style */
+pre.shiki {
+  margin: 1.5rem 0;
+  padding: 1rem;
+  border-radius: 6px;
+  overflow-x: auto;
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+pre.shiki code {
+  background: transparent;
+  padding: 0;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+}