Add hybrid editing system with markdown collections

Implement markdown collection support alongside existing element-level editing. Users can now choose between individual element editing (headlines, buttons) and rich markdown editing (stories, bios). Includes responsive overlay forms, smart field detection, and comprehensive documentation updates.

Features:
- Markdown collections with data-field-type="markdown"
- Responsive overlay forms that adapt to element width
- Element-level editing for granular control
- Updated documentation and integration guide
- Fixed marked.js renderer configuration issues
- Enhanced about.html to demonstrate both approaches

README.md

@@ -1,22 +1,40 @@
 # Insertr
 
-> **Edit-in-place CMS for client websites** - Simple integration with class-based content editing
+> **Element-Level Edit-in-place CMS** - Hybrid approach with individual elements and markdown collections
 
-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.
+Insertr allows developers to make any website content editable by simply adding a CSS class. Clients get appropriate editing interfaces based on content type - individual fields for headlines/buttons, rich markdown editors for flowing content.
 
-## ✨ The Vision
+## ✨ Two Editing Approaches
 
+### **Element-Level Editing** (Granular Control)
 ```html
-<!-- Developer adds this once -->
-<script src="https://insertr.example.com/insertr.js"></script>
+<h1 class="insertr" data-content-id="headline">Main Title</h1>
+<p class="insertr" data-content-id="subtitle">Short description</p>
+<a class="btn-primary insertr" data-content-id="cta">Get Started</a>
+```
 
-<!-- Then marks content as editable -->
-<div class="insertr" data-content-id="hero">
-  <h1>Your Editable Content</h1>
+Perfect for:
+- Headlines, titles, taglines
+- Call-to-action buttons (text + URL)
+- Contact information
+- Short descriptions
+
+### **Markdown Collections** (Rich Content)
+```html
+<div class="insertr" data-content-id="story" data-field-type="markdown">
+  <p>Our company was founded in 2020...</p>
+  <p>We recognized that **small businesses** needed access to...</p>
+  <p>Today, we've helped over [200 clients](portfolio) achieve their goals.</p>
 </div>
 ```
 
-**That's it!** Your clients can now edit this content inline.
+Perfect for:
+- Story sections, articles
+- Team member bios  
+- Product descriptions
+- Multi-paragraph content with formatting
+
+**That's it!** Your clients get the right editing experience for each content type.
 
 ## 🎯 Three User Types
 
@@ -27,23 +45,28 @@ Insertr allows developers to make any website content editable by simply adding
 
 ### 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
+- Gets appropriate editing interfaces:
+  - **Text inputs** for headlines and short content
+  - **Link editors** for buttons (text + URL fields)
+  - **Markdown editors** for rich content with formatting
+- Changes are saved immediately with responsive overlay forms
 
 ### 3. **The Developer** (You)
-- Simple integration: just add `class="insertr"` 
+- **Element-level**: Add `class="insertr"` to any individual element
+- **Markdown collections**: Add `data-field-type="markdown"` for rich content
 - 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
+- **Hybrid editing system**: Element-level + markdown collections
+- **Smart field detection**: Automatic input types based on HTML tags
+- **Responsive overlay forms**: Width adapts to element size
+- **Markdown support**: Powered by marked.js for rich content
+- **Mock authentication system** with role switching
+- **Local persistence** with automatic saving
+- **Multi-page support** with consistent experience
 
 **🔄 In Development**
 - Go backend with REST API
@@ -67,6 +90,44 @@ Insertr allows developers to make any website content editable by simply adding
 
 3. **Open http://localhost:3000** and test the demo!
 
+## 📚 Integration Guide
+
+### Basic Setup
+```html
+<!-- Include marked.js for markdown support -->
+<script src="https://cdn.jsdelivr.net/npm/marked@16.2.1/lib/marked.umd.js"></script>
+<!-- Include Insertr -->
+<script src="insertr/insertr.js"></script>
+```
+
+### Element-Level Editing
+```html
+<!-- Headlines get text input -->
+<h1 class="insertr" data-content-id="main-title">Your Title</h1>
+
+<!-- Paragraphs get textarea -->  
+<p class="insertr" data-content-id="description">Your description</p>
+
+<!-- Buttons get text + URL fields -->
+<a href="/contact" class="btn-primary insertr" data-content-id="cta">Contact Us</a>
+```
+
+### Markdown Collections
+```html
+<!-- Rich content gets markdown editor -->
+<div class="insertr" data-content-id="story" data-field-type="markdown">
+  <p>Your story begins here...</p>
+  <p>Use **bold**, *italic*, and [links](url) naturally.</p>
+  <p>Line breaks create new paragraphs automatically.</p>
+</div>
+```
+
+### Field Types
+- `<h1-h6>.insertr` → Text input with appropriate length limits
+- `<p>.insertr` → Textarea (larger for `.lead` paragraphs)  
+- `<a>.insertr` → Link editor with text and URL fields
+- `<div data-field-type="markdown">` → Large markdown editor with formatting support
+
 ## 📖 Documentation
 
 - **[Development Guide](DEVELOPMENT.md)** - Setup, workflow, and contribution guide
@@ -76,7 +137,8 @@ Insertr allows developers to make any website content editable by simply adding
 ## 🏗️ Architecture
 
 ### Current (Phase 1)
-- **Frontend**: Vanilla JavaScript + Alpine.js
+- **Frontend**: Vanilla JavaScript with marked.js for markdown
+- **Editing**: Hybrid element-level + markdown collection system
 - **Storage**: localStorage (for prototype)
 - **Authentication**: Mock system
 - **Deployment**: Static files
@@ -96,12 +158,13 @@ Insertr allows developers to make any website content editable by simply adding
 ## 🎬 Demo Features
 
 **Try the prototype to see:**
-- ✏️ **Inline Editing** - Click edit buttons to modify content
-- 📝 **Rich Content** - Markdown editing for formatted text
+- ✏️ **Element-Level Editing** - Individual text inputs for headlines, textareas for paragraphs, link editors for buttons
+- 📝 **Markdown Collections** - Large editor for rich content with **bold**, *italic*, [links], line breaks → paragraphs
+- 🎯 **Smart Field Detection** - Automatic input types based on HTML tags and classes
+- 📏 **Responsive Overlays** - Edit forms resize to match element width
 - 👤 **Authentication** - Login simulation with role switching
-- 💾 **Persistence** - Content saves automatically
-- 📱 **Responsive** - Works on desktop and mobile
-- 🔄 **Multi-page** - Consistent experience across pages
+- 💾 **Persistence** - Content saves automatically with localStorage
+- 🔄 **Multi-page** - Consistent experience across pages (index.html + about.html)
 
 ## 🤝 Contributing