Fix demo site auto-enhancement and content persistence
- Restructure demo directory from test-sites/ to demos/ with flattened layout - Add auto-enhancement on server startup for all sites with auto_enhance: true - Fix inconsistent content ID generation that prevented dan-eden-portfolio content persistence - Update server configuration to enhance from source to separate output directories - Remove manual enhancement from justfile in favor of automatic server enhancement - Clean up legacy test files and unused restore command - Update build system to use CDN endpoint instead of file copying
This commit is contained in:
115
demos/default/README.md
Normal file
115
demos/default/README.md
Normal 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.
|
||||
Reference in New Issue
Block a user