refactor: rename figlet app to ascii and update all references
This commit is contained in:
@@ -8,7 +8,7 @@ This file provides foundational context and instructions for Gemini CLI when wor
|
||||
|
||||
1. **Color**: Advanced color theory, manipulation, and accessibility suite powered by `@valknarthing/pastel-wasm`.
|
||||
2. **Units**: Smart unit converter supporting 187+ units across 23 categories, including a custom `tempo` measure.
|
||||
3. **Figlet**: ASCII Art generator with 373 fonts and multi-format export.
|
||||
3. **ASCII**: ASCII Art generator with 373 fonts and multi-format export.
|
||||
4. **Media**: Browser-based file converter using **FFmpeg** and **ImageMagick** via WebAssembly (Zero server uploads).
|
||||
|
||||
## 🛠️ Tech Stack & Architecture
|
||||
@@ -26,7 +26,7 @@ This file provides foundational context and instructions for Gemini CLI when wor
|
||||
```bash
|
||||
.
|
||||
├── app/ # Next.js App Router
|
||||
│ ├── (app)/ # Core Tool Pages (color, units, figlet, media)
|
||||
│ ├── (app)/ # Core Tool Pages (color, units, ascii, media)
|
||||
│ └── globals.css # Tailwind 4 configuration & global styles
|
||||
├── components/ # UI Components
|
||||
│ ├── [tool]/ # Tool-specific components (e.g., components/color/)
|
||||
@@ -37,7 +37,7 @@ This file provides foundational context and instructions for Gemini CLI when wor
|
||||
│ └── utils/ # General utilities (cn, format, etc.)
|
||||
├── public/ # Static assets
|
||||
│ ├── wasm/ # WASM binaries (ffmpeg, imagemagick)
|
||||
│ └── fonts/ # Figlet fonts (.flf)
|
||||
│ └── fonts/ # ASCII fonts (.flf)
|
||||
└── types/ # TypeScript definitions
|
||||
```
|
||||
|
||||
|
||||
10
README.md
10
README.md
@@ -30,7 +30,7 @@ A powerful, intuitive converter that understands the way you work.
|
||||
- **Visual Comparison**: Dynamic chart views for comparing scale across different units.
|
||||
- **Favorites & History**: Save your most-used conversions for instant access.
|
||||
|
||||
### ✍️ [Figlet](./app/(app)/figlet) — ASCII Art Generator
|
||||
### ✍️ [ASCII](./app/(app)/ascii) — ASCII Art Generator
|
||||
Retro-inspired text banners for terminals and documentation.
|
||||
- **373 Fonts**: From classic `Standard` to complex 3D and cursive styles.
|
||||
- **Real-time Preview**: See your ASCII art transform as you type.
|
||||
@@ -73,20 +73,20 @@ Privacy-first, local-only media conversion powered by WebAssembly.
|
||||
```bash
|
||||
.
|
||||
├── app/ # Next.js App Router (Pages & Layouts)
|
||||
│ ├── (app)/ # Core Tool Pages (Color, Units, Figlet, Media)
|
||||
│ ├── (app)/ # Core Tool Pages (Color, Units, ASCII, Media)
|
||||
│ └── api/ # Backend API routes
|
||||
├── components/ # Reusable UI & Logic Components
|
||||
│ ├── color/ # Color-specific components
|
||||
│ ├── units/ # Converter-specific components
|
||||
│ ├── figlet/ # ASCII-specific components
|
||||
│ ├── ascii/ # ASCII-specific components
|
||||
│ ├── media/ # Media conversion components
|
||||
│ └── ui/ # Base Atomic Components (Buttons, Cards, etc.)
|
||||
├── lib/ # Business Logic & Utilities
|
||||
│ ├── color/ # WASM wrappers & Color logic
|
||||
│ ├── units/ # Conversion algorithms
|
||||
│ ├── figlet/ # Font loading & ASCII generation
|
||||
│ ├── ascii/ # Font loading & ASCII generation
|
||||
│ └── media/ # FFmpeg & ImageMagick WASM orchestration
|
||||
├── public/ # Static assets & Figlet fonts
|
||||
├── public/ # Static assets & ASCII fonts
|
||||
├── Dockerfile # Multi-stage Docker build
|
||||
└── nginx.conf # Production Nginx configuration
|
||||
```
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { FigletConverter } from '@/components/figlet/FigletConverter';
|
||||
import { ASCIIConverter } from '@/components/ascii/ASCIIConverter';
|
||||
import { AppPage } from '@/components/layout/AppPage';
|
||||
|
||||
export default function FigletPage() {
|
||||
export default function ASCIIPage() {
|
||||
return (
|
||||
<AppPage
|
||||
title="Figlet ASCII"
|
||||
title="ASCII Art Generator"
|
||||
description="ASCII Art Text Generator with 373 Fonts"
|
||||
>
|
||||
<FigletConverter />
|
||||
<ASCIIConverter />
|
||||
</AppPage>
|
||||
);
|
||||
}
|
||||
@@ -6,7 +6,7 @@ export const dynamic = 'force-static';
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const fontsDir = path.join(process.cwd(), 'public/fonts/figlet-fonts');
|
||||
const fontsDir = path.join(process.cwd(), 'public/fonts/ascii-fonts');
|
||||
const files = fs.readdirSync(fontsDir);
|
||||
|
||||
const fonts = files
|
||||
@@ -16,7 +16,7 @@ export async function GET() {
|
||||
return {
|
||||
name,
|
||||
fileName: file,
|
||||
path: `/fonts/figlet-fonts/${file}`,
|
||||
path: `/fonts/ascii-fonts/${file}`,
|
||||
};
|
||||
})
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
@@ -16,7 +16,7 @@ export const UnitsIcon = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const FigletIcon = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
export const ASCIIIcon = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.5 13h6" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m2 16 4.5-9 4.5 9" />
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import ToolCard from './ToolCard';
|
||||
import { ColorIcon, UnitsIcon, FigletIcon, MediaIcon } from '@/components/AppIcons';
|
||||
import { ColorIcon, UnitsIcon, ASCIIIcon, MediaIcon } from '@/components/AppIcons';
|
||||
|
||||
const tools = [
|
||||
{
|
||||
@@ -24,13 +24,13 @@ const tools = [
|
||||
icon: <UnitsIcon className="w-12 h-12 text-white" />,
|
||||
},
|
||||
{
|
||||
title: 'Figlet',
|
||||
title: 'ASCII',
|
||||
description: 'ASCII art text generator with 373 fonts. Create stunning text banners, terminal art, and retro designs with live preview and multiple export formats.',
|
||||
url: '/figlet',
|
||||
url: '/ascii',
|
||||
gradient: 'gradient-yellow-amber',
|
||||
accentColor: '#eab308',
|
||||
badges: ['Open Source', 'ASCII Art', 'Free'],
|
||||
icon: <FigletIcon className="w-12 h-12 text-white" />,
|
||||
icon: <ASCIIIcon className="w-12 h-12 text-white" />,
|
||||
},
|
||||
{
|
||||
title: 'Media',
|
||||
|
||||
@@ -4,21 +4,21 @@ import * as React from 'react';
|
||||
import { TextInput } from './TextInput';
|
||||
import { FontPreview } from './FontPreview';
|
||||
import { FontSelector } from './FontSelector';
|
||||
import { textToAscii } from '@/lib/figlet/figletService';
|
||||
import { getFontList } from '@/lib/figlet/fontLoader';
|
||||
import { textToAscii } from '@/lib/ascii/asciiService';
|
||||
import { getFontList } from '@/lib/ascii/fontLoader';
|
||||
import { debounce } from '@/lib/utils/debounce';
|
||||
import { addRecentFont } from '@/lib/storage/favorites';
|
||||
import { decodeFromUrl, updateUrl, getShareableUrl } from '@/lib/utils/urlSharing';
|
||||
import { toast } from 'sonner';
|
||||
import type { FigletFont } from '@/types/figlet';
|
||||
import type { ASCIIFont } from '@/types/ascii';
|
||||
import { Car } from 'lucide-react';
|
||||
import { Card, CardContent } from '../ui/card';
|
||||
|
||||
export function FigletConverter() {
|
||||
const [text, setText] = React.useState('Figlet');
|
||||
export function ASCIIConverter() {
|
||||
const [text, setText] = React.useState('ASCII');
|
||||
const [selectedFont, setSelectedFont] = React.useState('Standard');
|
||||
const [asciiArt, setAsciiArt] = React.useState('');
|
||||
const [fonts, setFonts] = React.useState<FigletFont[]>([]);
|
||||
const [fonts, setFonts] = React.useState<ASCIIFont[]>([]);
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
|
||||
// Load fonts and check URL params on mount
|
||||
@@ -88,7 +88,7 @@ export function FigletConverter() {
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `figlet-${selectedFont}-${Date.now()}.txt`;
|
||||
a.download = `ascii-${selectedFont}-${Date.now()}.txt`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
@@ -45,7 +45,7 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
|
||||
});
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.download = `figlet-${font || 'export'}-${Date.now()}.png`;
|
||||
link.download = `ascii-${font || 'export'}-${Date.now()}.png`;
|
||||
link.href = dataUrl;
|
||||
link.click();
|
||||
|
||||
@@ -14,11 +14,11 @@ import {
|
||||
import { Search, X, Heart, Clock, List, Shuffle } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import type { FigletFont } from '@/types/figlet';
|
||||
import type { ASCIIFont } from '@/types/ascii';
|
||||
import { getFavorites, getRecentFonts, toggleFavorite, isFavorite } from '@/lib/storage/favorites';
|
||||
|
||||
export interface FontSelectorProps {
|
||||
fonts: FigletFont[];
|
||||
fonts: ASCIIFont[];
|
||||
selectedFont: string;
|
||||
onSelectFont: (fontName: string) => void;
|
||||
onRandomFont?: () => void;
|
||||
@@ -17,7 +17,7 @@ import { cn } from '@/lib/utils/cn';
|
||||
import Logo from '@/components/Logo';
|
||||
import { useSidebar } from './SidebarProvider';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ColorIcon, UnitsIcon, FigletIcon, MediaIcon } from '@/components/AppIcons';
|
||||
import { ColorIcon, UnitsIcon, ASCIIIcon, MediaIcon } from '@/components/AppIcons';
|
||||
|
||||
interface NavItem {
|
||||
title: string;
|
||||
@@ -41,9 +41,9 @@ const navigation: NavGroup[] = [
|
||||
icon: <UnitsIcon className="h-4 w-4" />
|
||||
},
|
||||
{
|
||||
title: 'Figlet ASCII',
|
||||
href: '/figlet',
|
||||
icon: <FigletIcon className="h-4 w-4" />
|
||||
title: 'ASCII Art',
|
||||
href: '/ascii',
|
||||
icon: <ASCIIIcon className="h-4 w-4" />
|
||||
},
|
||||
{
|
||||
title: 'Color Manipulation',
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import figlet from 'figlet';
|
||||
import type { FigletOptions } from '@/types/figlet';
|
||||
import type { ASCIIOptions } from '@/types/ascii';
|
||||
import { loadFont } from './fontLoader';
|
||||
|
||||
/**
|
||||
@@ -10,7 +10,7 @@ import { loadFont } from './fontLoader';
|
||||
export async function textToAscii(
|
||||
text: string,
|
||||
fontName: string = 'Standard',
|
||||
options: FigletOptions = {}
|
||||
options: ASCIIOptions = {}
|
||||
): Promise<string> {
|
||||
if (!text) {
|
||||
return '';
|
||||
@@ -59,7 +59,7 @@ export async function textToAscii(
|
||||
export function textToAsciiSync(
|
||||
text: string,
|
||||
fontName: string = 'Standard',
|
||||
options: FigletOptions = {}
|
||||
options: ASCIIOptions = {}
|
||||
): string {
|
||||
if (!text) {
|
||||
return '';
|
||||
@@ -1,18 +1,18 @@
|
||||
import type { FigletFont } from '@/types/figlet';
|
||||
import type { ASCIIFont } from '@/types/ascii';
|
||||
|
||||
// Cache for loaded fonts
|
||||
const fontCache = new Map<string, string>();
|
||||
|
||||
/**
|
||||
* Get list of all available figlet fonts
|
||||
* Get list of all available ascii fonts
|
||||
*/
|
||||
export async function getFontList(): Promise<FigletFont[]> {
|
||||
export async function getFontList(): Promise<ASCIIFont[]> {
|
||||
try {
|
||||
const response = await fetch('/api/fonts');
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch font list');
|
||||
}
|
||||
const fonts: FigletFont[] = await response.json();
|
||||
const fonts: ASCIIFont[] = await response.json();
|
||||
return fonts;
|
||||
} catch (error) {
|
||||
console.error('Error fetching font list:', error);
|
||||
@@ -30,7 +30,7 @@ export async function loadFont(fontName: string): Promise<string | null> {
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/fonts/figlet-fonts/${fontName}.flf`);
|
||||
const response = await fetch(`/fonts/ascii-fonts/${fontName}.flf`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load font: ${fontName}`);
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
const FAVORITES_KEY = 'figlet-ui-favorites';
|
||||
const RECENT_FONTS_KEY = 'figlet-ui-recent-fonts';
|
||||
const FAVORITES_KEY = 'ascii-ui-favorites';
|
||||
const RECENT_FONTS_KEY = 'ascii-ui-recent-fonts';
|
||||
const MAX_RECENT = 10;
|
||||
|
||||
export function getFavorites(): string[] {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user