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>
81 lines
1.8 KiB
TypeScript
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 '';
|
|
}
|
|
}
|