From 29fa038760db9eff11dd55d723f14dbd31201a53 Mon Sep 17 00:00:00 2001
From: Pranav Murali <110681151+Marvellousz@users.noreply.github.com>
Date: Wed, 22 Jan 2025 18:39:22 +0400
Subject: [PATCH] feat: add github stars to landing page (#543)

* added github stars

* Update Navigation.svelte

* debug data

* remove prerender

* feat: githubstar change

* pass data from server to client

* remove console.log

---------

Co-authored-by: Rotimi Best <best@classroomio.com>
---
 .../src/lib/Navigation/Navigation.svelte      | 108 ++++++++++--------
 .../src/routes/+layout.server.ts              |  15 +++
 .../classroomio-com/src/routes/+layout.svelte |   2 +-
 apps/classroomio-com/src/routes/+layout.ts    |   5 +-
 package.json                                  |   2 +-
 5 files changed, 79 insertions(+), 53 deletions(-)
 create 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 e5d866ba..e9d0114d 100644
--- a/apps/classroomio-com/src/lib/Navigation/Navigation.svelte
+++ b/apps/classroomio-com/src/lib/Navigation/Navigation.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
-  import ChevronDown from 'carbon-icons-svelte/lib/ChevronDown.svelte';
-  import TextAlignJustify from 'carbon-icons-svelte/lib/TextAlignJustify.svelte';
-  import CloseLarge from 'carbon-icons-svelte/lib/CloseLarge.svelte';
-  import { fly } from 'svelte/transition';
-  import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
-  import CourseIcon from '$lib/Icons/CourseIcon.svelte';
-  import MapCenter from 'carbon-icons-svelte/lib/MapCenter.svelte';
   import { page } from '$app/stores';
+  import CourseIcon from '$lib/Icons/CourseIcon.svelte';
+  import ChevronDown from 'carbon-icons-svelte/lib/ChevronDown.svelte';
+  import CloseLarge from 'carbon-icons-svelte/lib/CloseLarge.svelte';
+  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 { fly } from 'svelte/transition';
+
+  export let stars = 0;
 
   let showDrawer = false;
   let showSolutions = false;
@@ -78,7 +80,7 @@
           on:mouseenter={() => (showSolutions = true)}
           on:mouseleave={closeSolutions}
           class="flex items-center hover:bg-gray-100 {showSolutions &&
-            'bg-gray-100'} px-4 py-2 rounded-md"
+            'bg-gray-100'} px-4 py-2 rounded-md transition-all duration-200"
           on:click={() => (showSolutions = !showSolutions)}
           class:active={isSolutionsActive}
         >
@@ -93,7 +95,7 @@
           >
             {#each solutions as solution}
               <a
-                class="flex justify-between items-center w-full rounded-lg hover:bg-gray-100 hover:cursor-pointer p-2"
+                class="flex justify-between items-center w-full rounded-lg hover:bg-gray-100 hover:cursor-pointer p-2 transition-colors duration-200"
                 href="/{solution.key}"
                 on:click={() => (showSolutions = false)}
               >
@@ -123,7 +125,9 @@
         class="text-gray-800 font-semibold text-sm cursor-pointer"
         class:active={activeLink.startsWith('/tools')}
       >
-        <li class="hover:bg-gray-100 px-4 py-2 rounded-md">Free Tools</li>
+        <li class="hover:bg-gray-100 px-4 py-2 rounded-md transition-all duration-200">
+          Free Tools
+        </li>
       </a>
 
       <a
@@ -131,37 +135,52 @@
         class="text-gray-800 font-semibold text-sm cursor-pointer"
         class:active={activeLink.startsWith('/blog')}
       >
-        <li class="hover:bg-gray-100 px-4 py-2 rounded-md">Blog</li>
+        <li class="hover:bg-gray-100 px-4 py-2 rounded-md transition-all duration-200">Blog</li>
       </a>
       <a
         href="/pricing"
         class="text-gray-800 font-semibold text-sm cursor-pointer"
         class:active={activeLink.startsWith('/pricing')}
       >
-        <li class="hover:bg-gray-100 px-4 py-2 rounded-md">Pricing</li>
+        <li class="hover:bg-gray-100 px-4 py-2 rounded-md transition-all duration-200">Pricing</li>
       </a>
     </ul>
   </nav>
 
-  <div class="justify-between items-center flex-row hidden md:hidden lg:flex">
-    <a href="/discord" target="_blank">
+  <div class="justify-between items-center flex-row hidden md:hidden lg:flex gap-3">
+    <a
+      href="/discord"
+      target="_blank"
+      class="flex items-center hover:opacity-80 transition-opacity duration-200"
+    >
       <img
         loading="lazy"
         alt="discord logo"
         src="/discord-blue.png"
-        class="w-8 h-6 mr-4 cursor-pointer"
-      />
-    </a>
-    <a href="/github" target="_blank">
-      <img
-        loading="lazy"
-        alt="github logo"
-        src="/github-mark.png"
-        class="w-6 h-6 mr-4 cursor-pointer"
+        class="w-6 h-5 cursor-pointer"
       />
     </a>
+    <div class="flex items-center">
+      <a
+        href="/github"
+        target="_blank"
+        class="flex items-center gap-1.5 p-2 rounded-md transition-all duration-200 ease-in-out hover:bg-gray-100 group"
+      >
+        <img
+          loading="lazy"
+          alt="github logo"
+          src="/github-mark.png"
+          class="w-5 h-5 cursor-pointer transition-transform duration-200 group-hover:scale-110"
+        />
+        <span
+          class="text-sm text-gray-600 font-medium leading-none transition-colors duration-200 group-hover:text-black"
+        >
+        {stars}
+        </span>
+      </a>
+    </div>
     <a
-      class="font-medium text-sm after:content-['→'] after:ml-2"
+      class="font-medium text-sm after:content-['→'] after:ml-2 hover:opacity-80 transition-opacity duration-200"
       href="https://app.classroomio.com"
     >
       Dashboard
@@ -200,7 +219,7 @@
         <ul class="flex items-center flex-col lg:flex-row justify-between w-full">
           <li class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer w-full">
             <button
-              class="w-full flex items-center justify-between hover:bg-gray-100 py-3 px-4 rounded-lg"
+              class="w-full flex items-center justify-between hover:bg-gray-100 py-3 px-4 rounded-lg transition-all duration-200"
               on:click={handleShowDrawer}
               class:active={isSolutionsActive}
             >
@@ -216,7 +235,7 @@
                     }}
                   >
                     <p
