popilot 0.6.0 → 0.8.0

package/scaffold/spec-site/src/pages/DocsEditor.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { apiGet, apiPut } from '@/composables/useTurso'
+import { renderMarkdown } from '@/utils/markdown'
+
+const route = useRoute()
+const router = useRouter()
+const docId = computed(() => route.params.docId as string | undefined)
+const isNew = computed(() => !docId.value)
+
+const title = ref('')
+const content = ref('')
+const saving = ref(false)
+
+onMounted(async () => {
+  if (docId.value) {
+    const { data } = await apiGet<{ doc: { title: string; content: string } }>(`/api/v2/docs/${docId.value}`)
+    if (data?.doc) {
+      title.value = data.doc.title
+      content.value = data.doc.content
+    }
+  }
+})
+
+function generateId(title: string): string {
+  return title.toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '').slice(0, 50) || 'untitled'
+}
+
+async function save() {
+  if (!title.value.trim()) { alert('Please enter a title'); return }
+  saving.value = true
+  const id = docId.value || generateId(title.value)
+  const { error } = await apiPut(`/api/v2/docs/${id}`, { title: title.value, content: content.value })
+  saving.value = false
+  if (error) { alert(error); return }
+  router.push(`/docs/${id}`)
+}
+
+// renderMarkdown imported from @/utils/markdown
+</script>
+
+<template>
+  <div class="editor-page">
+    <div class="editor-header">
+      <h1>{{ isNew ? 'New Document' : 'Edit Document' }}</h1>
+      <div class="editor-actions">
+        <button class="btn" @click="router.back()">Cancel</button>
+        <button class="btn btn--primary" :disabled="saving || !title.trim()" @click="save">
+          {{ saving ? 'Saving...' : 'Save' }}
+        </button>
+      </div>
+    </div>
+
+    <input
+      v-model="title"
+      class="editor-title"
+      placeholder="Document title"
+    />
+
+    <div class="editor-split">
+      <div class="editor-pane">
+        <div class="pane-label">Markdown</div>
+        <textarea
+          v-model="content"
+          class="editor-textarea"
+          placeholder="Write in markdown..."
+        />
+      </div>
+      <div class="preview-pane">
+        <div class="pane-label">Preview</div>
+        <div class="preview-content" v-html="renderMarkdown(content)" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.editor-page { max-width: 1200px; margin: 0 auto; padding: 24px; }
+.editor-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+.editor-header h1 { font-size: 20px; font-weight: 700; }
+.editor-actions { display: flex; gap: 8px; }
+
+.editor-title {
+  width: 100%; padding: 12px 16px; font-size: 18px; font-weight: 600;
+  border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; margin-bottom: 16px;
+  box-sizing: border-box;
+}
+
+.editor-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 60vh; }
+.pane-label { font-size: 12px; font-weight: 600; color: var(--text-muted, #888); margin-bottom: 8px; }
+
+.editor-textarea {
+  width: 100%; height: 100%; min-height: 500px;
+  border: 1px solid rgba(0,0,0,0.1); border-radius: 12px;
+  padding: 16px; font-size: 14px; font-family: 'Fira Code', monospace;
+  resize: vertical; box-sizing: border-box; line-height: 1.6;
+}
+
+.preview-pane { overflow-y: auto; }
+.preview-content {
+  border: 1px solid rgba(0,0,0,0.1); border-radius: 12px;
+  padding: 16px; min-height: 500px; font-size: 14px; line-height: 1.7;
+}
+.preview-content :deep(h1) { font-size: 22px; font-weight: 700; margin: 16px 0 8px; }
+.preview-content :deep(h2) { font-size: 18px; font-weight: 600; margin: 24px 0 12px; border-bottom: 1px solid #eee; padding-bottom: 6px; }
+.preview-content :deep(h3) { font-size: 15px; font-weight: 600; margin: 16px 0 8px; }
+.preview-content :deep(code) { background: rgba(0,0,0,0.06); padding: 2px 5px; border-radius: 3px; font-size: 12px; }
+.preview-content :deep(.code-block) { background: #1e293b; color: #e2e8f0; border-radius: 8px; padding: 12px; overflow-x: auto; }
+.preview-content :deep(.code-block code) { background: none; color: inherit; }
+.preview-content :deep(blockquote) { border-left: 4px solid #3b82f6; background: #f9fafb; padding: 8px 12px; margin: 12px 0; border-radius: 0 8px 8px 0; }
+.preview-content :deep(hr) { border: none; border-top: 1px solid #e5e7eb; margin: 24px 0; }
+.preview-content :deep(a) { color: #3b82f6; }
+.preview-content :deep(ul) { padding-left: 20px; }
+
+@media (max-width: 768px) {
+  .editor-split { grid-template-columns: 1fr; }
+}
+</style>

package/scaffold/spec-site/src/pages/DocsHub.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { apiGet, isStaticMode } from '@/api/client'
+
+interface DocEntry {
+  id: number
+  title: string
+  path: string
+  updated_by: string
+  updated_at: string
+  children?: DocEntry[]
+}
+
+interface DocsData {
+  documents: DocEntry[]
+  recent_edits: { id: number; title: string; user: string; updated_at: string }[]
+}
+
+const loading = ref(true)
+const error = ref<string | null>(null)
+const docs = ref<DocEntry[]>([])
+const recentEdits = ref<DocsData['recent_edits']>([])
+const expandedIds = ref<Set<number>>(new Set())
+
+function toggleExpand(id: number) {
+  if (expandedIds.value.has(id)) {
+    expandedIds.value.delete(id)
+  } else {
+    expandedIds.value.add(id)
+  }
+}
+
+onMounted(async () => {
+  if (isStaticMode()) { loading.value = false; return }
+  const { data, error: err } = await apiGet<DocsData>('/api/v2/docs')
+  if (err) {
+    error.value = err
+  } else if (data) {
+    docs.value = data.documents
+    recentEdits.value = data.recent_edits
+  }
+  loading.value = false
+})
+</script>
+
+<template>
+  <div class="docs-page">
+    <h1>Documents</h1>
+    <p class="page-desc">Team documentation hub.</p>
+
+    <div v-if="loading" class="loading-state">
+      <div class="loading-spinner" />
+      <span>Loading documents...</span>
+    </div>
+
+    <div v-else-if="error" class="error-state">
+      <div class="error-icon">&#9888;</div>
+      <p>{{ error }}</p>
+    </div>
+
+    <template v-else>
+      <div class="docs-layout">
+        <!-- Document tree -->
+        <div class="docs-tree">
+          <h2>All Documents</h2>
+          <div v-if="!docs.length" class="empty-msg">No documents yet.</div>
+          <ul class="tree-list">
+            <li v-for="doc in docs" :key="doc.id" class="tree-item">
+              <div class="tree-row" @click="toggleExpand(doc.id)">
+                <span class="tree-icon" v-if="doc.children?.length">
+                  {{ expandedIds.has(doc.id) ? '&#9660;' : '&#9654;' }}
+                </span>
+                <span class="tree-icon tree-leaf" v-else>&#9679;</span>
+                <span class="tree-title">{{ doc.title }}</span>
+                <span class="tree-meta">{{ doc.updated_by }}</span>
+              </div>
+              <ul v-if="doc.children?.length && expandedIds.has(doc.id)" class="tree-children">
+                <li v-for="child in doc.children" :key="child.id" class="tree-item tree-child">
+                  <div class="tree-row">
+                    <span class="tree-icon tree-leaf">&#9679;</span>
+                    <span class="tree-title">{{ child.title }}</span>
+                    <span class="tree-meta">{{ child.updated_by }}</span>
+                  </div>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Recent edits -->
+        <div class="docs-recent">
+          <h2>Recent Edits</h2>
+          <div v-if="!recentEdits.length" class="empty-msg">No recent edits.</div>
+          <ul class="edit-list">
+            <li v-for="edit in recentEdits" :key="edit.id" class="edit-item">
+              <div class="edit-title">{{ edit.title }}</div>
+              <div class="edit-meta">
+                <span>{{ edit.user }}</span>
+                <span>{{ edit.updated_at }}</span>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.docs-page { padding: 32px 40px; max-width: 960px; margin: 0 auto; }
+h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
+.page-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; }
+
+.loading-state, .error-state {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  padding: 80px 0; gap: 12px; color: var(--text-muted);
+}
+.loading-spinner {
+  width: 28px; height: 28px; border: 3px solid var(--border);
+  border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+.error-icon { font-size: 32px; }
+.error-state p { color: var(--red); font-size: 14px; }
+.empty-msg { font-size: 13px; color: var(--text-muted); }
+
+.docs-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
+@media (max-width: 768px) { .docs-layout { grid-template-columns: 1fr; } }
+
+.docs-tree, .docs-recent {
+  background: var(--card-bg); border: 1px solid var(--border-light);
+  border-radius: var(--radius); padding: 20px;
+}
+h2 { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
+
+.tree-list { list-style: none; padding: 0; margin: 0; }
+.tree-item { margin-bottom: 2px; }
+.tree-row {
+  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
+  border-radius: 6px; cursor: pointer; font-size: 13px;
+}
+.tree-row:hover { background: var(--bg); }
+.tree-icon { font-size: 8px; color: var(--text-muted); width: 12px; text-align: center; flex-shrink: 0; }
+.tree-leaf { font-size: 6px; }
+.tree-title { flex: 1; font-weight: 500; }
+.tree-meta { font-size: 11px; color: var(--text-muted); }
+.tree-children { list-style: none; padding-left: 20px; margin: 0; }
+.tree-child .tree-row { padding: 6px 10px; }
+
+.edit-list { list-style: none; padding: 0; margin: 0; }
+.edit-item {
+  padding: 10px 0; border-bottom: 1px solid var(--border-light);
+}
+.edit-item:last-child { border-bottom: none; }
+.edit-title { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
+.edit-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }
+</style>