@knowcode/doc-builder 1.9.30 → 1.10.0

package/html/auth.js

@@ -1,157 +0,0 @@
-
-/**
- * Supabase Authentication for Documentation Site
- * Generated by @knowcode/doc-builder
- */
-
-(function() {
-    'use strict';
-    
-    // Skip auth check on login and logout pages
-    const currentPage = window.location.pathname;
-    if (currentPage === '/login.html' || currentPage === '/logout.html' || 
-        currentPage.includes('login') || currentPage.includes('logout')) {
-        return;
-    }
-    
-    // Initialize Supabase client
-    const { createClient } = supabase;
-    const supabaseClient = createClient('https://xcihhnfcitjrwbynxmka.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhjaWhobmZjaXRqcndieW54bWthIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM0Mzc2MzcsImV4cCI6MjA2OTAxMzYzN30.zvWp3JFIR8fBIiwuFF5gqOR_Kxb42baZS5fsBz60XOY', {
-        auth: {
-            persistSession: true,
-            autoRefreshToken: true,
-            detectSessionInUrl: true
-        }
-    });
-    
-    // Check authentication and site access
-    async function checkAuth() {
-        try {
-            // Check authentication mode
-            const isGlobalAuthEnabled = false;
-            const isPrivateDirectoryAuthEnabled = true;
-            
-            // Check if current page is in private directory
-            const currentPath = window.location.pathname;
-            const isPrivatePage = currentPath.includes('/private/');
-            
-            // Get current user session
-            const { data: { user }, error: userError } = await supabaseClient.auth.getUser();
-            
-            if (userError || !user) {
-                // Redirect if global auth is enabled OR if we're on a private page with private auth enabled
-                if (isGlobalAuthEnabled || (isPrivateDirectoryAuthEnabled && isPrivatePage)) {
-                    redirectToLogin();
-                } else {
-                    // Public page (no global auth and either no private auth or not on private page)
-                    document.body.classList.add('authenticated'); // Use same class to show body
-                    updateAuthButton(false);
-                }
-                return;
-            }
-            
-            // Check if user has access to this site (using domain)
-            const { data: access, error: accessError } = await supabaseClient
-                .from('docbuilder_access')
-                .select('*')
-                .eq('user_id', user.id)
-                .eq('domain', window.location.host)
-                .single();
-            
-            if (accessError || !access) {
-                if (isGlobalAuthEnabled || (isPrivateDirectoryAuthEnabled && isPrivatePage)) {
-                    showAccessDenied();
-                } else {
-                    // Public page, show it but don't grant private navigation access
-                    document.body.classList.add('authenticated'); // Show body content
-                    updateAuthButton(false);
-                }
-                return;
-            }
-            
-            // User is authenticated and has domain access - grant appropriate access
-            console.log('User authenticated and authorized');
-            document.body.classList.add('authenticated');
-            
-            // Grant private navigation access if private directory auth is enabled
-            if (isPrivateDirectoryAuthEnabled || isGlobalAuthEnabled) {
-                document.body.classList.add('has-private-access');
-            }
-            
-            updateAuthButton(true);
-            
-        } catch (error) {
-            console.error('Auth check failed:', error);
-            const isPrivatePage = window.location.pathname.includes('/private/');
-            if (isGlobalAuthEnabled || (isPrivateDirectoryAuthEnabled && isPrivatePage)) {
-                redirectToLogin();
-            } else {
-                // Public page, show it anyway
-                document.body.classList.add('authenticated');
-                updateAuthButton(false);
-            }
-        }
-    }
-    
-    // Redirect to login page
-    function redirectToLogin() {
-        const currentUrl = window.location.pathname + window.location.search;
-        const loginUrl = '/login.html' + (currentUrl !== '/' ? '?redirect=' + encodeURIComponent(currentUrl) : '');
-        window.location.href = loginUrl;
-    }
-    
-    // Show access denied message
-    function showAccessDenied() {
-        document.body.classList.add('authenticated'); // Show the body
-        document.body.innerHTML = `
-            <div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Inter, sans-serif;">
-                <div style="text-align: center; max-width: 400px;">
-                    <h1 style="color: #ef4444; margin-bottom: 1rem;">Access Denied</h1>
-                    <p style="color: #6b7280; margin-bottom: 2rem;">You don't have permission to view this documentation site.</p>
-                    <a href="/login.html" style="background: #3b82f6; color: white; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none;">Try Different Account</a>
-                </div>
-            </div>
-        `;
-    }
-    
-    // Function to update auth button
-    function updateAuthButton(isAuthenticated) {
-        const authBtn = document.querySelector('.auth-btn');
-        if (authBtn) {
-            const icon = authBtn.querySelector('i');
-            if (icon) {
-                if (isAuthenticated) {
-                    icon.className = 'fas fa-sign-out-alt';
-                    authBtn.title = 'Logout';
-                    authBtn.href = '/logout.html';
-                } else {
-                    icon.className = 'fas fa-sign-in-alt';
-                    authBtn.title = 'Login';
-                    authBtn.href = '/login.html';
-                }
-            }
-        }
-    }
-    
-    // Add auth button functionality
-    document.addEventListener('DOMContentLoaded', function() {
-        const authBtn = document.querySelector('.auth-btn');
-        if (authBtn) {
-            authBtn.addEventListener('click', async function(e) {
-                // Check if we're logged in
-                const { data: { user } } = await supabaseClient.auth.getUser();
-                if (user) {
-                    // Logged in - sign out
-                    e.preventDefault();
-                    await supabaseClient.auth.signOut();
-                    window.location.href = '/logout.html';
-                }
-                // If not logged in, normal navigation to login page will occur
-            });
-        }
-    });
-    
-    // Run auth check
-    checkAuth();
-    
-})();

