Commit Graph

2 Commits

Author SHA1 Message Date
15776d7148 feat: add PNG export, text alignment, and font size controls
Massive UX improvements for preview customization and export:

**PNG Export**
- Export ASCII art as high-quality PNG images
- Uses html-to-image library (2x pixel ratio)
- Preserves background color and styling
- Auto-download with font name in filename
- Toast notification on success/error
- PNG button in preview toolbar

**Text Alignment Controls**
- Left / Center / Right alignment buttons
- Visual toggle buttons with icons
- Live preview updates
- Persists during font/text changes
- Smooth transitions

**Font Size Controls**
- XS (10px) / SM (12-14px) / MD (14-16px)
- Toggle buttons for quick switching
- Responsive font sizes
- Better readability options
- Great for different screen sizes

**Enhanced Preview Toolbar**
- Reorganized button layout
- Better button labels (Copy, Share, PNG, TXT)
- Tooltips on all buttons
- Icon + text labels
- Wrapped flex layout for mobile

**Preview Controls UI**
- Two control groups (align + size)
- Bordered button groups
- Active state highlighting
- Hover states
- Clean, compact design

**Updated Keyboard Shortcuts Help**
- Better descriptions
- Added "Tips" section
- Feature discovery hints
- Grouped by category
- More helpful content

**Technical Improvements**
- Added html-to-image dependency
- Ref-based element capture
- Dynamic className composition
- State management for controls
- Proper TypeScript types

**Button Improvements**
- "Download" → "TXT" (more specific)
- Added "PNG" button
- Better icon usage
- Consistent sizing
- Mobile-friendly layout

The preview is now fully customizable with professional export options!

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 13:31:08 +01:00
a83bc5cb7a feat: add keyboard shortcuts, Docker deployment, and production build
Major improvements for production deployment and UX:

**Keyboard Shortcuts System**
- `/` - Focus font search instantly
- `Esc` - Clear search and close dialogs
- `Ctrl/Cmd + D` - Toggle dark/light mode
- `Shift + ?` - Show keyboard shortcuts help dialog
- Floating keyboard icon button for discoverability
- Beautiful modal with all shortcuts listed
- Global event listeners with proper cleanup

**Enhanced Search UX**
- Updated placeholder: "Search fonts... (Press / to focus)"
- Auto-focus on `/` keypress
- Auto-clear and blur on `Escape`
- Ref-based input focusing for reliability

**Docker Deployment**
- Multi-stage Dockerfile (deps, builder, nginx runner)
- Based on node:22-alpine for minimal size
- Static export served via nginx:alpine
- Built-in health check endpoint (/health)
- Optimized for production

**Nginx Configuration**
- Gzip compression for all text assets
- Aggressive caching for static assets (1 year)
- Security headers (X-Frame-Options, CSP, etc.)
- SPA routing support (try_files)
- Health check endpoint
- Performance tuning (sendfile, tcp_nopush)

**Documentation Updates**
- Corrected font count to accurate 373 fonts
- Updated README and IMPLEMENTATION_PLAN
- Added Docker deployment instructions
- Clarified .flf vs .tlf vs .flc formats

**Production Build**
- Tested static export build
- Total size: 8.0MB (including all fonts!)
- 4.7s build time with Turbopack
- All routes pre-rendered successfully
- Ready for CDN/static hosting

**Technical Highlights**
- useKeyboardShortcuts custom hook
- Event listener cleanup on unmount
- Ref forwarding for input focus
- Modal dialog with backdrop blur
- Keyboard-first navigation

The app is now production-ready with professional keyboard shortcuts
and Docker deployment support! 🎉

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-09 12:42:40 +01:00