@knowcode/doc-builder 1.5.15 → 1.5.17

package/.claude/settings.local.json

@@ -26,7 +26,8 @@
       "Bash(find:*)",
       "Bash(diff:*)",
       "Bash(git log:*)",
-      "Bash(mkdir:*)"
+      "Bash(mkdir:*)",
+      "Bash(cp:*)"
     ],
     "deny": []
   }

package/CHANGELOG.md

@@ -5,6 +5,34 @@ All notable changes to @knowcode/doc-builder will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.5.17] - 2025-07-22
+
+### Changed
+- CSS table alignment now defaults to top-aligned instead of center-aligned
+- Updated Windows Setup Guide with improved Vercel project setup section
+- Added detailed explanations for each Vercel setup prompt
+- Added comprehensive Vercel project naming requirements and examples
+- Updated deploy.js with clearer project name hint showing URL format
+
+### Documentation
+- Created comprehensive Windows Setup Guide for Claude Code and doc-builder
+- Added explanation of Claude vs Claude Code differences
+- Updated to clarify GitHub is required for Vercel
+- Added details that Pro/Max plan is required for Claude Code
+
+## [1.5.16] - 2025-07-22
+
+### Changed
+- Simplified Mermaid diagram display by removing unnecessary UI elements
+- Removed "Copy to Mermaid" button from diagram toolbar
+- Removed "Copy SVG" button from diagram toolbar
+- Removed "Diagram" heading from Mermaid diagram wrapper
+- Removed "Mermaid Diagram" text label from toolbar
+
+### Improved
+- Cleaner, less cluttered presentation of Mermaid diagrams
+- Full Screen button remains available for better diagram viewing
+
 ## [1.5.15] - 2025-07-22
 
 ### Fixed

package/README.md

@@ -8,7 +8,7 @@ Beautiful documentation with the least effort possible. A zero-configuration doc
 
 ### Quick Start
 ```bash
-npx @knowcode/doc-builder deploy
+npx @knowcode/doc-builder@latest deploy
 ```
 
 </div>
@@ -78,6 +78,56 @@ This aligns perfectly with our mission: beautiful documentation should be access
 </tr>
 </table>
 
