Files
figlet-ui/lib/figlet/fontLoader.ts
Sebastian Krüger 753ed17e4b feat: implement core figlet converter with live preview
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>
2025-11-09 12:20:42 +01:00

62 lines
1.4 KiB
TypeScript

import type { FigletFont } from '@/types/figlet';
// Cache for loaded fonts
const fontCache = new Map<string, string>();
/**
* Get list of all available figlet fonts
*/
export async function getFontList(): Promise<FigletFont[]> {
try {
const response = await fetch('/api/fonts');
if (!response.ok) {
throw new Error('Failed to fetch font list');
}
const fonts: FigletFont[] = await response.json();
return fonts;
} catch (error) {
console.error('Error fetching font list:', error);
return [];
}
}
/**
* Load a specific font file content
*/
export async function loadFont(fontName: string): Promise<string | null> {
// Check cache first
if (fontCache.has(fontName)) {
return fontCache.get(fontName)!;
}
try {
const response = await fetch(`/fonts/figlet-fonts/${fontName}.flf`);
if (!response.ok) {
throw new Error(`Failed to load font: ${fontName}`);
}
const fontData = await response.text();
// Cache the font
fontCache.set(fontName, fontData);
return fontData;
} catch (error) {
console.error(`Error loading font ${fontName}:`, error);
return null;
}
}
/**
* Preload a font into cache
*/
export async function preloadFont(fontName: string): Promise<void> {
await loadFont(fontName);
}
/**
* Clear font cache
*/
export function clearFontCache(): void {
fontCache.clear();
}