feat: integrate WebAssembly for zero-latency, offline-first color operations
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:
2025-11-17 09:06:25 +01:00
parent e6b693dbd8
commit 4aed0d4bf9
14 changed files with 710 additions and 1121 deletions

8
pnpm-lock.yaml generated
View File

@@ -11,6 +11,9 @@ importers:
'@tanstack/react-query':
specifier: ^5.62.11
version: 5.90.7(react@19.2.0)
'@valknarthing/pastel-wasm':
specifier: ^0.1.0
version: 0.1.0
clsx:
specifier: ^2.1.1
version: 2.1.1
@@ -1186,6 +1189,9 @@ packages:
cpu: [x64]
os: [win32]
'@valknarthing/pastel-wasm@0.1.0':
resolution: {integrity: sha512-oMEo023SQvs62orZ4WaM+LCPfNwFDjLQcDrGKXnOYfAa1wHtZzt5v8m42te6X+hlld0fPHjY/aR5iAD3RKKipQ==}
'@vitest/expect@2.1.9':
resolution: {integrity: sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==}
@@ -3636,6 +3642,8 @@ snapshots:
'@unrs/resolver-binding-win32-x64-msvc@1.11.1':
optional: true
'@valknarthing/pastel-wasm@0.1.0': {}
'@vitest/expect@2.1.9':
dependencies:
'@vitest/spy': 2.1.9