+## 📋 Prerequisites
+
+<table>
+<tr>
+<td width="50%">
+
+### System Requirements
+
+**Node.js** version 14.0 or higher is required to run doc-builder.
+
+To check if you have Node.js installed:
+```bash
+node --version
+```
+
+If you see a version number (e.g., `v18.17.0`), you're ready to go!
+
+</td>
+<td width="50%">
+
+### Installing Node.js & npm
+
+**🍎 macOS**
+- **Recommended**: [Download from nodejs.org](https://nodejs.org/)
+- **Alternative**: Using Homebrew
+  ```bash
+  brew install node
+  ```
+
+**🪟 Windows**
+- **Recommended**: [Download from nodejs.org](https://nodejs.org/)
+- **Alternative**: Using Chocolatey
+  ```bash
+  choco install nodejs
+  ```
+
+</td>
+</tr>
+</table>
+
+### Quick Installation Links
+
+| Platform | Official Installer | Package Manager |
+|----------|-------------------|-----------------|
+| **macOS** | [Download .pkg](https://nodejs.org/en/download/) | `brew install node` |
+| **Windows** | [Download .msi](https://nodejs.org/en/download/) | `choco install nodejs` |
+| **Linux** | [Download options](https://nodejs.org/en/download/) | `apt install nodejs` or `yum install nodejs` |
+
+> 💡 **Note**: npm (Node Package Manager) is included with Node.js installation automatically.
+
 ## 🚀 Getting Started
 
 <table>
@@ -87,16 +137,16 @@ This aligns perfectly with our mission: beautiful documentation should be access
 ### Option 1: NPX (No Installation)
 ```bash
 # Deploy to Vercel
-npx @knowcode/doc-builder deploy
+npx @knowcode/doc-builder@latest deploy
 
 # Build static HTML
-npx @knowcode/doc-builder build
+npx @knowcode/doc-builder@latest build
 
 # Development server
-npx @knowcode/doc-builder dev
+npx @knowcode/doc-builder@latest dev
 
 # Show help
-npx @knowcode/doc-builder
+npx @knowcode/doc-builder@latest
 ```
 *Perfect for trying it out!*
 
@@ -106,7 +156,7 @@ npx @knowcode/doc-builder
 ### Option 2: NPM Install
 ```bash
 # Install as dev dependency
-npm install --save-dev @knowcode/doc-builder
+npm install --save-dev @knowcode/doc-builder@latest
 
 # Use shorter commands
 doc-builder deploy
@@ -124,7 +174,7 @@ doc-builder --help
 
 The deployment process is now simpler than ever:
 
-1. Run `npx @knowcode/doc-builder deploy`
+1. Run `npx @knowcode/doc-builder@latest deploy`
 2. Answer a few simple questions (project name, etc.)
 3. Vercel CLI automatically detects and configures everything
 4. Get your live URL in seconds!
@@ -177,7 +227,7 @@ module.exports = {
 
 <table>
 <tr>
-<td width="33%">
+<td width="50%">
 
 ### 🏗️ Core Commands
 | Command | Purpose |
@@ -187,8 +237,14 @@ module.exports = {
 | `deploy` | Deploy to Vercel |
 | `init` | Initialize project |
 
+### ⚙️ Config Commands
+| Command | Purpose |
+|---------|---------|
+| `set-production-url` | Set custom URL |
+| `reset-vercel` | Clear settings |
+
 </td>
-<td width="33%">
+<td width="50%">
 
 ### 🔍 SEO Commands
 | Command | Purpose |
@@ -197,14 +253,8 @@ module.exports = {
 | `setup-seo` | Configure SEO |
 | `google-verify` | Add verification |
 
-</td>
-<td width="33%">
-
-### ⚙️ Config Commands
-| Command | Purpose |
-|---------|---------|
-| `set-production-url` | Set custom URL |
-| `reset-vercel` | Clear settings |
+### 📚 Documentation
+All commands support `--help` for detailed options and examples.
 
 </td>
 </tr>
@@ -356,7 +406,7 @@ When using Claude Code to generate documentation, it typically follows these pat
 node --version  # Need 14+
 
 # Use full package name
-npx @knowcode/doc-builder
+npx @knowcode/doc-builder@latest
 ```
 
 **"No markdown files found"**
@@ -367,7 +417,7 @@ npx @knowcode/doc-builder
 **Vercel deployment fails**
 ```bash
 # Reset Vercel settings
-npx @knowcode/doc-builder reset-vercel
+npx @knowcode/doc-builder@latest reset-vercel
 
 # Install Vercel CLI
 npm install -g vercel
@@ -404,6 +454,14 @@ npx @knowcode/doc-builder@1.5.14
 </tr>
 </table>
 
+### 🪟 Windows Setup
+
+Having issues on Windows? Check our comprehensive [Windows Setup Guide](docs/guides/windows-setup-guide.md) that covers:
+- PowerShell execution policy setup
+- Node.js and npm installation
+- Git for Windows configuration
+- Complete troubleshooting steps
+
 ### 🔗 Production URL Issues
 
 <details>
@@ -419,12 +477,12 @@ module.exports = {
 
 **Option 2: CLI Command**
 ```bash
-npx @knowcode/doc-builder set-production-url my-docs.vercel.app
+npx @knowcode/doc-builder@latest set-production-url my-docs.vercel.app
 ```
 
 **Option 3: Deploy Override**
 ```bash
-npx @knowcode/doc-builder deploy --production-url my-docs.vercel.app
+npx @knowcode/doc-builder@latest deploy --production-url my-docs.vercel.app
 ```
 </details>
 
@@ -432,22 +490,22 @@ npx @knowcode/doc-builder deploy --production-url my-docs.vercel.app
 
 <table>
 <tr>
-<td width="33%">
+<td width="50%">
+
+### Development Integration
+
+**NPM Link (Local Dev)**
 
-### NPM Link (Dev)
 ```bash
-# In doc-builder dir
+# In doc-builder directory
 npm link
 
 # In your project
 npm link @knowcode/doc-builder
 ```
-*For local development*
 
-</td>
-<td width="33%">
+**File Reference (Monorepos)**
 
-### File Reference
 ```json
 {
   "devDependencies": {
@@ -456,22 +514,32 @@ npm link @knowcode/doc-builder
   }
 }
 ```
-*For monorepos*
 
 </td>
-<td width="33%">
+<td width="50%">
+
+### Production Integration
+
+**NPM Registry (Recommended)**
+
+```json
+{
+  "devDependencies": {
+    "@knowcode/doc-builder": "^1.5.14"
+  }
+}
+```
+
+**Git Repository (Private)**
 
-### Git Repository
 ```json
 {
   "devDependencies": {
     "@knowcode/doc-builder": 
-      "git+https://github.com/
-       knowcode/doc-builder.git"
+      "git+https://github.com/knowcode/doc-builder.git"
   }
 }
 ```
-*For private repos*
 
 </td>
 </tr>
@@ -491,4 +559,4 @@ MIT License - See [LICENSE](LICENSE) file for details
 
 Made with ❤️ by the @knowcode team
 
-</div>
+</div>

package/assets/css/notion-style.css

@@ -682,12 +682,14 @@ th {
   background: var(--color-bg-secondary);
   border-bottom: 1px solid var(--color-border-default);
   color: var(--color-text-primary);
+  vertical-align: top;
 }
 
 td {
   padding: var(--space-3) var(--space-4);
   border-bottom: 1px solid var(--color-border-default);
   color: var(--color-text-primary);
+  vertical-align: top;
 }
 
 tr:last-child td {

package/assets/js/main.js

@@ -79,9 +79,6 @@ function initializeMermaidFullScreen() {
     const toolbar = document.createElement('div');
     toolbar.className = 'mermaid-toolbar';
     
-    const title = document.createElement('div');
-    title.textContent = 'Mermaid Diagram';
-    
     const actions = document.createElement('div');
     actions.className = 'mermaid-actions';
     
@@ -91,23 +88,8 @@ function initializeMermaidFullScreen() {
     fullScreenBtn.innerHTML = '<i class="fas fa-expand"></i> Full Screen';
     fullScreenBtn.addEventListener('click', () => openMermaidFullScreen(mermaidDiv, index));
     
-    // Copy SVG button
-    const copyBtn = document.createElement('button');
-    copyBtn.className = 'mermaid-btn';
-    copyBtn.innerHTML = '<i class="fas fa-copy"></i> Copy SVG';
-    copyBtn.addEventListener('click', () => copyMermaidSVG(mermaidDiv));
-    
-    // Copy Mermaid source button
-    const copyMermaidBtn = document.createElement('button');
-    copyMermaidBtn.className = 'mermaid-btn';
-    copyMermaidBtn.innerHTML = '<i class="fas fa-code"></i> Copy Mermaid';
-    copyMermaidBtn.addEventListener('click', () => copyMermaidSource(mermaidDiv));
-    
     actions.appendChild(fullScreenBtn);
-    actions.appendChild(copyBtn);
-    actions.appendChild(copyMermaidBtn);
     
-    toolbar.appendChild(title);
     toolbar.appendChild(actions);
     
     // Create wrapper for the diagram

package/cli.js

@@ -24,7 +24,7 @@ program
   .addHelpText('before', `
 ${chalk.cyan('🚀 @knowcode/doc-builder')} - Transform your markdown into beautiful documentation sites
 
-${chalk.bgGreen.black(' TL;DR ')} ${chalk.green('Just run:')} ${chalk.cyan.bold('npx @knowcode/doc-builder deploy')} ${chalk.green('→ Your docs are live on Vercel!')}
+${chalk.bgGreen.black(' TL;DR ')} ${chalk.green('Just run:')} ${chalk.cyan.bold('npx @knowcode/doc-builder@latest deploy')} ${chalk.green('→ Your docs are live on Vercel!')}
 
 ${chalk.gray('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━')}
 
@@ -47,18 +47,18 @@ ${chalk.yellow('Quick Start:')}
      ${chalk.gray('$')} echo "# My Documentation" > docs/README.md
   
   ${chalk.cyan('2. Build and deploy:')}
-     ${chalk.gray('$')} npx @knowcode/doc-builder              ${chalk.gray('# Show help and available commands')}
-     ${chalk.gray('$')} npx @knowcode/doc-builder deploy       ${chalk.gray('# Build and deploy to production')}
-     ${chalk.gray('$')} npx @knowcode/doc-builder build        ${chalk.gray('# Build HTML files only')}
+     ${chalk.gray('$')} npx @knowcode/doc-builder@latest       ${chalk.gray('# Show help and available commands')}
+     ${chalk.gray('$')} npx @knowcode/doc-builder@latest deploy ${chalk.gray('# Build and deploy to production')}
+     ${chalk.gray('$')} npx @knowcode/doc-builder@latest build  ${chalk.gray('# Build HTML files only')}
 
 ${chalk.yellow('Troubleshooting npx cache issues:')}
   ${chalk.red('If you see an old version after updating:')}
      ${chalk.gray('$')} npx clear-npx-cache                    ${chalk.gray('# Clear the npx cache')}
      ${chalk.gray('$')} npx @knowcode/doc-builder@latest       ${chalk.gray('# Force latest version')}
-     ${chalk.gray('$')} npx @knowcode/doc-builder dev          ${chalk.gray('# Start development server')}
+     ${chalk.gray('$')} npx @knowcode/doc-builder@latest dev   ${chalk.gray('# Start development server')}
 
 ${chalk.yellow('No docs folder yet?')}
-  ${chalk.gray('$')} npx @knowcode/doc-builder init --example  ${chalk.gray('# Create example docs')}
+  ${chalk.gray('$')} npx @knowcode/doc-builder@latest init --example  ${chalk.gray('# Create example docs')}
   `);
 
 // Build command
@@ -537,7 +537,7 @@ ${chalk.yellow('First-time Vercel Setup:')}
      ${chalk.gray('   This will open your browser to authenticate')}
   
   ${chalk.cyan('3. Run doc-builder deploy:')}
-     ${chalk.gray('$')} npx @knowcode/doc-builder deploy
+     ${chalk.gray('$')} npx @knowcode/doc-builder@latest deploy
      
      You'll be asked several questions:
      
@@ -584,17 +584,17 @@ ${chalk.yellow('First-time Vercel Setup:')}
 ${chalk.yellow('Deployment Behavior:')}
   ${chalk.green.bold('🎯 DEFAULT: All deployments go to PRODUCTION')}
   
-  ${chalk.gray('$')} npx @knowcode/doc-builder          ${chalk.gray('# → Shows help (v1.3.0+)')}
-  ${chalk.gray('$')} npx @knowcode/doc-builder deploy   ${chalk.gray('# → yourdocs.vercel.app')}
-  ${chalk.gray('$')} npx @knowcode/doc-builder deploy --no-prod  ${chalk.gray('# → preview URL only')}
+  ${chalk.gray('$')} npx @knowcode/doc-builder@latest          ${chalk.gray('# → Shows help (v1.3.0+)')}
+  ${chalk.gray('$')} npx @knowcode/doc-builder@latest deploy   ${chalk.gray('# → yourdocs.vercel.app')}
+  ${chalk.gray('$')} npx @knowcode/doc-builder@latest deploy --no-prod  ${chalk.gray('# → preview URL only')}
 
 ${chalk.yellow('When All Else Fails - Delete and Start Fresh:')}
   Sometimes the cleanest solution is to delete the Vercel project:
   
   1. Go to your project settings on Vercel
   2. Scroll to bottom and click ${chalk.red('"Delete Project"')}
-  3. Run: ${chalk.gray('npx @knowcode/doc-builder reset-vercel')}
-  4. Run: ${chalk.gray('npx @knowcode/doc-builder deploy')}
+  3. Run: ${chalk.gray('npx @knowcode/doc-builder@latest reset-vercel')}
+  4. Run: ${chalk.gray('npx @knowcode/doc-builder@latest deploy')}
   5. Create a NEW project with correct settings
   
   This removes all conflicting configurations!
@@ -636,8 +636,8 @@ ${chalk.yellow('Troubleshooting:')}
     ${chalk.yellow('The Vercel project was deleted but local config remains.')}
     
     ${chalk.green('Fix:')}
-    ${chalk.gray('$')} npx @knowcode/doc-builder reset-vercel
-    ${chalk.gray('$')} npx @knowcode/doc-builder deploy
+    ${chalk.gray('$')} npx @knowcode/doc-builder@latest reset-vercel
+    ${chalk.gray('$')} npx @knowcode/doc-builder@latest deploy
     
     This removes old project references and starts fresh
 `)
@@ -658,7 +658,7 @@ ${chalk.yellow('Troubleshooting:')}
         console.log(chalk.gray('  yarn global add vercel'));
         console.log(chalk.gray('  brew install vercel     # macOS\n'));
         console.log(chalk.yellow('Then run deployment again:'));
-        console.log(chalk.gray('  npx @knowcode/doc-builder deploy\n'));
+        console.log(chalk.gray('  npx @knowcode/doc-builder@latest deploy\n'));
         process.exit(1);
       }
       
@@ -742,7 +742,7 @@ ${chalk.yellow('Troubleshooting:')}
         console.log(chalk.cyan(`   ${deployUrl}`));
         console.log();
         console.log(chalk.gray('To deploy to production, run:'));
-        console.log(chalk.gray('   npx @knowcode/doc-builder deploy'));
+        console.log(chalk.gray('   npx @knowcode/doc-builder@latest deploy'));
       }
       console.log();
       
@@ -787,7 +787,7 @@ ${chalk.yellow('When to use:')}
         fs.removeSync(vercelPath);
         console.log(chalk.green('✅ Vercel configuration reset!'));
         console.log(chalk.gray('\nNow run deployment again:'));
-        console.log(chalk.cyan('  npx @knowcode/doc-builder deploy'));
+        console.log(chalk.cyan('  npx @knowcode/doc-builder@latest deploy'));
         console.log(chalk.gray('\nThis time:'));
         console.log(chalk.gray('• Create a NEW project (not username/html)'));
         console.log(chalk.gray('• Use a descriptive name like "my-docs"'));
@@ -822,7 +822,7 @@ ${chalk.yellow('What you\'ll configure:')}
   • Open Graph image
 
 ${chalk.yellow('After setup:')}
-  • Run ${chalk.cyan('npx @knowcode/doc-builder build')} to generate with SEO
+  • Run ${chalk.cyan('npx @knowcode/doc-builder@latest build')} to generate with SEO
   • Check meta tags in generated HTML files
   • Submit sitemap.xml to search engines
 `)
@@ -972,7 +972,7 @@ ${chalk.yellow('After setup:')}
       if (answers.ogImage) {
         console.log(chalk.gray(`- Add an image at ${answers.ogImage} (1200x630px) for social previews`));
       }
-      console.log(chalk.gray('- Run \'npx @knowcode/doc-builder build\' to generate with SEO'));
+      console.log(chalk.gray('- Run \'npx @knowcode/doc-builder@latest build\' to generate with SEO'));
       console.log(chalk.gray('- Check your SEO at: https://metatags.io'));
       
     } catch (error) {
@@ -1036,8 +1036,8 @@ ${chalk.yellow('What gets created:')}
         
         // Create example files
         const exampleFiles = {
-          'README.md': `# Welcome to Your Documentation\n\nThis is an example documentation site created with @knowcode/doc-builder.\n\n## Features\n\n- 📝 Write in Markdown\n- 🎨 Beautiful Notion-inspired design\n- 📊 Mermaid diagram support\n- 🌙 Dark mode\n- 🚀 Deploy to Vercel\n\n## Getting Started\n\n1. Edit this file and add your content\n2. Create new markdown files\n3. Run \`npx @knowcode/doc-builder\` to build and deploy\n\n## Example Diagram\n\n\`\`\`mermaid\ngraph TD\n    A[Write Docs] --> B[Build]\n    B --> C[Deploy]\n    C --> D[Share]\n\`\`\`\n`,
-          'getting-started.md': `# Getting Started\n\n**Generated**: ${new Date().toISOString().split('T')[0]}\n**Status**: Draft\n**Verified**: ❓\n\n## Overview\n\nThis guide will help you get started with your documentation.\n\n## Installation\n\nNo installation required! Just use:\n\n\`\`\`bash\nnpx @knowcode/doc-builder\n\`\`\`\n\n## Writing Documentation\n\n1. Create markdown files in the \`docs\` folder\n2. Use folders to organize your content\n3. Add front matter for metadata\n\n## Building\n\nTo build your documentation:\n\n\`\`\`bash\nnpx @knowcode/doc-builder build\n\`\`\`\n\n## Deployment\n\nDeploy to Vercel:\n\n\`\`\`bash\nnpx @knowcode/doc-builder deploy\n\`\`\`\n`,
+          'README.md': `# Welcome to Your Documentation\n\nThis is an example documentation site created with @knowcode/doc-builder.\n\n## Features\n\n- 📝 Write in Markdown\n- 🎨 Beautiful Notion-inspired design\n- 📊 Mermaid diagram support\n- 🌙 Dark mode\n- 🚀 Deploy to Vercel\n\n## Getting Started\n\n1. Edit this file and add your content\n2. Create new markdown files\n3. Run \`npx @knowcode/doc-builder@latest\` to build and deploy\n\n## Example Diagram\n\n\`\`\`mermaid\ngraph TD\n    A[Write Docs] --> B[Build]\n    B --> C[Deploy]\n    C --> D[Share]\n\`\`\`\n`,
+          'getting-started.md': `# Getting Started\n\n**Generated**: ${new Date().toISOString().split('T')[0]}\n**Status**: Draft\n**Verified**: ❓\n\n## Overview\n\nThis guide will help you get started with your documentation.\n\n## Installation\n\nNo installation required! Just use:\n\n\`\`\`bash\nnpx @knowcode/doc-builder@latest\n\`\`\`\n\n## Writing Documentation\n\n1. Create markdown files in the \`docs\` folder\n2. Use folders to organize your content\n3. Add front matter for metadata\n\n## Building\n\nTo build your documentation:\n\n\`\`\`bash\nnpx @knowcode/doc-builder@latest build\n\`\`\`\n\n## Deployment\n\nDeploy to Vercel:\n\n\`\`\`bash\nnpx @knowcode/doc-builder@latest deploy\n\`\`\`\n`,
           'guides/configuration.md': `# Configuration Guide\n\n**Generated**: ${new Date().toISOString().split('T')[0]}\n**Status**: Draft\n**Verified**: ❓\n\n## Overview\n\n@knowcode/doc-builder works with zero configuration, but you can customize it.\n\n## Configuration File\n\nCreate \`doc-builder.config.js\`:\n\n\`\`\`javascript\nmodule.exports = {\n  siteName: 'My Documentation',\n  siteDescription: 'Documentation for my project',\n  \n  features: {\n    authentication: false,\n    changelog: true,\n    mermaid: true,\n    darkMode: true\n  }\n};\n\`\`\`\n\n## Options\n\n### Site Information\n\n- \`siteName\`: Your documentation site name\n- \`siteDescription\`: Brief description\n\n### Directories\n\n- \`docsDir\`: Input directory (default: 'docs')\n- \`outputDir\`: Output directory (default: 'html')\n\n### Features\n\n- \`authentication\`: Enable password protection\n- \`changelog\`: Generate changelog automatically\n- \`mermaid\`: Support for diagrams\n- \`darkMode\`: Dark theme support\n`
         };
         
@@ -1057,7 +1057,7 @@ ${chalk.yellow('What gets created:')}
         console.log(chalk.cyan('\\n📚 Example documentation created in docs/ folder'));
         console.log(chalk.gray('\\nNext steps:'));
         console.log(chalk.gray('1. Edit the example files to add your content'));
-        console.log(chalk.gray('2. Run `npx @knowcode/doc-builder` to build and deploy'));
+        console.log(chalk.gray('2. Run `npx @knowcode/doc-builder@latest` to build and deploy'));
       } else {
         console.log(chalk.yellow('⚠️  docs/ directory already exists'));
       }