Add GitHub stars link to page header

Author: marcprux

src/components/CustomHeader.astro

@@ -66,6 +66,32 @@ const links: Link[] = [
     });
   })();
 </script>
+<script is:inline>
+  (function() {
+    function formatCount(n) {
+      if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'k';
+      return String(n);
+    }
+    var cacheKey = 'gh-stars-skip';
+    var cacheTimeKey = 'gh-stars-skip-ts';
+    var cached = localStorage.getItem(cacheKey);
+    var cachedTs = localStorage.getItem(cacheTimeKey);
+    var els = document.querySelectorAll('[data-gh-stars-count]');
+    if (cached && cachedTs && Date.now() - Number(cachedTs) < 3600000) {
+      els.forEach(function(el) { el.textContent = formatCount(Number(cached)); });
+    }
+    fetch('https://api.github.com/repos/skiptools/skip')
+      .then(function(r) { return r.json(); })
+      .then(function(d) {
+        if (d && d.stargazers_count) {
+          localStorage.setItem(cacheKey, String(d.stargazers_count));
+          localStorage.setItem(cacheTimeKey, String(Date.now()));
+          els.forEach(function(el) { el.textContent = formatCount(d.stargazers_count); });
+        }
+      })
+      .catch(function() {});
+  })();
+</script>
 <div class="header sl-flex">
   <div class="full-width sl-flex">
     <SiteTitle />
@@ -83,6 +109,19 @@ const links: Link[] = [
         ))
       }
     </div>
+    <a
+      class="gh-stars"
+      href="https://github.com/skiptools/skip"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="Star us on GitHub"
+      data-gh-stars
+    >
+      <svg fill="none" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
+        <path fill="currentColor" d="M12 1.60205C5.9225 1.60205 1 6.41965 1 12.3676C1 17.1314 4.14875 21.155 8.52125 22.5815C9.07125 22.6757 9.2775 22.3527 9.2775 22.0701C9.2775 21.8144 9.26375 20.9666 9.26375 20.065C6.5 20.5629 5.785 19.4056 5.565 18.8001C5.44125 18.4906 4.905 17.5351 4.4375 17.2794C4.0525 17.0776 3.5025 16.5797 4.42375 16.5662C5.29 16.5528 5.90875 17.3467 6.115 17.6697C7.105 19.298 8.68625 18.8404 9.31875 18.5578C9.415 17.8581 9.70375 17.3871 10.02 17.1179C7.5725 16.8488 5.015 15.9203 5.015 11.8024C5.015 10.6317 5.44125 9.66278 6.1425 8.90919C6.0325 8.64005 5.6475 7.53658 6.2525 6.05631C6.2525 6.05631 7.17375 5.77372 9.2775 7.15978C10.1575 6.91756 11.0925 6.79645 12.0275 6.79645C12.9625 6.79645 13.8975 6.91756 14.7775 7.15978C16.8813 5.76026 17.8025 6.05631 17.8025 6.05631C18.4075 7.53658 18.0225 8.64005 17.9125 8.90919C18.6138 9.66278 19.04 10.6182 19.04 11.8024C19.04 15.9337 16.4688 16.8488 14.0213 17.1179C14.42 17.4544 14.7638 18.1003 14.7638 19.1096C14.7638 20.5495 14.75 21.7068 14.75 22.0701C14.75 22.3527 14.9563 22.6891 15.5063 22.5815C17.69 21.86 19.5875 20.4865 20.9318 18.6542C22.2761 16.822 22.9994 14.6233 23 12.3676C23 6.41965 18.0775 1.60205 12 1.60205Z"/>
+      </svg>
+      <span class="gh-stars-count" data-gh-stars-count></span>
+    </a>
     <div class="sl-flex social-icons">
       <SocialIcons />
     </div>
@@ -183,6 +222,54 @@ const links: Link[] = [
     gap: 1rem;
     align-items: center;
   }
+  .gh-stars {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    height: 2.25rem;
+    padding: 0 1rem 0 0.75rem;
+    font-size: var(--sl-text-sm);
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    border-radius: 1.8rem;
+    /* border: 1px solid var(--sl-color-gray-5); */
+    background: var(--sl-color-gray-6);
+    text-decoration: none;
+    color: var(--sl-color-gray-2);
+    transition: background 0.15s, border-color 0.15s;
+  }
+  .gh-stars:hover {
+    background: var(--sl-color-gray-5);
+    border-color: var(--sl-color-gray-4);
+    color: var(--sl-color-gray-2);
+  }
+  .gh-stars:active {
+    transform: scale(0.98);
+  }
+  .gh-stars svg {
+    flex-shrink: 0;
+    color: var(--sl-color-gray-3);
+  }
+  .gh-stars-count {
+    line-height: 1;
+  }
+  .gh-stars-count:empty::after {
+    content: '\00B7\00B7\00B7';
+    opacity: 0.4;
+  }
+  :root[data-theme='light'] .gh-stars {
+    color: var(--sl-color-gray-2);
+    background: var(--sl-color-gray-6);
+    border-color: var(--sl-color-gray-5);
+  }
+  :root[data-theme='light'] .gh-stars:hover {
+    background: var(--sl-color-gray-5);
+    color: var(--sl-color-gray-2);
+  }
+  :root[data-theme='light'] .gh-stars svg {
+    color: var(--sl-color-gray-3);
+  }
   .desktop,
   .release-link::after,
   .social-icons::after {