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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user