- Add content API client with HTTP and mock implementations
- Implement HTML content injection with database content replacement
- Create enhance command for build-time content injection
- Integrate enhancement with servedev for live development workflow
- Add editor asset injection and serving (/_insertr/ endpoints)
- Support on-the-fly HTML enhancement during development
- Enable complete 'Tailwind of CMS' workflow: parse → inject → serve
- Replace content text sampling with SHA1 content hashing
- Generate IDs with format: context-purpose-hash (e.g., services-text-0d96da)
- Achieve content independence: IDs stable when text changes
- Maintain semantic meaning through context and purpose components
- Support disposable development IDs with production stability
- Complete transition to zero-config approach
- Container expansion now handles content type detection automatically
- No manual field type declarations needed with div.insertr containers
- Remove all manual data-content-id attributes from HTML files
- Archive old insertr JS/CSS assets to demo-site/archive/
- Remove hardcoded script includes and CSS links
- Remove old authentication controls and mock API
- Enable pure zero-config approach with class='insertr' only
- Parser now generates all 40 content IDs automatically
- Rewrite README.md: Focus on Go CLI, container expansion, zero-config philosophy
- Add comprehensive ID generation strategy to RESEARCH.md
- Document two-phase approach: disposable dev IDs vs stable production mappings
- Explain edge cases, migration tools, and developer workflow
- Position as 'Tailwind of CMS' with build-time enhancement approach
- Implement Go-based CLI for build-time HTML enhancement
- Add container expansion: div.insertr auto-expands to viable children
- Create servedev command with live development workflow
- Add Air configuration for automatic rebuilds and serving
- Enable transition from runtime JS to build-time enhancement approach
- Split monolithic insertr.js (932 lines) into 6 focused modules
- Extract configuration system for extensible field types and validation
- Separate validation, form rendering, content management, and markdown processing
- Maintain same API surface while improving maintainability and testability
- Update demo pages to use modular system
- Remove legacy support for cleaner codebase
Add UX-focused validation to prevent user accidents and provide immediate feedback. Includes DOMPurify integration for basic content sanitization and real-time form validation.
Features:
- Real-time input validation with visual feedback
- Field-type specific validation (text, URL, markdown)
- DOMPurify integration for display sanitization
- Validation messages with auto-dismiss
- Prevents common user mistakes (HTML in text fields, invalid URLs)
- Client-side sanitization for markdown rendering
- Maintains security awareness while focusing on user experience
Note: This is UX-focused validation - server-side validation remains the primary security boundary.
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
Replace container-based blob editing approach with individual element editing. Each .insertr element now gets appropriate field type (text, textarea, link) based on HTML tag and classes. Provides much better UX with separate inputs for headlines, paragraphs, and buttons while preserving HTML structure and styling.
🐛 Issue: marked is not a function error
✅ Fix: Properly access marked.js v16.x UMD API
🔧 Changes:
- Correctly access window.marked object from UMD build
- Find the parse function within the marked object
- Properly configure custom renderer with .use() method
- Add comprehensive error checking and logging
💡 UMD API Structure:
- UMD exposes: window.marked (object)
- Parse function: window.marked.marked or window.marked.parse
- Configuration: window.marked.use() method
Now ready to test the two-button scenario! 🎯
🚀 Major Upgrade: Professional markdown handling with marked.js
✅ Fixed Issues:
- No more recursion errors or browser crashes
- Proper handling of complex markdown (multiple links per line)
- Robust parsing of edge cases and nested formatting
🔧 Implementation:
- Added marked.js v16.2.1 via CDN to both HTML pages
- Custom renderer preserves button styling (btn-primary)
- Smart lead paragraph detection for styling preservation
- Intelligent element merging to maintain layout
- Removed all buggy custom parsing code (100+ lines)
🎯 New Capabilities:
- Multiple buttons per line: [Get Started](link1) [Or tomorrow](link2)
- Full CommonMark support (tables, lists, formatting)
- Better performance with optimized C-like parsing
- Extensible renderer system for future enhancements
✨ User Experience:
- Edit forms now handle complex markdown perfectly
- Layout and styling fully preserved after saves
- No more crashes when editing rich content
- Professional markdown processing
Ready to test the two-button hero scenario! 🚀
🐛 Critical Fix: Maximum call stack exceeded error
✅ Solution: Properly handle regex match result in parseMarkdownToBlocks()
🔧 Issue:
- line.match(/^#+/)[0].length caused infinite recursion
- Browser crashed when editing rich content with headings
🔧 Fix:
- Store regex match result in variable first
- Add null check before accessing match result
- Prevents stack overflow when parsing markdown headings
⚡ Now safe to edit content with # headings without crashes
🎯 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!
🛠️ Development Infrastructure:
- package.json with npm scripts for development
- live-server for hot reload during development
- Custom dev helper script with project validation
- Comprehensive .gitignore for Node.js and Go
📖 Documentation:
- Updated README.md with project overview and quick start
- DEVELOPMENT.md with detailed development guide
- Demo instructions and testing scenarios
🚀 Available Commands:
- npm run dev (start development server)
- npm run dev:check (validate project setup)
- npm run dev:demo (show testing instructions)
- npm run dev:help (list all commands)
✨ Features:
- Live reload on file changes
- Project health checking
- 18 editable elements detected
- 14.3KB core library size
Next: Ready for active development and testing!
✨ Features implemented:
- Complete demo website (Acme Consulting Services)
- Core insertr.js library with edit-in-place functionality
- Support for simple text and rich markdown content
- Mock authentication system (login/logout simulation)
- Edit mode toggle for client interface
- Local storage persistence
- Visual feedback for saving content
- Multi-page support (index.html, about.html)
- Responsive design with clean UI
🎯 Three user experiences:
- Customer: Clean website with no edit interface
- Client: Same website + edit buttons when authenticated
- Developer: Simple class-based integration
🏗️ Architecture:
- Vanilla JavaScript (no framework dependencies)
- Alpine.js ready for enhanced interactivity
- CSS-only styling for edit indicators
- Mock API structure for backend planning
Next: Connect to Go backend with real persistence
- Research existing CMS solutions (TinaCMS, Strapi, Contentful, Ghost)
- Tech stack decision: Go + htmx/Alpine for edit-in-place functionality
- User experience design for three user types (Customer/Client/Developer)
- Prototype roadmap with three phases
- Authentication strategy with Authentik OAuth 2.0
- Core vision: Simple 'add a class and it works' integration
