Move GitHub stats fetching to Vercel

api/github-stats.js

@@ -0,0 +1,42 @@
+import parse from "parse-link-header";
+
+const options = {
+  headers: {
+    Authorization: `Bearer ${process.env.GITHUB_ACCESS_TOKEN}`,
+  },
+};
+
+export default async function githubStats(request, response) {
+  response.setHeader(
+    "Cache-Control",
+    "s-maxage=3600, stale-while-revalidate=600"
+  );
+
+  if (!process.env.GITHUB_ACCESS_TOKEN) {
+    response.status(500).send({ message: "Github access token not set" });
+  }
+
+  try {
+    const [starsRes, contributorsRes] = await Promise.all([
+      fetch("https://api.github.com/repos/deepset-ai/haystack", options),
+      fetch(
+        "https://api.github.com/repos/deepset-ai/haystack/contributors?per_page=1",
+        options
+      ),
+    ]);
+
+    if (!starsRes.ok || !contributorsRes.ok) {
+      throw new Error("Failed to fetch data from GitHub");
+    }
+
+    const starsData = await starsRes.json();
+    const stars = starsData.stargazers_count;
+    const contributorsLinkHeader = contributorsRes.headers.get("link");
+    const parsed = parse(contributorsLinkHeader); // parse link header to get total pages
+    const contributors = parsed.last.page;
+
+    response.status(200).json({ stars, contributors });
+  } catch (e) {
+    response.status(500).json({ error: e.message });
+  }
+}

config.toml

@@ -29,7 +29,7 @@ paginatePath = "/"
 
 [security]
   [security.funcs]
-    getenv = ["^HUGO_", "GITHUB_ACCESS_TOKEN", "GOOGLE_TAG_ANALYTICS", "DC_API_KEY", "DC_WORKSPACE_NAME", "DC_PIPELINE_NAME"]
+    getenv = ["^HUGO_", "GOOGLE_TAG_ANALYTICS", "DC_API_KEY", "DC_WORKSPACE_NAME", "DC_PIPELINE_NAME"]
 
 [markup]
   # Code blocks

themes/haystack/assets/js/github-stats.js

@@ -0,0 +1,32 @@
+import { kFormatter } from "./utils";
+
+// Fetches github data from api and populates html with stars and contributors
+export const githubStats = async () => {
+  const starContainers = document.querySelectorAll(".github-stars-js");
+  const contributorContainers = document.querySelectorAll(
+    ".github-contributors-js"
+  );
+
+  if ([...starContainers, ...contributorContainers].length > 0) {
+    const response = await fetch("/api/github-stats", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+
+      // Populate stars
+      starContainers.forEach((container) => {
+        container.innerHTML = kFormatter(data.stars);
+      });
+
+      // Populate contributors
+      contributorContainers.forEach((container) => {
+        container.innerHTML = data.contributors;
+      });
+    }
+  }
+};

themes/haystack/assets/js/script.js

@@ -2,6 +2,7 @@
 import { navigation } from "./navigation";
 import { accordions } from "./accordions";
 import { newsletters } from "./newsletters";
