# Insertr Demo Site

This is a prototype demonstration of the Insertr edit-in-place CMS system.

## What is Insertr?

Insertr allows developers to make any website content editable by simply adding a CSS class. Clients can then log in and edit content directly on their website without needing to learn a complex admin interface.

## Three User Types

### 1. The Customer (End User)
- Sees a clean, professional website
- No editing interface visible
- Fast loading with minimal overhead

### 2. The Client (Content Manager)  
- Logs in to see the same website with subtle edit buttons
- Clicks edit buttons to modify content inline
- Can edit both simple text and rich markdown content
- Changes are saved immediately

### 3. The Developer (You)
- Simple integration: just add `class="insertr"` and `data-content-id="unique-id"`
- No complex setup or framework dependencies
- Works with any existing website

## Demo Instructions

1. **Open `index.html` in your browser** - You'll see the customer view
2. **Click "Login as Client"** - This simulates authentication 
3. **Click "Edit Mode: Off" to turn on editing** - Now you'll see edit buttons (✏️) appear
4. **Click any edit button** to modify content
5. **Try both simple text and rich content** (marked with 📝)
6. **Navigate to `about.html`** to see how it works across pages

## Technical Details

### For Developers

To make content editable, just add the insertr class and data attribute:

```html
<!-- Simple text content -->
<div class="insertr" data-content-id="hero-title">
  <h1>Your Website Title</h1>
</div>

<!-- Rich content with markdown -->
<div class="insertr" data-content-id="about-text" data-content-type="rich">
  <h2>About Us</h2>
  <p>We help businesses succeed...</p>
</div>
```

### Integration

Include the Insertr library in your HTML:

```html
<link rel="stylesheet" href="insertr/insertr.css">
<script src="insertr/insertr.js"></script>
```

That's it! The library will automatically scan for editable elements and set up the editing interface.

## Current Features

- ✅ Edit-in-place for simple text content  
- ✅ Markdown editing for rich content
- ✅ Mock authentication (login/logout)
- ✅ Edit mode toggle
- ✅ Local storage persistence
- ✅ Visual feedback for saving
- ✅ Multi-page support
- ✅ Responsive design

## Planned Features

- [ ] Real backend API integration
- [ ] Authentik OAuth integration  
- [ ] File upload and image management
- [ ] Content versioning and rollback
- [ ] Multi-user permissions
- [ ] Admin dashboard
- [ ] Git-based deployment

## Architecture

This prototype demonstrates the frontend experience. The full system will include:

- **Go backend** with REST API
- **File-based content storage** with Git versioning
- **Authentik OAuth** for secure authentication
- **Multi-tenant support** for hosting multiple client sites
- **Developer tools** for easy integration

## Files Structure

```
demo-site/
├── index.html              # Homepage demo
├── about.html              # Additional page demo  
├── assets/
│   └── style.css          # Demo site styling
├── insertr/
│   ├── insertr.js         # Core library
│   ├── insertr.css        # Edit interface styling
│   └── components/        # Future: edit components
└── mock-api/
    └── content.json       # Mock backend data structure
```

## Try It Now!

Open `index.html` in your browser and experience the three different user views by using the authentication controls in the top right corner.