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
128 lines
4.8 KiB
Markdown
128 lines
4.8 KiB
Markdown
# 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
|
|
|
|
1. **Start with Phase 1.2** (Professional Edit Forms) - highest user impact
|
|
2. **Port form-renderer.js** first - creates immediate professional feel
|
|
3. **Test integration** with CLI enhancement pipeline
|
|
4. **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.* |