Sebastian Krüger
877c31d943
- Add 373 figlet fonts from xero/figlet-fonts as static assets - Remove GitHub Actions workflow (now using Coolify + webhooks) - Update .gitignore to track fonts in repository This eliminates the need to clone fonts at build time and simplifies deployment. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
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