Files
figlet-ui/lib/figlet/figletService.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

81 lines
1.8 KiB
TypeScript

'use client';
import figlet from 'figlet';
import type { FigletOptions } from '@/types/figlet';
import { loadFont } from './fontLoader';
/**
* Convert text to ASCII art using figlet
*/
export async function textToAscii(
text: string,
fontName: string = 'Standard',
options: FigletOptions = {}
): Promise<string> {
if (!text) {
return '';
}
try {
// Load the font
const fontData = await loadFont(fontName);
if (!fontData) {
throw new Error(`Font ${fontName} could not be loaded`);
}
// Parse and load the font into figlet
figlet.parseFont(fontName, fontData);
// Generate ASCII art
return new Promise((resolve, reject) => {
figlet.text(
text,
{
font: fontName,
horizontalLayout: options.horizontalLayout || 'default',
verticalLayout: options.verticalLayout || 'default',
width: options.width,
whitespaceBreak: options.whitespaceBreak ?? true,
},
(err, result) => {
if (err) {
reject(err);
} else {
resolve(result || '');
}
}
);
});
} catch (error) {
console.error('Error generating ASCII art:', error);
throw error;
}
}
/**
* Generate ASCII art synchronously (requires font to be pre-loaded)
*/
export function textToAsciiSync(
text: string,
fontName: string = 'Standard',
options: FigletOptions = {}
): string {
if (!text) {
return '';
}
try {
return figlet.textSync(text, {
font: fontName as any,
horizontalLayout: options.horizontalLayout || 'default',
verticalLayout: options.verticalLayout || 'default',
width: options.width,
whitespaceBreak: options.whitespaceBreak ?? true,
});
} catch (error) {
console.error('Error generating ASCII art (sync):', error);
return '';
}
}