From 4e2d5dd16f4ebf17a2ed261f71bc91adf3e62596 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Thu, 30 Jan 2025 10:18:16 +0100
Subject: [PATCH] chore: load stars on client

---
 .../src/lib/Navigation/Navigation.svelte      | 20 ++++++++++++++++---
 .../src/routes/+layout.server.ts              | 15 --------------
 .../classroomio-com/src/routes/+layout.svelte | 10 +++++-----
 apps/classroomio-com/src/routes/+layout.ts    |  5 ++---
 4 files changed, 24 insertions(+), 26 deletions(-)
 delete mode 100644 apps/classroomio-com/src/routes/+layout.server.ts

diff --git a/apps/classroomio-com/src/lib/Navigation/Navigation.svelte b/apps/classroomio-com/src/lib/Navigation/Navigation.svelte
index e9d0114d..458f4a82 100644
--- a/apps/classroomio-com/src/lib/Navigation/Navigation.svelte
+++ b/apps/classroomio-com/src/lib/Navigation/Navigation.svelte
@@ -6,10 +6,10 @@
   import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
   import MapCenter from 'carbon-icons-svelte/lib/MapCenter.svelte';
   import TextAlignJustify from 'carbon-icons-svelte/lib/TextAlignJustify.svelte';
+  import { onMount } from 'svelte';
   import { fly } from 'svelte/transition';
 
-  export let stars = 0;
-
+  let stars = 0;
   let showDrawer = false;
   let showSolutions = false;
   let activeLink = '';
@@ -53,6 +53,20 @@
   $: activeLink = $page.url.pathname;
   $: activeHash = $page.url.hash;
   $: isSolutionsActive = solutions.some((s) => activeHash.includes(s.key));
+
+  async function setStars() {
+    try {
+      const response = await fetch('http://api.github.com/repos/classroomio/classroomio');
+      const data = await response.json();
+      stars = data?.stargazers_count || 0;
+    } catch (error) {
+      console.error('Error fetching GitHub stars:', error);
+    }
+  }
+
+  onMount(() => {
+    setStars();
+  });
 </script>
 
 <div
@@ -175,7 +189,7 @@
         <span
           class="text-sm text-gray-600 font-medium leading-none transition-colors duration-200 group-hover:text-black"
         >
-        {stars}
+          {stars}
         </span>
       </a>
     </div>
diff --git a/apps/classroomio-com/src/routes/+layout.server.ts b/apps/classroomio-com/src/routes/+layout.server.ts
deleted file mode 100644
index 18f58477..00000000
--- a/apps/classroomio-com/src/routes/+layout.server.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export async function load({ fetch }) {
-    let githubStars = 0;
-  
-    try {
-      const response = await fetch('http://api.github.com/repos/classroomio/classroomio');
-      const data = await response.json();
-      githubStars = data?.stargazers_count || 0;
-    } catch (error) {
-      console.error('Error fetching GitHub stars:', error);
-    }
-  
-    return {
-      githubStars
-    };
-  }
\ No newline at end of file
diff --git a/apps/classroomio-com/src/routes/+layout.svelte b/apps/classroomio-com/src/routes/+layout.svelte
index 3401292d..71d4ea60 100644
--- a/apps/classroomio-com/src/routes/+layout.svelte
+++ b/apps/classroomio-com/src/routes/+layout.svelte
@@ -1,13 +1,13 @@
 <script>
+  import { dev } from '$app/environment';
   import { page } from '$app/stores';
-  import { MetaTags } from 'svelte-meta-tags';
-  import Navigation from '$lib/Navigation/Navigation.svelte';
   import Footer from '$lib/Footer/Footer.svelte';
-  import PageTransition from './transition.svelte';
+  import Navigation from '$lib/Navigation/Navigation.svelte';
   import NotFound from '$lib/NotFound/NotFound.svelte';
   import extend from 'just-extend';
-  import { dev } from '$app/environment';
   import { onMount } from 'svelte';
+  import { MetaTags } from 'svelte-meta-tags';
+  import PageTransition from './transition.svelte';
 
   import '../app.css';
 
@@ -25,7 +25,7 @@
 <MetaTags {...metaTags} />
 
 <div class="overflow-hidden bg-white">
-  <Navigation stars={data.githubStars} />
+  <Navigation />
 
   <PageTransition url={data.url}>
     {#if $page.status === 404}
diff --git a/apps/classroomio-com/src/routes/+layout.ts b/apps/classroomio-com/src/routes/+layout.ts
index 214c5927..ae403d6b 100644
--- a/apps/classroomio-com/src/routes/+layout.ts
+++ b/apps/classroomio-com/src/routes/+layout.ts
@@ -2,11 +2,10 @@ import type { MetaTagsProps } from 'svelte-meta-tags';
 
 export const prerender = true;
 
-export function load({ url, data }) {
+export function load({ url }) {
   return {
     baseMetaTags: getBaseMetaTags(url),
-    url: url.pathname,
-		...data,
+    url: url.pathname
   };
 }