- Remove clunky multi-property editor with separate text + URL inputs
- Implement single rich text editor (contentEditable) for all content
- Add popup-based link configuration: select text → click 🔗 Link → configure
- Filter out link styles from formatting toolbar (links use popup, not buttons)
- Consolidate CSS: remove separate style-aware-editor.css, integrate into insertr.css
- Clean up 200+ lines of unused multi-property form code and styles
- Fix duplicate link style detection (no more 'Fancy Link' + 'Link' buttons)
Result: Much cleaner UX similar to modern editors where formatting uses
toolbar buttons and complex elements (links) use dedicated popups.
- Fix TypeError when accessing form.style by adding fallback selectors
- Support both legacy (.insertr-edit-form) and new editor class names
- Add null checks to prevent crashes when form element is not found
- Ensure ensureModalVisible works with all editor types
Resolves positioning error when opening style-aware editor interface.
- Add StyleAwareEditor class with intelligent editing strategy detection
- Implement three editing modes: simple text, rich content, multi-property forms
- Create dynamic formatting toolbar with buttons for detected styles
- Add multi-property editing forms for complex elements (links, images, buttons)
- Integrate contentEditable with style application/removal functionality
- Replace markdown-based editor.js with style-aware architecture
- Add comprehensive CSS styling for modern, responsive editor interface
- Support fallback editing for error cases with graceful degradation
- Enable real-time style application to selected text in rich editor
- Preserve all element attributes and structure during editing workflow
Complete implementation of CLASSES.md style preservation specification.
Phase 2 foundation ready for final testing and refinement.
- Add StyleDetectionEngine with one-layer-deep nested element analysis
- Add HTMLPreservationEngine for direct HTML manipulation without lossy conversion
- Implement structure-preserving content parsing that maintains element positions
- Add multi-property element support for links (href + content), images (src + alt), buttons
- Create comprehensive test suite with real DOM element validation
- Replace markdown-based system foundation with HTML-first architecture
- Preserve all element attributes (classes, IDs, data-*, aria-*) during editing
- Generate human-readable style names from detected nested elements
- Support template extraction with multiple insertion points for complex elements
Foundation complete for Phase 2 style-aware editor interface per CLASSES.md specification.
- Remove complex style preservation system from editor
- Simplify markdown conversion back to straightforward approach
- Remove StyleContext class and style-aware conversion methods
- Switch content type from 'html' back to 'markdown' for consistency
- Clean up editor workflow to focus on core markdown editing
- Remove ~500 lines of unnecessary style complexity
This completes the UI unification cleanup by removing the overly complex
style preservation system that was making the editor harder to maintain.
- Add StyleContext class for extracting and applying HTML attributes/styles
- Enhance MarkdownConverter with style-aware conversion methods
- Switch backend storage from markdown to HTML with 'html' content type
- Update editor workflow to preserve CSS classes, IDs, and attributes
- Maintain markdown editing UX while storing HTML for style preservation
- Support complex attributes like rel, data-*, aria-*, etc.
This enables editing styled content like <a class="fancy" rel="me">text</a>
while preserving all styling attributes through the markdown editing process.
- Add syntactic sugar for container transformation: .insertr containers → children get .insertr
- Fix discovery auto-running when disabled with site-specific config loading
- Add comprehensive styling test examples for HTML attribute preservation
- Include test input for syntactic sugar validation
- Update discovery defaults to respect developer intent (disabled by default)
- Rebuild JavaScript library with delayed control panel initialization
- Update server assets to include latest UI behavior changes
- Ensure built assets reflect invisible UI for regular visitors
The control panel now only appears after gate activation, maintaining
the invisible CMS principle for end users.
- Move control panel initialization from start() to startEditor()
- Ensure UI only appears after successful gate activation
- Regular visitors now see zero indication of insertr presence
- Maintains 'invisible CMS' principle for end users
User Experience:
- Before gate: Website appears completely normal
- After gate: Control panel slides in for authenticated editors
- Gates remain the only trigger mechanism for editors
- Create InsertrControlPanel class for unified UI management
- Separate business logic from presentation layer
- Remove DOM manipulation from auth.js and editor.js
- Add comprehensive CSS for status indicators and editing effects
- Implement consistent kebab-case file naming
- Add event-driven communication between core and UI layers
UI Architecture:
- Unified control panel with status indicator and action buttons
- Color-coded status dots (gray/blue/green for visitor/auth/editing)
- Professional editing hover effects with tooltips
- Responsive design for mobile devices
- Proper z-index and accessibility management
Business Logic:
- Pure auth.js focused on authentication state and OAuth flows
- Pure editor.js focused on content editing workflow
- Event emitters for state changes between modules
- Clean separation of concerns and testable architecture
- Remove @layer declarations and complex hybrid approach
- Eliminate all !important usage - rely on natural CSS specificity
- Add explicit color declarations to prevent inheritance issues
- Class selectors (0,0,1,0) naturally beat universal selectors (0,0,0,0)
- Fixes white-on-white modal issues on sites with CSS resets
- Works in all browsers without 2022+ cascade layer requirements
- Cleaner, more maintainable CSS architecture
- Add production Norwegian sales training website demo
- Create placeholder CSS files for Hugo @import statements
- Update .gitignore to exclude *_enhanced/ directories
- Fix CSS MIME type issues for extensionless files in /css/ paths
- Migrate from inline CSS to external insertr.css with cascade layer architecture
- Add CSS CDN serving capability (ServeInsertrCSS handler and /insertr.css route)
- Implement hybrid approach: @layer insertr for modern browsers + html body selectors for legacy browsers
- Remove scattered inline CSS from JavaScript modules for better maintainability
- Solve form element spacing conflicts with aggressive site CSS resets like '* {margin:0; padding:0}'
- Enable proper CSS caching and separation of concerns
Major improvements:
- Replace Gorilla Mux with Chi v5 router for better performance and cleaner code
- Fix CSS/JS MIME type issues that prevented proper asset loading
- Add built-in CORS middleware replacing manual OPTIONS handlers
- Simplify routing with nested route syntax
- Update URL parameter extraction from mux.Vars to chi.URLParam
New Devigo demo:
- Add production Norwegian sales training website (devigo.no)
- Real-world Hugo-generated content with TailwindCSS
- 39 insertr-enhanced elements for comprehensive CMS testing
- Demonstrates international language support and B2B use cases
- Fixed asset paths for localhost serving compatibility
Technical benefits:
- Automatic MIME type detection for static files
- Reduced code complexity with built-in middleware
- Better performance with lighter dependency stack
- Production-ready CORS handling
- Replace non-working video elements with gradient placeholders showing app previews
- Replace missing images with styled placeholder divs maintaining layout
- Add emoji icons (📱🎤) for visual appeal without external dependencies
- Maintain responsive design and visual hierarchy
- Keep all content IDs working for Insertr enhancement (40 content elements)
- Reduce demo to 48KB total with no missing media dependencies
- Remove all Next.js JavaScript framework dependencies (~1.9MB)
- Strip social media tracking and analytics scripts
- Preserve visual design with essential CSS files only (24KB)
- Keep video elements with local file references instead of external Mux streams
- Reduce HTML from 30KB minified to 5.5KB formatted (82% reduction)
- Maintain responsive design and content structure for realistic demo
- Ensure compatibility with Insertr content editing system
- Replace minified scraped HTML with clean, readable portfolio demo
- Remove all Next.js assets and dependencies (_next/, fonts, images)
- Create hand-crafted HTML with proper structure and modern CSS
- Maintain portfolio theme with projects, timeline, and professional content
- Reduce from 30KB minified to 6KB clean, readable HTML
- Update README to reflect new clean demo purpose
- Restructure demo directory from test-sites/ to demos/ with flattened layout
- Add auto-enhancement on server startup for all sites with auto_enhance: true
- Fix inconsistent content ID generation that prevented dan-eden-portfolio content persistence
- Update server configuration to enhance from source to separate output directories
- Remove manual enhancement from justfile in favor of automatic server enhancement
- Clean up legacy test files and unused restore command
- Update build system to use CDN endpoint instead of file copying
- Replace dual script injection (external + inline) with single script approach
- Pass site configuration via data attributes instead of inline JavaScript
- Update library auto-initialization to read config from script data attributes
- Reduce HTML bloat by eliminating 30+ lines of inline initialization code
- Maintain future-proof CDN compatibility and duplication prevention
Enhanced files now contain only one clean script tag with configuration.
- Replace complex multi-server setup (live-server + API) with unified Go server
- Serve all sites at /sites/{site_id} endpoints, eliminating port conflicts
- Fix content-type middleware to serve proper MIME types for static files
- Prevent script injection duplication with future-proof CDN-compatible detection
- Remove auto page reload from enhance button to eliminate editing interruptions
- Enable seamless content editing workflow with manual enhancement control
Development now requires only 'just dev' instead of complex demo commands.
All sites immediately available at localhost:8080 without hot reload conflicts.
- Remove obsolete cmd/auto_enhance.go command (replaced by unified enhance)
- Implement EnhanceInPlace method using unified pipeline
- Remove generated demo files from git tracking
- Verify all functionality works after cleanup:
* go build successful
* enhance command working correctly
* unified pipeline (discovery → ID generation → content injection) verified
* clean command structure (only enhance, serve, restore commands)
The codebase is now clean with no legacy auto-enhance references or stub implementations. All functionality consolidated into the unified Discoverer + Enhancer architecture.
- Replace complex two-step process (auto-enhance + enhance) with single enhance command
- Eliminate temporary directory management and cleanup
- Direct input → output enhancement using unified Discoverer + Enhancer pipeline
- Verified working on simple test site with proper:
* Element discovery (h1, p elements get insertr class)
* Container expansion (div with multiple children)
* ID generation (deterministic data-content-id attributes)
* Content type detection (text, markdown types)
The justfile workflow is now much cleaner and matches our documented single-command approach.
- Rename AutoEnhancer to Discoverer with clear element discovery focus
- Implement unified enhancement pipeline in Enhancer:
* Phase 1: Element Discovery (configurable, respects existing insertr classes)
* Phase 2: ID Generation via engine
* Phase 3: Content Injection via engine
- Add EnhancementConfig and DiscoveryConfig for flexible configuration
- Update all method names and references (discoverNode, DiscoveryResult, etc.)
- Support both manual class insertion and automatic discovery
- Maintain single enhance command interface while providing unified internal pipeline
- Update all constructors to use new configuration-based approach
This establishes the clean Discoverer + Enhancer architecture discussed, with discovery as configurable first phase and enhancement as unified pipeline.
- Move all ContentItem, ContentClient, ContentResponse types to engine/types.go as single source of truth
- Remove duplicate type definitions from content/types.go
- Update all imports across codebase to use engine types
- Enhance engine to extract existing data-content-id from HTML markup
- Simplify frontend to always send html_markup, let server handle ID extraction/generation
- Fix contentId reference errors in frontend error handling
- Add getAttribute helper method to engine for ID extraction
- Add GetAllContent method to engine.DatabaseClient
- Update enhancer to use engine.ContentClient interface
- All builds and API endpoints verified working
This resolves the 400 Bad Request errors and creates a unified architecture where the server is the single source of truth for all ID generation and content type management.
Database Structure Cleanup:
- Move all SQL files from ./db/ to ./internal/db/
- Update sqlc.yaml to use new paths (preserving schema+setup.sql hack)
- Consolidate database-related code in single directory
- Remove empty ./db/ directory
Injector Migration:
- Move injector.go from content package to engine package
- Update ContentClient interface to return map instead of slice for GetBulkContent
- Update database client implementation to match interface
- Remove injector dependency from enhancer (stub implementation)
Demo-Site Consolidation:
- Move demo-site to test-sites/demo-site for better organization
- Update build scripts to use new demo-site location
- Maintain all functionality while improving project structure
This continues the unified architecture consolidation by moving core content
processing logic to the engine and organizing related files properly.
- Remove internal/parser package and all legacy ID generation logic
- Update enhancer and auto_enhancer to use unified engine functions
- Migrate utility functions (FindViableChildren, HasEditableContent) to engine
- Create stub enhancer implementation that uses unified engine architecture
- Ensure all enhancement workflows now go through single unified system
- Remove parser dependencies and consolidate content processing logic
This completes the cleanup phase - all components now use unified engine
instead of fragmented ID generation systems.
- Create internal/engine module as single source of truth for content processing
- Consolidate 4 separate ID generation systems into one unified engine
- Update API handlers to use engine for consistent server-side ID generation
- Remove frontend client-side ID generation, delegate to server engine
- Ensure identical HTML markup + file path produces identical content IDs
- Resolve content persistence failures caused by ID fragmentation between manual editing and enhancement processes
- Add gitignore patterns for CLI-generated demo directories (*-demo/, *-enhanced/, etc.)
- Remove previously tracked demo files that are now auto-generated
- Demo sites will be auto-created on-demand by CLI during just demo commands
• Add /insertr.js endpoint to serve JavaScript library from API server
• Implement demo gate auto-injection for sites without existing gates
• Add dynamic site ID injection using per-demo configuration files
• Fix CORS middleware to support localhost origins on any port
• Update demo commands to use individual insertr.yaml configs
• Resolve content persistence issues by matching site IDs between injection and enhancement
• Enable complete edit/save workflow for demo sites with proper namespace isolation
- Add intelligent auto-enhancement that detects viable content elements
- Replace manual enhancement with automated container-first detection
- Support inline formatting (strong, em, span, links) within editable content
- Streamline demo workflow: just demo shows options, auto-enhances on demand
- Clean up legacy commands and simplify directory structure
- Auto-enhancement goes directly from source to demo-ready (no intermediate dirs)
- Add Dan Eden portfolio and simple test sites for real-world validation
- Auto-enhanced 40 elements in Dan Eden portfolio, 5 in simple site
- Achieve true zero-configuration CMS experience
- Replace content-hash based ID generation with position-based algorithm
- Use file + element identity + position index + hash for unique IDs
- Generate human-readable prefixes (e.g. index-lead-, index-p-2-)
- Add collision-resistant hash suffixes for guaranteed uniqueness
- Update Generate() to accept filePath parameter for context
- Fix ID collisions where hero and footer elements shared same ID
- Clean demo site files removing all data-content-id attributes
- Preserve insertr-gate elements for authentication functionality
Results: Hero gets 'index-lead-2-fc31f2', footer gets 'index-p-13-99fd13'
No more content cross-contamination between different elements.
Backend changes:
- Updated parser to treat <span> elements as markdown by default
- Changed span content type detection from ContentText to ContentMarkdown
- Spans now support **bold**, *italic*, and [links](url) formatting
Frontend changes:
- Updated content type detection to match backend behavior
- Frontend now treats spans as markdown elements for consistent processing
- Editor preview behavior now matches server-side enhancement
Benefits:
- <span class='highlight'>**bold** text</span> now processes markdown correctly
- Inline elements maintain all styling while supporting rich formatting
- Complete frontend/backend consistency for span element handling
- Expands markdown support to common inline wrapper elements
Tested and verified:
- Span elements preserve all classes, IDs, and styles
- Bold, italic, and link formatting works in span elements
- Content type properly detected as 'markdown' in both systems
Critical fixes:
- Fixed HTML injection to preserve original element attributes, classes, and styling
- Updated markdown processor to generate inline content instead of wrapped paragraphs
- Enhanced content type handling: database type now takes precedence over parser detection
- Eliminated nested <p> tags issue that was causing invalid HTML
Key improvements:
- Elements like <p class='lead insertr' style='color: blue;'> now maintain all attributes
- Markdown **bold**, *italic*, [links](url) inject as inline formatted content
- Database content type (markdown/text/link) overrides parser auto-detection
- Clean HTML output without structural corruption
Before: <p class='lead'><p>**bold**</p></p> (broken)
After: <p class='lead'>**bold text**</p> (clean)
Server remains source of truth for markdown processing with zero runtime overhead.
Backend implementation:
- Add goldmark dependency for markdown processing
- Create MarkdownProcessor with minimal config (bold, italic, links only)
- Update content injector with HTML injection capabilities
- Add injectHTMLContent() for safe DOM manipulation
- Server now converts **bold**, *italic*, [links](url) to HTML during enhancement
Frontend alignment:
- Restrict marked.js to match server capabilities
- Disable unsupported features (headings, lists, code blocks, tables)
- Update turndown rules to prevent unsupported markdown generation
- Frontend editor preview now matches server output exactly
Server as source of truth:
- Build-time markdown→HTML conversion during enhancement
- Zero runtime overhead for end users
- Consistent formatting between editor preview and final output
- Raw markdown stored in database, HTML served to visitors
Tested features:
- **bold** → <strong>bold</strong> ✅
- *italic* → <em>italic</em> ✅
- [text](url) → <a href="url">text</a> ✅
- Replace separate POST/PUT endpoints with unified POST upsert
- Add automatic content ID generation from element context when no ID provided
- Implement version history preservation before content updates
- Add element context support for backend ID generation
- Update frontend to use single endpoint for all content operations
- Enhanced demo site with latest database content including proper content IDs
- Replace separate POST/PUT endpoints with unified POST upsert endpoint
- Add comprehensive API usage examples with automatic ID generation
- Simplify content management to single endpoint for create/update operations
- Document element_context for backend ID generation and version control features
- Problem: Element ID collisions between similar elements (logo h1 vs hero h1)
causing content to be injected into wrong elements
- Root cause: Enhancer used naive tag+class matching instead of parser's
sophisticated semantic analysis for element identification
Systematic solution:
- Enhanced parser architecture with exported utilities (GetClasses, ContainsClass)
- Added FindElementInDocument() with content-based semantic matching
- Replaced naive findAndInjectNodes() with parser-based element matching
- Removed code duplication between parser and enhancer packages
Backend improvements:
- Moved ID generation to backend for single source of truth
- Added ElementContext struct for frontend-backend communication
- Updated API handlers to support context-based content ID generation
Frontend improvements:
- Enhanced getElementMetadata() to extract semantic context
- Updated save flow to handle both enhanced and non-enhanced elements
- Improved API client to use backend-generated content IDs
Result:
- Unique content IDs: navbar-logo-200530 vs hero-title-a1de7b
- Precise element matching using content validation
- Single source of truth for DOM utilities in parser package
- Eliminated 40+ lines of duplicate code while fixing core bug
- Add manual enhance API endpoint (POST /api/enhance?site_id={site}) for triggering file enhancement
- Implement enhance button in JavaScript library status indicator (🔄 Enhance)
- Disable auto-enhancement in development mode to prevent live-reload conflicts
- Add dev mode parameter to SiteManager to control enhancement behavior
- Update API routing structure to support /api/enhance endpoint
- Include enhance button styling and user feedback (loading, success, error states)
- Button triggers file enhancement and page reload to show updated static files
Development workflow improvements:
- Content edits → Immediate editor preview (no unwanted page reloads)
- Manual enhance button → Intentional file updates + reload for testing
- Production mode maintains automatic enhancement on content changes
This resolves the live-reload conflict where automatic file enhancement
was causing unwanted page reloads during content editing in development.
- Add dev_mode parameter to SiteManager constructor
- Modify IsAutoEnhanceEnabled() to return false when dev_mode is true
- Update serve.go to pass dev_mode flag to SiteManager
- Add ForceEnhanceEnabled() method for testing production behavior in development
- Update documentation to explain development vs production mode behavior
This fixes the development workflow where content updates would trigger
file modifications that caused unwanted page reloads in live-server.
Development mode: Content saved to database only, editor loads dynamically
Production mode: Content saved + files enhanced for immediate static deployment
- Add SiteManager for registering and managing static sites with file-based enhancement
- Implement EnhanceInPlace method for in-place file modification using database content
- Integrate automatic file enhancement triggers in UpdateContent API handler
- Add comprehensive site configuration support in insertr.yaml with auto-enhancement
- Extend serve command to automatically register and manage configured sites
- Add backup system for original files before enhancement
- Support multi-site hosting with individual auto-enhancement settings
- Update documentation for server-hosted enhancement workflow
This enables real-time content deployment where database content changes
immediately update static files without requiring rebuilds or redeployment.
The database remains the single source of truth while maintaining static
file performance benefits.
- Replace dual update systems with single markdown-first editor architecture
- Add server-side upsert to eliminate 404 errors on PUT operations
- Fix content persistence race condition between preview and save operations
- Remove legacy updateElementContent system entirely
- Add comprehensive authentication with JWT scaffolding and dev mode
- Implement EditContext.updateOriginalContent() for proper baseline management
- Enable markdown formatting in all text elements (h1-h6, p, div, etc)
- Clean terminology: remove 'unified' references from codebase
Technical changes:
* core/editor.js: Remove legacy update system, unify content types as markdown
* ui/Editor.js: Add updateOriginalContent() method to fix save persistence
* ui/Previewer.js: Clean live preview system for all content types
* api/handlers.go: Implement UpsertContent for idempotent PUT operations
* auth/*: Complete authentication service with OAuth scaffolding
* db/queries/content.sql: Add upsert query with ON CONFLICT handling
* Schema: Remove type constraints, rely on server-side validation
Result: Clean content editing with persistent saves, no 404 errors, markdown support in all text elements
- Remove mock_content setting (working database loop makes it unnecessary)
- Change server.dev_mode to global dev_mode setting for consistency
- Update CLI to use cli.site_id and cli.output for scoped configuration
- Implement database client for CLI enhance command (complete static site loop)
- Update justfile to use INSERTR_DATABASE_PATH environment variable
- Enable multi-site architecture: server is site-agnostic, CLI is site-specific
- Unified insertr.yaml now supports both server and CLI with minimal config
🏗️ **Major Architecture Refactoring: Separate CLI + Server → Unified Binary**
**Key Changes:**
✅ **Unified Binary**: Single 'insertr' binary with subcommands (enhance, serve)
✅ **Preserved Database Architecture**: Maintained sophisticated sqlc multi-DB setup
✅ **Smart Configuration**: Viper + YAML config with CLI flag precedence
✅ **Updated Build System**: Unified justfile, Air, and npm scripts
**Command Structure:**
- `insertr enhance [input-dir]` - Build-time content injection
- `insertr serve` - HTTP API server (dev + production modes)
- `insertr --config insertr.yaml` - YAML configuration support
**Architecture Benefits:**
- **Shared Database Layer**: Single source of truth for content models
- **Flexible Workflows**: Local DB for dev, remote API for production
- **Simple Deployment**: One binary for all use cases
- **Better UX**: Consistent configuration across build and runtime
**Preserved Features:**
- Multi-database support (SQLite + PostgreSQL)
- sqlc code generation and type safety
- Version control system with rollback
- Professional API endpoints
- Content enhancement pipeline
**Development Workflow:**
- `just dev` - Full-stack development (API server + demo site)
- `just serve` - API server only
- `just enhance` - Build-time content injection
- `air` - Hot reload unified binary
**Migration:** Consolidated insertr-cli/ and insertr-server/ → unified root structure
**Discovery**: sqlc's DDL support is database-engine specific:
✅ **PostgreSQL**: sqlc generates functions for CREATE INDEX, CREATE FUNCTION
❌ **SQLite**: sqlc does NOT generate CREATE INDEX functions
❌ **Both**: sqlc does NOT generate CREATE TRIGGER functions
**Corrected Implementation**:
- Use sqlc-generated setup functions where available (tables always, PostgreSQL indexes)
- Use manual SQL where sqlc doesn't support (SQLite indexes, all triggers)
- Comments clarify why manual SQL is needed in each case
**Architecture Principle**: Use sqlc for what it supports, supplement with manual SQL for what it doesn't - this is the recommended hybrid approach.
