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>
33 lines
1.2 KiB
Markdown
33 lines
1.2 KiB
Markdown
# btcprice
|
|
|
|
Bitcoin price tracker UI. Serves an HTML page with live price updates streamed from [btcdata](../btcdata) via WebSocket using HTMX.
|
|
|
|
## Quick Start
|
|
|
|
```bash
|
|
# 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
|