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
2025-09-17 00:07:40 +02:00
parent 1fa607c47c
commit 71561316da
73 changed files with 190 additions and 4827 deletions
--- a/demos/default/README.md
+++ b/demos/default/README.md
@@ -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.
--- a/demos/default/about.html
+++ b/demos/default/about.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>About - Acme Consulting Services</title>
+    <link rel="stylesheet" href="assets/style.css"/>
+
+<script src="http://localhost:8080/insertr.js" data-insertr-injected="true" data-site-id="demo" data-api-endpoint="http://localhost:8080/api/content" data-mock-auth="true" data-debug="true"></script></head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar">
+        <div class="container">
+            <h1 class="logo insertr" data-content-id="about-logo-bf9558" data-content-type="text">Acme Consulting</h1>
+            <ul class="nav-links">
+                <li class="insertr" data-content-id="about-li-0babbf" data-content-type="text"><a href="index.html">Home</a></li>
+                <li class="insertr" data-content-id="about-li-2-0babbf" data-content-type="text"><a href="about.html">About</a></li>
+                <li class="insertr" data-content-id="about-li-3-0babbf" data-content-type="text"><a href="contact.html">Contact</a></li>
+            </ul>
+
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="container">
+            <h1 class="insertr" data-content-id="about-h1-b0851a" data-content-type="text">About Acme Consulting</h1>
+            <p class="lead insertr" data-content-id="about-lead-ccc316" data-content-type="markdown">We&#39;re a team of experienced consultants dedicated to helping small businesses thrive in today&#39;s competitive marketplace.</p>
+        </div>
+    </section>
+
+    <!-- Story Section -->
+    <section class="services">
+        <div class="container">
+            <h2 class="insertr" data-content-id="about-h2-246854" data-content-type="text">Our Story</h2>
+            <div class="insertr-group">
+                <p class="insertr" data-content-id="about-p-b2f44a" data-content-type="markdown">Founded in 2020, Acme Consulting emerged from a simple observation: small businesses needed access to the same high-quality strategic advice that large corporations receive, but in a format that was accessible, affordable, and actionable.</p>
+                
+                <p class="insertr" data-content-id="about-p-2-b2f44a" data-content-type="markdown">Our founders, with combined experience of over 30 years in business strategy, operations, and technology, recognized that the traditional consulting model wasn&#39;t serving the needs of growing businesses. We set out to change that.</p>
+                
+                <p class="insertr" data-content-id="about-p-3-b2f44a" data-content-type="markdown">Today, we&#39;ve helped over **200 businesses** streamline their operations, clarify their strategy, and achieve sustainable growth. Our approach combines proven methodologies with a deep understanding of the unique challenges facing small to medium-sized businesses.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Team Section -->
+    <section class="cta">
+        <div class="container">
+            <h2 class="insertr" data-content-id="about-h2-2-f16ab1" data-content-type="text">Our Team</h2>
+            <p class="insertr" data-content-id="about-p-0e26bc" data-content-type="markdown">We&#39;re a diverse group of strategists, operators, and technology experts united by our passion for helping businesses succeed.</p>
+            
+            <div class="services-grid" style="margin-top: 3rem;">
+                <div class="service-card">
+                    <div class="insertr" data-content-id="about-div-dac2cd" data-content-type="markdown">
+                        <h3>Sarah Chen</h3>
+                        <p><strong>Founder &amp; CEO</strong></p>
+                        <p>Former <strong>McKinsey consultant</strong> with 15 years of experience in strategy and operations. MBA from Stanford.</p>
+                    </div>
+                </div>
+                <div class="service-card">
+                    <div class="insertr" data-content-id="about-div-2-dac2cd" data-content-type="markdown">
+                        <h3>Michael Rodriguez</h3>
+                        <p><strong>Head of Operations</strong></p>
+                        <p>20 years in manufacturing and supply chain optimization. Expert in <strong>lean methodologies</strong> and process improvement.</p>
+                    </div>
+                </div>
+                <div class="service-card">
+                    <div class="insertr" data-content-id="about-div-3-dac2cd" data-content-type="markdown">
+                        <h3>Emma Thompson</h3>
+                        <p><strong>Digital Strategy Lead</strong></p>
+                        <p>Former tech startup founder turned consultant. Specializes in <em>digital transformation</em> and technology adoption.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Values Section -->
+    <section class="testimonial">
+        <div class="container">
+            <h2 class="insertr" style="margin-bottom: 2rem;" data-content-id="about-h2-3-893efa" data-content-type="text">Our Values</h2>
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; text-align: left;">
+                <div>
+                    <h3 class="insertr" data-content-id="about-h3-4-07ce1b" data-content-type="text">Client-First</h3>
+                    <p class="insertr" data-content-id="about-p-2-9f60dd" data-content-type="markdown">Every recommendation we make is designed with your specific business context and goals in mind.</p>
+                </div>
+                <div>
+                    <h3 class="insertr" data-content-id="about-h3-5-07ce1b" data-content-type="text">Practical Solutions</h3>
+                    <p class="insertr" data-content-id="about-p-3-9f60dd" data-content-type="markdown">We believe in strategies that you can actually implement with your current resources and capabilities.</p>
+                </div>
+                <div>
+                    <h3 class="insertr" data-content-id="about-h3-6-07ce1b" data-content-type="text">Long-term Partnership</h3>
+                    <p class="insertr" data-content-id="about-p-4-9f60dd" data-content-type="markdown">We&#39;re not just consultants; we&#39;re partners in your business success for the long haul.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Test Section for Insertr Features -->
+    <section class="testimonial">
+        <div class="container">
+            <h2 class="insertr" data-content-id="about-h2-4-893efa" data-content-type="text">Feature Tests</h2>
+            
+            <!-- Test 1: .insertr container expansion (should make each p individually editable) -->
+            <div style="margin-bottom: 2rem;">
+                <h3 class="insertr" data-content-id="about-h3-ea6b29" data-content-type="text">Test 1: Container Expansion (.insertr)</h3>
+                <div class="insertr" style="border: 2px dashed #ccc; padding: 1rem;" data-content-id="about-div-4-e2aa93" data-content-type="markdown">
+                    <p>This paragraph should be individually editable with a textarea.</p>
+                    <p>This second paragraph should also be individually editable.</p>
+                    <p>Each paragraph should get its own modal when clicked.</p>
+                </div>
+            </div>
+            
+            <!-- Test 2: .insertr-group collective editing (should edit all together) -->
+            <div>
+                <h3 class="insertr" data-content-id="about-h3-2-ea6b29" data-content-type="text">Test 2: Group Editing (.insertr-group)</h3>
+                <div class="insertr-group" style="border: 2px solid #007cba; padding: 1rem;">
+                    <p class="insertr" data-content-id="about-p-4-dcfaf1" data-content-type="markdown">This paragraph is part of a <strong>group</strong>.</p>
+                    <p class="insertr" data-content-id="about-p-5-dcfaf1" data-content-type="markdown">Clicking anywhere should open one markdown editor with <em>rich formatting</em>.</p>
+                    <p class="insertr" data-content-id="about-p-6-dcfaf1" data-content-type="markdown">All content should be <strong>editable together</strong> as markdown with proper <em>HTML conversion</em>.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <p class="insertr" data-content-id="about-p-8-c093f3" data-content-type="markdown">© 2024 Acme Consulting Services. All rights reserved.</p>
+            <p class="insertr" data-content-id="about-p-9-c093f3" data-content-type="markdown">📧 info@acmeconsulting.com | 📞 (555) 123-4567 | <button class="insertr-gate" style="background: none; border: 1px solid #ccc; padding: 4px 8px; margin-left: 10px; border-radius: 3px; font-size: 11px;">🔧 Edit</button></p>
+        </div>
+    </footer>
+
+    <!-- Insertr JavaScript Library -->
+    <script type="text/javascript" src="insertr.js"></script>
+
+
+
+</body></html>
--- a/demos/default/assets/style.css
+++ b/demos/default/assets/style.css
@@ -0,0 +1,254 @@
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    line-height: 1.6;
+    color: #333;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* Navigation */
+.navbar {
+    background: #fff;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+}
+
+.navbar .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 20px;
+}
+
+.logo {
+    color: #2563eb;
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
+.nav-links {
+    display: flex;
+    list-style: none;
+    gap: 2rem;
+}
+
+.nav-links a {
+    text-decoration: none;
+    color: #333;
+    font-weight: 500;
+    transition: color 0.3s;
+}
+
+.nav-links a:hover {
+    color: #2563eb;
+}
+
+.auth-controls {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+/* Buttons */
+.btn-primary, .btn-secondary {
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 6px;
+    font-weight: 500;
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.3s;
+    display: inline-block;
+    font-size: 0.9rem;
+}
+
+.btn-primary {
+    background: #2563eb;
+    color: white;
+}
+
+.btn-primary:hover {
+    background: #1d4ed8;
+}
+
+.btn-secondary {
+    background: #f3f4f6;
+    color: #374151;
+    border: 1px solid #d1d5db;
+}
+
+.btn-secondary:hover {
+    background: #e5e7eb;
+}
+
+/* Hero Section */
+.hero {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 8rem 0 4rem;
+    text-align: center;
+}
+
+.hero h1 {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    font-weight: 700;
+}
+
+.hero .lead {
+    font-size: 1.25rem;
+    margin-bottom: 2rem;
+    opacity: 0.9;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* Services Section */
+.services {
+    padding: 4rem 0;
+    background: #f9fafb;
+}
+
+.services h2 {
+    text-align: center;
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    color: #1f2937;
+}
+
+.section-subtitle {
+    text-align: center;
+    font-size: 1.125rem;
+    color: #6b7280;
+    margin-bottom: 3rem;
+}
+
+.services-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-top: 3rem;
+}
+
+.service-card {
+    background: white;
+    padding: 2rem;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.service-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+}
+
+.service-card h3 {
+    color: #2563eb;
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+}
+
+/* Testimonial Section */
+.testimonial {
+    padding: 4rem 0;
+    background: #2563eb;
+    color: white;
+    text-align: center;
+}
+
+.testimonial blockquote {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.testimonial p {
+    font-size: 1.5rem;
+    font-style: italic;
+    margin-bottom: 1rem;
+}
+
+.testimonial cite {
+    font-size: 1rem;
+    opacity: 0.8;
+    font-style: normal;
+}
+
+/* CTA Section */
+.cta {
+    padding: 4rem 0;
+    text-align: center;
+    background: white;
+}
+
+.cta h2 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    color: #1f2937;
+}
+
+.cta p {
+    font-size: 1.125rem;
+    color: #6b7280;
+    margin-bottom: 2rem;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* Footer */
+.footer {
+    background: #1f2937;
+    color: white;
+    padding: 2rem 0;
+    text-align: center;
+}
+
+.footer p {
+    margin-bottom: 0.5rem;
+    opacity: 0.8;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .navbar .container {
+        flex-direction: column;
+        gap: 1rem;
+    }
+    
+    .nav-links {
+        gap: 1rem;
+    }
+    
+    .auth-controls {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+    
+    .hero h1 {
+        font-size: 2rem;
+    }
+    
+    .hero .lead {
+        font-size: 1.125rem;
+    }
+    
+    .services-grid {
+        grid-template-columns: 1fr;
+    }
+}
--- a/demos/default/index.html
+++ b/demos/default/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Acme Consulting Services - Live Reload Test</title>
+    <link rel="stylesheet" href="assets/style.css"/>
+
+<body>
+    <!-- Navigation -->
+    <nav class="navbar">
+        <div class="container">
+            <h1 class="logo insertr" data-content-id="index-logo-c176ba" data-content-type="text">Acme Consulting</h1>
+            <ul class="nav-links">
+                <li class="insertr" data-content-id="index-li-bf7136" data-content-type="text"><a href="index.html">Home</a></li>
+                <li class="insertr" data-content-id="index-li-2-bf7136" data-content-type="text"><a href="about.html">About</a></li>
+                <li class="insertr" data-content-id="index-li-3-bf7136" data-content-type="text"><a href="contact.html">Contact</a></li>
+            </ul>
+
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="container">
+            <h1 class="insertr" data-content-id="index-h1-1b83cf" data-content-type="text">Transform Your Business with Expert Consulting</h1>
+            <p class="lead insertr" data-content-id="index-lead-c7070a" data-content-type="markdown"><strong>We help small</strong> businesses grow through strategic planning, process optimization, and digital transformation. Our team brings 15+ years of experience to drive your success.</p>
+            <a href="contact.html" class="btn-primary insertr" data-content-id="index-btn-primary-088a84" data-content-type="link">Get Started Today</a>
+        </div>
+    </section>
+
+    <!-- Services Section -->
+    <section class="services">
+        <div class="container">
+            <h2 class="insertr" data-content-id="index-h2-7e9e73" data-content-type="text">Our Services</h2>
+            <p class="section-subtitle insertr" data-content-id="index-section-subtitle-bf0683" data-content-type="markdown">Comprehensive solutions tailored to your business needs. We are flexible as willow sticks</p>
+            
+            <div class="services-grid">
+                <div class="service-card">
+                    <h3 class="insertr" data-content-id="index-h3-2c6736" data-content-type="text">Strategic Planning</h3>
+                    <p class="insertr" data-content-id="index-p-a935d2" data-content-type="markdown">Develop clear roadmaps and actionable strategies that align with your business goals and drive sustainable growth.</p>
+                </div>
+                <div class="service-card">
+                    <h3 class="insertr" data-content-id="index-h3-2-2c6736" data-content-type="text">Operations Optimization</h3>
+                    <p class="insertr" data-content-id="index-p-2-a935d2" data-content-type="markdown">Streamline processes, reduce costs, and improve efficiency through proven methodologies and best practices.</p>
+                </div>
+                <div class="service-card">
+                    <h3 class="insertr" data-content-id="index-h3-3-2c6736" data-content-type="text">Digital Transformation</h3>
+                    <p class="insertr" data-content-id="index-p-3-a935d2" data-content-type="markdown">Modernize your technology stack and digital presence to compete effectively in today&#39;s marketplace.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Testimonial Section -->
+    <section class="testimonial">
+        <div class="container">
+            <blockquote>
+                <p class="insertr" data-content-id="index-p-4-0a9466" data-content-type="markdown">&#34;Acme Consulting transformed our operations completely. We saw a 40% increase in efficiency within 6 months of implementing their recommendations.&#34;</p>
+                <cite class="insertr" data-content-id="index-cite-24152c" data-content-type="text">Sarah Johnson, CEO of TechStart Inc.</cite>
+            </blockquote>
+        </div>
+    </section>
+
+    <!-- Call to Action -->
+    <section class="cta">
+        <div class="container">
+            <h2 class="insertr" data-content-id="index-h2-2-9b9baa" data-content-type="text">Ready to Transform Your Business?</h2>
+            <p class="insertr" data-content-id="index-p-5-e960fe" data-content-type="markdown">Contact us today for a free consultation and discover how we can help you achieve your goals.</p>
+            <a href="contact.html" class="btn-primary insertr" data-content-id="index-btn-primary-2-a33c64" data-content-type="link">Schedule Consultation</a>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <p class="insertr" data-content-id="index-p-6-9b47e7" data-content-type="markdown">© 2024 Acme Consulting Services. All rights reserved.</p>
+            <p class="insertr" data-content-id="index-p-7-9b47e7" data-content-type="markdown">📧 info@acmeconsulting.com | 📞 (555) 123-4567 | Located in downtown Springfield | <button class="insertr-gate" style="background: none; border: 1px solid #ccc; padding: 4px 8px; margin-left: 10px; border-radius: 3px; font-size: 11px;">🔧 Edit</button></p>
+        </div>
+    </footer>
+
+
+
+
+</body></html>
--- a/demos/default/insertr.yaml
+++ b/demos/default/insertr.yaml
@@ -0,0 +1,27 @@
+# Insertr Configuration for Default Demo Site
+# Main configuration for the default demo site
+
+# Global settings
+dev_mode: true           # Development mode for demos
+
+# Database configuration  
+database:
+  path: "./insertr.db"   # Shared database with main config
+
+# Demo-specific configuration
+demo:
+  site_id: "default"     # Unique site ID for default demo
+  inject_demo_gate: true # Auto-inject demo gate if no gates exist
+  mock_auth: true        # Use mock authentication for demos
+  api_endpoint: "http://localhost:8080/api/content"
+  demo_port: 3000        # Port for live-server
+
+# CLI enhancement configuration
+cli:
+  site_id: "default"     # Site ID for this demo
+  output: "./demos/default_enhanced" # Output directory for enhanced files
+  inject_demo_gate: true # Inject demo gate in development mode
+
+# Authentication configuration (for demo)
+auth:
+  provider: "mock"       # Mock auth for demos