prev-cli 0.3.3 → 0.4.0

package/dist/cli.js

@@ -12,9 +12,9 @@ import react from "@vitejs/plugin-react-swc";
 import mdx from "@mdx-js/rollup";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
-import path5 from "path";
+import path4 from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
-import { existsSync as existsSync3, readFileSync as readFileSync2 } from "fs";
+import { existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
 
 // src/utils/cache.ts
 import { createHash } from "crypto";
@@ -268,72 +268,6 @@ function entryPlugin(rootDir) {
   };
 }
 
-// src/vite/plugins/fumadocs-plugin.ts
-import path4 from "path";
-import { existsSync as existsSync2 } from "fs";
-function fumadocsPlugin(nodeModulesPath) {
-  const fumadocsCorePath = path4.join(nodeModulesPath, "fumadocs-core");
-  const fumadocsUiPath = path4.join(nodeModulesPath, "fumadocs-ui");
-  const fumadocsUiScopedPath = path4.join(nodeModulesPath, "@fumadocs/ui");
-  function resolveSubpath(pkgPath, subpath) {
-    const directPath = path4.join(pkgPath, "dist", `${subpath}.js`);
-    if (existsSync2(directPath)) {
-      return directPath;
-    }
-    const indexPath = path4.join(pkgPath, "dist", subpath, "index.js");
-    if (existsSync2(indexPath)) {
-      return indexPath;
-    }
-    const rawPath = path4.join(pkgPath, "dist", subpath);
-    if (existsSync2(rawPath)) {
-      return rawPath;
-    }
-    return null;
-  }
-  return {
-    name: "fumadocs-resolver",
-    enforce: "pre",
-    resolveId(id, importer) {
-      if (importer && (id.startsWith("./") || id.startsWith("../"))) {
-        if (importer.includes("fumadocs-core") || importer.includes("fumadocs-ui") || importer.includes("@fumadocs")) {
-          const importerDir = path4.dirname(importer);
-          const resolved = path4.resolve(importerDir, id);
-          const withExt = resolved.endsWith(".js") ? resolved : `${resolved}.js`;
-          if (existsSync2(withExt)) {
-            return withExt;
-          }
-          const indexPath = path4.join(resolved, "index.js");
-          if (existsSync2(indexPath)) {
-            return indexPath;
-          }
-        }
-      }
-      if (id.startsWith("fumadocs-core/")) {
-        const subpath = id.slice("fumadocs-core/".length);
-        const resolved = resolveSubpath(fumadocsCorePath, subpath);
-        if (resolved) {
-          return resolved;
-        }
-      }
-      if (id.startsWith("fumadocs-ui/")) {
-        const subpath = id.slice("fumadocs-ui/".length);
-        const resolved = resolveSubpath(fumadocsUiPath, subpath);
-        if (resolved) {
-          return resolved;
-        }
-      }
-      if (id.startsWith("@fumadocs/ui/")) {
-        const subpath = id.slice("@fumadocs/ui/".length);
-        const resolved = resolveSubpath(fumadocsUiScopedPath, subpath);
-        if (resolved) {
-          return resolved;
-        }
-      }
-      return null;
-    }
-  };
-}
-
 // src/vite/config.ts
 function createFriendlyLogger() {
   const logger = createLogger("info", { allowClearScreen: false });
@@ -389,10 +323,10 @@ function createFriendlyLogger() {
   };
 }
 function findCliRoot2() {
-  let dir = path5.dirname(fileURLToPath2(import.meta.url));
+  let dir = path4.dirname(fileURLToPath2(import.meta.url));
   for (let i = 0;i < 10; i++) {
-    const pkgPath = path5.join(dir, "package.json");
-    if (existsSync3(pkgPath)) {
+    const pkgPath = path4.join(dir, "package.json");
+    if (existsSync2(pkgPath)) {
       try {
         const pkg = JSON.parse(readFileSync2(pkgPath, "utf-8"));
         if (pkg.name === "prev-cli") {
@@ -400,24 +334,24 @@ function findCliRoot2() {
         }
       } catch {}
     }
-    const parent = path5.dirname(dir);
+    const parent = path4.dirname(dir);
     if (parent === dir)
       break;
     dir = parent;
   }
-  return path5.dirname(path5.dirname(fileURLToPath2(import.meta.url)));
+  return path4.dirname(path4.dirname(fileURLToPath2(import.meta.url)));
 }
 function findNodeModules(cliRoot2) {
-  const localNodeModules = path5.join(cliRoot2, "node_modules");
-  if (existsSync3(path5.join(localNodeModules, "react"))) {
+  const localNodeModules = path4.join(cliRoot2, "node_modules");
+  if (existsSync2(path4.join(localNodeModules, "react"))) {
     return localNodeModules;
   }
   let dir = cliRoot2;
   for (let i = 0;i < 10; i++) {
-    const parent = path5.dirname(dir);
+    const parent = path4.dirname(dir);
     if (parent === dir)
       break;
-    if (path5.basename(parent) === "node_modules" && existsSync3(path5.join(parent, "react"))) {
+    if (path4.basename(parent) === "node_modules" && existsSync2(path4.join(parent, "react"))) {
       return parent;
     }
     dir = parent;
@@ -426,7 +360,7 @@ function findNodeModules(cliRoot2) {
 }
 var cliRoot2 = findCliRoot2();
 var cliNodeModules = findNodeModules(cliRoot2);
-var srcRoot2 = path5.join(cliRoot2, "src");
+var srcRoot2 = path4.join(cliRoot2, "src");
 async function createViteConfig(options) {
   const { rootDir, mode, port } = options;
   const cacheDir = await ensureCacheDir(rootDir);
@@ -437,7 +371,6 @@ async function createViteConfig(options) {
     customLogger: createFriendlyLogger(),
     logLevel: mode === "production" ? "silent" : "info",
     plugins: [
-      fumadocsPlugin(cliNodeModules),
       mdx({
         remarkPlugins: [remarkGfm],
         rehypePlugins: [rehypeHighlight]
@@ -448,22 +381,19 @@ async function createViteConfig(options) {
     ],
     resolve: {
       alias: {
-        "@prev/ui": path5.join(srcRoot2, "ui"),
-        "@prev/theme": path5.join(srcRoot2, "theme"),
-        react: path5.join(cliNodeModules, "react"),
-        "react-dom": path5.join(cliNodeModules, "react-dom"),
-        "@tanstack/react-router": path5.join(cliNodeModules, "@tanstack/react-router"),
-        mermaid: path5.join(cliNodeModules, "mermaid"),
-        dayjs: path5.join(cliNodeModules, "dayjs"),
-        "@terrastruct/d2": path5.join(cliNodeModules, "@terrastruct/d2")
+        "@prev/ui": path4.join(srcRoot2, "ui"),
+        "@prev/theme": path4.join(srcRoot2, "theme"),
+        react: path4.join(cliNodeModules, "react"),
+        "react-dom": path4.join(cliNodeModules, "react-dom"),
+        "@tanstack/react-router": path4.join(cliNodeModules, "@tanstack/react-router"),
+        mermaid: path4.join(cliNodeModules, "mermaid"),
+        dayjs: path4.join(cliNodeModules, "dayjs"),
+        "@terrastruct/d2": path4.join(cliNodeModules, "@terrastruct/d2")
       },
       dedupe: [
         "react",
         "react-dom",
-        "@tanstack/react-router",
-        "fumadocs-core",
-        "fumadocs-ui",
-        "@fumadocs/ui"
+        "@tanstack/react-router"
       ]
     },
     optimizeDeps: {
@@ -478,11 +408,6 @@ async function createViteConfig(options) {
         "mermaid",
         "dayjs",
         "@terrastruct/d2"
-      ],
-      exclude: [
-        "fumadocs-core",
-        "fumadocs-ui",
-        "@fumadocs/ui"
       ]
     },
     ssr: {
@@ -493,6 +418,12 @@ async function createViteConfig(options) {
       strictPort: false,
       fs: {
         allow: [rootDir, cliRoot2]
+      },
+      warmup: {
+        clientFiles: [
+          path4.join(srcRoot2, "theme/entry.tsx"),
+          path4.join(srcRoot2, "theme/styles.css")
+        ]
       }
     },
     preview: {
@@ -500,7 +431,7 @@ async function createViteConfig(options) {
       strictPort: false
     },
     build: {
-      outDir: path5.join(rootDir, "dist"),
+      outDir: path4.join(rootDir, "dist"),
       reportCompressedSize: false,
       chunkSizeWarningLimit: 1e4
     }

package/package.json

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

package/src/theme/Layout.tsx

@@ -0,0 +1,116 @@
+import React, { useState } from 'react'
+import { Link, useLocation } from '@tanstack/react-router'
+import type { PageTree } from 'fumadocs-core/server'
+
+interface LayoutProps {
+  tree: PageTree.Root
+  children: React.ReactNode
+}
+
+interface SidebarItemProps {
+  item: PageTree.Item | PageTree.Folder
+  depth?: number
+}
+
+function SidebarItem({ item, depth = 0 }: SidebarItemProps) {
+  const location = useLocation()
+  const [isOpen, setIsOpen] = useState(true)
+
+  if (item.type === 'folder') {
+    return (
+      <div className="sidebar-folder">
+        <button
+          className="sidebar-folder-toggle"
+          onClick={() => setIsOpen(!isOpen)}
+          style={{ paddingLeft: `${depth * 12 + 8}px` }}
+        >
+          <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"/>
+            </svg>
+          </span>
+          {item.name}
+        </button>
+        {isOpen && (
+          <div className="sidebar-folder-children">
+            {item.children.map((child, i) => (
+              <SidebarItem key={i} item={child} depth={depth + 1} />
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  const isActive = location.pathname === item.url ||
+    (item.url === '/' && location.pathname === '/')
+
+  return (
+    <Link
+      to={item.url}
+      className={`sidebar-link ${isActive ? 'active' : ''}`}
+      style={{ paddingLeft: `${depth * 12 + 16}px` }}
+    >
+      {item.name}
+    </Link>
+  )
+}
+
+function ThemeToggle() {
+  const [isDark, setIsDark] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return document.documentElement.classList.contains('dark')
+    }
+    return false
+  })
+
+  const toggle = () => {
+    const newDark = !isDark
+    setIsDark(newDark)
+    document.documentElement.classList.toggle('dark', newDark)
+    localStorage.setItem('theme', newDark ? 'dark' : 'light')
+  }
+
+  return (
+    <button className="theme-toggle" onClick={toggle} aria-label="Toggle theme">
+      {isDark ? (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <circle cx="12" cy="12" r="5"/>
+          <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+        </svg>
+      ) : (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
+        </svg>
+      )}
+    </button>
+  )
+}
+
+export function Layout({ tree, children }: LayoutProps) {
+  // Initialize theme from localStorage
+  React.useEffect(() => {
+    const saved = localStorage.getItem('theme')
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    const isDark = saved === 'dark' || (!saved && prefersDark)
+    document.documentElement.classList.toggle('dark', isDark)
+  }, [])
+
+  return (
+    <div className="prev-layout">
+      <aside className="prev-sidebar">
+        <nav className="sidebar-nav">
+          {tree.children.map((item, i) => (
+            <SidebarItem key={i} item={item} />
+          ))}
+        </nav>
+        <div className="sidebar-footer">
+          <ThemeToggle />
+        </div>
+      </aside>
+      <main className="prev-main">
+        {children}
+      </main>
+    </div>
+  )
+}

package/src/theme/entry.tsx

@@ -6,16 +6,30 @@ import {
   createRootRoute,
   createRoute,
   Outlet,
-  Link,
 } from '@tanstack/react-router'
-import { TanstackProvider } from 'fumadocs-core/framework/tanstack'
-import { DocsLayout } from 'fumadocs-ui/layouts/docs'
-import type { PageTree } from 'fumadocs-core/server'
 import { pages, sidebar } from 'virtual:prev-pages'
 import { useDiagrams } from './diagrams'
-import 'fumadocs-ui/style.css'
+import { Layout } from './Layout'
 import './styles.css'
 
+// PageTree types (simplified from fumadocs-core)
+namespace PageTree {
+  export interface Item {
+    type: 'page'
+    name: string
+    url: string
+  }
+  export interface Folder {
+    type: 'folder'
+    name: string
+    children: (Item | Folder)[]
+  }
+  export interface Root {
+    name: string
+    children: (Item | Folder)[]
+  }
+}
+
 // Convert prev-cli sidebar to Fumadocs PageTree format
 function convertToPageTree(items: any[]): PageTree.Root {
   function convertItem(item: any): PageTree.Item | PageTree.Folder {
@@ -53,21 +67,16 @@ function PageWrapper({ Component }: { Component: React.ComponentType }) {
   return <Component />
 }
 
-// Root layout with Fumadocs DocsLayout - TanstackProvider wraps inside router
+// Root layout with custom lightweight Layout
 function RootLayout() {
   const pageTree = convertToPageTree(sidebar)
 
   return (
-    <TanstackProvider>
-      <DocsLayout
-        tree={pageTree}
-        nav={{ enabled: false }}
-      >
-        <article className="prev-content">
-          <Outlet />
-        </article>
-      </DocsLayout>
-    </TanstackProvider>
+    <Layout tree={pageTree}>
+      <article className="prev-content">
+        <Outlet />
+      </article>
+    </Layout>
   )
 }
 

package/src/theme/styles.css

@@ -1,8 +1,128 @@
 /*
-  Prev CLI Theme Customization
-  Overrides fumadocs-ui's default theme with warm stone palette
+  Prev CLI Theme - Lightweight Documentation Layout
 */
 
+/* Reset */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--fd-font-sans);
+  background: var(--fd-background);
+  color: var(--fd-foreground);
+}
+
+/* Layout structure */
+.prev-layout {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  min-height: 100vh;
+}
+
+/* Sidebar */
+.prev-sidebar {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  background: var(--fd-background);
+  border-right: 1px solid var(--fd-border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar-nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem 0.5rem;
+}
+
+.sidebar-link {
+  display: block;
+  padding: 0.5rem 1rem;
+  color: var(--fd-muted-foreground);
+  text-decoration: none;
+  font-size: 0.9rem;
+  border-radius: 0.375rem;
+  transition: all 0.15s ease;
+}
+
+.sidebar-link:hover {
+  background: var(--fd-muted);
+  color: var(--fd-foreground);
+}
+
+.sidebar-link.active {
+  background: var(--fd-accent);
+  color: var(--fd-accent-foreground);
+  font-weight: 500;
+}
+
+.sidebar-folder-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  background: none;
+  border: none;
+  color: var(--fd-foreground);
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 0.375rem;
+  text-align: left;
+}
+
+.sidebar-folder-toggle:hover {
+  background: var(--fd-muted);
+}
+
+.folder-icon {
+  display: flex;
+  transition: transform 0.15s ease;
+}
+
+.folder-icon.open {
+  transform: rotate(90deg);
+}
+
+.sidebar-folder-children {
+  margin-left: 0.5rem;
+}
+
+.sidebar-footer {
+  padding: 1rem;
+  border-top: 1px solid var(--fd-border);
+}
+
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: var(--fd-muted);
+  border: none;
+  border-radius: 0.5rem;
+  color: var(--fd-muted-foreground);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.theme-toggle:hover {
+  background: var(--fd-accent);
+  color: var(--fd-accent-foreground);
+}
+
+/* Main content area */
+.prev-main {
+  padding: 2rem;
+  overflow-x: hidden;
+}
+
 /* Custom fonts */
 :root {
   --fd-font-sans: "DM Sans", system-ui, sans-serif;
@@ -87,6 +207,10 @@
   line-height: 1.75;
   color: var(--fd-foreground);
   font-size: 1rem;
+  padding-left: 2.5rem !important;
+  padding-right: 1.5rem !important;
+  padding-top: 0.5rem !important;
+  padding-bottom: 3rem !important;
 }
 
 /* Heading styles with better spacing */