Joakim
dc70b74f7d
🎯 Problem: Buttons and styling lost when saving rich content ✅ Solution: Smart content application that preserves HTML structure 🔧 New Features: - parseMarkdownToBlocks() - Intelligently parses markdown - updateRichContent() - Updates elements in place vs wholesale replacement - canUpdateElement() - Checks element/content compatibility - updateElementContent() - Preserves classes while updating content - looksLikeButton() - Heuristics to detect and preserve button styling 🎨 Layout Preservation: - Buttons keep their 'btn-primary' classes and styling - Headings maintain existing CSS classes and hierarchy - Paragraphs preserve lead/subtitle classes - Links maintain href and visual styling ✨ User Experience: - Edit 'Get Started Today' button → still looks like a button after save - Rich content maintains professional appearance - No more plain text where buttons should be Smart frontend content management without backend complexity!
Insertr
Edit-in-place CMS for client websites - Simple integration with class-based content editing
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.
✨ The Vision
<!-- Developer adds this once -->
<script src="https://insertr.example.com/insertr.js"></script>
<!-- Then marks content as editable -->
<div class="insertr" data-content-id="hero">
<h1>Your Editable Content</h1>
</div>
That's it! Your clients can now edit this content inline.
🎯 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" - 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
🔄 In Development
- Go backend with REST API
- Authentik OAuth integration
- File-based content storage
- Git version control
🛠️ Quick Start
-
Clone and install:
git clone <repository-url> cd insertr npm install -
Start development server:
npm run dev -
Open http://localhost:3000 and test the demo!
📖 Documentation
- Development Guide - Setup, workflow, and contribution guide
- Demo Instructions - How to test the prototype
- Project Planning - Requirements, research, and roadmap
🏗️ Architecture
Current (Phase 1)
- Frontend: Vanilla JavaScript + Alpine.js
- Storage: localStorage (for prototype)
- Authentication: Mock system
- Deployment: Static files
Planned (Phase 2)
- Backend: Go HTTP server
- Storage: File-based with Git versioning
- Authentication: Authentik OAuth 2.0
- Deployment: Single binary + static files
Future (Phase 3)
- Multi-tenant: Host multiple client sites
- Admin Dashboard: Advanced content management
- CDN Integration: Global content delivery
- Plugin System: Extensible functionality
🎬 Demo Features
Try the prototype to see:
- ✏️ Inline Editing - Click edit buttons to modify content
- 📝 Rich Content - Markdown editing for formatted text
- 👤 Authentication - Login simulation with role switching
- 💾 Persistence - Content saves automatically
- 📱 Responsive - Works on desktop and mobile
- 🔄 Multi-page - Consistent experience across pages
🤝 Contributing
This project is in active development. See DEVELOPMENT.md for:
- Development setup
- Project structure
- Testing guidelines
- Future roadmap
📄 License
MIT License - see LICENSE file for details.
Built with ❤️ for small business websites and their developers