Star count

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>