add github link to top nav

anycable · Apr 13, 2024 · 8fc265d · 8fc265d
1 parent d41797c
commit 8fc265d
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 4 deletions.
diff --git a/src/images/github.svg b/src/images/github.svg
diff --git a/src/index.ts b/src/index.ts
@@ -3,4 +3,5 @@ import './js/components/learn-more-scroll';
 import './js/components/demo';
 import './js/components/tabs';
 import './js/components/cursors';
+import './js/components/github-button';
 import './index.scss';
diff --git a/src/js/components/github-button.ts b/src/js/components/github-button.ts
@@ -0,0 +1,27 @@
+const fetchStars = async () => {
+  const response = await fetch(
+    'https://api.github.com/repos/anycable/anycable'
+  );
+  const data = await response.json();
+  return data.stargazers_count;
+};
+
+const el = document.getElementById('gh-stars-counter');
+
+if (el) {
+  fetchStars().then(stars => {
+    if (!stars) return;
+
+    let starsK = Math.round(stars / 100);
+
+    starsK = starsK / 10;
+
+    if (starsK >= 10) {
+      starsK = starsK | 0;
+    } else if (starsK == starsK - Math.floor(starsK)) {
+      starsK = starsK | 0;
+    }
+
+    el.textContent = `${starsK}K`;
+  });
+}
diff --git a/src/modules/blocks/header.scss b/src/modules/blocks/header.scss
@@ -36,6 +36,30 @@ $className: 'header';
     align-items: center;
   }
 
+  &__right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &__stars {
+    margin-right: 40px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    text-decoration: none;
+    color: $fontSecondaryColor;
+    transition: color 200ms ease-in-out;
+
+    &:hover {
+      color: $fontPrimaryColor;
+    }
+
+    &__count {
+      margin-left: 8px;
+    }
+  }
+
   &__links {
     margin-left: 64px;
 

diff --git a/src/partials/header.hbs b/src/partials/header.hbs
@@ -2,12 +2,18 @@
   <nav class='header__content'>
     <div class='header__left'>
       <p class='header__logo'>AnyCable</p>
-      <div class='header__links'>
-        <a href="https://docs.anycable.io" target="_blank" class="header__link no-mobile" data-ph-capture-attribute-link-id="nav-docs">Docs</a>
-        <a href="https://blog.anycable.io" target="_blank" class="header__link no-mobile" data-ph-capture-attribute-link-id="nav-blog">Blog</a>
+      <div class='header__links no-mobile'>
+        <a href="https://docs.anycable.io" target="_blank" class="header__link" data-ph-capture-attribute-link-id="nav-docs">Docs</a>
+        <a href="https://blog.anycable.io" target="_blank" class="header__link" data-ph-capture-attribute-link-id="nav-blog">Blog</a>
         <a href="#pricing" class="header__link" data-ph-capture-attribute-link-id="nav-pricing">Pricing</a>
       </div>
     </div>
-    <a href="https://plus.anycable.io/pro" target="_blank" class="button" data-ph-capture-attribute-link-id='go-pro'>Sign up</a>
+    <div class='header__right'>
+      <a class='header__stars' href="https://github.com/anycable/anycable" target="_blank" data-ph-capture-attribute-link-id="nav-github">
+        {{inline 'images/github.svg'}}
+        <span class='header__stars__count' id="gh-stars-counter">1.9K</span>
+      </a>
+      <a href="https://plus.anycable.io/pro" target="_blank" class="button" data-ph-capture-attribute-link-id='go-pro'>Sign up</a>
+    </div>
   </nav>
 </header>