- 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>
- Add step to clone xero/figlet-fonts repository before Docker build
- Fixes ENOENT error: public/fonts/figlet-fonts directory missing during build
- Fonts are excluded from git per .gitignore, must be cloned separately
- Changed from prefix match to exact match (location =)
- Ensures /api/fonts takes priority over other location blocks
- Removes unnecessary regex location block for API routes
- Add specific location block for /api/fonts endpoint
- Set default_type to application/json for API routes
- Next.js static export creates extensionless files that need explicit Content-Type
- Fixes 404 error on production deployment
- Add specific location block for /api/ routes with application/json Content-Type
- Add .flf extension to cached static assets for font files
- This fixes fonts not loading in production static export
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add GitHub Actions workflow for automated Docker builds
- Build and push to GitHub Container Registry (ghcr.io)
- Support for multi-platform builds (linux/amd64, linux/arm64)
- Automatic tagging based on branch, PR, semver, and SHA
- Generate artifact attestations for supply chain security
- Build on push to main, tags, PRs, and manual dispatch
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add text templates with 16 pre-made options across 4 categories (greeting, tech, fun, seasonal)
- Add copy history panel tracking last 10 copied items with restore functionality
- Add font comparison mode to view multiple fonts side-by-side (up to 6 fonts)
- Add smooth animations: slide-down, slide-up, scale-in, fade-in, pulse, and shimmer
- Add loading skeletons for better perceived performance
- Add EmptyState component with contextual messages and icons
- Add hover effects and transitions throughout the UI
- Improve visual feedback with animated badges and shadows
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed FOUC (Flash of Unstyled Content) issue with dark mode:
**Problem:**
- Page would flash light theme before switching to dark
- localStorage check happened after React hydration
- Caused jarring visual experience
**Solution:**
- Added blocking script in <head> that runs immediately
- Checks localStorage and system preference synchronously
- Applies 'dark' class before any rendering
- Prevents flash completely
**Technical Changes:**
- Inline script in layout.tsx head
- Runs before React hydration
- Added suppressHydrationWarning to html tag
- ThemeToggle now reads from DOM instead of re-setting
- Wrapped in try-catch for safety
**Result:**
- No more flickering on page load
- Smooth theme experience
- Works with both saved preference and system default
- Instant dark mode application
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Major UX enhancements for better user feedback and discovery:
**Toast Notification System**
- Beautiful toast notifications with 3 types (success/error/info)
- Auto-dismiss after 3 seconds
- Slide-in animation from right
- Color-coded by type (green/red/blue)
- Dark mode support
- Close button for manual dismiss
- ToastProvider context for global access
- Non-blocking UI overlay
**Random Font Discovery**
- Shuffle button in font selector
- One-click random font selection
- Toast notification shows selected font
- Perfect for discovering new fonts
- Located next to "Select Font" header
**Enhanced Font Preview**
- Font name badge display
- Character count statistics
- Line count statistics
- Better visual hierarchy
- Responsive stat display
**Improved Feedback**
- Toast on copy: "Copied to clipboard!"
- Toast on share: "Shareable URL copied!"
- Toast on random: "Random font: FontName"
- Error toasts for failed operations
- Removed temporary text replacement
**Smooth Animations**
- Slide-in animation for toasts
- Fade-in animation class
- Custom keyframe animations
- CSS utility classes
- Smooth transitions throughout
**Technical Improvements**
- useToast custom hook
- Context-based state management
- Auto-cleanup with setTimeout
- Unique toast IDs
- TypeScript types for toast system
- Proper event propagation
**Better UX**
- No more jarring text replacements
- Non-intrusive notifications
- Professional feedback system
- Discoverable random feature
- Informative preview stats
The app now feels polished and professional with proper user feedback!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
Implemented Phases 5-7 of the implementation plan with major UX enhancements:
**Dark Mode (Phase 9)**
- Added ThemeToggle component with localStorage persistence
- System preference detection
- Smooth theme transitions
- Moon/Sun icon toggle in header
**Fuzzy Search with Fuse.js (Phase 5)**
- Integrated Fuse.js for intelligent font search
- 30% threshold for flexible matching
- Search by font name and filename
- Clear button for search input
- Much better than simple string matching
**Favorites & Recent Fonts System (Phase 7)**
- localStorage-based favorites with heart icon toggle
- Auto-tracking of recently used fonts (max 10)
- Filter tabs: All / Favorites / Recent
- Favorite hearts visible on hover
- Red filled heart for favorited fonts
- Stats showing favorite and recent counts
**Shareable URLs (Phase 6)**
- Encode text + font in URL parameters
- Auto-load from URL on page load
- Share button copies URL to clipboard
- Clean URL updates without page reload
- Perfect for sharing ASCII art creations
**Enhanced Font Selector**
- 3-tab filter system (All/Favorites/Recent)
- Visual feedback for selected fonts
- Empty states for each filter
- Font count statistics
- Heart icon for quick favoriting
- Recent fonts sorted by usage order
**UX Improvements**
- Copy feedback ("Copied to clipboard! ✓")
- Share feedback ("URL copied to clipboard! ✓")
- Responsive button layout
- Better empty states
- Improved accessibility with aria-labels
**Tech Highlights**
- Client-side localStorage management
- URL encoding/decoding utilities
- React hooks for state management
- Fuse.js fuzzy search integration
- Theme persistence across sessions
The app now has professional-grade features rivaling any modern web app!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Use OKLCH color space for better color precision
- Add @theme inline with proper --color-* definitions
- Add @source directives for component paths
- Add @custom-variant for dark mode
- Fix border-border utility class error
- Match units-ui styling setup
- Add smooth scrollbar styling
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented Phases 2-4 of the implementation plan:
**Phase 2: Font Management System**
- Created font loading service with caching
- Added API route to list all 373 figlet fonts
- Implemented font metadata types
**Phase 3: Core Figlet Engine**
- Built figlet.js wrapper service for ASCII art generation
- Added async/sync rendering methods
- Implemented debounced text updates (300ms)
- Created utility functions (cn, debounce)
**Phase 4: Main UI Components**
- Built reusable UI primitives (Button, Input, Card)
- Created TextInput component with character counter (100 char limit)
- Implemented FontPreview with loading states
- Added FontSelector with real-time search
- Built main FigletConverter orchestrating all components
**Features Implemented:**
- Live preview with 300ms debounce
- 373 fonts from xero/figlet-fonts collection
- Fuzzy font search
- Copy to clipboard
- Download as .txt file
- Responsive 3-column layout (mobile-friendly)
- Character counter
- Loading states
- Empty states
**Tech Stack:**
- Next.js 16 App Router with Turbopack
- React 19 with client components
- TypeScript with strict types
- Tailwind CSS 4 for styling
- figlet.js for rendering
- Font caching for performance
The application is fully functional and ready for testing!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Initialize Next.js 16 with React 19 and TypeScript 5
- Configure Tailwind CSS 4 with PostCSS
- Set up static export for Docker deployment
- Install figlet.js for ASCII art rendering
- Add fuse.js for fuzzy search functionality
- Create project structure (app/, components/, lib/, types/)
- Add comprehensive README and IMPLEMENTATION_PLAN
- Configure ESLint and TypeScript
- Set up pnpm package management
Tech stack matches units-ui project for consistency.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
