Add working frontend prototype with edit-in-place functionality

 Features implemented:
- Complete demo website (Acme Consulting Services)
- Core insertr.js library with edit-in-place functionality
- Support for simple text and rich markdown content
- Mock authentication system (login/logout simulation)
- Edit mode toggle for client interface
- Local storage persistence
- Visual feedback for saving content
- Multi-page support (index.html, about.html)
- Responsive design with clean UI

🎯 Three user experiences:
- Customer: Clean website with no edit interface
- Client: Same website + edit buttons when authenticated
- Developer: Simple class-based integration

🏗️ Architecture:
- Vanilla JavaScript (no framework dependencies)
- Alpine.js ready for enhanced interactivity
- CSS-only styling for edit indicators
- Mock API structure for backend planning

Next: Connect to Go backend with real persistence
This commit is contained in:
2025-08-29 22:41:15 +02:00
parent 1f6279f79f
commit af88e57272
7 changed files with 1320 additions and 0 deletions

115
demo-site/README.md Normal file
View File

@@ -0,0 +1,115 @@
# 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.