Replaced the intrusive blue status bar with a sleek slide-in control panel:
UI/UX Improvements:
- Minimized ribbon (📝 icon) on top-right that slides out to full panel
- Beautiful gradient design with backdrop blur effects
- Smooth CSS transitions with cubic-bezier easing
- Auto-expand on load, then minimize after 2 seconds
- Click outside to close, click ribbon to toggle
Features Combined:
- Status indicators with dynamic icons (⏳ loading, ✅ success, ❌ error)
- Save & Download and Preview buttons in clean grid layout
- Version information in panel header
- Error reporting with expandable details
- Responsive design for mobile devices
Technical Changes:
- Replaced old floating-header with integrated control panel
- Enhanced status update function with visual state management
- Added toggle functionality with click-outside-to-close
- Improved typography and spacing throughout
- Updated test to match new element ID structure
This provides a much cleaner editing experience with better space utilization
while maintaining all previous functionality and adding visual polish.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit fixes the critical md-render --edit regression that was causing
"blue box, no content" issues and adds comprehensive version tracking.
Key fixes:
- Fixed JavaScript newline escaping in f-string templates (\\n\\n not \\\\n\\\\n)
- Restored proper content rendering with marked.js CDN and graceful fallback
- Removed problematic validation logic that was blocking content display
- Cleaned up html-inject-editing command and related experimental code
Enhancements:
- Added version display in edit mode header with git commit and timestamp
- Enhanced version tracking to show local uncommitted changes with timestamps
- Added comprehensive regression tests to prevent future breakage
- Improved error handling and recovery mechanisms
The md-render --edit functionality now works reliably with full version visibility.
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
Add robust testing framework to prevent regression of edit mode:
- Comprehensive regression tests for JavaScript syntax validation
- Build-time JavaScript validation tool with Node.js integration
- Enhanced error tracking with detailed logging and recovery
- Makefile integration for `make validate-js` command
Features:
- Validates JavaScript syntax in generated HTML templates
- Detects common issues like broken string literals and brace escaping
- Enhanced error reporting with timestamps and context
- Automatic error recovery for graceful degradation
- Build validation to catch syntax errors before deployment
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
