insertr/demo-site

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:

<!-- 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:

<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.