diff --git a/.gitignore b/.gitignore index d0a3062..4952bca 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .env zaply *_templ.go -__livereload \ No newline at end of file +__livereload +public/css/tailwind.css diff --git a/Makefile b/Makefile index 25733c2..58f28c1 100644 --- a/Makefile +++ b/Makefile @@ -5,4 +5,5 @@ dev: build: templ generate + tailwindcss -i ./public/css/input.css -o ./public/css/tailwind.css go build -o zaply main.go diff --git a/components/zap.templ b/components/zap.templ new file mode 100644 index 0000000..c04fdfa --- /dev/null +++ b/components/zap.templ @@ -0,0 +1,30 @@ +package components + +import ( + "fmt" + + "github.com/ekzyis/zaply/lightning" +) + +templ Zap(inv *lightning.Invoice) { +
+
+ + + +
+
{ inv.Description }
+
{ fmt.Sprintf("%.8s / %s", inv.PaymentHash, humanize(inv.Msats)) }
+
+
+
+} + +func humanize(msats int64) string { + sats := msats / 1000 + if sats == 1 { + return fmt.Sprintf("%d sat", sats) + } else { + return fmt.Sprintf("%d sats", sats) + } +} diff --git a/livereload.sh b/livereload.sh index 10645ef..69c5c48 100644 --- a/livereload.sh +++ b/livereload.sh @@ -1,7 +1,7 @@ #!/usr/bin/env bash PID=$(pidof zaply) -DIRS="env/ lightning/ lnurl/ pages/ server/" +DIRS="components/ env/ lightning/ lnurl/ pages/ server/" set -e diff --git a/pages/overlay.templ b/pages/overlay.templ index d971202..7e51f3e 100644 --- a/pages/overlay.templ +++ b/pages/overlay.templ @@ -6,27 +6,25 @@ templ Overlay() { zaply + + if GetEnv(ctx) == "development" { } + + +
- + } diff --git a/public/css/input.css b/public/css/input.css new file mode 100644 index 0000000..bd6213e --- /dev/null +++ b/public/css/input.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/public/css/zap.css b/public/css/zap.css new file mode 100644 index 0000000..5556ed3 --- /dev/null +++ b/public/css/zap.css @@ -0,0 +1,26 @@ + +.zap-animate-in { + animation: slide-in 0.5s ease-out; +} + +.zap-animate-out { + animation: fade-out 0.5s ease-out; +} + +@keyframes slide-in { + 0% { + transform: translateY(100%); + } + 100% { + transform: translateY(0%) + } +} + +@keyframes fade-out { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} \ No newline at end of file diff --git a/server/sse.go b/server/sse.go index 827deb4..715575a 100644 --- a/server/sse.go +++ b/server/sse.go @@ -2,17 +2,19 @@ package server import ( "bytes" - "encoding/json" "fmt" "io" "log" "time" + "github.com/a-h/templ" + "github.com/ekzyis/zaply/components" "github.com/ekzyis/zaply/lightning" "github.com/labstack/echo/v4" ) type Event struct { + Id []byte Event []byte Data []byte } @@ -28,6 +30,10 @@ func (ev *Event) MarshalTo(w io.Writer) error { } } + if _, err := fmt.Fprintf(w, "id: %s\n", ev.Id); err != nil { + return err + } + if _, err := fmt.Fprint(w, "\n"); err != nil { return err } @@ -61,14 +67,17 @@ func sseHandler(invSrc chan *lightning.Invoice) echo.HandlerFunc { return err } case inv := <-invSrc: - data, err := json.Marshal(inv) - if err != nil { + buf := templ.GetBuffer() + defer templ.ReleaseBuffer(buf) + + if err := components.Zap(inv).Render(c.Request().Context(), buf); err != nil { return err } event := Event{ + Id: []byte(inv.PaymentHash), Event: []byte("zap"), - Data: data, + Data: buf.Bytes(), } log.Printf("sending zap event: %s", inv.PaymentHash) diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..b938ef7 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./components/**/*.templ", "./pages/**/*.templ"], + theme: { + extend: {}, + }, + plugins: [], +} \ No newline at end of file