VSM CLI - Venmail Scanner

A powerful CLI tool for scanning codebases and generating email templates automatically. VSM detects models, observers, and events across multiple frameworks and creates beautiful, brand-aware email templates.

🚀 Features

• Multi-Framework Support: React, Vue, Angular, Laravel, Rails, Django, Node.js, and more
• Intelligent Detection: Automatically scans for models, observers, and event patterns
• Brand Awareness: Detects colors, fonts, and styling from Tailwind config and CSS variables
• Template Generation: Creates beautiful email templates with your brand's design
• Web Dashboard: Interactive dashboard for managing templates and scans
• Easy Installation: Available as CLI tool and npx package

📦 Installation

Global Installation

npm install -g @venmail/vsm-cli

npx Usage (No Installation Required)

npx @venmail/vsm-cli scan ./my-project

Development Installation

git clone https://github.com/venmail/vsm-cli
cd vsm-cli
npm install
npm run build
npm link

🎯 Quick Start

1. Initialize a Project

vsm init my-project
cd my-project

2. Scan Your Codebase

vsm scan ./src

3. Generate Email Templates

vsm generate ./vsm-output/scan-results.json

4. Start the Dashboard

vsm dashboard --open

📋 Commands

vsm scan

Scan a codebase for models, observers, and events.

vsm scan <path> [options]

# Examples
vsm scan ./src
vsm scan ./ --frameworks react vue
vsm scan ./src --include-tests --output ./scan-results

Options:

• -f, --frameworks <frameworks...>: Specific frameworks to scan for
• -t, --include-tests: Include test files in scan
• -o, --output <dir>: Output directory for scan results (default: ./vsm-output)

vsm generate

Generate email templates from scan results.

vsm generate <scan-result> [options]

# Examples
vsm generate ./scan-results.json
vsm generate ./results.json --types welcome notification
vsm generate ./results.json --output ./email-templates

Options:

• -t, --types <types...>: Template types to generate (default: notification, welcome)
• -o, --output <dir>: Output directory for templates (default: ./email-templates)

vsm dashboard

Start the web dashboard for template management.

vsm dashboard [options]

# Examples
vsm dashboard
vsm dashboard --port 3001 --open

Options:

• -p, --port <port>: Port for the dashboard (default: 3000)
• -o, --open: Open dashboard in browser

vsm init

Initialize a new project with VSM configuration.

vsm init [path]

# Examples
vsm init
vsm init ./my-project

🔧 Supported Frameworks

| Framework | Models | Observers | Events | |-----------|--------|-----------|--------| | React | ✅ | ✅ | ✅ | | Vue | ✅ | ✅ | ✅ | | Angular | ✅ | ✅ | ✅ | | Laravel | ✅ | ✅ | ✅ | | Rails | ✅ | ✅ | ✅ | | Django | ✅ | ✅ | ✅ | | Node.js | ✅ | ✅ | ✅ | | .NET | ✅ | ✅ | ✅ |

🎨 Template Types

Available Templates

• Welcome: User onboarding and registration emails
• Reset Password: Password reset notifications
• Verification: Email verification and account confirmation
• Notification: General purpose notifications
• Custom: Auto-generated based on detected models and events

Brand Detection

VSM automatically detects your brand configuration from:

• Tailwind CSS configuration files
• CSS custom properties (variables)
• Package.json theme configuration
• UI component styling patterns

📁 Project Structure

vsm-cli/
├── src/
│   ├── scanners/           # Code scanning logic
│   │   ├── framework-scanners/
│   │   ├── brand-detector.ts
│   │   └── code-scanner.ts
│   ├── generators/         # Template generation
│   │   ├── template-generator.ts
│   │   └── template-presets.ts
│   ├── dashboard/          # Web dashboard
│   │   └── index.ts
│   ├── cli.ts             # CLI interface
│   └── index.ts           # Type definitions
├── templates/             # Email template presets
├── dist/                  # Compiled output
└── package.json

🎯 Usage Examples

React Project

# Scan a React project
vsm scan ./my-react-app --frameworks react

# Generate templates
vsm generate ./vsm-output/scan-results.json --types welcome notification

# Start dashboard
vsm dashboard --open

Multi-Framework Project

# Scan with multiple frameworks
vsm scan ./monorepo --frameworks react vue laravel

# Generate all template types
vsm generate ./scan-results.json --types welcome reset-password verification notification

Custom Brand Configuration

# Initialize with custom config
vsm init ./project

# Edit vsm.config.json with your brand colors
# VSM will automatically use these in generated templates

🔌 Configuration

Create a vsm.config.json file in your project root:

{
  "version": "0.1.0",
  "scan": {
    "frameworks": ["react", "vue", "angular", "laravel", "rails", "django"],
    "includeTests": false
  },
  "generate": {
    "templateTypes": ["notification", "welcome", "reset-password"],
    "outputDir": "./email-templates"
  },
  "brand": {
    "colors": {
      "primary": "#3b82f6",
      "secondary": "#64748b",
      "accent": "#f59e0b",
      "background": "#ffffff",
      "text": "#1f2937"
    },
    "fonts": {
      "primary": "Inter, sans-serif",
      "secondary": "Georgia, serif"
    },
    "borderRadius": "0.375rem",
    "spacing": {
      "xs": "0.5rem",
      "sm": "1rem",
      "md": "1.5rem",
      "lg": "2rem",
      "xl": "3rem"
    }
  }
}

📊 Output

Scan Results

{
  "framework": "react, vue",
  "models": [
    {
      "name": "User",
      "properties": { "id": "number", "name": "string", "email": "string" },
      "relationships": ["Post"],
      "filePath": "./src/models/User.ts"
    }
  ],
  "observers": [
    {
      "name": "userCreatedObserver",
      "event": "user.created",
      "handler": "sendWelcomeEmail",
      "filePath": "./src/observers/UserObserver.ts"
    }
  ],
  "events": [
    {
      "name": "UserCreated",
      "type": "custom",
      "payload": { "userId": "number", "timestamp": "string" },
      "filePath": "./src/events/UserEvents.ts"
    }
  ],
  "brandConfig": {
    "colors": { "primary": "#3b82f6", ... },
    "fonts": { "primary": "Inter, sans-serif", ... },
    "borderRadius": "0.375rem",
    "spacing": { "xs": "0.5rem", ... }
  }
}

Generated Templates

For each template, VSM generates:

• template-name.html - HTML version
• template-name.txt - Plain text version
• template-name.json - Template metadata

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

MIT License - see the LICENSE file for details.

🔗 Links

• Venmail Website
• Documentation
• GitHub Repository
• npm Package

🆘 Support

• 📧 Email: [email protected]
• 💬 Discord: Join our community
• 🐛 Issues: Report on GitHub

Made with ❤️ by the Venmail team