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 700+ fonts from the [xero/figlet-fonts](https://github.com/xero/figlet-fonts) collection.
|
||
|
|
|
||
|
|
## Features
|
||
|
|
|
||
|
|
- **700+ Figlet Fonts** - Massive library 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
|
||
|
|
|
||
|
|
- **10x More Fonts**: 700+ 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
|