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

docs: update README with Media app information and project structure

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-25 11:22:38 +01:00
parent 5612176996
commit da7f60cf04
1 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
README.md
View File

@@ -13,7 +13,7 @@ Built with **Next.js 16**, **React 19**, and **Tailwind CSS 4**, Kit UI delivers
## 🚀 The Toolkit ## 🚀 The Toolkit
Kit UI is divided into three core specialized applications: Kit UI is divided into four core specialized applications:
### 🎨 [Pastel](./app/(app)/pastel) — Professional Color Toolkit ### 🎨 [Pastel](./app/(app)/pastel) — Professional Color Toolkit
A comprehensive suite for color theory, manipulation, and accessibility. A comprehensive suite for color theory, manipulation, and accessibility.
@@ -36,6 +36,13 @@ Retro-inspired text banners for terminals and documentation.
- **Real-time Preview**: See your ASCII art transform as you type. - **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. - **Multi-Export**: Copy as raw text, download `.txt` files, or export as `.png` images.
### 🎬 [Media](./app/(app)/media) — Browser-Based File Converter
Privacy-first, local-only media conversion powered by WebAssembly.
- **Video & Audio**: Transcode between MP4, WebM, MP3, WAV, and more using FFmpeg.
- **Image Processing**: Convert and resize PNG, JPG, WebP, and SVG via ImageMagick.
- **Zero Server Uploads**: All processing happens locally in your browser for maximum privacy.
- **Advanced Options**: Fine-tune bitrates, codecs, resolutions, and quality presets.
--- ---
## ✨ Core Features ## ✨ Core Features
@@ -66,17 +73,19 @@ Retro-inspired text banners for terminals and documentation.
```bash ```bash
. .
├── app/ # Next.js App Router (Pages & Layouts) ├── app/ # Next.js App Router (Pages & Layouts)
│ ├── (app)/ # Core Tool Pages (Pastel, Units, Figlet) │ ├── (app)/ # Core Tool Pages (Pastel, Units, Figlet, Media)
│ └── api/ # Backend API routes │ └── api/ # Backend API routes
├── components/ # Reusable UI & Logic Components ├── components/ # Reusable UI & Logic Components
│ ├── pastel/ # Color-specific components │ ├── pastel/ # Color-specific components
│ ├── units/ # Converter-specific components │ ├── units/ # Converter-specific components
│ ├── figlet/ # ASCII-specific components │ ├── figlet/ # ASCII-specific components
│ ├── media/ # Media conversion components
│ └── ui/ # Base Atomic Components (Buttons, Cards, etc.) │ └── ui/ # Base Atomic Components (Buttons, Cards, etc.)
├── lib/ # Business Logic & Utilities ├── lib/ # Business Logic & Utilities
│ ├── pastel/ # WASM wrappers & Color logic │ ├── pastel/ # WASM wrappers & Color logic
│ ├── units/ # Conversion algorithms │ ├── units/ # Conversion algorithms
│ └── figlet/ # Font loading & ASCII generation │ ├── figlet/ # Font loading & ASCII generation
│ └── media/ # FFmpeg & ImageMagick WASM orchestration
├── public/ # Static assets & Figlet fonts ├── public/ # Static assets & Figlet fonts
├── Dockerfile # Multi-stage Docker build ├── Dockerfile # Multi-stage Docker build
└── nginx.conf # Production Nginx configuration └── nginx.conf # Production Nginx configuration
@@ -121,7 +130,7 @@ docker run -p 80:80 kit-ui
## 📈 Performance & Optimization ## 📈 Performance & Optimization
- **Static Site Generation (SSG)**: Entire toolkit is exported as static HTML/JS for sub-second load times. - **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. - **Client-Side WASM**: Complex processing (FFmpeg, ImageMagick, Pastel) is offloaded to WebAssembly for native-level performance without server latency.
- **CSS-First Configuration**: Leveraging Tailwind 4's native CSS variables for zero-runtime styling overhead. - **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. - **Automatic CI/CD**: GitHub Actions pipeline for multi-architecture Docker builds.