package/html/claude-workflow-guide.html

@@ -1,525 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Claude + CLAUDE.">
-    <title>Claude + CLAUDE.md Documentation Workflow Guide - Doc Builder</title>
-    
-    <meta name="author" content="Lindsay Smith">
-    <meta name="keywords" content="documentation, markdown, static site generator, vercel, notion-style, claude, workflow, step">
-    <meta name="robots" content="index, follow">
-    <link rel="canonical" href="https://doc-builder-delta.vercel.app/claude-workflow-guide.html">
-    
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="article">
-    <meta property="og:url" content="https://doc-builder-delta.vercel.app/claude-workflow-guide.html">
-    <meta property="og:title" content="Claude + CLAUDE.md Documentation Workflow Guide - Doc Builder">
-    <meta property="og:description" content="Claude + CLAUDE.">
-    <meta property="og:image" content="https://doc-builder-delta.vercel.app/og-default.png">
-    <meta property="og:site_name" content="Doc Builder">
-    <meta property="og:locale" content="en_US">
-    
-    <!-- Twitter Card -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="@planbbackups">
-    <meta name="twitter:creator" content="@planbbackups">
-    <meta name="twitter:title" content="Claude + CLAUDE.md Documentation Workflow Guide - Doc Builder">
-    <meta name="twitter:description" content="Claude + CLAUDE.">
-    <meta name="twitter:image" content="https://doc-builder-delta.vercel.app/og-default.png">
-    
-    <!-- Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-    
-    <!-- Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    
-    <!-- Mermaid -->
-    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
-    
-    <!-- Styles -->
-    <link rel="stylesheet" href="/css/notion-style.css">
-    
-    <!-- Favicon -->
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📚</text></svg>">
-    
-    <script type="application/ld+json">
-{
-  "@context": "https://schema.org",
-  "@type": "TechArticle",
-  "headline": "Claude + CLAUDE.md Documentation Workflow Guide",
-  "description": "Claude + CLAUDE.",
-  "author": {
-    "@type": "Person",
-    "name": "Lindsay Smith"
-  },
-  "publisher": {
-    "@type": "Organization",
-    "name": "Knowcode Ltd",
-    "url": "https://knowcode.tech"
-  },
-  "datePublished": "2025-07-21T20:43:20.146Z",
-  "dateModified": "2025-07-21T20:43:20.146Z",
-  "mainEntityOfPage": {
-    "@type": "WebPage",
-    "@id": "https://doc-builder-delta.vercel.app/claude-workflow-guide.html"
-  },
-  "breadcrumb": {
-    "@type": "BreadcrumbList",
-    "itemListElement": [
-      {
-        "@type": "ListItem",
-        "position": 1,
-        "name": "Doc Builder",
-        "item": "https://doc-builder-delta.vercel.app"
-      },
-      {
-        "@type": "ListItem",
-        "position": 2,
-        "name": "Claude Workflow Guide",
-        "item": "https://doc-builder-delta.vercel.app/claude-workflow-guide.html"
-      }
-    ]
-  }
-}
-</script>
-</head>
-<body>
-    <!-- Header -->
-    <header class="header">
-        <div class="header-content">
-            <a href="/index.html" class="logo">Doc Builder</a>
-            
-            <div class="header-actions">
-                <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.5.1">Last updated: Jul 21, 2025, 08:43 PM UTC</span>
-                </div>
-                
-                
-                
-                <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
-                    <i class="fas fa-moon"></i>
-                </button>
-                
-                <button id="menu-toggle" class="menu-toggle" aria-label="Toggle menu">
-                    <i class="fas fa-bars"></i>
-                </button>
-            </div>
-        </div>
-    </header>
-    
-    <!-- Preview Banner -->
-    <div id="preview-banner" class="preview-banner">
-        <div class="banner-content">
-            <i class="fas fa-exclamation-triangle banner-icon"></i>
-            <span class="banner-text">This documentation is a preview version - some content may be incomplete</span>
-            <button id="dismiss-banner" class="banner-dismiss" aria-label="Dismiss banner">
-                <i class="fas fa-times"></i>
-            </button>
-        </div>
-    </div>
-    
-    <!-- Breadcrumbs -->
-    <nav class="breadcrumbs" id="breadcrumbs">
-        <!-- Breadcrumbs will be generated by JavaScript -->
-    </nav>
-    
-    <!-- Main Content -->
-    <div class="main-wrapper">
-        <!-- Sidebar -->
-        <aside class="sidebar">
-            <div class="sidebar-header">
-                <div class="filter-box">
-                    <input type="text" placeholder="Filter items..." class="filter-input" id="nav-filter">
-                    <i class="fas fa-search filter-icon"></i>
-                </div>
-            </div>
-            <nav class="navigation">
-                
-      <div class="nav-section" data-level="0">
-        <a class="nav-title expanded" href="/README.html"  >
-          <i class="fas fa-home"></i> Documentation
-        </a>
-        <div class="nav-content" >
-        <a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
-        <a href="/claude-workflow-guide.html" class="nav-item active" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
-        <a href="/documentation-index.html" class="nav-item" data-tooltip="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose."><i class="fas fa-file-alt"></i> Documentation Index</a>
-        <a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing and configuring the Vercel CLI across different operating systems and environments."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
-        <a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide provides a detailed explanation of every prompt you&#039;ll encounter during the first-time Vercel setup process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
-      <div class="nav-section" data-level="1">
-        <a class="nav-title collapsible" href="#" data-target="nav-guides-1" >
-          <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Guides
-        </a>
-        <div class="nav-content collapsed" id="nav-guides-1">
-        <a href="/guides/authentication-guide.html" class="nav-item" data-tooltip="This guide explains how to configure and use the built-in authentication feature in @knowcode/doc-builder to protect your documentation with basic..."><i class="fas fa-file-alt"></i> Authentication Guide</a>
-        <a href="/guides/documentation-standards.html" class="nav-item" data-tooltip="This document defines the documentation standards and conventions for the @knowcode/doc-builder project."><i class="fas fa-file-alt"></i> Documentation Standards</a>
-        <a href="/guides/seo-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features to help your documentation rank better in search results and..."><i class="fas fa-file-alt"></i> Seo Guide</a>
-        <a href="/guides/troubleshooting-guide.html" class="nav-item" data-tooltip="This guide helps you resolve common issues when using @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Troubleshooting Guide</a></div></div>
-            </nav>
-            <div class="resize-handle"></div>
-        </aside>
-        
-        <!-- Content Area -->
-        <main class="content">
-            <div class="content-inner">
-                <h1>Claude + CLAUDE.md Documentation Workflow Guide</h1>
-<p><strong>Generated</strong>: 2025-07-21 10:00 UTC<br><strong>Status</strong>: Complete<br><strong>Verified</strong>: ✅</p>
-<h2>Overview</h2>
-<p>This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it to Vercel using the @knowcode/doc-builder tool.</p>
-<h2>Workflow Overview</h2>
-<div class="mermaid-wrapper">
-      <div class="mermaid-title">Diagram</div>
-      <div class="mermaid">graph TD
-    A[Start Project] --> B[Setup CLAUDE.md]
-    B --> C[Configure doc-builder]
-    C --> D[Create Documentation with Claude]
-    D --> E[Build Static Site]
-    E --> F[Deploy to Vercel]
-    F --> G[Live Documentation]
-    
-    B -.-> H[Refine Instructions]
-    H -.-> D
-    
-    D --> I{Review Quality}
-    I -->|Needs Improvement| H
-    I -->|Good| E
-    
-    style A fill:#e1f5fe
-    style G fill:#c8e6c9
-    style H fill:#fff3e0</div>
-    </div>
-<h2>Step 1: Setting Up CLAUDE.md</h2>
-<h3>1.1 Project-Level CLAUDE.md</h3>
-<p>Create a <code>CLAUDE.md</code> file in your project root with specific instructions for documentation:</p>
-<pre><code class="language-markdown"># CLAUDE.md - [Your Project Name]
-
-## Documentation Standards
-
-### Document Structure
-- All documentation goes in the `/docs` directory
-- Use hierarchical folder structure for organization
-- Follow naming convention: `{component}-{topic}-guide.md`
-
-### Content Requirements
-- Include mermaid diagrams for complex workflows
-- Mark verified (✅) vs speculated (❓) information
-- Add timestamps to all documents
-- Include practical examples
-
-### Writing Style
-- Use clear, concise language
-- Target intermediate technical audience
-- Include code examples with syntax highlighting
-- Add troubleshooting sections
-
-### Metadata Format
-</code></pre>
-<p><strong>Generated</strong>: YYYY-MM-DD HH:MM UTC<br><strong>Status</strong>: Draft/Complete<br><strong>Verified</strong>: ✅/❓</p>
-<pre><code>
-</code></pre>
-<h3>1.2 Global CLAUDE.md Best Practices</h3>
-<p>Your global <code>~/.claude/CLAUDE.md</code> should include:</p>
-<div class="mermaid-wrapper">
-      <div class="mermaid-title">Diagram</div>
-      <div class="mermaid">graph LR
-    A[Global CLAUDE.md] --> B[Document Standards]
-    A --> C[Git Workflow]
-    A --> D[Quality Checks]
-    A --> E[Security Practices]
-    
-    B --> B1[Naming Conventions]
-    B --> B2[Markdown Standards]
-    B --> B3[Diagram Requirements]
-    
-    C --> C1[Commit Frequency]
-    C --> C2[Branch Strategy]
-    
-    D --> D1[Verification Marks]
-    D --> D2[Changelog Updates]
-    
-    E --> E1[No Credentials]
-    E --> E2[Access Controls]</div>
-    </div>
-<h2>Step 2: Initialize doc-builder</h2>
-<pre><code class="language-bash"># Install doc-builder
-npm install -D @knowcode/doc-builder
-
-# Initialize configuration
-npx doc-builder init
-</code></pre>
-<h3>2.1 Configure doc-builder.config.js</h3>
-<pre><code class="language-javascript">module.exports = {
-  siteName: &#39;Your Project Documentation&#39;,
-  siteDescription: &#39;Comprehensive documentation for Your Project&#39;,
-  docsDir: &#39;docs&#39;,
-  outputDir: &#39;html&#39;,
-  features: {
-    authentication: false,  // Set true for private docs
-    changelog: true,
-    mermaid: true,
-    darkMode: true
-  }
-};
-</code></pre>
-<h2>Step 3: Documentation Creation Workflow with Claude</h2>
-<h3>3.1 Effective Prompting Strategy</h3>
-<div class="mermaid-wrapper">
-      <div class="mermaid-title">Diagram</div>
-      <div class="mermaid">sequenceDiagram
-    participant User
-    participant Claude
-    participant CLAUDE.md
-    participant Documentation
-    
-    User->>Claude: Request documentation
-    Claude->>CLAUDE.md: Check project standards
-    CLAUDE.md-->>Claude: Return guidelines
-    Claude->>Documentation: Create/Update docs
-    Claude->>User: Confirm completion
-    User->>Claude: Review & refine
-    Claude->>Documentation: Apply refinements</div>
-    </div>
-<h3>3.2 Example Documentation Requests</h3>
-<h4>Initial Architecture Documentation</h4>
-<pre><code>&quot;Create comprehensive architecture documentation for our authentication system. Include:
-- System overview with mermaid diagrams
-- Component interactions
-- API endpoints
-- Security considerations
-- Deployment architecture&quot;
-</code></pre>
-<h4>API Documentation</h4>
-<pre><code>&quot;Document all REST API endpoints in our user service. For each endpoint include:
-- HTTP method and path
-- Request/response schemas
-- Authentication requirements
-- Example requests with curl
-- Error responses&quot;
-</code></pre>
-<h4>Setup Guide</h4>
-<pre><code>&quot;Create a detailed setup guide for new developers including:
-- Prerequisites
-- Environment setup steps
-- Configuration options
-- Common issues and solutions
-- Development workflow&quot;
-</code></pre>
-<h3>3.3 Claude Interaction Best Practices</h3>
-<ol>
-<li><strong>Be Specific</strong>: Provide clear requirements and expected structure</li>
-<li><strong>Iterate</strong>: Review generated content and request refinements</li>
-<li><strong>Verify</strong>: Ask Claude to mark verified vs speculated information</li>
-<li><strong>Examples</strong>: Request concrete examples and code snippets</li>
-<li><strong>Diagrams</strong>: Explicitly request mermaid diagrams for visual clarity</li>
-</ol>
-<h2>Step 4: Building Documentation Site</h2>
-<h3>4.1 Development Workflow</h3>
-<div class="mermaid-wrapper">
-      <div class="mermaid-title">Diagram</div>
-      <div class="mermaid">graph LR
-    A[Write Docs] --> B[Preview Locally]
-    B --> C{Looks Good?}
-    C -->|No| A
-    C -->|Yes| D[Build Site]
-    D --> E[Test Build]
-    E --> F{All Good?}
-    F -->|No| A
-    F -->|Yes| G[Ready to Deploy]
-    
-    style A fill:#fff3e0
-    style G fill:#c8e6c9</div>
-    </div>
-<h3>4.2 Commands</h3>
-<pre><code class="language-bash"># Start development server
-npm run dev:docs
-
-# Build static site
-npm run build:docs
-
-# Preview built site
-npx serve html
-</code></pre>
-<h2>Step 5: Deploying to Vercel</h2>
-<h3>5.1 First-Time Setup</h3>
-<pre><code class="language-bash"># Deploy to Vercel (interactive)
-npx doc-builder deploy
-
-# Or with npm script
-npm run deploy:docs
-</code></pre>
-<h3>5.2 Vercel Configuration</h3>
-<p>The tool automatically creates <code>vercel.json</code>:</p>
-<pre><code class="language-json">{
-  &quot;outputDirectory&quot;: &quot;html&quot;,
-  &quot;routes&quot;: [
-    {
-      &quot;src&quot;: &quot;/(.*)&quot;,
-      &quot;dest&quot;: &quot;/$1&quot;
-    }
-  ]
-}
-</code></pre>
-<h3>5.3 Deployment Workflow</h3>
-<div class="mermaid-wrapper">
-      <div class="mermaid-title">Diagram</div>
-      <div class="mermaid">stateDiagram-v2
-    [*] --> LocalDevelopment
-    LocalDevelopment --> BuildDocs: npm run build:docs
-    BuildDocs --> TestLocally: npx serve html
-    TestLocally --> Deploy: npx doc-builder deploy
-    Deploy --> VercelProcessing
-    VercelProcessing --> LiveSite: Success
-    VercelProcessing --> ErrorHandling: Failed
-    ErrorHandling --> LocalDevelopment: Fix issues
-    LiveSite --> [*]</div>
-    </div>
-<h2>Step 6: Continuous Documentation Updates</h2>
-<h3>6.1 Update Workflow</h3>
-<div class="mermaid-wrapper">
-      <div class="mermaid-title">Diagram</div>
-      <div class="mermaid">graph TD
-    A[Code Changes] --> B{Docs Needed?}
-    B -->|Yes| C[Update Documentation]
-    B -->|No| End[End]
-    C --> D[Use Claude for Updates]
-    D --> E[Review Changes]
-    E --> F[Build & Test]
-    F --> G[Deploy Updates]
-    G --> H[Update CHANGELOG.md]
-    H --> End
-    
-    style A fill:#ffebee
-    style G fill:#e8f5e9</div>
-    </div>
-<h3>6.2 Maintaining Documentation Quality</h3>
-<ol>
-<li><strong>Regular Reviews</strong>: Schedule periodic documentation reviews</li>
-<li><strong>Automated Checks</strong>: Add documentation linting to CI/CD</li>
-<li><strong>User Feedback</strong>: Create feedback mechanism for documentation</li>
-<li><strong>Version Tracking</strong>: Maintain documentation versions with code versions</li>
-</ol>
-<h2>Advanced CLAUDE.md Refinements</h2>
-<h3>7.1 Project-Specific Instructions</h3>
-<pre><code class="language-markdown">## Project-Specific Documentation Rules
-
-### Component Documentation
-- Each major component needs its own guide
-- Include architecture decisions
-- Document integration points
-- Add performance considerations
-
-### Code Examples
-- Use TypeScript for all examples
-- Include error handling
-- Show both correct and incorrect usage
-- Add inline comments for clarity
-
-### Diagrams
-- Use mermaid for all flow diagrams
-- Include sequence diagrams for APIs
-- Add state diagrams for complex logic
-- Create entity relationship diagrams for data models
-</code></pre>
-<h3>7.2 Documentation Templates</h3>
-<p>Create templates in your CLAUDE.md:</p>
-<pre><code class="language-markdown">## Documentation Templates
-
-### API Endpoint Template
-</code></pre>
-<h2>[HTTP Method] /api/[endpoint]</h2>
-<p><strong>Purpose</strong>: [Brief description]</p>
-<h3>Request</h3>
-<ul>
-<li><strong>Headers</strong>: <ul>
-<li><code>Authorization: Bearer [token]</code></li>
-<li><code>Content-Type: application/json</code></li>
-</ul>
-</li>
-<li><strong>Body</strong>:<pre><code class="language-json">{
-  &quot;field&quot;: &quot;value&quot;
-}
-</code></pre>
-</li>
-</ul>
-<h3>Response</h3>
-<ul>
-<li><strong>Success (200)</strong>:<pre><code class="language-json">{
-  &quot;data&quot;: {}
-}
-</code></pre>
-</li>
-<li><strong>Error (4xx/5xx)</strong>:<pre><code class="language-json">{
-  &quot;error&quot;: &quot;Description&quot;
-}
-</code></pre>
-</li>
-</ul>
-<h3>Examples</h3>
-<pre><code class="language-bash">curl -X POST https://api.example.com/endpoint \
-  -H &quot;Authorization: Bearer token&quot; \
-  -d &#39;{&quot;field&quot;: &quot;value&quot;}&#39;
-</code></pre>
-<pre><code>
-## Best Practices Summary
-
-### Documentation Creation
-1. ✅ Use CLAUDE.md to maintain consistency
-2. ✅ Include visual diagrams for complex concepts
-3. ✅ Provide practical examples
-4. ✅ Mark verification status
-5. ✅ Keep documentation close to code
-
-### Claude Interaction
-1. ✅ Provide clear, specific requests
-2. ✅ Reference existing patterns
-3. ✅ Request iterative improvements
-4. ✅ Verify technical accuracy
-5. ✅ Ask for troubleshooting sections
-
-### Deployment
-1. ✅ Test locally before deploying
-2. ✅ Use preview deployments first
-3. ✅ Configure custom domains
-4. ✅ Enable HTTPS
-5. ✅ Monitor deployment health
-
-## Common Issues and Solutions
-
-### Issue 1: Claude Not Following Standards
-**Solution**: Refine CLAUDE.md with more specific examples and explicit requirements
-
-### Issue 2: Documentation Build Fails
-**Solution**: Check markdown syntax, ensure all links are valid, verify mermaid syntax
-
-### Issue 3: Vercel Deployment Issues
-**Solution**: Check vercel.json configuration, ensure output directory is correct
-
-### Issue 4: Navigation Not Generated
-**Solution**: Verify folder structure follows conventions, check for special characters in filenames
-
-## Conclusion
-
-This workflow enables efficient, high-quality documentation creation by:
-- Leveraging Claude&#39;s capabilities with clear guidelines
-- Using doc-builder for beautiful, searchable output
-- Deploying seamlessly to Vercel for instant access
-- Maintaining consistency through CLAUDE.md refinements
-
-The key to success is iterative refinement of your CLAUDE.md file to capture your team&#39;s specific documentation needs and standards.
-
-## Document History
-
-| Date | Author | Changes |
-|------|--------|---------|
-| 2025-07-21 | Claude | Initial creation |
-</code></pre>
-
-            </div>
-        </main>
-    </div>
-    
-    <!-- Scripts -->
-    <script src="/js/main.js"></script>
-    
-</body>
-</html>