magnusandClaude Opus 4.6
13a53a26d0
- Replace vanilla JS WebSocket with HTMX ws extension (hx-ext="ws") - Add HTMX + ws extension CDN scripts to page head - Zero client-side JavaScript — HTMX handles connection, reconnect, and DOM swap of HTML fragments from btcdata - Hidden div safelists Tailwind classes used in btcdata HTML fragments - Update BTCDATA_URL to LAN IP (192.168.50.42) for cross-machine access - Update CLAUDE.md and README.md Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
btcprice
Bitcoin price tracker UI. Serves an HTML page with live price updates streamed from btcdata via WebSocket using HTMX.
Quick Start
# Start btcdata first (provides price data)
cd ../btcdata && make run
# Local dev
make run # starts on port 4000
make tailwind # watch Tailwind CSS (separate terminal)
# Docker (starts both btcprice + btcdata)
docker compose up -d # btcprice on 4041, btcdata on 4101
Environment Variables
| Variable | Default | Description |
|---|---|---|
PORT |
4000 |
HTTP server port |
BTCDATA_URL |
http://192.168.50.42:4100 |
btcdata service URL (browser connects via WebSocket) |
How It Works
The server renders an HTML page with HTMX and the WebSocket extension (hx-ext="ws"). HTMX connects directly to btcdata's WebSocket endpoint (BTCDATA_URL/api/price/ws), which sends HTML fragments. HTMX swaps the received <div id="price-display"> into the DOM automatically. Price changes are color-coded (green up, red down). Reconnection is handled by HTMX with exponential backoff.
Tech Stack
Clojure · Kit · Undertow · Reitit · Hiccup · HTMX · Tailwind CSS v4