feat: integrate WebAssembly for zero-latency, offline-first color operations
Some checks failed
Docker Build & Push / build-and-push (push) Failing after 24s
Some checks failed
Docker Build & Push / build-and-push (push) Failing after 24s
Replaced REST API dependency with @valknarthing/pastel-wasm (130KB) for complete browser-based color operations. The application is now fully static (2.2MB total) with zero network latency and offline support. **Key Changes:** 1. **WASM Integration:** - Added @valknarthing/pastel-wasm dependency (0.1.0) - Created lib/api/wasm-client.ts wrapper matching API interface - Updated lib/api/client.ts to use WASM client by default - All 18 color operations now run locally in browser 2. **Static Export Configuration:** - Changed next.config.ts output from 'standalone' to 'export' - Disabled image optimization for static export - Removed API proxy route (app/api/pastel/[...path]/route.ts) - Updated package.json scripts (removed dev:api, added serve) 3. **Docker Optimization:** - Migrated from Node.js standalone to nginx-alpine - Created nginx.conf with SPA routing and WASM mime types - Updated Dockerfile for static file serving - Reduced image size from ~150MB to ~25MB - Changed port from 3000 to 80 (standard HTTP) - Simplified docker-compose.yml (removed pastel-api service) 4. **Documentation Updates:** - Updated README.md with WASM benefits and deployment options - Added Key Benefits section highlighting zero-latency features - Rewrote deployment section for static hosting platforms - Updated CLAUDE.md tech stack and architecture - Removed obsolete docs: DEV_SETUP.md, DOCKER.md, IMPLEMENTATION_PLAN.md **Benefits:** - 🚀 Zero Latency - All operations run locally via WebAssembly - 📱 Offline First - Works completely offline after initial load - 🌐 No Backend - Fully static, deploy anywhere - ⚡ Fast - Native-speed color operations in browser - 📦 Small - 2.2MB total (130KB WASM, 2.07MB HTML/CSS/JS) **Deployment:** Can now be deployed to any static hosting platform: - Vercel, Netlify, Cloudflare Pages (zero config) - GitHub Pages, S3, CDN - Self-hosted nginx/Apache - Docker (optional, nginx-based) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -4,19 +4,20 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
|
||||
|
||||
## Overview
|
||||
|
||||
**Pastel UI** is a modern, interactive web application for color manipulation, palette generation, and accessibility analysis. Built with Next.js 16 and Tailwind CSS 4, it provides a beautiful interface for all features of the [Pastel API](https://github.com/valknarness/pastel-api).
|
||||
**Pastel UI** is a modern, interactive web application for color manipulation, palette generation, and accessibility analysis. Built with Next.js 16 and Tailwind CSS 4, it runs entirely in the browser using WebAssembly for zero-latency color operations.
|
||||
|
||||
**Technology Stack:**
|
||||
- **Framework**: Next.js 16 (App Router, React 19)
|
||||
- **Framework**: Next.js 16 (App Router, React 19, Static Export)
|
||||
- **Styling**: Tailwind CSS 4 (CSS-first configuration)
|
||||
- **Language**: TypeScript (strict mode)
|
||||
- **Color Engine**: `@valknarthing/pastel-wasm` (WebAssembly, 130KB)
|
||||
- **State Management**:
|
||||
- `@tanstack/react-query` (server state)
|
||||
- `zustand` (client state)
|
||||
- **Animation**: `framer-motion`
|
||||
- **Icons**: `lucide-react`
|
||||
- **UI Components**: Custom components + shadcn/ui patterns
|
||||
- **API Client**: Type-safe Pastel API integration
|
||||
- **Deployment**: Fully static (2.2MB total)
|
||||
|
||||
## Project Structure
|
||||
|
||||
@@ -43,8 +44,6 @@ pastel-ui/
|
||||
│ │ └── page.tsx
|
||||
│ ├── docs/ # Documentation
|
||||
│ │ └── page.tsx
|
||||
│ └── api/ # API route handlers (proxy)
|
||||
│ └── proxy/[...path]/route.ts
|
||||
├── components/
|
||||
│ ├── ui/ # Base UI components (shadcn/ui style)
|
||||
│ │ ├── button.tsx
|
||||
|
||||
Reference in New Issue
Block a user