update templ, remove style hack

angaz · Apr 1, 2024 · 337277c · 337277c
1 parent 96d8a20
commit 337277c
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 50 deletions.
diff --git a/flake.lock b/flake.lock
diff --git a/flake.nix b/flake.nix
@@ -16,7 +16,7 @@
       inputs.nixpkgs.follows = "nixpkgs";
     };
     templ = {
-      url = "github:a-h/templ?ref=v0.2.598";
+      url = "github:a-h/templ?ref=v0.2.648";
       inputs.nixpkgs.follows = "nixpkgs";
     };
   };
@@ -61,7 +61,7 @@
             src = gitignoreSource ./.;
             subPackages = [ "cmd/crawler" ];
 
-            vendorHash = "sha256-/yjzwyMh+rwjZjS37vpfN8DCwL9Ft/32GCcI7jBshZo=";
+            vendorHash = "sha256-voJL5K6vR95NX1eyNlJdOHCMgoQp0p+nROp9nE3lnBM=";
 
             doCheck = false;
 

diff --git a/go.mod b/go.mod
@@ -1,9 +1,9 @@
 module github.com/ethereum/node-crawler
 
-go 1.22
+go 1.22.1
 
 require (
-	github.com/a-h/templ v0.2.598
+	github.com/a-h/templ v0.2.648
 	github.com/angaz/sqlu v0.0.1
 	github.com/btcsuite/btcd/btcec/v2 v2.3.2
 	github.com/ethereum/go-ethereum v1.13.5-0.20240401125356-8c5576b1ac89

diff --git a/go.sum b/go.sum
@@ -14,8 +14,8 @@ github.com/Microsoft/go-winio v0.6.1 h1:9/kr64B9VUZrLm5YYwbGtUJnMgqWVOdUAXu6Migc
 github.com/Microsoft/go-winio v0.6.1/go.mod h1:LRdKpFKfdobln8UmuiYcKPot9D2v6svN5+sAH+4kjUM=
 github.com/VictoriaMetrics/fastcache v1.12.2 h1:N0y9ASrJ0F6h0QaC3o6uJb3NIZ9VKLjCM7NQbSmF7WI=
 github.com/VictoriaMetrics/fastcache v1.12.2/go.mod h1:AmC+Nzz1+3G2eCPapF6UcsnkThDcMsQicp4xDukwJYI=
-github.com/a-h/templ v0.2.598 h1:6jMIHv6wQZvdPxTuv87erW4RqN/FPU0wk7ZHN5wVuuo=
-github.com/a-h/templ v0.2.598/go.mod h1:SA7mtYwVEajbIXFRh3vKdYm/4FYyLQAtPH1+KxzGPA8=
+github.com/a-h/templ v0.2.648 h1:A1ggHGIE7AONOHrFaDTM8SrqgqHL6fWgWCijQ21Zy9I=
+github.com/a-h/templ v0.2.648/go.mod h1:SA7mtYwVEajbIXFRh3vKdYm/4FYyLQAtPH1+KxzGPA8=
 github.com/allegro/bigcache v1.2.1-0.20190218064605-e24eb225f156 h1:eMwmnE/GDgah4HI848JfFxHt+iPb26b4zyfspmqY0/8=
 github.com/allegro/bigcache v1.2.1-0.20190218064605-e24eb225f156/go.mod h1:Cb/ax3seSYIx7SuZdm2G2xzfwmv3TPSk2ucNfQESPXM=
 github.com/angaz/sqlu v0.0.1 h1:ccMe8j2GmchYj7CnENLP5NTbyme5LkNrgY/bVblreIA=
@@ -72,8 +72,6 @@ github.com/cpuguy83/go-md2man/v2 v2.0.3 h1:qMCsGGgs+MAzDFyp9LpAe1Lqy/fY/qCovCm0q
 github.com/cpuguy83/go-md2man/v2 v2.0.3/go.mod h1:tgQtvFlXSQOSOSIRvRPT7W67SCa46tRHOmNcaadrF8o=
 github.com/crate-crypto/go-ipa v0.0.0-20231025140028-3c0104f4b233 h1:d28BXYi+wUpz1KBmiF9bWrjEMacUEREV6MBi2ODnrfQ=
 github.com/crate-crypto/go-ipa v0.0.0-20231025140028-3c0104f4b233/go.mod h1:geZJZH3SzKCqnz5VT0q/DyIG/tvu/dZk+VIfXicupJs=
-github.com/crate-crypto/go-kzg-4844 v0.7.0 h1:C0vgZRk4q4EZ/JgPfzuSoxdCq3C3mOZMBShovmncxvA=
-github.com/crate-crypto/go-kzg-4844 v0.7.0/go.mod h1:1kMhvPgI0Ky3yIa+9lFySEBUBXkYxeOi8ZF1sYioxhc=
 github.com/crate-crypto/go-kzg-4844 v1.0.0 h1:TsSgHwrkTKecKJ4kadtHi4b3xHW5dCFUDFnUp1TsawI=
 github.com/crate-crypto/go-kzg-4844 v1.0.0/go.mod h1:1kMhvPgI0Ky3yIa+9lFySEBUBXkYxeOi8ZF1sYioxhc=
 github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
@@ -99,12 +97,8 @@ github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+m
 github.com/elastic/gosigar v0.12.0/go.mod h1:iXRIGg2tLnu7LBdpqzyQfGDEidKCfWcCMS0WKyPWoMs=
 github.com/elastic/gosigar v0.14.2 h1:Dg80n8cr90OZ7x+bAax/QjoW/XqTI11RmA79ZwIm9/4=
 github.com/elastic/gosigar v0.14.2/go.mod h1:iXRIGg2tLnu7LBdpqzyQfGDEidKCfWcCMS0WKyPWoMs=
-github.com/ethereum/c-kzg-4844 v0.4.3 h1:Mpg+qsE1XyDAc03LyDfJsr8oxrt7mN7HX6wJIlB2880=
-github.com/ethereum/c-kzg-4844 v0.4.3/go.mod h1:VewdlzQmpT5QSrVhbBuGoCdFJkpaJlO1aQputP83wc0=
 github.com/ethereum/c-kzg-4844 v1.0.1 h1:pGixCbGizcVKSwoV70ge48+PrbB+iSKs2rjgfE4yJmQ=
 github.com/ethereum/c-kzg-4844 v1.0.1/go.mod h1:VewdlzQmpT5QSrVhbBuGoCdFJkpaJlO1aQputP83wc0=
-github.com/ethereum/go-ethereum v1.13.5-0.20240308111552-e31709db6570 h1:0r9VvdvjLm2ZXG75xwL7bjFfaBiL8aB+yhxUGoAVOEI=
-github.com/ethereum/go-ethereum v1.13.5-0.20240308111552-e31709db6570/go.mod h1:i5kYtir40MnZoo1RQVQ5S/9sKNm725jTjFgQn9X5jE4=
 github.com/ethereum/go-ethereum v1.13.5-0.20240401125356-8c5576b1ac89 h1:2kbL8iKEB2LZ9fxmp6VWwBt6hIpmVizwShGctYJQkZs=
 github.com/ethereum/go-ethereum v1.13.5-0.20240401125356-8c5576b1ac89/go.mod h1:x2gtBG0WHLgY08FE97lfhjtpcR5vcSAZbi34JnrsBbQ=
 github.com/ferranbt/fastssz v0.1.3 h1:ZI+z3JH05h4kgmFXdHuR1aWYsgrg7o+Fw7/NCzM16Mo=

diff --git a/pkg/api/history.go b/pkg/api/history.go
@@ -3,7 +3,6 @@ package api
 import (
 	"fmt"
 	"net/http"
-	"strings"
 	"time"
 
 	"log/slog"
@@ -96,11 +95,5 @@ func (a *API) handleHistoryList(w http.ResponseWriter, r *http.Request) {
 		networkID,
 		1,
 	)
-
-	sb := new(strings.Builder)
-	_ = index.Render(r.Context(), sb)
-
-	out := strings.ReplaceAll(sb.String(), "STYLE_REPLACE", "style")
-
-	_, _ = w.Write([]byte(out))
+	_ = index.Render(r.Context(), w)
 }
diff --git a/pkg/api/nodes.go b/pkg/api/nodes.go
@@ -42,8 +42,6 @@ func (a *API) nodesHandler(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	sb := new(strings.Builder)
-
 	var page templ.Component
 
 	if nodes != nil {
@@ -53,15 +51,5 @@ func (a *API) nodesHandler(w http.ResponseWriter, r *http.Request) {
 	}
 
 	index := public.Index(public.URLFromReq(r), page, 1, -1)
-	_ = index.Render(r.Context(), sb)
-
-	// This is the worst, but templating the style attribute is
-	// not allowed for security concerns.
-	out := strings.ReplaceAll(
-		sb.String(),
-		"STYLE_REPLACE",
-		"style",
-	)
-
-	w.Write([]byte(out))
+	_ = index.Render(r.Context(), w)
 }
diff --git a/pkg/api/root.go b/pkg/api/root.go
@@ -372,12 +372,7 @@ func (a *API) handleRoot(w http.ResponseWriter, r *http.Request) {
 	sb := new(strings.Builder)
 	_ = index.Render(r.Context(), sb)
 
-	out := strings.ReplaceAll(
-		sb.String(),
-		"STYLE_REPLACE",
-		"style",
-	)
-
+	out := sb.String()
 	_, _ = w.Write([]byte(out))
 
 	// Cache the result until 5 minutes after the end timestamp.

diff --git a/public/node.templ b/public/node.templ
@@ -138,12 +138,7 @@ templ NodeTable(nt database.NodeTable) {
 		<div style="position: relative; width: max-content; margin: 1em 0;">
 			<image width="800px" src="/static/blue-marble.png"></image>
 			<image
-				STYLE_REPLACE={ fmt.Sprintf(
-					`position: absolute; top: %d%%; left: %d%%; transform: translate(-50%%, -50%%)`,
-					nt.YOffsetPercent(),
-					nt.XOffsetPercent(),
-				) }
-				height="10%"
+				class={ nodeLocation(nt.XOffsetPercent(), nt.YOffsetPercent()) }
 				src="/static/eth-diamond-purple.png"
 			></image>
 		</div>
@@ -197,6 +192,14 @@ templ NodeTable(nt database.NodeTable) {
 	</div>
 }
 
+css nodeLocation(xOffset, yOffset int) {
+	position: absolute;
+	height: 10%;
+	top: { fmt.Sprintf("%d%%", yOffset) };
+	left: { fmt.Sprintf("%d%%", xOffset) };
+	transform: translate(-50%, -50%);
+}
+
 func ByteCountIEC(b int64) string {
 	const unit = int64(1024)
 
@@ -1089,6 +1092,12 @@ templ StatsGraph(
 	@statsGraph(id, ts, graphFormat)
 }
 
+css statsBar(width int64) {
+	background-color: #333;
+	padding: 0.5em 0;
+	width: { fmt.Sprintf("%d%%", width) };
+}
+
 templ StatsGroup(name string, instant database.StatsInstant, hrefFn func(string) templ.SafeURL) {
 	<div style="display: flex; flex-direction: column; border: 1px solid orange; border-radius: 1em; padding: 1em; flex-grow: 1; min-width: 30%;">
 		<h2>{ name }</h2>
@@ -1097,7 +1106,7 @@ templ StatsGroup(name string, instant database.StatsInstant, hrefFn func(string)
 		</div>
 		<div style="display: flex; flex-direction: column; max-height: 20em; overflow-y: scroll;">
 			for _, stat := range instant.Series {
-				<div STYLE_REPLACE={ fmt.Sprintf("background-color: #333; padding: 0.5em 0; width: %d%%", stat.Total*100/instant.Total) }>
+				<div class={ statsBar(stat.Total*100/instant.Total) }>
 					<span style="padding-inline-start: 0.5em; white-space: nowrap;">
 						if hrefFn(stat.Key()) == "" {
 							{ stat.Key() } ({ strconv.FormatInt(stat.Total, 10) })