Feat: added github star from github api

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>

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;
@@ -41,10 +43,17 @@
     import Search from '$lib/components/Search.svelte';
 
     import { isMac } from '$lib/utils/platform';
-    import { getContext, setContext } from 'svelte';
+    import { onMount, getContext, 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',
@@ -169,7 +178,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>

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"

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>

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;
+    }
+}

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>