feat: complete code cleanup and create feature parity plan

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
This commit is contained in:
2025-09-03 19:11:54 +02:00
parent f82d8bb287
commit ca3df47451
27 changed files with 1747 additions and 164 deletions

View File

@@ -2,30 +2,52 @@
## Quick Start
### Full-Stack Development (Recommended)
1. **Install dependencies**:
```bash
npm install
npm install # Root project dependencies
cd lib && npm install # Library dependencies
```
2. **Start development server**:
2. **Start hot reload development**:
```bash
npm run dev
cd insertr-cli && air # Starts server with library hot reload
```
This will start live-server on http://localhost:3000 and automatically open the demo site.
- Watches both Go CLI changes AND JavaScript library changes
- Automatically rebuilds library → CLI → serves enhanced content
- Visit http://localhost:3000 to see results
3. **Alternative commands**:
```bash
npm run dev:about # Open about page directly
npm run serve # Alias for npm run dev
```
### Library-Only Development
```bash
cd lib && npm run watch # Just develop the JavaScript library
```
### Legacy Frontend Development
```bash
npm run dev # Legacy live-server (demo-site only)
```
## Development Workflow
### Frontend Development (Current Phase)
### Hot Reload Development (Current Phase)
**🔥 NEW**: Full-stack hot reload with Air integration!
- **Library Source**: `lib/src/` - Independent JavaScript library
- **CLI Integration**: `insertr-cli/` - Go CLI with embedded library
- **Demo Site**: `demo-site/` - Test website for enhancement
- **Automatic Rebuilds**: Changes to JS library trigger full rebuild cycle
#### How Hot Reload Works:
1. Edit JavaScript in `lib/src/`
2. Air detects changes → Rebuilds library → Copies to CLI → Rebuilds CLI
3. Enhanced development server serves updated content
4. Manual browser refresh shows changes
### Legacy Frontend Development
- **Demo Site**: `demo-site/` contains the prototype website
- **Core Library**: `demo-site/insertr/insertr.js` - the main Insertr library
- **Styling**: `demo-site/insertr/insertr.css` - edit interface styles
- **Core Library**: `demo-site/insertr/insertr.js` - the old prototype library
- **Mock API**: `demo-site/mock-api/content.json` - sample backend data structure
### Testing the Three User Types
@@ -36,9 +58,15 @@
### Making Changes
#### Modern Development (lib/ + insertr-cli/)
- **Library Changes**: Edit `lib/src/**/*.js` → Air automatically rebuilds everything
- **CLI Changes**: Edit Go files in `insertr-cli/` → Air rebuilds and restarts server
- **Demo Content**: Edit `demo-site/*.html` → Air serves enhanced versions
- **Hot Reload**: Changes trigger full rebuild cycle (library → CLI → enhanced content)
#### Legacy Development (demo-site/)
- **Live Reload**: The server automatically refreshes when you save changes
- **JavaScript**: Edit `demo-site/insertr/insertr.js` to modify core functionality
- **Styling**: Edit `demo-site/insertr/insertr.css` for UI changes
- **JavaScript**: Edit `demo-site/insertr/insertr.js` for prototype functionality
- **Content**: Edit HTML files to test different content structures
### Adding New Features
@@ -51,40 +79,67 @@
```
insertr/
├── INITIAL.md # Project requirements and research
├── DEVELOPMENT.md # This file
├── package.json # Node.js project configuration
├── .gitignore # Git ignore rules
├── LIBRARY.md # Library architecture documentation
├── package.json # Root project configuration
├── demo-site/ # Frontend prototype
├── lib/ # 🆕 Independent JavaScript Library
│ ├── src/
│ │ ├── core/
│ │ │ ├── insertr.js # Core library functionality
│ │ │ ├── editor.js # Visual editing interface
│ │ │ └── api-client.js # Content API client
│ │ └── index.js # Library entry point
│ ├── dist/
│ │ ├── insertr.js # Built library (development)
│ │ └── insertr.min.js # Built library (production)
│ ├── package.json # Library dependencies
│ └── rollup.config.js # Build configuration
├── insertr-cli/ # 🆕 Go CLI with Embedded Library
│ ├── pkg/content/
│ │ ├── assets/ # Embedded library files (auto-copied)
│ │ ├── library.go # Go embed declarations
│ │ ├── enhancer.go # HTML enhancement orchestrator
│ │ ├── injector.go # Content injection logic
│ │ └── ...
│ ├── scripts/
│ │ └── rebuild-library.sh # Air helper script
│ ├── .air.toml # Hot reload configuration
│ └── insertr # Built CLI executable
├── demo-site/ # Test website for enhancement
│ ├── index.html # Demo homepage
│ ├── about.html # Demo about page
── README.md # Demo usage instructions
│ │
│ ├── assets/ # Demo site assets
│ │ └── style.css # Demo site styling
│ │
│ ├── insertr/ # Core Insertr library
│ │ ├── insertr.js # Main library file
│ │ ├── insertr.css # Edit interface styles
│ │ └── components/ # Future: reusable edit components
│ │
│ └── mock-api/ # Backend planning
│ └── content.json # Sample data structure
── assets/style.css # Demo site styling
└── backend/ # Future: Go backend
── main.go # Future: HTTP server
├── api/ # Future: REST endpoints
└── storage/ # Future: file-based storage
└── scripts/
── build.js # Integrated build script
```
## Development Scripts
- `npm run dev` - Start development server with live reload
- `npm run dev:about` - Start server opening about page
- `npm run build` - Future: Bundle library for distribution
- `npm run test` - Future: Run tests
- `npm run lint` - Future: Code linting
### Root Scripts
- `npm run build` - Build library + CLI with embedded assets
- `npm run dev` - Legacy live-server (demo-site only)
### Library Scripts (cd lib/)
- `npm run build` - Build library to dist/
- `npm run watch` - Watch and rebuild library on changes
### CLI Scripts (cd insertr-cli/)
- `air` - 🔥 Hot reload server (library + CLI + enhanced content)
- `go build -o insertr` - Manual CLI build
- `./insertr enhance <dir>` - Enhance static site
- `./insertr servedev <dir>` - Development server with enhancement
### Hot Reload Workflow
```bash
cd insertr-cli && air # Start hot reload development
# Edit lib/src/**/*.js # Air detects → rebuilds → serves
# Edit cmd/**/*.go # Air detects → rebuilds → serves
# Edit ../demo-site/ # Air serves enhanced versions
```
## Testing Different Scenarios