Joakim
ca3df47451
Major Architecture Improvements: - Separate JavaScript library (lib/) with proper build system - Go CLI with embedded library using go:embed - Hot reload development with Air integration - Library + CLI build pipeline with npm run build Code Cleanup: - Remove obsolete assets (insertr-cli/assets/editor/) - Clean up package.json metadata and dependencies - Update .gitignore for new architecture - Remove unused 'marked' dependency New Documentation: - Add comprehensive TODO.md with feature gap analysis - Document critical gaps between prototype and current library - Create phased implementation plan for feature parity - Update DEVELOPMENT.md with hot reload workflow - Add LIBRARY.md documenting new architecture Hot Reload System: - Air watches both Go CLI and JavaScript library - Library changes trigger: rebuild → copy → CLI rebuild → serve - Seamless development experience across full stack Next Steps: - Current library is basic proof-of-concept (prompt() editing) - Archived prototype has production-ready features - Phase 1 focuses on professional forms and authentication - Phase 2 adds validation and content persistence
4.8 KiB
4.8 KiB
Insertr Library Feature Parity TODO
Overview
Bring the current library (lib/) up to feature parity with the archived prototype (demo-site/archive/insertr-old/). The prototype has significantly more features and professional polish than our current basic library.
Critical Feature Gaps Identified
Current Library Status: Basic Proof-of-Concept
- ❌ Simple prompt() editing only
- ❌ No authentication or state management
- ❌ No form system or validation
- ❌ No content persistence
- ❌ Text-only editing (no markdown, links)
- ❌ Basic hover effects only
Prototype Status: Production-Ready
- ✅ Professional modal editing system
- ✅ Full authentication & edit mode states
- ✅ Sophisticated form renderer with validation
- ✅ LocalStorage persistence
- ✅ Multiple content types (text/markdown/link)
- ✅ Mobile-responsive design
Implementation Plan
🔴 Phase 1: Critical Foundation (IMMEDIATE)
1.1 Authentication System
- Add state management for authentication and edit mode
- Implement body class management (
insertr-authenticated,insertr-edit-mode) - Create authentication controls (login/logout toggle)
- Add edit mode toggle (separate from authentication)
1.2 Professional Edit Forms ⭐ HIGH IMPACT
- Replace prompt() with professional modal overlays
- Create dynamic form renderer based on content type
- Implement smart form positioning relative to elements
- Add mobile-responsive form layouts
1.3 Content Type Support
- Text fields with length validation
- Textarea fields for paragraphs
- Link fields (URL + text) with validation
- Markdown fields with live preview
1.4 Data Persistence
- Implement LocalStorage-based content persistence
- Create centralized content management system
- Add content caching and invalidation
🟡 Phase 2: Enhanced UX (IMPORTANT)
2.1 Visual Polish
- Add positioned edit buttons on element hover
- Implement professional hover effects and transitions
- Create loading states for save operations
- Add success/error toast notifications
2.2 Validation System
- Input validation (length, required fields, format)
- URL validation for link fields
- Markdown syntax validation and warnings
- XSS protection and content sanitization
2.3 Configuration System
- Auto-detect field types from HTML elements (H1-H6, P, A, etc.)
- CSS class-based enhancement (
.lead,.btn-primary, etc.) - Developer-extensible field type system
- Configurable validation rules per field type
🟢 Phase 3: Advanced Features (NICE-TO-HAVE)
3.1 Markdown System
- Port full markdown processing system from prototype
- Real-time markdown preview in edit forms
- DOMPurify integration for security
- Markdown toolbar (bold, italic, links)
3.2 Mobile Optimization
- Touch-friendly edit interactions
- Full-screen mobile edit experience
- Adaptive modal sizing and positioning
- Touch-optimized hover states
Key Files to Port/Adapt
From Prototype (demo-site/archive/insertr-old/)
config.js→lib/src/core/config.js(field type detection)form-renderer.js→lib/src/ui/form-renderer.js(modal forms)validation.js→lib/src/core/validation.js(input validation)content-manager.js→lib/src/core/content-manager.js(persistence)markdown-processor.js→lib/src/core/markdown.js(markdown support)insertr.css→lib/src/styles/(professional styling)
Architecture Adaptations Needed
- Build-Time Integration: Ensure features work with CLI-enhanced HTML
- Hot Reload Compatibility: Maintain development experience
- Library Independence: Keep self-contained for CDN usage
- Modern ES6+ Modules: Update from class-based to module-based architecture
Success Criteria
After Phase 1 & 2 completion:
- ✅ Professional editing experience matching prototype quality
- ✅ All critical content types supported (text/markdown/link)
- ✅ Authentication and state management working
- ✅ Persistent content storage with LocalStorage
- ✅ Mobile-responsive editing interface
- ✅ Input validation and XSS protection
Next Steps
- Start with Phase 1.2 (Professional Edit Forms) - highest user impact
- Port form-renderer.js first - creates immediate professional feel
- Test integration with CLI enhancement pipeline
- Maintain hot reload functionality during development
Architecture Decision
Keep the current library + CLI architecture while porting prototype features:
- Library remains independent and CDN-ready
- CLI continues build-time enhancement approach
- Hot reload development experience preserved
- "Tailwind of CMS" philosophy maintained
This TODO represents bringing a basic proof-of-concept up to production-ready feature parity with the original prototype.