docmk 1.0.0

package/src/client/pages/Home.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="home-page">
+    <div class="hero-section">
+      <h1 class="hero-title">{{ config?.siteConfig.title || 'Skills Documentation' }}</h1>
+      <p class="hero-description">
+        {{ config?.siteConfig.description || 'Explore your skills and documentation' }}
+      </p>
+    </div>
+    
+    <div v-if="config" class="content-overview">
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="stat-number">{{ config.directories.length }}</div>
+          <div class="stat-label">Skill Categories</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-number">{{ config.files.length }}</div>
+          <div class="stat-label">Documentation Files</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-number">{{ totalWords }}</div>
+          <div class="stat-label">Total Words</div>
+        </div>
+      </div>
+      
+      <div class="recent-section">
+        <h2>Recently Updated</h2>
+        <div class="recent-files">
+          <router-link
+            v-for="file in recentFiles"
+            :key="file.path"
+            :to="getFileRoute(file)"
+            class="recent-file-card"
+          >
+            <div class="file-title">{{ file.title }}</div>
+            <div v-if="file.description" class="file-description">
+              {{ file.description }}
+            </div>
+            <div class="file-meta">
+              {{ formatDate(file.lastModified) }}
+            </div>
+          </router-link>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DocGenConfig, SkillFile, SkillDirectory } from '../../types/index.js'
+import { getFileRoute } from '../utils/routes.js'
+
+const props = defineProps<{
+  config: DocGenConfig
+}>()
+
+const totalWords = computed(() => {
+  return props.config.files.reduce((total, file) => {
+    return total + (file.content?.split(/\s+/).length || 0)
+  }, 0)
+})
+
+const recentFiles = computed(() => {
+  return [...props.config.files]
+    .sort((a, b) => b.lastModified - a.lastModified)
+    .slice(0, 6)
+})
+
+// Route generation moved to utils/routes.ts
+
+function formatDirName(name: string): string {
+  return name.split('-').map(word => 
+    word.charAt(0).toUpperCase() + word.slice(1)
+  ).join(' ')
+}
+
+function formatDate(timestamp: number): string {
+  return new Date(timestamp).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  })
+}
+
+function getFileCount(directory: SkillDirectory): number {
+  let count = 0
+  
+  function countFiles(items: (SkillDirectory | SkillFile)[]) {
+    for (const item of items) {
+      if ('content' in item) {
+        count++
+      } else {
+        if (item.skillFile) count++
+        countFiles(item.children)
+      }
+    }
+  }
+  
+  if (directory.skillFile) count++
+  countFiles(directory.children)
+  
+  return count
+}
+</script>
+
+<style scoped>
+.home-page {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.hero-section {
+  text-align: center;
+  padding: 3rem 0;
+  margin-bottom: 3rem;
+}
+
+.hero-title {
+  font-size: 3rem;
+  font-weight: 700;
+  color: #2c3e50;
+  margin-bottom: 1rem;
+}
+
+.hero-description {
+  font-size: 1.2rem;
+  color: #666;
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.content-overview {
+  space-y: 3rem;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 3rem;
+}
+
+.stat-card {
+  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
+  color: white;
+  padding: 2rem;
+  border-radius: 12px;
+  text-align: center;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.stat-number {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+}
+
+.stat-label {
+  font-size: 1rem;
+  opacity: 0.9;
+}
+
+.recent-section,
+.navigation-section {
+  margin-bottom: 3rem;
+}
+
+.recent-section h2,
+.navigation-section h2 {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 1.5rem;
+}
+
+.recent-files {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1rem;
+}
+
+.recent-file-card {
+  background: white;
+  border: 1px solid #e1e5e9;
+  border-radius: 8px;
+  padding: 1.5rem;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+}
+
+.recent-file-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border-color: #3182ce;
+}
+
+.file-title {
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 0.5rem;
+}
+
+.file-description {
+  color: #666;
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+  line-height: 1.4;
+}
+
+.file-meta {
+  color: #999;
+  font-size: 0.8rem;
+}
+
+.skill-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+}
+
+.skill-card {
+  background: white;
+  border: 1px solid #e1e5e9;
+  border-radius: 8px;
+  padding: 1.5rem;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+}
+
+.skill-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border-color: #3182ce;
+}
+
+.skill-name {
+  font-weight: 600;
+  color: #2c3e50;
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+}
+
+.skill-description {
+  color: #666;
+  font-size: 0.9rem;
+  line-height: 1.4;
+  margin-bottom: 1rem;
+}
+
+.skill-files-count {
+  color: #3182ce;
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 2rem;
+  }
+  
+  .hero-description {
+    font-size: 1rem;
+  }
+  
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .recent-files,
+  .skill-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>