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

docs: generate comprehensive new README

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-23 09:28:57 +01:00
parent 8ce12c4c70
commit 6fbcdd3674
2 changed files with 108 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

271
README.md
View File

@@ -1,191 +1,134 @@
# Kit Landing Page
# 🛠️ Kit UI (kit.pivoine.art)
A stylish, animated landing page for [kit.pivoine.art](https://kit.pivoine.art) - your creative toolkit.
[![Production](https://img.shields.io/badge/Production-kit.pivoine.art-blue?style=for-the-badge)](https://kit.pivoine.art)
[![Next.js](https://img.shields.io/badge/Next.js-16-black?style=for-the-badge&logo=next.js)](https://nextjs.org)
[![React](https://img.shields.io/badge/React-19-61DAFB?style=for-the-badge&logo=react)](https://react.dev)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4-38B2AC?style=for-the-badge&logo=tailwind-css)](https://tailwindcss.com)
## Features
**Kit UI** is a high-performance, aesthetically pleasing toolkit for developers and designers. It consolidates essential creative tools—from advanced color manipulation to ASCII art generation—into a single, unified workspace.
- ✨ **Animated UI** - Smooth animations with Framer Motion
- 🎨 **Modern Design** - Glassmorphism effects, gradients, and animated backgrounds
- 📱 **Responsive** - Mobile-first design that works on all devices
- ⚡ **Fast** - Static export with Next.js 16 and Turbopack for optimal performance
- 🎯 **SEO Optimized** - Proper meta tags and semantic HTML
- 🚀 **Production Ready** - Docker support with Nginx
Built with **Next.js 16**, **React 19**, and **Tailwind CSS 4**, Kit UI delivers a lightning-fast, glassmorphic experience with a focus on precision and accessibility.
## Tech Stack
---
- **Next.js 16** - React framework with App Router and Turbopack
- **React 19** - Latest React with modern features
- **Tailwind CSS 4** - Utility-first CSS with CSS-first configuration
- **Framer Motion** - Professional animation library
- **TypeScript 5** - Type-safe development
- **ESLint 9** - Latest linting with flat config
- **pnpm** - Fast, efficient package manager
## 🚀 The Toolkit
## Getting Started
Kit UI is divided into three core specialized applications:
### 🎨 [Pastel](./app/(app)/pastel) — Professional Color Toolkit
A comprehensive suite for color theory, manipulation, and accessibility.
- **Color Playground**: Interactive HSL/RGB/HEX manipulation with real-time analysis.
- **Accessibility Suite**: WCAG 2.1 Contrast Checker and a real-time Colorblindness Simulator.
- **Generative Tools**: Harmony generator (Analogous, Triadic, etc.), Palette Generator, and Gradient Architect.
- **Batch Processing**: Perform mass color operations and exports.
- **WASM Powered**: Utilizes `@valknarthing/pastel-wasm` for high-performance color calculations.
### 📐 [Units](./app/(app)/units) — Smart Unit Converter
A powerful, intuitive converter that understands the way you work.
- **187+ Units**: Supporting 23 categories including Length, Mass, Temperature, Force, and more.
- **Smart Search**: Quickly find units via a fuzzy-search command palette.
- **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
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.
- **Multi-Export**: Copy as raw text, download `.txt` files, or export as `.png` images.
---
## ✨ Core Features
- 🎭 **Glassmorphic UI**: A modern, translucent aesthetic with smooth Framer Motion transitions.
- ⚡ **Turbopack Optimized**: Built for speed using the latest Next.js 16 Turbopack engine.
- ♿ **Accessibility First**: Integrated tools to ensure your designs meet global standards.
- 📱 **Responsive & Fluid**: Tailored experience across mobile, tablet, and desktop.
- 🛠️ **Developer Friendly**: Keyboard shortcuts, command palettes, and URL-state sharing.
- 🐳 **Production Ready**: Full Docker & Nginx integration for seamless deployment.
---
## 💻 Tech Stack
- **Framework**: [Next.js 16](https://nextjs.org) (App Router, Static Export)
- **Library**: [React 19](https://react.dev)
- **Styling**: [Tailwind CSS 4](https://tailwindcss.com) (CSS-first configuration)
- **Animations**: [Framer Motion](https://www.framer.com/motion/)
- **State Management**: [Zustand](https://github.com/pmndrs/zustand) & [React Query](https://tanstack.com/query)
- **Icons**: [Lucide React](https://lucide.dev)
- **Type Safety**: [TypeScript 5](https://www.typescriptlang.org)
---
## 🏗️ Project Structure
```bash
.
├── app/ # Next.js App Router (Pages & Layouts)
│ ├── (app)/ # Core Tool Pages (Pastel, Units, Figlet)
│ └── api/ # Backend API routes
├── components/ # Reusable UI & Logic Components
│ ├── pastel/ # Color-specific components
│ ├── units/ # Converter-specific components
│ ├── figlet/ # ASCII-specific components
│ └── ui/ # Base Atomic Components (Buttons, Cards, etc.)
├── lib/ # Business Logic & Utilities
│ ├── pastel/ # WASM wrappers & Color logic
│ ├── units/ # Conversion algorithms
│ └── figlet/ # Font loading & ASCII generation
├── public/ # Static assets & Figlet fonts
├── Dockerfile # Multi-stage Docker build
└── nginx.conf # Production Nginx configuration
```
---
## 🛠️ Development & Deployment
### Prerequisites
- **Node.js**: 20.x or higher
- **pnpm**: 9.x or higher
- Node.js 20+
- pnpm (via corepack)
### Development
### Local Development
```bash
# Install dependencies
# Clone and install
pnpm install
# Run development server
# Start development server with Turbopack
pnpm dev
```
# Build for production
### Production Build
```bash
# Build for static export
pnpm build
# Preview production build locally
pnpm start
# The output will be in the /out directory
```
Visit [http://localhost:3000](http://localhost:3000) to see the site.
## Docker Deployment
### Using Pre-built Image from GHCR
The Docker image is automatically built and published to GitHub Container Registry on every push to main:
### Docker Deployment
```bash
# Pull and run the latest image
docker pull ghcr.io/valknarness/kit-ui:latest
docker run -p 80:80 ghcr.io/valknarness/kit-ui:latest
# Build locally
docker build -t kit-ui .
# Run with Nginx
docker run -p 80:80 kit-ui
```
### Build Locally
---
Or build and run locally:
## 📈 Performance & Optimization
```bash
# Build the image
docker build -t kit-landing .
- **Static Site Generation (SSG)**: Entire toolkit is exported as static HTML/JS for sub-second load times.
- **WASM Integration**: Heavy color calculations are offloaded to WebAssembly.
- **CSS-First Configuration**: Leveraging Tailwind 4's native CSS variables for zero-runtime styling overhead.
- **Automatic CI/CD**: GitHub Actions pipeline for multi-architecture Docker builds.
# Run the container
docker run -p 80:80 kit-landing
```
---
### Docker Compose
## 📝 License
For production deployment, see `/home/valknar/Projects/docker-compose/kit/compose.yaml`.
© 2026 [pivoine.art](https://pivoine.art). All rights reserved.
### Available Tags
- `latest` - Latest build from main branch
- `main` - Main branch builds
- `v*` - Semantic version tags (e.g., `v1.0.0`)
- `<branch>-<sha>` - Branch-specific builds with commit SHA
## Project Structure
```
.
├── app/
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Home page
│ └── globals.css # Global styles and utilities
├── components/
│ ├── AnimatedBackground.tsx # Animated gradient background
│ ├── Hero.tsx # Hero section with logo
│ ├── Logo.tsx # Animated SVG logo
│ ├── ToolCard.tsx # Tool card component
│ ├── ToolsGrid.tsx # Grid of available tools
│ └── Footer.tsx # Footer component
├── public/ # Static assets
├── Dockerfile # Multi-stage Docker build
├── nginx.conf # Nginx configuration
└── next.config.ts # Next.js configuration
```
## Customization
### Adding New Tools
Edit `components/ToolsGrid.tsx` and add a new tool object to the `tools` array:
```typescript
{
title: 'Tool Name',
description: 'Tool description',
url: 'https://tool.kit.pivoine.art',
gradient: 'gradient-purple-blue', // or 'gradient-cyan-purple'
icon: (
// Your SVG icon here
),
}
```
### Styling
Tailwind CSS 4 uses a new CSS-first configuration approach:
- **Theme customization**: Edit the `@theme` block in `app/globals.css`
- **Custom utilities**: Add `@utility` blocks in `app/globals.css`
- **Animations**: Define keyframes directly in the `@theme` block
- **Colors & fonts**: Configure via CSS custom properties in `@theme`
## Available Tools
- **Pastel** - Modern color manipulation toolkit with palette generation and accessibility testing
- **Units** - Smart unit converter with 187 units across 23 categories (length, mass, temperature, etc.)
- **Figlet** - ASCII art text generator with 373 fonts (text banners, terminal art, retro designs)
## CI/CD Pipeline
The project uses GitHub Actions for automated Docker image builds:
### Workflow Features
- ✅ **Automated builds** on push to main and tags
- ✅ **Multi-architecture support** (linux/amd64, linux/arm64)
- ✅ **GitHub Container Registry** (GHCR) publishing
- ✅ **Build caching** for faster builds
- ✅ **Artifact attestation** for supply chain security
- ✅ **Semantic versioning** support
### Triggering Builds
```bash
# Automatic build on push to main
git push origin main
# Create a versioned release
git tag v1.0.0
git push origin v1.0.0
# Manual trigger via GitHub Actions UI
# Go to Actions → Build and Push Docker Image → Run workflow
```
### Using the Published Image
```bash
# Latest from main branch
docker pull ghcr.io/valknarness/kit-ui:latest
# Specific version
docker pull ghcr.io/valknarness/kit-ui:v1.0.0
# Specific commit
docker pull ghcr.io/valknarness/kit-ui:main-abc1234
```
## Performance
- Static export for fast loading
- Optimized images and assets
- Gzip compression via Nginx
- Proper caching headers
## License
Private project - All rights reserved.
## Author
Created for [pivoine.art](https://pivoine.art)
Created and maintained by **Sebastian Krüger** ([@valknarness](https://github.com/valknarness)).