@odvi/create-dtt-framework 0.1.3 → 0.1.6

package/template/src/features/documentation/components/doc-sidebar.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import * as React from 'react';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { cn } from '@/lib/utils';
+import { FileText, Folder, FolderOpen, ChevronRight, ChevronDown } from 'lucide-react';
+import type { DocNode } from '../utils/doc-loader';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+
+interface DocSidebarProps {
+  nodes: DocNode[];
+  className?: string;
+}
+
+export function DocSidebar({ nodes, className }: DocSidebarProps) {
+  const searchParams = useSearchParams();
+  const currentDoc = searchParams.get('doc');
+  
+  // If no doc is selected, we might want to highlight README or nothing
+  // But usually README corresponds to 'README.md' id if we clicked it.
+
+  return (
+    <div className={cn('pb-12 w-64 border-r h-full bg-muted/10', className)}>
+      <div className="space-y-4 py-4">
+        <div className="px-3 py-2">
+          <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
+            Documentation
+          </h2>
+          <ScrollArea className="h-[calc(100vh-8rem)] px-1">
+            <div className="space-y-1 p-2">
+              {nodes.map((node) => (
+                <DocNodeItem key={node.id} node={node} currentDoc={currentDoc} />
+              ))}
+            </div>
+          </ScrollArea>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DocNodeItem({ node, currentDoc }: { node: DocNode; currentDoc: string | null }) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  
+  // Auto-expand if a child is active
+  React.useEffect(() => {
+    if (node.type === 'directory' && node.children) {
+      const hasActiveChild = checkActiveChild(node, currentDoc);
+      if (hasActiveChild) {
+        setIsOpen(true);
+      }
+    }
+  }, [currentDoc, node]);
+
+  if (node.type === 'directory') {
+    return (
+      <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-full">
+        <CollapsibleTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="w-full justify-start font-normal"
+          >
+            {isOpen ? (
+              <ChevronDown className="mr-2 h-4 w-4" />
+            ) : (
+              <ChevronRight className="mr-2 h-4 w-4" />
+            )}
+            <Folder className="mr-2 h-4 w-4 text-sky-500" />
+            {node.title}
+          </Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="pl-4 space-y-1">
+          {node.children?.map((child) => (
+            <DocNodeItem key={child.id} node={child} currentDoc={currentDoc} />
+          ))}
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  }
+
+  const isActive = currentDoc === node.id || (!currentDoc && node.id === 'README.md');
+
+  return (
+    <Button
+      asChild
+      variant={isActive ? 'secondary' : 'ghost'}
+      size="sm"
+      className={cn('w-full justify-start font-normal', isActive && 'bg-accent')}
+    >
+      <Link href={`/?doc=${encodeURIComponent(node.id)}`} scroll={false}>
+        <FileText className="mr-2 h-4 w-4 text-slate-500" />
+        {node.title}
+      </Link>
+    </Button>
+  );
+}
+
+function checkActiveChild(node: DocNode, currentDoc: string | null): boolean {
+  if (node.id === currentDoc) return true;
+  if (node.children) {
+    return node.children.some(child => checkActiveChild(child, currentDoc));
+  }
+  return false;
+}
+

package/template/src/features/documentation/components/doc-viewer.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeHighlight from 'rehype-highlight';
+import 'highlight.js/styles/github-dark.css'; // or any other style
+import { cn } from '@/lib/utils';
+import type { DocContent } from '../utils/doc-loader';
+
+interface DocViewerProps {
+  doc: DocContent;
+  className?: string;
+}
+
+export function DocViewer({ doc, className }: DocViewerProps) {
+  return (
+    <div className={cn("max-w-4xl mx-auto py-8 px-6", className)}>
+      <div className="mb-8 border-b pb-4">
+        <h1 className="text-4xl font-bold tracking-tight text-foreground">
+          {doc.title}
+        </h1>
+        {doc.frontmatter.description && (
+          <p className="mt-2 text-xl text-muted-foreground">
+            {doc.frontmatter.description}
+          </p>
+        )}
+      </div>
+      
+      <article className="prose prose-slate dark:prose-invert max-w-none 
+        prose-headings:scroll-m-20
+        prose-h1:text-3xl prose-h1:font-extrabold prose-h1:tracking-tight prose-h1:mb-4
+        prose-h2:text-2xl prose-h2:font-semibold prose-h2:tracking-tight prose-h2:mt-10 prose-h2:mb-4
+        prose-h3:text-xl prose-h3:font-semibold prose-h3:tracking-tight prose-h3:mt-8 prose-h3:mb-4
+        prose-p:leading-7 prose-p:mb-4
+        prose-ul:my-6 prose-ul:list-disc prose-ul:pl-6
+        prose-code:relative prose-code:rounded prose-code:bg-muted prose-code:px-[0.3rem] prose-code:py-[0.2rem] prose-code:font-mono prose-code:text-sm prose-code:font-semibold
+        prose-pre:p-4 prose-pre:rounded-lg prose-pre:bg-muted/50 prose-pre:border
+      ">
+        <ReactMarkdown 
+          remarkPlugins={[remarkGfm]}
+          rehypePlugins={[rehypeHighlight]}
+          components={{
+            // Override components if needed for custom styling or functionality
+            a: ({node, ...props}) => {
+                // Check if link is local markdown file
+                const href = props.href || '';
+                if (href.startsWith('http')) {
+                    return <a target="_blank" rel="noopener noreferrer" {...props} className="text-primary hover:underline font-medium" />
+                }
+                // Convert relative markdown links to ?doc= links
+                // This is a bit complex as we need to resolve relative paths against current doc ID
+                // For now, let's just leave them as is, or handle basic cases
+                return <a {...props} className="text-primary hover:underline font-medium" />
+            },
+            blockquote: ({node, ...props}) => (
+                <blockquote className="mt-6 border-l-2 border-primary pl-6 italic" {...props} />
+            ),
+            table: ({node, ...props}) => (
+                <div className="my-6 w-full overflow-y-auto">
+                    <table className="w-full" {...props} />
+                </div>
+            )
+          }}
+        >
+          {doc.content}
+        </ReactMarkdown>
+      </article>
+    </div>
+  );
+}
+

package/template/src/features/documentation/index.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { getDocsStructure, getDocContent } from './utils/doc-loader';
+import { DocSidebar } from './components/doc-sidebar';
+import { DocViewer } from './components/doc-viewer';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Button } from '@/components/ui/button';
+import { Menu, Activity } from 'lucide-react';
+import Link from 'next/link';
+import { UserButton } from '@clerk/nextjs';
+
+interface DocumentationLayoutProps {
+  currentDocId?: string;
+}
+
+export async function DocumentationFeature({ currentDocId }: DocumentationLayoutProps) {
+  const structure = await getDocsStructure();
+  
+  // Default to README.md if no doc selected, or if selected doc not found
+  const targetId = currentDocId || 'README.md';
+  let doc = await getDocContent(targetId);
+
+  // Fallback if not found (e.g. invalid ID)
+  if (!doc && targetId !== 'README.md') {
+    doc = await getDocContent('README.md');
+  }
+
+  // If still no doc (shouldn't happen), show error
+  if (!doc) {
+    return <div>Documentation not found.</div>;
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col">
+       {/* Header */}
+       <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container mx-auto flex h-14 items-center justify-between">
+          <div className="flex items-center">
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button variant="ghost" className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 lg:hidden">
+                  <Menu className="h-6 w-6" />
+                  <span className="sr-only">Toggle Menu</span>
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="left" className="pr-0">
+                 <div className="px-7">
+                   <Link href="/" className="font-bold">
+                     DTT Framework
+                   </Link>
+                 </div>
+                 <DocSidebar nodes={structure} className="mt-4 border-none" />
+              </SheetContent>
+            </Sheet>
+            <div className="mr-4 hidden md:flex">
+              <Link href="/" className="mr-6 flex items-center space-x-2">
+                <span className="hidden font-bold sm:inline-block">
+                  DTT Framework
+                </span>
+              </Link>
+            </div>
+          </div>
+          
+          <div className="flex items-center gap-4">
+            <Link href="/health">
+                <Button variant="outline" size="sm" className="gap-2">
+                <Activity className="h-4 w-4" />
+                Health Check
+                </Button>
+            </Link>
+            <UserButton afterSignOutUrl="/sign-in" />
+          </div>
+        </div>
+      </header>
+
+      <div className="flex-1 items-start md:grid md:grid-cols-[240px_minmax(0,1fr)] lg:grid-cols-[280px_minmax(0,1fr)]">
+        {/* Desktop Sidebar */}
+        <aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
+           <div className="h-full py-6 pl-8 pr-6 lg:py-8">
+             <DocSidebar nodes={structure} className="h-full border-none bg-transparent" />
+           </div>
+        </aside>
+        
+        {/* Main Content */}
+        <main className="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
+          <div className="mx-auto w-full min-w-0">
+             <DocViewer doc={doc} />
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

package/template/src/features/documentation/utils/doc-loader.ts

@@ -0,0 +1,177 @@
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+
+const ROOT_DIR = (() => {
+  let currentDir = process.cwd();
+  // In Vercel, process.cwd() is usually /var/task
+  // But we can try to find package.json to be sure
+  try {
+      // Check if we are already at root
+      if (fs.existsSync(path.join(currentDir, 'package.json'))) {
+          return currentDir;
+      }
+      
+      // Look up a few levels
+      for (let i = 0; i < 3; i++) {
+        const parent = path.dirname(currentDir);
+        if (parent === currentDir) break;
+        if (fs.existsSync(path.join(parent, 'package.json'))) {
+            return parent;
+        }
+        currentDir = parent;
+      }
+  } catch (e) {
+      console.error('Error finding root dir:', e);
+  }
+  return process.cwd();
+})();
+
+const DOCS_DIR = path.join(ROOT_DIR, 'docs');
+
+export interface DocNode {
+  id: string;
+  title: string;
+  type: 'file' | 'directory';
+  children?: DocNode[];
+  path?: string; // real file path relative to root
+}
+
+export interface DocContent {
+  title: string;
+  content: string;
+  frontmatter: Record<string, any>;
+}
+
+const ALLOWED_ROOT_FILES = ['README.md', 'DESIGN.md'];
+const ALLOWED_CLI_FILES = ['cli/template/README.md'];
+
+// Helper to format title from filename
+function formatTitle(filename: string): string {
+  return filename
+    .replace(/\.mdx?$/, '')
+    .replace(/^\d+-/, '') // Remove leading numbers like 01-
+    .replace(/-/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+export async function getDocsStructure(): Promise<DocNode[]> {
+  console.log('[Debug] ROOT_DIR:', ROOT_DIR);
+  try {
+    if (fs.existsSync(ROOT_DIR)) {
+      const entries = await fs.promises.readdir(ROOT_DIR);
+      console.log('[Debug] Root entries:', entries);
+    }
+  } catch (error) {
+    console.error('[Debug] Error listing root:', error);
+  }
+
+  const nodes: DocNode[] = [];
+
+  // 1. Root files
+  for (const filename of ALLOWED_ROOT_FILES) {
+    if (fs.existsSync(path.join(ROOT_DIR, filename))) {
+      nodes.push({
+        id: filename,
+        title: filename === 'README.md' ? 'Introduction' : formatTitle(filename),
+        type: 'file',
+        path: filename
+      });
+    }
+  }
+
+  // 2. CLI Docs
+  for (const filepath of ALLOWED_CLI_FILES) {
+    if (fs.existsSync(path.join(ROOT_DIR, filepath))) {
+      nodes.push({
+        id: filepath,
+        title: 'CLI Template',
+        type: 'file',
+        path: filepath
+      });
+    }
+  }
+
+  // 3. Docs folder
+  const docsNodes = await scanDirectory(DOCS_DIR, 'docs');
+  nodes.push(...docsNodes);
+
+  return nodes;
+}
+
+async function scanDirectory(dir: string, parentId: string): Promise<DocNode[]> {
+  if (!fs.existsSync(dir)) return [];
+  
+  const entries = await fs.promises.readdir(dir, { withFileTypes: true });
+  const nodes: DocNode[] = [];
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+    const relativePath = path.relative(ROOT_DIR, fullPath);
+    const id = relativePath.replace(/\\/g, '/'); // Normalize for URLs
+
+    if (entry.isDirectory()) {
+      const children = await scanDirectory(fullPath, id);
+      if (children.length > 0) {
+        nodes.push({
+          id,
+          title: formatTitle(entry.name),
+          type: 'directory',
+          children
+        });
+      }
+    } else if (entry.name.endsWith('.md') || entry.name.endsWith('.mdx')) {
+      // Read frontmatter for title if possible, else derive from filename
+      const fileContent = await fs.promises.readFile(fullPath, 'utf-8');
+      const { data } = matter(fileContent);
+      
+      nodes.push({
+        id,
+        title: data.title || formatTitle(entry.name),
+        type: 'file',
+        path: relativePath
+      });
+    }
+  }
+
+  // Sort: Directories first, then files alphabetically (or by prefix if present)
+  return nodes.sort((a, b) => {
+    if (a.type === b.type) return a.id.localeCompare(b.id);
+    return a.type === 'directory' ? 1 : -1; // Keep directories at bottom usually? Or top? 
+    // Usually folders like "framework" contain the files. 
+    // Let's just sort by ID for now, which handles 01-overview vs 02-techstack
+  });
+}
+
+export async function getDocContent(id: string): Promise<DocContent | null> {
+  // Security check: ensure id resolves to a file within allowed paths
+  const cleanId = id.replace(/\.\./g, ''); // Prevent directory traversal
+  const fullPath = path.join(ROOT_DIR, cleanId);
+
+  // Validate that the resolved path is within ROOT_DIR and is one of the allowed types/locations
+  if (!fullPath.startsWith(ROOT_DIR)) return null;
+  
+  // Basic check: file must exist and be md/mdx
+  if (!fs.existsSync(fullPath)) return null;
+  if (!fullPath.endsWith('.md') && !fullPath.endsWith('.mdx')) return null;
+
+  try {
+    const fileContent = await fs.promises.readFile(fullPath, 'utf-8');
+    const { data, content } = matter(fileContent);
+
+    let title = data.title;
+    if (!title) {
+       title = formatTitle(path.basename(fullPath));
+    }
+
+    return {
+      title,
+      content,
+      frontmatter: data,
+    };
+  } catch (error) {
+    console.error(`Error reading doc ${id} at ${fullPath}:`, error);
+    return null;
+  }
+}
+