prev-cli 0.7.2 → 0.8.0

package/dist/cli.js

@@ -139,8 +139,8 @@ function fileToRoute(file) {
 async function scanPages(rootDir) {
   const files = await fg.glob("**/*.{md,mdx}", {
     cwd: rootDir,
-    ignore: ["node_modules/**", "dist/**", ".cache/**"],
-    dot: true
+    ignore: ["node_modules/**", "dist/**", ".cache/**", ".*/**"],
+    dot: false
   });
   const routeMap = new Map;
   for (const file of files) {

package/package.json

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

package/src/theme/Layout.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef, createContext, useContext } from 'react'
 import { Link, useLocation } from '@tanstack/react-router'
 import type { PageTree } from 'fumadocs-core/server'
 
@@ -7,6 +7,77 @@ interface LayoutProps {
   children: React.ReactNode
 }
 
+type TreeItem = PageTree.Item | PageTree.Folder
+
+// Get unique ID for a tree item
+function getItemId(item: TreeItem): string {
+  return item.type === 'folder' ? `folder:${item.name}` : item.url
+}
+
+// Storage key for a specific path (root or folder)
+function getStorageKey(path: string): string {
+  return `sidebar-order:${path}`
+}
+
+// Apply saved order to items for a specific path
+// Handles: new items (appended), removed items (skipped), stale storage (cleaned)
+function applyOrder(items: TreeItem[], path: string): TreeItem[] {
+  if (typeof window === 'undefined') return items
+
+  const saved = localStorage.getItem(getStorageKey(path))
+  if (!saved) return items
+
+  const order: string[] = JSON.parse(saved)
+  if (order.length === 0) return items
+
+  const itemMap = new Map(items.map(item => [getItemId(item), item]))
+  const ordered: TreeItem[] = []
+
+  // Add items in saved order (skip removed ones)
+  for (const id of order) {
+    const item = itemMap.get(id)
+    if (item) {
+      ordered.push(item)
+      itemMap.delete(id)
+    }
+  }
+
+  // Add remaining items (new ones not in saved order)
+  for (const item of itemMap.values()) {
+    ordered.push(item)
+  }
+
+  // Clean up stale entries: if order changed, update storage
+  const currentIds = ordered.map(getItemId)
+  const hasChanges = order.length !== currentIds.length ||
+    order.some((id, i) => currentIds[i] !== id)
+
+  if (hasChanges) {
+    localStorage.setItem(getStorageKey(path), JSON.stringify(currentIds))
+  }
+
+  return ordered
+}
+
+// Save order for a specific path
+function saveOrder(items: TreeItem[], path: string): void {
+  const order = items.map(getItemId)
+  localStorage.setItem(getStorageKey(path), JSON.stringify(order))
+}
+
+// Drag context for nested components
+interface DragContextType {
+  dragPath: string | null
+  dragIndex: number | null
+  dragOverPath: string | null
+  dragOverIndex: number | null
+  onDragStart: (path: string, index: number) => void
+  onDragOver: (path: string, index: number) => void
+  onDragEnd: () => void
+}
+
+const DragContext = createContext<DragContextType | null>(null)
+
 function SidebarToggle({ collapsed, onToggle }: { collapsed: boolean; onToggle: () => void }) {
   return (
     <button
@@ -41,23 +112,55 @@ function CollapsedFolderIcon({ item, onClick }: { item: PageTree.Folder; onClick
   )
 }
 
-interface SidebarItemProps {
-  item: PageTree.Item | PageTree.Folder
+interface DraggableSidebarItemProps {
+  item: TreeItem
+  index: number
+  path: string
   depth?: number
 }
 
-function SidebarItem({ item, depth = 0 }: SidebarItemProps) {
+function DraggableSidebarItem({ item, index, path, depth = 0 }: DraggableSidebarItemProps) {
   const location = useLocation()
   const [isOpen, setIsOpen] = useState(true)
+  const dragCtx = useContext(DragContext)
+
+  const handleDragStart = (e: React.DragEvent) => {
+    e.stopPropagation()
+    e.dataTransfer.effectAllowed = 'move'
+    dragCtx?.onDragStart(path, index)
+  }
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    e.dataTransfer.dropEffect = 'move'
+    dragCtx?.onDragOver(path, index)
+  }
+
+  const handleDragEnd = (e: React.DragEvent) => {
+    e.stopPropagation()
+    dragCtx?.onDragEnd()
+  }
+
+  const isDropTarget = dragCtx?.dragOverPath === path && dragCtx?.dragOverIndex === index
 
   if (item.type === 'folder') {
+    const folderPath = `${path}/${item.name}`
+
     return (
-      <div className="sidebar-folder">
+      <div
+        className={`sidebar-folder ${isDropTarget ? 'drop-target' : ''}`}
+        draggable
+        onDragStart={handleDragStart}
+        onDragOver={handleDragOver}
+        onDragEnd={handleDragEnd}
+      >
         <button
           className="sidebar-folder-toggle"
           onClick={() => setIsOpen(!isOpen)}
           style={{ paddingLeft: `${depth * 12 + 8}px` }}
         >
+          <span className="drag-handle">⠿</span>
           <span className={`folder-icon ${isOpen ? 'open' : ''}`}>
             <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
               <path d="M4.5 2L8.5 6L4.5 10" stroke="currentColor" strokeWidth="1.5" fill="none"/>
@@ -66,11 +169,11 @@ function SidebarItem({ item, depth = 0 }: SidebarItemProps) {
           {item.name}
         </button>
         {isOpen && (
-          <div className="sidebar-folder-children">
-            {item.children.map((child, i) => (
-              <SidebarItem key={i} item={child} depth={depth + 1} />
-            ))}
-          </div>
+          <DraggableFolderChildren
+            items={item.children}
+            path={folderPath}
+            depth={depth + 1}
+          />
         )}
       </div>
     )
@@ -80,13 +183,81 @@ function SidebarItem({ item, depth = 0 }: SidebarItemProps) {
     (item.url === '/' && location.pathname === '/')
 
   return (
-    <Link
-      to={item.url}
-      className={`sidebar-link ${isActive ? 'active' : ''}`}
-      style={{ paddingLeft: `${depth * 12 + 16}px` }}
+    <div
+      className={`sidebar-item-wrapper ${isDropTarget ? 'drop-target' : ''}`}
+      draggable
+      onDragStart={handleDragStart}
+      onDragOver={handleDragOver}
+      onDragEnd={handleDragEnd}
     >
-      {item.name}
-    </Link>
+      <Link
+        to={item.url}
+        className={`sidebar-link ${isActive ? 'active' : ''}`}
+        style={{ paddingLeft: `${depth * 12 + 16}px` }}
+      >
+        <span className="drag-handle">⠿</span>
+        {item.name}
+      </Link>
+    </div>
+  )
+}
+
+// Draggable folder children with their own order state
+function DraggableFolderChildren({ items, path, depth }: { items: TreeItem[]; path: string; depth: number }) {
+  const [orderedItems, setOrderedItems] = useState<TreeItem[]>(() => applyOrder(items, path))
+  const dragCtx = useContext(DragContext)
+
+  // Update when items change
+  useEffect(() => {
+    setOrderedItems(applyOrder(items, path))
+  }, [items, path])
+
+  // Handle reorder when drag ends in this folder
+  useEffect(() => {
+    if (
+      dragCtx?.dragPath === path &&
+      dragCtx?.dragOverPath === path &&
+      dragCtx?.dragIndex !== null &&
+      dragCtx?.dragOverIndex !== null &&
+      dragCtx?.dragIndex !== dragCtx?.dragOverIndex
+    ) {
+      // Will be handled by parent's onDragEnd
+    }
+  }, [dragCtx, path])
+
+  // Listen for successful drops in this path
+  const prevDragCtx = useRef(dragCtx)
+  useEffect(() => {
+    const prev = prevDragCtx.current
+    if (
+      prev?.dragPath === path &&
+      prev?.dragOverPath === path &&
+      prev?.dragIndex !== null &&
+      prev?.dragOverIndex !== null &&
+      prev?.dragIndex !== prev?.dragOverIndex &&
+      dragCtx?.dragPath === null // drag ended
+    ) {
+      const newItems = [...orderedItems]
+      const [removed] = newItems.splice(prev.dragIndex, 1)
+      newItems.splice(prev.dragOverIndex, 0, removed)
+      setOrderedItems(newItems)
+      saveOrder(newItems, path)
+    }
+    prevDragCtx.current = dragCtx
+  }, [dragCtx, path, orderedItems])
+
+  return (
+    <div className="sidebar-folder-children">
+      {orderedItems.map((child, i) => (
+        <DraggableSidebarItem
+          key={getItemId(child)}
+          item={child}
+          index={i}
+          path={path}
+          depth={depth}
+        />
+      ))}
+    </div>
   )
 }
 
@@ -121,6 +292,41 @@ function ThemeToggle() {
   )
 }
 
+function WidthToggle() {
+  const [isFullWidth, setIsFullWidth] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('content-full-width') === 'true'
+    }
+    return false
+  })
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('full-width', isFullWidth)
+  }, [isFullWidth])
+
+  const toggle = () => {
+    const newFullWidth = !isFullWidth
+    setIsFullWidth(newFullWidth)
+    localStorage.setItem('content-full-width', String(newFullWidth))
+  }
+
+  return (
+    <button className="theme-toggle" onClick={toggle} aria-label="Toggle content width">
+      {isFullWidth ? (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/>
+        </svg>
+      ) : (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
+        </svg>
+      )}
+    </button>
+  )
+}
+
+const ROOT_PATH = 'root'
+
 export function Layout({ tree, children }: LayoutProps) {
   const [collapsed, setCollapsed] = useState(() => {
     if (typeof window !== 'undefined') {
@@ -129,6 +335,13 @@ export function Layout({ tree, children }: LayoutProps) {
     return false
   })
 
+  const [orderedItems, setOrderedItems] = useState<TreeItem[]>(() => applyOrder(tree.children, ROOT_PATH))
+
+  const [dragPath, setDragPath] = useState<string | null>(null)
+  const [dragIndex, setDragIndex] = useState<number | null>(null)
+  const [dragOverPath, setDragOverPath] = useState<string | null>(null)
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null)
+
   // Initialize theme from localStorage
   useEffect(() => {
     const saved = localStorage.getItem('theme')
@@ -137,6 +350,11 @@ export function Layout({ tree, children }: LayoutProps) {
     document.documentElement.classList.toggle('dark', isDark)
   }, [])
 
+  // Update ordered items when tree changes
+  useEffect(() => {
+    setOrderedItems(applyOrder(tree.children, ROOT_PATH))
+  }, [tree.children])
+
   // Persist collapsed state
   useEffect(() => {
     localStorage.setItem('sidebar-collapsed', String(collapsed))
@@ -144,43 +362,96 @@ export function Layout({ tree, children }: LayoutProps) {
 
   const toggleCollapsed = () => setCollapsed(!collapsed)
 
+  const handleDragStart = (path: string, index: number) => {
+    setDragPath(path)
+    setDragIndex(index)
+  }
+
+  const handleDragOver = (path: string, index: number) => {
+    // Only allow dropping in the same path (no cross-folder drops)
+    if (dragPath === path && dragIndex !== index) {
+      setDragOverPath(path)
+      setDragOverIndex(index)
+    }
+  }
+
+  const handleDragEnd = () => {
+    // Handle root-level reordering
+    if (
+      dragPath === ROOT_PATH &&
+      dragOverPath === ROOT_PATH &&
+      dragIndex !== null &&
+      dragOverIndex !== null &&
+      dragIndex !== dragOverIndex
+    ) {
+      const newItems = [...orderedItems]
+      const [removed] = newItems.splice(dragIndex, 1)
+      newItems.splice(dragOverIndex, 0, removed)
+      setOrderedItems(newItems)
+      saveOrder(newItems, ROOT_PATH)
+    }
+
+    setDragPath(null)
+    setDragIndex(null)
+    setDragOverPath(null)
+    setDragOverIndex(null)
+  }
+
   // Get top-level folders for collapsed rail
-  const topFolders = tree.children.filter(
+  const topFolders = orderedItems.filter(
     (item): item is PageTree.Folder => item.type === 'folder'
   )
 
+  const dragContextValue: DragContextType = {
+    dragPath,
+    dragIndex,
+    dragOverPath,
+    dragOverIndex,
+    onDragStart: handleDragStart,
+    onDragOver: handleDragOver,
+    onDragEnd: handleDragEnd,
+  }
+
   return (
-    <div className={`prev-layout ${collapsed ? 'sidebar-collapsed' : ''}`}>
-      <aside className="prev-sidebar">
-        <div className="sidebar-header">
-          <SidebarToggle collapsed={collapsed} onToggle={toggleCollapsed} />
-        </div>
-        {collapsed ? (
-          <div className="sidebar-rail">
-            {topFolders.map((folder, i) => (
-              <CollapsedFolderIcon
-                key={i}
-                item={folder}
-                onClick={toggleCollapsed}
-              />
-            ))}
+    <DragContext.Provider value={dragContextValue}>
+      <div className={`prev-layout ${collapsed ? 'sidebar-collapsed' : ''}`}>
+        <aside className="prev-sidebar">
+          <div className="sidebar-header">
+            <SidebarToggle collapsed={collapsed} onToggle={toggleCollapsed} />
           </div>
-        ) : (
-          <>
-            <nav className="sidebar-nav">
-              {tree.children.map((item, i) => (
-                <SidebarItem key={i} item={item} />
+          {collapsed ? (
+            <div className="sidebar-rail">
+              {topFolders.map((folder, i) => (
+                <CollapsedFolderIcon
+                  key={i}
+                  item={folder}
+                  onClick={toggleCollapsed}
+                />
               ))}
-            </nav>
-            <div className="sidebar-footer">
-              <ThemeToggle />
             </div>
-          </>
-        )}
-      </aside>
-      <main className="prev-main">
-        {children}
-      </main>
-    </div>
+          ) : (
+            <>
+              <nav className="sidebar-nav">
+                {orderedItems.map((item, i) => (
+                  <DraggableSidebarItem
+                    key={getItemId(item)}
+                    item={item}
+                    index={i}
+                    path={ROOT_PATH}
+                  />
+                ))}
+              </nav>
+              <div className="sidebar-footer">
+                <WidthToggle />
+                <ThemeToggle />
+              </div>
+            </>
+          )}
+        </aside>
+        <main className="prev-main">
+          {children}
+        </main>
+      </div>
+    </DragContext.Provider>
   )
 }

package/src/theme/MetadataBlock.tsx

@@ -4,8 +4,6 @@ type FrontmatterValue = string | number | boolean | string[] | unknown
 
 interface MetadataBlockProps {
   frontmatter: Record<string, FrontmatterValue>
-  title?: string
-  description?: string
 }
 
 // Fields to skip (shown elsewhere or internal)
@@ -102,7 +100,7 @@ function renderValue(key: string, value: FrontmatterValue): React.ReactNode {
   }
 }
 
-export function MetadataBlock({ frontmatter, title, description }: MetadataBlockProps) {
+export function MetadataBlock({ frontmatter }: 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 !== ''
@@ -111,36 +109,27 @@ export function MetadataBlock({ frontmatter, title, description }: MetadataBlock
   // 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) {
+  // If no fields to show, don't render
+  if (fields.length === 0 && !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 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/entry.tsx

@@ -74,11 +74,7 @@ function PageWrapper({ Component, meta }: { Component: React.ComponentType; meta
   return (
     <>
       {meta.frontmatter && Object.keys(meta.frontmatter).length > 0 && (
-        <MetadataBlock
-          frontmatter={meta.frontmatter}
-          title={meta.title}
-          description={meta.description}
-        />
+        <MetadataBlock frontmatter={meta.frontmatter} />
       )}
       <Component />
     </>

package/src/theme/styles.css

@@ -165,6 +165,8 @@ body {
 .sidebar-footer {
   padding: 1rem;
   border-top: 1px solid var(--fd-border);
+  display: flex;
+  gap: 0.5rem;
 }
 
 .theme-toggle {
@@ -597,25 +599,7 @@ body {
    =========================================== */
 
 .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;
+  margin-bottom: 1.5rem;
 }
 
 .metadata-fields {
@@ -697,3 +681,54 @@ body {
 .metadata-number {
   font-variant-numeric: tabular-nums;
 }
+
+/* ===========================================
+   Full Width Mode
+   =========================================== */
+
+.full-width .prev-content {
+  max-width: none;
+}
+
+/* ===========================================
+   Drag and Drop Sidebar
+   =========================================== */
+
+.sidebar-item-wrapper {
+  position: relative;
+}
+
+.drag-handle {
+  opacity: 0;
+  cursor: grab;
+  color: var(--fd-muted-foreground);
+  font-size: 0.75rem;
+  margin-right: 0.25rem;
+  transition: opacity 0.15s ease;
+}
+
+.sidebar-folder:hover .drag-handle,
+.sidebar-item-wrapper:hover .drag-handle,
+.sidebar-link:hover .drag-handle {
+  opacity: 0.5;
+}
+
+.drag-handle:hover {
+  opacity: 1 !important;
+}
+
+.sidebar-folder.drop-target,
+.sidebar-item-wrapper.drop-target {
+  background: var(--fd-accent);
+  border-radius: 0.375rem;
+}
+
+.sidebar-folder[draggable="true"],
+.sidebar-item-wrapper[draggable="true"] {
+  cursor: grab;
+}
+
+.sidebar-folder[draggable="true"]:active,
+.sidebar-item-wrapper[draggable="true"]:active {
+  cursor: grabbing;
+}