+import { githubStats } from "./github-stats";
 
 const ready = (fn) => {
   if (document.readyState != "loading") {
@@ -14,3 +15,4 @@ const ready = (fn) => {
 ready(navigation);
 ready(accordions);
 ready(newsletters);
+ready(githubStats);

themes/haystack/assets/sass/components/_buttons.scss

@@ -321,6 +321,10 @@ button.nav-toggle-close {
   .separator {
     font-weight: 400;
   }
+
+  .github-stars-js {
+    min-width: 3.125rem;
+  }
 }
 
 .colab-btn,

themes/haystack/assets/sass/pages/_community.scss

@@ -94,6 +94,22 @@
           font-size: var(--text-small);
         }
       }
+
+      .github-stars-js {
+        min-width: 8.75rem;
+        min-height: 6rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .github-contributors-js {
+        min-width: 6.5rem;
+        min-height: 6rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
   }
 }

themes/haystack/layouts/partials/github-stars-button.html

@@ -1,21 +1,7 @@
 {{/* Github stars button */}}
 
-{{ $accessToken := getenv "GITHUB_ACCESS_TOKEN" }}
-{{ $starCount := 0 }}
-
-{{ with $accessToken }}
-{{/* Authorization */}}
-{{ $auth := (dict "Authorization" (printf "Bearer %s" $accessToken)) }}
-
-{{/* Fetch Stargazer count */}}
-{{ $starsData := getJSON "https://api.github.com/repos/deepset-ai/haystack" $auth }}
-{{/* Format number to K (2000 -> 2k) */}}
-{{ $starCount = (div $starsData.stargazers_count 1000) | lang.FormatNumber 1 }}
-{{ $starCount = printf (print $starCount "%s") "k"}}
-{{ end }}
-
 {{/* Button */}}
 <a class="github-stars-btn" href="https://github.com/deepset-ai/haystack" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 32 30" fill="none">
   <path d="M15.5556 0C6.96111 0 0 6.88228 0 15.3794C0 22.1848 4.45278 27.9328 10.6361 29.9706C11.4139 30.1052 11.7056 29.6438 11.7056 29.2401C11.7056 28.8748 11.6861 27.6637 11.6861 26.3757C7.77778 27.087 6.76667 25.4337 6.45556 24.5686C6.28056 24.1264 5.52222 22.7615 4.86111 22.3963C4.31667 22.1079 3.53889 21.3966 4.84167 21.3774C6.06667 21.3582 6.94167 22.4924 7.23333 22.9538C8.63333 25.2799 10.8694 24.6263 11.7639 24.2226C11.9 23.2229 12.3083 22.5501 12.7556 22.1656C9.29444 21.7811 5.67778 20.4546 5.67778 14.572C5.67778 12.8995 6.28056 11.5153 7.27222 10.4388C7.11667 10.0543 6.57222 8.4779 7.42778 6.36323C7.42778 6.36323 8.73056 5.95952 11.7056 7.93962C12.95 7.59358 14.2722 7.42056 15.5944 7.42056C16.9167 7.42056 18.2389 7.59358 19.4833 7.93962C22.4583 5.9403 23.7611 6.36323 23.7611 6.36323C24.6167 8.4779 24.0722 10.0543 23.9167 10.4388C24.9083 11.5153 25.5111 12.8803 25.5111 14.572C25.5111 20.4738 21.875 21.7811 18.4139 22.1656C18.9778 22.6462 19.4639 23.5689 19.4639 25.0108C19.4639 27.0678 19.4444 28.721 19.4444 29.2401C19.4444 29.6438 19.7361 30.1244 20.5139 29.9706C23.602 28.9399 26.2853 26.9777 28.1864 24.3603C30.0874 21.7428 31.1103 18.6018 31.1111 15.3794C31.1111 6.88228 24.15 0 15.5556 0Z" fill="#2B2F55"/>
 </svg>
-  Stars <span class="separator">|</span><span class="github-stars-js">{{ $starCount }}</span></a>
+  Stars <span class="separator">|</span><span class="github-stars-js">{{ partial "loader" . }}</span></a>

themes/haystack/layouts/partials/github-stats.html

@@ -1,57 +1,17 @@
-{{/*  Github star & contributor count  */}}
+{{/* Github star & contributor count */}}
 
-{{ $accessToken := getenv "GITHUB_ACCESS_TOKEN" }}
-
-{{/* Placeholder values */}}
-{{ $starCount := 0 }}
-{{ $contributorCount := 0 }}
-
-{{ with $accessToken }}
-  {{/*  Authorization  */}}
-  {{ $auth := (dict "Authorization" (printf "Bearer %s" $accessToken)) }}
-
-  {{/* Fetch Stargazer count */}}
-  {{ $starsData := getJSON "https://api.github.com/repos/deepset-ai/haystack" $auth }}
-  {{/*  Format number to K (2000 -> 2k)  */}}
-  {{ $starCount = (div $starsData.stargazers_count 1000) | lang.FormatNumber 1 }}
-  {{ $starCount = printf (print $starCount "%s") "k"}}
-
-
-  {{/* Fetch Contributor count */}}
-  {{ $contributorsURL := "https://api.github.com/repos/deepset-ai/haystack/contributors?per_page=100" }}
-  {{ $contributorsData := getJSON $contributorsURL $auth }}
-  {{ $contributorCount = len $contributorsData }}
-
-  {{/*  Save the amount of results we got  */}}
-  {{ $lastFetchCount := $contributorCount }}
-
-  {{/*  Range 10 times - hardcoded since there is no proper loop in Hugo  */}}
-  {{ range $i, $num := (seq 10) }}
-  {{/*  If we got 100 results on last fetch, fetch again  */}}
-    {{ if eq $lastFetchCount 100 }}
-        {{ $page := add $i 2 }}
-        {{ $contributorsURL = printf "https://api.github.com/repos/deepset-ai/haystack/contributors?per_page=100&page=%s" ( string $page ) }}
-        {{ $contributorsData = getJSON $contributorsURL $auth }}
-        {{ $lastFetchCount = (len $contributorsData) }}
-        {{ $contributorCount = add $contributorCount (len $contributorsData) }}
-    {{ end }}
-  {{ end }}
-
-{{ end }}
-
-
-{{/*  Stat boxes  */}}
+{{/* Stat boxes */}}
 <ul class="stats-boxes" role="list">
   <li>
     <span class="github-stars-js">
-      {{ $starCount }}
+      {{ partial "loader" . }}
     </span>
     <span>Stars</span>
   </li>
   <li>
     <span class="github-contributors-js">
-      {{ $contributorCount }}
+      {{ partial "loader" . }}
     </span>
     <span>Contributors</span>
   </li>
-</ul>
+</ul>