-                      class="font-normal text-xs text-gray-700 hover:bg-gray-100 rounded-lg py-2.5 pl-5"
+                      class="font-normal text-xs text-gray-700 hover:bg-gray-100 rounded-lg py-2.5 pl-5 transition-colors duration-200"
                     >
                       {solution.title}
                     </p>
@@ -225,27 +244,15 @@
               </div>
             {/if}
           </li>
-          <!-- Free Tools -->
           <a
-            class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-xl w-full"
+            class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-xl w-full transition-all duration-200"
             on:click={handleShowSolutions}
             href="/tools"
           >
             <li>Free Tools</li>
           </a>
-          <!-- <a
-            class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
-            on:click={() => {
-              handleShowSolutions();
-            }}
-            class:active={activeLink.startsWith('/docs')}
-            href="/docs"
-            target="_blank"
-          >
-            <li>Docs</li>
-          </a> -->
           <a
-            class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
+            class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full transition-all duration-200"
             on:click={() => {
               handleShowSolutions();
             }}
@@ -254,9 +261,8 @@
           >
             <li>Blog</li>
           </a>
-          <!-- Pricing -->
           <a
-            class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-xl w-full"
+            class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-xl w-full transition-all duration-200"
             on:click={() => {
               handleShowSolutions();
             }}
@@ -266,7 +272,7 @@
             <li>Pricing</li>
           </a>
           <a
-            class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
+            class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full transition-all duration-200"
             on:click={() => {
               handleShowSolutions();
             }}
@@ -281,31 +287,35 @@
         <a
           href="/discord"
           target="_blank"
-          class="flex items-center rounded-md after:ml-2 w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg"
+          class="flex items-center rounded-md w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg transition-all duration-200"
         >
           <img
             loading="lazy"
             alt="discord logo"
             src="/discord-blue.png"
-            class="w-8 h-6 mr-2 cursor-pointer"
+            class="w-6 h-5 mr-2 cursor-pointer"
           />
           <span>Discord</span>
         </a>
         <a
           href="/github"
           target="_blank"
-          class="flex items-center rounded-md after:ml-2 w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg"
+          class="flex items-center rounded-md w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg group transition-all duration-200"
         >
           <img
             loading="lazy"
             alt="github logo"
             src="/github-mark.png"
-            class="w-6 h-6 mr-3 cursor-pointer"
+            class="w-5 h-5 cursor-pointer transition-transform duration-200 group-hover:scale-110"
           />
-          <span>Github</span>
+          <span class="ml-3 transition-colors duration-200 group-hover:text-black">Github</span>
+          <span
+            class="text-sm text-gray-600 font-medium ml-1 transition-colors duration-200 group-hover:text-black"
+            >({stars})</span
+          >
         </a>
         <a
-          class="font-semibold after:content-['→'] rounded-md after:ml-2 w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg"
+          class="font-semibold after:content-['→'] rounded-md after:ml-2 w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg transition-all duration-200"
           href="https://app.classroomio.com"
         >
           Dashboard
diff --git a/apps/classroomio-com/src/routes/+layout.server.ts b/apps/classroomio-com/src/routes/+layout.server.ts
new file mode 100644
index 00000000..18f58477
--- /dev/null
+++ b/apps/classroomio-com/src/routes/+layout.server.ts
@@ -0,0 +1,15 @@
+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 38ebe116..3401292d 100644
--- a/apps/classroomio-com/src/routes/+layout.svelte
+++ b/apps/classroomio-com/src/routes/+layout.svelte
@@ -25,7 +25,7 @@
 <MetaTags {...metaTags} />
 
 <div class="overflow-hidden bg-white">
-  <Navigation />
+  <Navigation stars={data.githubStars} />
 
   <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 ae403d6b..214c5927 100644
--- a/apps/classroomio-com/src/routes/+layout.ts
+++ b/apps/classroomio-com/src/routes/+layout.ts
@@ -2,10 +2,11 @@ import type { MetaTagsProps } from 'svelte-meta-tags';
 
 export const prerender = true;
 
-export function load({ url }) {
+export function load({ url, data }) {
   return {
     baseMetaTags: getBaseMetaTags(url),
-    url: url.pathname
+    url: url.pathname,
+		...data,
   };
 }
 
diff --git a/package.json b/package.json
index 8ba145c1..0110e82d 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.1",
   "scripts": {
     "build": "turbo run build",
-    "dev": "turbo prepare && turbo run dev",
+    "dev": "turbo prepare --concurrency 13 && turbo run dev",
     "lint": "turbo run lint",
     "clean": "turbo clean && rm -rf node_modules",
     "format": "prettier . --write",