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

static/css/03-components/_cv-section.css

@@ -197,14 +197,27 @@
 .stars-badge {
     display: inline-flex;
     align-items: center;
-    margin-left: 0.3em;
+    gap: 0.3em;
+    background: #d4a017;
+    color: white;
+    font-weight: 700;
+    font-size: 0.7em;
+    padding: 0.2em 0.5em;
+    border-radius: 3px;
+    margin-left: 0.5em;
     vertical-align: middle;
+    letter-spacing: 0.5px;
     text-decoration: none;
 }
 
-.stars-badge img {
-    height: 18px;
-    vertical-align: middle;
+.stars-badge:hover {
+    background: #b8860b;
+    color: white;
+    text-decoration: none;
+}
+
+.stars-badge iconify-icon {
+    font-size: 1.2em;
 }
 
 .maintained-badge {

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}}