nav: replace text link with a real GitHub-style star button (octicon + live count)

Author: Yogthos

index.html

@@ -134,13 +134,39 @@
 .nav-links a:hover{color:var(--fg-hi);text-decoration:none}
 
 .nav-right{margin-left:auto;display:flex;gap:10px;align-items:center}
-.nav-gh{
-  color:var(--fg-dim);text-decoration:none;
-  font-size:11px;letter-spacing:0.06em;font-family:var(--mono);
-  border:1px solid var(--border);
-  padding:5px 12px;transition:all 0.18s;border-radius:4px;
+
+/* GitHub-style star button: [★ Star] [count] with the connecting caret */
+.gh-star{
+  display:inline-flex;align-items:stretch;
+  font-size:12px;font-weight:600;line-height:1;
+  text-decoration:none;color:var(--fg);
+}
+.gh-star:hover{text-decoration:none}
+.gh-star-btn{
+  display:inline-flex;align-items:center;gap:6px;
+  padding:5px 10px;
+  color:var(--fg);background:var(--bg2);
+  border:1px solid var(--border);border-radius:6px 0 0 6px;
+  transition:background 0.15s,border-color 0.15s;
+}
+.gh-star-btn svg{width:14px;height:14px;fill:currentColor}
+.gh-star:hover .gh-star-btn{background:var(--bg3);border-color:var(--fg-dim)}
+.gh-star-count{
+  display:none;align-items:center;position:relative;
+  padding:5px 10px;margin-left:7px;
+  color:var(--fg);background:var(--bg);
+  border:1px solid var(--border);border-radius:6px;
+  font-variant-numeric:tabular-nums;
+}
+/* the little triangle that points from the count box back at the button */
+.gh-star-count::before{
+  content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%);
+  border:7px solid transparent;border-right-color:var(--border);border-left:0;
+}
+.gh-star-count::after{
+  content:"";position:absolute;left:-6px;top:50%;transform:translateY(-50%);
+  border:6px solid transparent;border-right-color:var(--bg);border-left:0;
 }
-.nav-gh:hover{color:var(--fg-hi);border-color:var(--fg-dim);text-decoration:none}
 
 /* ─── SECTIONS ──────────────────────────────────────────────── */
 .sec{
@@ -488,7 +514,13 @@
       <a href="#faq">FAQ</a>
     </div>
     <div class="nav-right">
-      <a href="https://github.com/dirge-code/dirge" class="nav-gh">★ Star on GitHub</a>
+      <a href="https://github.com/dirge-code/dirge" class="gh-star" aria-label="Star dirge-code/dirge on GitHub">
+        <span class="gh-star-btn">
+          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"/></svg>
+          Star
+        </span>
+        <span class="gh-star-count" id="ghStars"></span>
+      </a>
     </div>
   </div>
 </nav>
@@ -1310,6 +1342,19 @@ <h5>Built with</h5>
     d.style.display=(d.dataset.thc===th)?'':'none';
   });
 };
+
+// Live GitHub star count for the nav star button. Graceful: if the API
+// is unreachable or rate-limited, the count box stays hidden and the
+// button still reads "★ Star".
+fetch('https://api.github.com/repos/dirge-code/dirge')
+  .then(function(r){return r.ok?r.json():null;})
+  .then(function(d){
+    if(!d||typeof d.stargazers_count!=='number')return;
+    var n=d.stargazers_count, el=document.getElementById('ghStars');
+    el.textContent=n>=1000?(n/1000).toFixed(1).replace(/\.0$/,'')+'k':String(n);
+    el.style.display='inline-flex';
+  })
+  .catch(function(){});
 </script>
 </body>
 </html>