# Demo Sites Collection

This directory contains demo sites for testing and showcasing Insertr CMS functionality across different layouts, CSS frameworks, and content types.

## Available Demo Sites

### **`default/`** - Basic Demo Site
- Simple HTML with explicit `class="insertr"` markings
- Demonstrates basic text and link editing
- Vanilla CSS styling

### **`simple/`** - Minimal Example  
- Single page with minimal styling
- Shows container expansion (`.insertr` on parent elements)
- Good starting point for new implementations

### **`dan-eden-portfolio/`** - Real-World Portfolio
- Clean personal portfolio with modern styling
- Uses automatic element discovery (no manual `.insertr` classes)
- Demonstrates style-aware editing with complex CSS

### **`devigo-web/`** - Multi-Page Site
- Multiple HTML files with navigation
- Various content types (headings, paragraphs, buttons, links)
- Tests cross-page content management

## Demo Server Usage

### **Development Testing**
```bash
# Start demo server with all sites
just dev

# Access sites at:
# http://localhost:8080/sites/default/
# http://localhost:8080/sites/simple/  
# http://localhost:8080/sites/dan-eden-portfolio/
# http://localhost:8080/sites/devigo-web/
```

### **Configuration**
Each demo site is configured in `insertr.yaml`:
```yaml
server:
  sites:
    - site_id: "default"
      source_path: "./demos/default"
      path: "./demos/default_enhanced"
      auto_enhance: true
      discovery:
        enabled: false    # Uses explicit .insertr markings
        
    - site_id: "dan-eden-portfolio"  
      source_path: "./demos/dan-eden-portfolio"
      path: "./demos/dan-eden-portfolio_enhanced"
      auto_enhance: true
      discovery:
        enabled: true     # Auto-discovers editable elements
```

### **Testing Features**
- **Style-Aware Editing**: Each site tests different CSS frameworks and styling approaches
- **Element Discovery**: Compare manual `.insertr` vs automatic discovery modes
- **Content Types**: Test text, rich content, links, and multi-property elements
- **Authentication**: Mock authentication for easy testing without setup

## Adding New Demo Sites

1. Create new directory in `demos/`
2. Add HTML files and assets
3. Configure in `insertr.yaml` under `server.sites`
4. Run `just dev` to test