Files

Sebastian Krüger 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

3.3 KiB

Raw Permalink Blame History

Figlet UI

A modern, feature-rich web UI for generating ASCII art text using figlet.js with 373 fonts from the 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 - React framework with static export
React 19 - Latest React with concurrent features
TypeScript 5 - Type-safe development
Tailwind CSS 4 - Modern utility-first CSS
figlet.js - ASCII art rendering engine
Fuse.js - Fuzzy search functionality
Lucide React - Beautiful icon library

Development

Prerequisites

Node.js 22+ (managed via nvm)
pnpm (enabled via corepack)

Setup

# 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.

Docker Deployment

Build and run with Docker:

# 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.

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 by Patrick Gillespie
xero/figlet-fonts - Curated font collection
Original FIGlet project

3.3 KiB Raw Permalink Blame History