Sebastian Krüger
a400f694fe
- Create lib/tools.tsx as single source of truth for all tool metadata (title, shortTitle, navTitle, description, summary, icon, etc.) - Update AppSidebar to render nav from centralized tools list with descriptions, remove collapse footer button - Update AppHeader with sidebar collapse toggle, tool short title, and app logo; remove breadcrumbs - Update AppPage to auto-resolve tool icon from pathname - Update ToolsGrid/ToolCard to use shared tools data, remove per-card gradients for uniform styling - Add per-tool HTML title via metadata exports (title template in root layout) - Style landing page and 404 headings with primary theme color - Add Toolbox icon to hero CTA, GitFork icon link in footer - Remove footer from error page and "View on Dev" buttons - Extract ColorPage client component for RSC metadata compatibility Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
98 lines
3.4 KiB
TypeScript
98 lines
3.4 KiB
TypeScript
import { ColorIcon, UnitsIcon, ASCIIIcon, MediaIcon, FaviconIcon } from '@/components/AppIcons';
|
|
|
|
export interface Tool {
|
|
/** Short display name (e.g. "Color") */
|
|
shortTitle: string;
|
|
/** Full display name (e.g. "Color Manipulation") */
|
|
title: string;
|
|
/** Sidebar / nav label (may differ from title) */
|
|
navTitle: string;
|
|
/** Route path, e.g. '/color' */
|
|
href: string;
|
|
/** One-liner shown in page header */
|
|
description: string;
|
|
/** Longer description for the landing-page card */
|
|
summary: string;
|
|
/** Icon component */
|
|
icon: React.ElementType;
|
|
/** Tailwind gradient utility class for the landing card */
|
|
gradient: string;
|
|
/** Hex accent color for the landing card */
|
|
accentColor: string;
|
|
/** Badge labels for the landing card */
|
|
badges: string[];
|
|
}
|
|
|
|
export const tools: Tool[] = [
|
|
{
|
|
shortTitle: 'Color',
|
|
title: 'Color Manipulation',
|
|
navTitle: 'Color Manipulation',
|
|
href: '/color',
|
|
description: 'Interactive color manipulation and analysis tool',
|
|
summary:
|
|
'Modern color manipulation toolkit with palette generation, accessibility testing, and format conversion. Supports hex, RGB, HSL, Lab, and more.',
|
|
icon: ColorIcon,
|
|
gradient: 'gradient-indigo-purple',
|
|
accentColor: '#a855f7',
|
|
badges: ['Open Source', 'WCAG', 'Free'],
|
|
},
|
|
{
|
|
shortTitle: 'Units',
|
|
title: 'Units Converter',
|
|
navTitle: 'Units Converter',
|
|
href: '/units',
|
|
description: 'Smart unit converter with 187 units across 23 categories',
|
|
summary:
|
|
'Smart unit converter with 187 units across 23 categories. Real-time bidirectional conversion with fuzzy search.',
|
|
icon: UnitsIcon,
|
|
gradient: 'gradient-cyan-purple',
|
|
accentColor: '#2dd4bf',
|
|
badges: ['Open Source', 'Real-time', 'Free'],
|
|
},
|
|
{
|
|
shortTitle: 'ASCII',
|
|
title: 'ASCII Art Generator',
|
|
navTitle: 'ASCII Art',
|
|
href: '/ascii',
|
|
description: 'ASCII Art Text Generator with 373 Fonts',
|
|
summary:
|
|
'ASCII art text generator with 373 fonts. Create stunning text banners, terminal art, and retro designs with live preview and multiple export formats.',
|
|
icon: ASCIIIcon,
|
|
gradient: 'gradient-yellow-amber',
|
|
accentColor: '#eab308',
|
|
badges: ['Open Source', 'ASCII Art', 'Free'],
|
|
},
|
|
{
|
|
shortTitle: 'Media',
|
|
title: 'Media Converter',
|
|
navTitle: 'Media Converter',
|
|
href: '/media',
|
|
description: 'Professional browser-based media conversion for video, audio, and images',
|
|
summary:
|
|
'Modern browser-based file converter powered by WebAssembly. Convert videos, images, and audio locally without server uploads. Privacy-first with no file size limits.',
|
|
icon: MediaIcon,
|
|
gradient: 'gradient-green-teal',
|
|
accentColor: '#10b981',
|
|
badges: ['Open Source', 'Converter', 'Free'],
|
|
},
|
|
{
|
|
shortTitle: 'Favicon',
|
|
title: 'Favicon Generator',
|
|
navTitle: 'Favicon Generator',
|
|
href: '/favicon',
|
|
description: 'Create a complete set of icons for your website including PWA manifest and HTML code.',
|
|
summary:
|
|
'Generate a complete set of favicons for your website. Includes PWA manifest and HTML embed code. All processing happens locally in your browser.',
|
|
icon: FaviconIcon,
|
|
gradient: 'gradient-blue-cyan',
|
|
accentColor: '#3b82f6',
|
|
badges: ['Open Source', 'Generator', 'Free'],
|
|
},
|
|
];
|
|
|
|
/** Look up a tool by its href path */
|
|
export function getToolByHref(href: string): Tool | undefined {
|
|
return tools.find((t) => t.href === href);
|
|
}
|