From 6c3b6e7ca864e90cf33c2570d38922079fc21686 Mon Sep 17 00:00:00 2001
From: Jeet Desai <jeetdesai995@gmail.com>
Date: Wed, 27 Dec 2023 17:47:08 +0530
Subject: [PATCH] Feat: added github star from github api

---
 src/lib/components/MobileNav.svelte |  3 ++-
 src/lib/layouts/Docs.svelte         | 13 +++++++++++--
 src/lib/layouts/Main.svelte         | 13 +++++++++++--
 src/lib/layouts/Sidebar.svelte      |  4 ++--
 src/lib/utils/gitFetch.ts           | 16 ++++++++++++++++
 src/routes/community/+page.svelte   |  3 ++-
 6 files changed, 44 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/utils/gitFetch.ts

diff --git a/src/lib/components/MobileNav.svelte b/src/lib/components/MobileNav.svelte
index 865ea6b6b2..64e8f0a209 100644
--- a/src/lib/components/MobileNav.svelte
+++ b/src/lib/components/MobileNav.svelte
@@ -4,6 +4,7 @@
 
     export let open = false;
     export let links: NavLink[];
+    export let githubStars: number;
 
     afterNavigate(() => {
         open = false;
@@ -43,7 +44,7 @@
             >
                 <span class="aw-icon-star" aria-hidden="true" />
                 <span class="text">Star on GitHub</span>
-                <span class="aw-inline-tag aw-sub-body-400">38.4K</span>
+                <span class="aw-inline-tag aw-sub-body-400">{`${githubStars.toFixed(1)}K`}</span>
             </a>
         </div>
     </div>
diff --git a/src/lib/layouts/Docs.svelte b/src/lib/layouts/Docs.svelte
index dcb644dd72..e30509decc 100644
--- a/src/lib/layouts/Docs.svelte
+++ b/src/lib/layouts/Docs.svelte
@@ -2,6 +2,8 @@
     import { navigating } from '$app/stores';
     import { writable } from 'svelte/store';
 
+    export let sidebarGithubStars = writable(0);
+
     export type DocsLayoutVariant = 'default' | 'expanded' | 'two-side-navs';
     export type DocsLayoutState = {
         showReferences: boolean;
@@ -38,10 +40,17 @@
     import Search from '$lib/components/Search.svelte';
 
     import { isMac } from '$lib/utils/platform';
-    import { setContext } from 'svelte';
+    import { onMount, setContext } from 'svelte';
+    import { getGitHubStars } from '$lib/utils/gitFetch';
 
     export let variant: DocsLayoutVariant = 'default';
     export let isReferences = false;
+    let githubStars: number = 0;
+
+    onMount(async () => {
+        githubStars = await getGitHubStars();
+        sidebarGithubStars.set(githubStars);
+    });
 
     const variantClasses: Record<DocsLayoutVariant, string> = {
         default: 'aw-grid-side-nav aw-container u-padding-inline-0',
@@ -167,7 +176,7 @@
                     >
                         <span class="aw-icon-star" aria-hidden="true" />
                         <span class="text">Star on GitHub</span>
-                        <span class="aw-inline-tag aw-sub-body-400">38.4K</span>
+                        <span class="aw-inline-tag aw-sub-body-400">{`$githubStars.toFixed(1)}K`}</span>
                     </a>
                     <a href="https://cloud.appwrite.io/console" class="aw-button">
                         <span class="aw-sub-body-500">Go to console</span>
diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte
index 865065ae32..bf171e3080 100644
--- a/src/lib/layouts/Main.svelte
+++ b/src/lib/layouts/Main.svelte
@@ -10,6 +10,8 @@
     export const isMobileNavOpen = writable(false);
 
     const initialized = writable(false);
+
+    export let mainGithubStar = writable(0);
 </script>
 
 <script lang="ts">
@@ -22,9 +24,11 @@
     import { addEventListener } from '@melt-ui/svelte/internal/helpers';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
+    import { getGitHubStars } from '$lib/utils/gitFetch';
 
     export let omitMainId = false;
     let theme: 'light' | 'dark' | null = 'dark';
+    let githubStars: number = 0;
 
     function setupThemeObserver() {
         const handleVisibility = () => {
@@ -79,6 +83,11 @@
         return 'dark';
     }
 
+    onMount(async () => {
+        githubStars = await getGitHubStars();
+        mainGithubStar.set(githubStars);
+    });
+
     onMount(() => {
         setTimeout(() => {
             $initialized = true;
@@ -240,7 +249,7 @@
                 >
                     <span aria-hidden="true" class="aw-icon-star" />
                     <span class="text">Star on GitHub</span>
-                    <span class="aw-inline-tag aw-sub-body-400">38.4K</span>
+                    <span class="aw-inline-tag aw-sub-body-400">{`${githubStars.toFixed(1)}K`}</span>
                 </a>
                 <!--                <a href="https://cloud.appwrite.io/register" class="aw-button is-secondary"-->
                 <!--                    >Sign up</a-->
@@ -251,7 +260,7 @@
             </div>
         </div>
     </header>
-    <MobileNav bind:open={$isMobileNavOpen} links={navLinks} />
+    <MobileNav bind:open={$isMobileNavOpen} links={navLinks} githubStars={githubStars} />
 
     <main
         class="aw-main-section"
diff --git a/src/lib/layouts/Sidebar.svelte b/src/lib/layouts/Sidebar.svelte
index 5cf4dd5427..bcd40390df 100644
--- a/src/lib/layouts/Sidebar.svelte
+++ b/src/lib/layouts/Sidebar.svelte
@@ -23,7 +23,7 @@
     import { clickOutside } from '$lib/actions/clickOutside';
 
     import Tooltip from '$lib/components/Tooltip.svelte';
-    import { layoutState, toggleSidenav } from './Docs.svelte';
+    import { layoutState, toggleSidenav, sidebarGithubStars } from './Docs.svelte';
     import SidebarNavButton from './SidebarNavButton.svelte';
 
     export let expandable = false;
@@ -125,7 +125,7 @@
             >
                 <span class="aw-icon-star" aria-hidden="true" />
                 <span class="text">Star on GitHub</span>
-                <span class="aw-inline-tag aw-sub-body-400">38.4K</span>
+                <span class="aw-inline-tag aw-sub-body-400">{$sidebarGithubStars.toFixed(1)}K</span>
             </a>
         </div>
     </div>
diff --git a/src/lib/utils/gitFetch.ts b/src/lib/utils/gitFetch.ts
new file mode 100644
index 0000000000..6a4f976098
--- /dev/null
+++ b/src/lib/utils/gitFetch.ts
@@ -0,0 +1,16 @@
+export async function getGitHubStars(): Promise<number> {
+    const apiUrl = `https://api.github.com/repos/appwrite/appwrite`;
+    try {
+        const response = await fetch(apiUrl);
+        if (response.ok) {
+            const data: { stargazers_count: number } = await response.json();
+            const decimalNumber: number = data.stargazers_count / 1000;
+            return decimalNumber;
+        } else {
+            throw new Error(`Failed to fetch github data: ${response.statusText}`);
+        }
+    } catch (error) {
+        console.error(error);
+        return 0;
+    }
+}
diff --git a/src/routes/community/+page.svelte b/src/routes/community/+page.svelte
index 2e2858f64d..8c543ecb49 100644
--- a/src/routes/community/+page.svelte
+++ b/src/routes/community/+page.svelte
@@ -13,6 +13,7 @@
     import type { ProjectCardProps } from './ProjectCard.svelte';
     import ProjectCard from './ProjectCard.svelte';
     import MetricCard from '$lib/components/MetricCard.svelte';
+    import { mainGithubStar } from '$lib/layouts/Main.svelte';
 
     export let data;
 
@@ -179,7 +180,7 @@
                                 >
                                     <span aria-hidden="true" class="aw-icon-star" />
                                     <span>Star on GitHub</span>
-                                    <span class="aw-inline-tag aw-sub-body-400">38.4K</span>
+                                    <span class="aw-inline-tag aw-sub-body-400">{$mainGithubStar.toFixed(1)}K</span>
                                 </a>
                             </div>
                         </div>