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>
106 lines
3.3 KiB
Markdown
106 lines
3.3 KiB
Markdown
# Figlet UI
|
|
|
|
A modern, feature-rich web UI for generating ASCII art text using figlet.js with 373 fonts from the [xero/figlet-fonts](https://github.com/xero/figlet-fonts) collection.
|
|
|
|
## Features
|
|
|
|
- **373 Figlet Fonts** - All .flf fonts from xero's curated collection
|
|
- **Live Preview** - Real-time rendering as you type
|
|
- **Fuzzy Search** - Quickly find fonts by name or style
|
|
- **Visual Font Previews** - See actual rendering in the selector
|
|
- **Multiple Export Formats** - Copy, download as text, PNG, or SVG
|
|
- **Shareable URLs** - Share your creations with encoded URLs
|
|
- **Dark Mode** - Eye-friendly interface
|
|
- **Keyboard Shortcuts** - Power user features
|
|
- **Mobile Optimized** - Works great on all devices
|
|
- **Code Generation** - Generate snippets for JS, Python, CLI
|
|
|
|
## Tech Stack
|
|
|
|
- [Next.js 16](https://nextjs.org/) - React framework with static export
|
|
- [React 19](https://react.dev/) - Latest React with concurrent features
|
|
- [TypeScript 5](https://www.typescriptlang.org/) - Type-safe development
|
|
- [Tailwind CSS 4](https://tailwindcss.com/) - Modern utility-first CSS
|
|
- [figlet.js](https://github.com/patorjk/figlet.js) - ASCII art rendering engine
|
|
- [Fuse.js](https://fusejs.io/) - Fuzzy search functionality
|
|
- [Lucide React](https://lucide.dev/) - Beautiful icon library
|
|
|
|
## Development
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js 22+ (managed via nvm)
|
|
- pnpm (enabled via corepack)
|
|
|
|
### Setup
|
|
|
|
```bash
|
|
# Install dependencies
|
|
pnpm install
|
|
|
|
# Run development server with Turbopack
|
|
pnpm dev
|
|
|
|
# Build for production (static export)
|
|
pnpm build
|
|
|
|
# Lint code
|
|
pnpm lint
|
|
```
|
|
|
|
The development server will be available at [http://localhost:3000](http://localhost:3000).
|
|
|
|
## Docker Deployment
|
|
|
|
Build and run with Docker:
|
|
|
|
```bash
|
|
# Build Docker image
|
|
docker build -t figlet-ui .
|
|
|
|
# Run container
|
|
docker run -p 80:80 figlet-ui
|
|
```
|
|
|
|
The application will be available at [http://localhost](http://localhost).
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
figlet-ui/
|
|
├── app/ # Next.js app directory
|
|
│ ├── layout.tsx # Root layout with metadata
|
|
│ ├── page.tsx # Home page
|
|
│ └── globals.css # Global styles
|
|
├── components/ # React components
|
|
├── lib/ # Utility functions and services
|
|
├── types/ # TypeScript type definitions
|
|
├── public/ # Static assets
|
|
├── Dockerfile # Multi-stage Docker build
|
|
├── nginx.conf # Nginx configuration for static serving
|
|
└── IMPLEMENTATION_PLAN.md # Detailed implementation roadmap
|
|
|
|
```
|
|
|
|
## Why Figlet UI is Better Than TAAG
|
|
|
|
- **More Fonts**: 373 fonts vs ~300 on TAAG
|
|
- **Modern UI/UX**: Clean, responsive design with animations
|
|
- **Better Search**: Fuzzy search with visual previews
|
|
- **More Export Options**: PNG, SVG, code snippets, not just text
|
|
- **Shareable Links**: URL-encoded sharing
|
|
- **Performance**: Lazy loading, Web Workers for smooth experience
|
|
- **Dark Mode**: Built-in theme switching
|
|
- **Keyboard Shortcuts**: Power user efficiency
|
|
- **Mobile First**: Optimized for touch devices
|
|
|
|
## License
|
|
|
|
MIT
|
|
|
|
## Credits
|
|
|
|
- [figlet.js](https://github.com/patorjk/figlet.js) by Patrick Gillespie
|
|
- [xero/figlet-fonts](https://github.com/xero/figlet-fonts) - Curated font collection
|
|
- Original [FIGlet](http://www.figlet.org/) project
|