Sebastian Krüger
a83bc5cb7a
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>
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { FigletConverter } from '@/components/converter/FigletConverter';
|
|
import { ThemeToggle } from '@/components/layout/ThemeToggle';
|
|
import { KeyboardShortcutsHelp } from '@/components/ui/KeyboardShortcutsHelp';
|
|
|
|
export default function Home() {
|
|
return (
|
|
<main className="min-h-screen p-4 sm:p-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<header className="mb-8 flex items-start justify-between">
|
|
<div>
|
|
<h1 className="text-3xl sm:text-4xl font-bold mb-2">Figlet UI</h1>
|
|
<p className="text-sm sm:text-base text-muted-foreground">
|
|
ASCII Art Text Generator with 373 Fonts
|
|
</p>
|
|
</div>
|
|
<ThemeToggle />
|
|
</header>
|
|
|
|
<FigletConverter />
|
|
|
|
<footer className="mt-12 pt-8 border-t text-center text-sm text-muted-foreground">
|
|
<p>
|
|
Powered by{' '}
|
|
<a
|
|
href="https://github.com/patorjk/figlet.js"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline hover:text-foreground"
|
|
>
|
|
figlet.js
|
|
</a>
|
|
{' '}·{' '}
|
|
Fonts from{' '}
|
|
<a
|
|
href="https://github.com/xero/figlet-fonts"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline hover:text-foreground"
|
|
>
|
|
xero/figlet-fonts
|
|
</a>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<KeyboardShortcutsHelp />
|
|
</main>
|
|
);
|
|
}
|