docs: generate comprehensive new README
This commit is contained in:
271
README.md
271
README.md
@@ -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.
|
[](https://kit.pivoine.art)
|
||||||
|
[](https://nextjs.org)
|
||||||
|
[](https://react.dev)
|
||||||
|
[](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
|
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.
|
||||||
- 🎨 **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
|
|
||||||
|
|
||||||
## Tech Stack
|
---
|
||||||
|
|
||||||
- **Next.js 16** - React framework with App Router and Turbopack
|
## 🚀 The Toolkit
|
||||||
- **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
|
|
||||||
|
|
||||||
## 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
|
### Prerequisites
|
||||||
|
- **Node.js**: 20.x or higher
|
||||||
|
- **pnpm**: 9.x or higher
|
||||||
|
|
||||||
- Node.js 20+
|
### Local Development
|
||||||
- pnpm (via corepack)
|
|
||||||
|
|
||||||
### Development
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Install dependencies
|
# Clone and install
|
||||||
pnpm install
|
pnpm install
|
||||||
|
|
||||||
# Run development server
|
# Start development server with Turbopack
|
||||||
pnpm dev
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
# Build for production
|
### Production Build
|
||||||
|
```bash
|
||||||
|
# Build for static export
|
||||||
pnpm build
|
pnpm build
|
||||||
|
|
||||||
# Preview production build locally
|
# The output will be in the /out directory
|
||||||
pnpm start
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Visit [http://localhost:3000](http://localhost:3000) to see the site.
|
### Docker Deployment
|
||||||
|
|
||||||
## 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:
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Pull and run the latest image
|
# Build locally
|
||||||
docker pull ghcr.io/valknarness/kit-ui:latest
|
docker build -t kit-ui .
|
||||||
docker run -p 80:80 ghcr.io/valknarness/kit-ui:latest
|
|
||||||
|
# Run with Nginx
|
||||||
|
docker run -p 80:80 kit-ui
|
||||||
```
|
```
|
||||||
|
|
||||||
### Build Locally
|
---
|
||||||
|
|
||||||
Or build and run locally:
|
## 📈 Performance & Optimization
|
||||||
|
|
||||||
```bash
|
- **Static Site Generation (SSG)**: Entire toolkit is exported as static HTML/JS for sub-second load times.
|
||||||
# Build the image
|
- **WASM Integration**: Heavy color calculations are offloaded to WebAssembly.
|
||||||
docker build -t kit-landing .
|
- **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
|
Created and maintained by **Sebastian Krüger** ([@valknarness](https://github.com/valknarness)).
|
||||||
|
|
||||||
- `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)
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "kit.pivoine.art",
|
"name": "kit-ui",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
Reference in New Issue
Block a user