# Insertr

> **Edit-in-place CMS for client websites** - Simple integration with class-based content editing

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.

## ✨ The Vision

```html
<!-- Developer adds this once -->
<script src="https://insertr.example.com/insertr.js"></script>

<!-- Then marks content as editable -->
<div class="insertr" data-content-id="hero">
  <h1>Your Editable Content</h1>
</div>
```

**That's it!** Your clients can now edit this content inline.

## 🎯 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"` 
- No complex setup or framework dependencies
- Works with any existing website

## 🚀 Current Status

**✅ Frontend Prototype Complete**
- Working edit-in-place functionality
- Mock authentication system
- Local persistence
- Multi-page support
- Responsive design

**🔄 In Development**
- Go backend with REST API
- Authentik OAuth integration
- File-based content storage
- Git version control

## 🛠️ Quick Start

1. **Clone and install**:
   ```bash
   git clone <repository-url>
   cd insertr
   npm install
   ```

2. **Start development server**:
   ```bash
   npm run dev
   ```

3. **Open http://localhost:3000** and test the demo!

## 📖 Documentation

- **[Development Guide](DEVELOPMENT.md)** - Setup, workflow, and contribution guide
- **[Demo Instructions](demo-site/README.md)** - How to test the prototype
- **[Project Planning](INITIAL.md)** - Requirements, research, and roadmap

## 🏗️ Architecture

### Current (Phase 1)
- **Frontend**: Vanilla JavaScript + Alpine.js
- **Storage**: localStorage (for prototype)
- **Authentication**: Mock system
- **Deployment**: Static files

### Planned (Phase 2)
- **Backend**: Go HTTP server
- **Storage**: File-based with Git versioning  
- **Authentication**: Authentik OAuth 2.0
- **Deployment**: Single binary + static files

### Future (Phase 3)
- **Multi-tenant**: Host multiple client sites
- **Admin Dashboard**: Advanced content management
- **CDN Integration**: Global content delivery
- **Plugin System**: Extensible functionality

## 🎬 Demo Features

**Try the prototype to see:**
- ✏️ **Inline Editing** - Click edit buttons to modify content
- 📝 **Rich Content** - Markdown editing for formatted text
- 👤 **Authentication** - Login simulation with role switching
- 💾 **Persistence** - Content saves automatically
- 📱 **Responsive** - Works on desktop and mobile
- 🔄 **Multi-page** - Consistent experience across pages

## 🤝 Contributing

This project is in active development. See [DEVELOPMENT.md](DEVELOPMENT.md) for:
- Development setup
- Project structure
- Testing guidelines
- Future roadmap

## 📄 License

MIT License - see LICENSE file for details.

---

**Built with ❤️ for small business websites and their developers**