Star count

src/lib/getStars.ts

@@ -0,0 +1,37 @@
+import { ofetch } from "ofetch";
+
+export default async function getStarsForUser(username: string, auth?: string) {
+  const userResponse = await request(`/users/${username}`, auth);
+  if (!userResponse || !userResponse.public_repos) {
+    throw new Error(userResponse ? userResponse.message : 'User not found.');
+  }
+
+  const pages = Math.ceil(userResponse.public_repos / 100);
+  let repos = [];
+  const fetchReposPromises = [];
+
+  for (let i = 1; i <= pages; i++) {
+    fetchReposPromises.push(request(`/users/${username}/repos?per_page=100&page=${i}`, auth));
+  }
+
+  const reposResponses = await Promise.all(fetchReposPromises);
+  repos = reposResponses.flat();
+
+  return starSum(repos);
+}
+
+async function request(url, auth) {
+  const headers = {
+    'User-Agent': 'GitHub StarCounter',
+  };
+
+  if (auth) {
+    headers.Authorization = `Basic ${Buffer.from(auth).toString('base64')}`;
+  }
+
+  return  ofetch(`https://api.github.com${url}`, { headers });
+}
+
+async function starSum(repos) {
+  return repos.reduce((acc, curr) => acc + curr.stargazers_count, 0);
+}

src/routes/+page.server.ts

@@ -0,0 +1,8 @@
+import type {PageServerLoad} from "./$types";
+import getStars from "$lib/getStars";
+
+export const load: PageServerLoad = async () => {
+  return {
+    starCount: await getStars('anatolykopyl')
+  };
+}

src/routes/+page.svelte

@@ -4,11 +4,13 @@
   import About from "./About.svelte";
   import Projects from "./Projects/Projects.svelte";
   import Footer from "./Footer.svelte";
+
+  export let data;
 </script>
 
 <main>
   <Navbar></Navbar>
-  <Hero></Hero>
+  <Hero starCount={data.starCount}></Hero>
   <About></About>
   <Projects></Projects>
   <Footer></Footer>

src/routes/Hero.svelte

@@ -6,6 +6,7 @@ import Telegram from "$lib/icons/Telegram.svelte";
 import Linkedin from "$lib/icons/Linkedin.svelte";
 import MaterialSymbolsStarRounded from '~icons/material-symbols/star-rounded';
 
+export let starCount: number;
 let logo: HTMLElement;
 
 onMount(async () => {
@@ -73,7 +74,7 @@ const goTop = () => {
     >
       <Github></Github>
       <div class="rounded-lg text-sm border border-slate-200 border-opacity-50 px-2 bg-slate-500 bg-opacity-25 absolute bottom-0 w-max translate-y-full mb-1 flex gap-1 items-center">
-        123
+        {starCount}
         <MaterialSymbolsStarRounded class="max-h-4 max-w-4" />
       </div>
     </a>