valknar/figlet-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial project setup with Next.js 16 and Tailwind CSS 4

Browse Source 
- Initialize Next.js 16 with React 19 and TypeScript 5
- Configure Tailwind CSS 4 with PostCSS
- Set up static export for Docker deployment
- Install figlet.js for ASCII art rendering
- Add fuse.js for fuzzy search functionality
- Create project structure (app/, components/, lib/, types/)
- Add comprehensive README and IMPLEMENTATION_PLAN
- Configure ESLint and TypeScript
- Set up pnpm package management

Tech stack matches units-ui project for consistency.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2025-11-09 12:07:23 +01:00
commit f120a8b3d0
13 changed files with 4897 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
app/globals.css Normal file
View File

@@ -0,0 +1,58 @@
@import "tailwindcss";
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--radius: 0.5rem;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
font-feature-settings: "rlig" 1, "calt" 1;
}
}

28
app/layout.tsx Normal file
View File

@@ -0,0 +1,28 @@
import type { Metadata } from 'next';
import './globals.css';
export const metadata: Metadata = {
title: 'Figlet UI - ASCII Art Text Generator',
description: 'A modern web UI for generating ASCII art text with 700+ figlet fonts. Preview custom text in any figlet font, export to multiple formats, and share your creations.',
keywords: ['figlet', 'ascii art', 'text generator', 'banner', 'ascii', 'text art'],
authors: [{ name: 'Valknar' }],
openGraph: {
title: 'Figlet UI - ASCII Art Text Generator',
description: 'Generate beautiful ASCII art text with 700+ fonts',
type: 'website',
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className="antialiased">
{children}
</body>
</html>
);
}

28
app/page.tsx Normal file
View File

@@ -0,0 +1,28 @@
export default function Home() {
return (
<main className="min-h-screen p-8">
<div className="max-w-7xl mx-auto">
<header className="mb-8">
<h1 className="text-4xl font-bold mb-2">Figlet UI</h1>
<p className="text-muted-foreground">
ASCII Art Text Generator with 700+ Fonts
</p>
</header>
<div className="bg-card border rounded-lg p-6">
<pre className="font-mono text-sm">
{` _____ _ _ _ _ _ ___
| ___(_) __ _| | ___| |_ | | | |_ _|
| |_ | |/ _\` | |/ _ \\ __| | | | || |
| _| | | (_| | | __/ |_ | |_| || |
|_| |_|\\__, |_|\\___|\\__| \\___/|___|
|___/ `}
</pre>
<p className="mt-4 text-muted-foreground">
Coming soon: A modern interface for generating beautiful ASCII art text.
</p>
</div>
</div>
</main>
);
}