prev-cli 0.7.0 → 0.7.2

package/dist/cli.js

@@ -2,6 +2,7 @@
 
 // src/cli.ts
 import { parseArgs } from "util";
+import path5 from "path";
 
 // src/vite/start.ts
 import { createServer as createServer2, build, preview } from "vite";
@@ -71,6 +72,32 @@ async function ensureCacheDir(rootDir) {
 import fg from "fast-glob";
 import { readFile } from "fs/promises";
 import path2 from "path";
+function parseValue(value) {
+  const trimmed = value.trim();
+  if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
+    const inner = trimmed.slice(1, -1);
+    if (inner.trim() === "")
+      return [];
+    return inner.split(",").map((item) => {
+      let v2 = item.trim();
+      if (v2.startsWith('"') && v2.endsWith('"') || v2.startsWith("'") && v2.endsWith("'")) {
+        v2 = v2.slice(1, -1);
+      }
+      return v2;
+    });
+  }
+  let v = trimmed;
+  if (v.startsWith('"') && v.endsWith('"') || v.startsWith("'") && v.endsWith("'")) {
+    v = v.slice(1, -1);
+  }
+  if (v === "true")
+    return true;
+  if (v === "false")
+    return false;
+  if (!isNaN(Number(v)) && v !== "")
+    return Number(v);
+  return v;
+}
 function parseFrontmatter(content) {
   const frontmatterRegex = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/;
   const match = content.match(frontmatterRegex);
@@ -86,18 +113,9 @@ function parseFrontmatter(content) {
     if (colonIndex === -1)
       continue;
     const key = line.slice(0, colonIndex).trim();
-    let value = line.slice(colonIndex + 1).trim();
-    if (value.startsWith('"') && value.endsWith('"') || value.startsWith("'") && value.endsWith("'")) {
-      value = value.slice(1, -1);
-    }
-    if (value === "true")
-      value = true;
-    else if (value === "false")
-      value = false;
-    else if (!isNaN(Number(value)) && value !== "")
-      value = Number(value);
+    const rawValue = line.slice(colonIndex + 1);
     if (key) {
-      frontmatter[key] = value;
+      frontmatter[key] = parseValue(rawValue);
     }
   }
   return { frontmatter, content: restContent };
@@ -602,7 +620,7 @@ var { values, positionals } = parseArgs({
   allowPositionals: true
 });
 var command = positionals[0] || "dev";
-var rootDir = values.cwd || positionals[1] || process.cwd();
+var rootDir = path5.resolve(values.cwd || positionals[1] || ".");
 function printHelp() {
   console.log(`
 prev - Zero-config documentation site generator

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prev-cli",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Transform MDX directories into beautiful documentation websites",
   "type": "module",
   "license": "MIT",

package/src/theme/MetadataBlock.tsx

@@ -0,0 +1,146 @@
+import React from 'react'
+
+type FrontmatterValue = string | number | boolean | string[] | unknown
+
+interface MetadataBlockProps {
+  frontmatter: Record<string, FrontmatterValue>
+  title?: string
+  description?: string
+}
+
+// Fields to skip (shown elsewhere or internal)
+const SKIP_FIELDS = new Set(['title', 'description'])
+
+// Fields with special icons
+const FIELD_ICONS: Record<string, string> = {
+  date: '📅',
+  author: '👤',
+  tags: '🏷️',
+  status: '📌',
+  version: '📦',
+  repo: '🔗',
+  url: '🔗',
+  link: '🔗',
+}
+
+/**
+ * Detect the display type of a value
+ */
+function detectType(key: string, value: FrontmatterValue): 'date' | 'url' | 'boolean' | 'array' | 'number' | 'string' {
+  if (Array.isArray(value)) return 'array'
+  if (typeof value === 'boolean') return 'boolean'
+  if (typeof value === 'number') return 'number'
+  if (typeof value !== 'string') return 'string'
+
+  // Check for URL
+  if (value.startsWith('http://') || value.startsWith('https://')) return 'url'
+
+  // Check for date patterns
+  if (key === 'date' || key.includes('date') || key.includes('Date')) {
+    // ISO date or YYYY-MM-DD
+    if (/^\d{4}-\d{2}-\d{2}/.test(value)) return 'date'
+  }
+
+  return 'string'
+}
+
+/**
+ * Format a date string nicely
+ */
+function formatDate(value: string): string {
+  try {
+    const date = new Date(value)
+    if (isNaN(date.getTime())) return value
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    })
+  } catch {
+    return value
+  }
+}
+
+/**
+ * Render a single metadata value based on its type
+ */
+function renderValue(key: string, value: FrontmatterValue): React.ReactNode {
+  const type = detectType(key, value)
+
+  switch (type) {
+    case 'array':
+      return (
+        <span className="metadata-array">
+          {(value as string[]).map((item, i) => (
+            <span key={i} className="metadata-chip">{item}</span>
+          ))}
+        </span>
+      )
+
+    case 'boolean':
+      return (
+        <span className={`metadata-boolean ${value ? 'is-true' : 'is-false'}`}>
+          {value ? '✓' : '✗'}
+        </span>
+      )
+
+    case 'url':
+      return (
+        <a href={value as string} className="metadata-link" target="_blank" rel="noopener noreferrer">
+          {(value as string).replace(/^https?:\/\//, '').split('/')[0]}
+        </a>
+      )
+
+    case 'date':
+      return <span className="metadata-date">{formatDate(value as string)}</span>
+
+    case 'number':
+      return <span className="metadata-number">{(value as number).toLocaleString()}</span>
+
+    default:
+      return <span className="metadata-string">{String(value)}</span>
+  }
+}
+
+export function MetadataBlock({ frontmatter, title, description }: MetadataBlockProps) {
+  // Filter out skipped fields and empty values
+  const fields = Object.entries(frontmatter).filter(
+    ([key, value]) => !SKIP_FIELDS.has(key) && value !== undefined && value !== null && value !== ''
+  )
+
+  // Check for draft status
+  const isDraft = frontmatter.draft === true
+
+  // Only show title/description if they came from frontmatter (not extracted from H1)
+  const hasExplicitTitle = 'title' in frontmatter && frontmatter.title
+  const hasExplicitDescription = 'description' in frontmatter && frontmatter.description
+
+  // If no explicit metadata and no other fields, don't render the block
+  if (fields.length === 0 && !hasExplicitTitle && !hasExplicitDescription && !isDraft) {
+    return null
+  }
+
+  return (
+    <div className="metadata-block">
+      {hasExplicitTitle && <h1 className="metadata-title">{title}</h1>}
+      {hasExplicitDescription && <p className="metadata-description">{description}</p>}
+
+      {(fields.length > 0 || isDraft) && (
+        <div className="metadata-fields">
+          {isDraft && (
+            <span className="metadata-field metadata-draft">
+              <span className="metadata-chip is-draft">Draft</span>
+            </span>
+          )}
+          {fields.filter(([key]) => key !== 'draft').map(([key, value]) => (
+            <span key={key} className="metadata-field">
+              {FIELD_ICONS[key] && <span className="metadata-icon">{FIELD_ICONS[key]}</span>}
+              <span className="metadata-key">{key}:</span>
+              {renderValue(key, value)}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/theme/diagrams.tsx

@@ -69,6 +69,14 @@ function createDiagramControls(container: HTMLElement): void {
     openFullscreenModal(svg.outerHTML)
   })
 
+  // Scroll wheel zoom on container
+  container.addEventListener('wheel', (e) => {
+    e.preventDefault()
+    const delta = e.deltaY > 0 ? -0.1 : 0.1
+    scale = Math.min(Math.max(scale + delta, minScale), maxScale)
+    updateScale()
+  })
+
   container.appendChild(controls)
 }
 
@@ -165,10 +173,13 @@ function openFullscreenModal(svgHtml: string): void {
     startX = e.clientX - translateX
     startY = e.clientY - translateY
     svgContainer.style.cursor = 'grabbing'
+    svgContainer.style.userSelect = 'none'
+    e.preventDefault() // Prevent text selection on drag start
   })
 
   document.addEventListener('mousemove', (e) => {
     if (!isDragging) return
+    e.preventDefault()
     translateX = e.clientX - startX
     translateY = e.clientY - startY
     updateTransform()
@@ -176,7 +187,10 @@ function openFullscreenModal(svgHtml: string): void {
 
   document.addEventListener('mouseup', () => {
     isDragging = false
-    if (svgContainer) svgContainer.style.cursor = 'grab'
+    if (svgContainer) {
+      svgContainer.style.cursor = 'grab'
+      svgContainer.style.userSelect = ''
+    }
   })
 
   // Mouse wheel zoom

package/src/theme/entry.tsx

@@ -10,6 +10,7 @@ import {
 import { pages, sidebar } from 'virtual:prev-pages'
 import { useDiagrams } from './diagrams'
 import { Layout } from './Layout'
+import { MetadataBlock } from './MetadataBlock'
 import './styles.css'
 
 // PageTree types (simplified from fumadocs-core)
@@ -61,10 +62,27 @@ function getPageComponent(file: string): React.ComponentType | null {
   return mod?.default || null
 }
 
+interface PageMeta {
+  title?: string
+  description?: string
+  frontmatter?: Record<string, unknown>
+}
+
 // Page wrapper that renders diagrams after content loads
-function PageWrapper({ Component }: { Component: React.ComponentType }) {
+function PageWrapper({ Component, meta }: { Component: React.ComponentType; meta: PageMeta }) {
   useDiagrams()
-  return <Component />
+  return (
+    <>
+      {meta.frontmatter && Object.keys(meta.frontmatter).length > 0 && (
+        <MetadataBlock
+          frontmatter={meta.frontmatter}
+          title={meta.title}
+          description={meta.description}
+        />
+      )}
+      <Component />
+    </>
+  )
 }
 
 // Root layout with custom lightweight Layout
@@ -86,12 +104,17 @@ const rootRoute = createRootRoute({
 })
 
 // Create routes from pages
-const pageRoutes = pages.map((page: { route: string; file: string }) => {
+const pageRoutes = pages.map((page: { route: string; file: string; title?: string; description?: string; frontmatter?: Record<string, unknown> }) => {
   const Component = getPageComponent(page.file)
+  const meta: PageMeta = {
+    title: page.title,
+    description: page.description,
+    frontmatter: page.frontmatter,
+  }
   return createRoute({
     getParentRoute: () => rootRoute,
     path: page.route === '/' ? '/' : page.route,
-    component: Component ? () => <PageWrapper Component={Component} /> : () => null,
+    component: Component ? () => <PageWrapper Component={Component} meta={meta} /> : () => null,
   })
 })
 

package/src/theme/styles.css

@@ -349,6 +349,8 @@ body {
   justify-content: center;
   cursor: grab;
   padding: 2rem;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 .diagram-modal-svg-container svg {
@@ -589,3 +591,109 @@ body {
   background: var(--fd-accent);
   color: var(--fd-accent-foreground);
 }
+
+/* ===========================================
+   Metadata Block Styles
+   =========================================== */
+
+.metadata-block {
+  margin-bottom: 2rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--fd-border);
+}
+
+.metadata-title {
+  font-size: 2.25rem;
+  font-weight: 700;
+  margin: 0 0 0.5rem 0;
+  line-height: 1.2;
+  letter-spacing: -0.025em;
+  color: var(--fd-foreground);
+}
+
+.metadata-description {
+  font-size: 1.125rem;
+  color: var(--fd-muted-foreground);
+  margin: 0 0 1rem 0;
+  line-height: 1.5;
+}
+
+.metadata-fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.metadata-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  color: var(--fd-muted-foreground);
+}
+
+.metadata-icon {
+  font-size: 0.875rem;
+}
+
+.metadata-key {
+  font-weight: 500;
+  color: var(--fd-foreground);
+}
+
+.metadata-chip {
+  display: inline-block;
+  padding: 0.15rem 0.5rem;
+  background: var(--fd-muted);
+  border-radius: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--fd-foreground);
+}
+
+.metadata-chip.is-draft {
+  background: oklch(0.75 0.15 50);
+  color: oklch(0.25 0.05 50);
+}
+
+.dark .metadata-chip.is-draft {
+  background: oklch(0.45 0.12 50);
+  color: oklch(0.95 0.02 50);
+}
+
+.metadata-array {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.metadata-boolean {
+  font-weight: 600;
+}
+
+.metadata-boolean.is-true {
+  color: oklch(0.55 0.15 145);
+}
+
+.metadata-boolean.is-false {
+  color: oklch(0.55 0.15 25);
+}
+
+.metadata-link {
+  color: var(--fd-primary);
+  text-decoration: underline;
+  text-decoration-color: var(--fd-border);
+  text-underline-offset: 2px;
+}
+
+.metadata-link:hover {
+  text-decoration-color: var(--fd-primary);
+}
+
+.metadata-date {
+  font-variant-numeric: tabular-nums;
+}
+
+.metadata-number {
+  font-variant-numeric: tabular-nums;
+}