feat: custom gold stars badge matching other badges, live count via GitHub API

templates/partials/sections/projects.html

@@ -32,7 +32,7 @@
             </strong>
             {{if .Current}}<span class="live-badge"><iconify-icon icon="mdi:wifi" width="14" height="14"></iconify-icon>LIVE</span>{{end}}
             {{if .GitRepoUrl}}<a href="{{.GitRepoUrl}}" target="_blank" rel="noopener noreferrer" class="github-badge"><iconify-icon icon="mdi:github" width="14" height="14"></iconify-icon>GitHub</a>{{end}}
-            {{if and .OpenSource .GitRepoUrl}}<a href="{{.GitRepoUrl}}/stargazers" target="_blank" rel="noopener noreferrer" class="stars-badge"><img src="https://img.shields.io/github/stars/{{githubRepo .GitRepoUrl}}?style=flat&logo=github&label=stars" alt="GitHub stars" loading="lazy"></a>{{end}}
+            {{if and .OpenSource .GitRepoUrl}}<a href="{{.GitRepoUrl}}/stargazers" target="_blank" rel="noopener noreferrer" class="stars-badge" data-repo="{{githubRepo .GitRepoUrl}}"><iconify-icon icon="mdi:star" width="14" height="14"></iconify-icon>stars <span class="stars-count"></span></a>{{end}}
             {{if .MaintainedBy}}<span class="maintained-badge">{{$.UI.Sections.MaintainedBy}} {{.MaintainedBy}}</span>{{end}}
             <br>
             <small>{{if .StartDate}}{{.StartDate}}{{if .Current}}{{if .DynamicDate}} / {{.DynamicDate}}{{else}} / {{$.UI.Sections.Present}}{{end}}{{end}}{{end}} - ({{.Location}})</small>
@@ -102,4 +102,21 @@
     </div>
 </section>
 {{end}}
+<script>
+(function() {
+  document.querySelectorAll('.stars-badge[data-repo]').forEach(function(badge) {
+    var repo = badge.getAttribute('data-repo');
+    if (!repo) return;
+    fetch('https://api.github.com/repos/' + repo, {headers: {'Accept': 'application/vnd.github.v3+json'}})
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        if (data.stargazers_count !== undefined) {
+          var el = badge.querySelector('.stars-count');
+          if (el) el.textContent = data.stargazers_count;
+        }
+      })
+      .catch(function() {});
+  });
+})();
+</script>
 {{end}}