Add stars count to github star button

internal/view/web/component/star_on_github.go

@@ -2,6 +2,7 @@ package component
 
 import (
 	lucide "github.com/eduardolat/gomponents-lucide"
+	"github.com/eduardolat/pgbackweb/internal/view/web/alpine"
 	"github.com/maragudk/gomponents"
 	"github.com/maragudk/gomponents/components"
 	"github.com/maragudk/gomponents/html"
@@ -9,6 +10,54 @@ import (
 
 func StarOnGithub(size size) gomponents.Node {
 	return html.A(
+		alpine.XData(`{
+			stars: "",
+			async init() {
+				const stars = await this.getGitHubStars();
+				if (stars !== null) {
+					this.stars = stars;
+				}
+			},
+			async getGitHubStars() {
+				const cacheKey = 'pbw_gh_stars';
+				const cachedData = this.getCachedData(cacheKey);
+				if (cachedData !== null) {
+					return cachedData;
+				}
+
+				const url = 'https://api.github.com/repos/eduardolat/pgbackweb';
+				try {
+					const response = await fetch(url);
+					if (!response.ok) {
+						return null;
+					}
+					const data = await response.json();
+					this.cacheData(cacheKey, data.stargazers_count);
+					return data.stargazers_count;
+				} catch {
+					return null;
+				}
+			},
+			getCachedData(key) {
+				const cachedJSON = localStorage.getItem(key);
+				if (!cachedJSON) {
+					return null;
+				}
+				const cached = JSON.parse(cachedJSON);
+				if (Date.now() - cached.timestamp < 2 * 60 * 1000) {
+					return cached.value;
+				}
+				return null;
+			},
+			cacheData(key, value) {
+				const data = JSON.stringify({
+					value: value,
+					timestamp: Date.now(),
+				});
+				localStorage.setItem(key, data);
+			}
+		}`),
+		alpine.XCloak(),
 		components.Classes{
 			"btn btn-neutral": true,
 			"btn-sm":          size == SizeSm,
@@ -17,6 +66,10 @@ func StarOnGithub(size size) gomponents.Node {
 		html.Href("https://github.com/eduardolat/pgbackweb"),
 		html.Target("_blank"),
 		lucide.Github(),
-		SpanText("Star on GitHub"),
+		SpanText("Star on Github"),
+		html.Span(
+			alpine.XShow("stars"),
+			alpine.XText("'( ' + stars + ' )'"),
+		),
 	)
 }