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>
This commit is contained in:
2025-11-09 12:42:40 +01:00
parent 28428ed458
commit a83bc5cb7a
9 changed files with 285 additions and 12 deletions

View File

@@ -23,6 +23,7 @@ export function FontSelector({ fonts, selectedFont, onSelectFont, className }: F
const [filter, setFilter] = React.useState<FilterType>('all');
const [favorites, setFavorites] = React.useState<string[]>([]);
const [recentFonts, setRecentFonts] = React.useState<string[]>([]);
const searchInputRef = React.useRef<HTMLInputElement>(null);
// Load favorites and recent fonts
React.useEffect(() => {
@@ -30,6 +31,26 @@ export function FontSelector({ fonts, selectedFont, onSelectFont, className }: F
setRecentFonts(getRecentFonts());
}, []);
// Keyboard shortcuts
React.useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
// "/" to focus search
if (e.key === '/' && !e.ctrlKey && !e.metaKey) {
e.preventDefault();
searchInputRef.current?.focus();
}
// "Esc" to clear search
if (e.key === 'Escape' && searchQuery) {
e.preventDefault();
setSearchQuery('');
searchInputRef.current?.blur();
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [searchQuery]);
// Initialize Fuse.js for fuzzy search
const fuse = React.useMemo(() => {
return new Fuse(fonts, {
@@ -118,8 +139,9 @@ export function FontSelector({ fonts, selectedFont, onSelectFont, className }: F
<div className="relative mb-4">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
<Input
ref={searchInputRef}
type="text"
placeholder="Search fonts... (fuzzy)"
placeholder="Search fonts... (Press / to focus)"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 pr-9"