Files
figlet-ui/app/api/fonts/route.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

30 lines
812 B
TypeScript

import { NextResponse } from 'next/server';
import fs from 'fs';
import path from 'path';
export const dynamic = 'force-static';
export async function GET() {
try {
const fontsDir = path.join(process.cwd(), 'public/fonts/figlet-fonts');
const files = fs.readdirSync(fontsDir);
const fonts = files
.filter(file => file.endsWith('.flf'))
.map(file => {
const name = file.replace('.flf', '');
return {
name,
fileName: file,
path: `/fonts/figlet-fonts/${file}`,
};
})
.sort((a, b) => a.name.localeCompare(b.name));
return NextResponse.json(fonts);
} catch (error) {
console.error('Error reading fonts directory:', error);
return NextResponse.json({ error: 'Failed to load fonts' }, { status: 500 });
}
}