⚙️ Refactor GitHub star count feature and update layout components

src/components/githubLink.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  import { cn } from "@/utils/cn";
+  import { globals } from "@/globals";
+  import { buttonVariants } from "@/components/ui/button";
+  import Github from "@/components/logos/github.svelte";
+
+  async function getGithubStarCount() {
+    try {
+      const res = await fetch(globals.apiGithub.url);
+      const data = await res.json();
+      return data.repo?.stars ?? globals.apiGithub.fallback;
+    } catch (error) {
+      console.error(error);
+      return globals.apiGithub.fallback;
+    }
+  }
+
+  let stars = $state(globals.apiGithub.fallback);
+
+  onMount(async () => {
+    stars = await getGithubStarCount();
+  });
+</script>
+
+<a
+  target="_blank"
+  title="GitHub Repository"
+  href={globals.githubUrl}
+  class={cn(
+    buttonVariants({ variant: "ghost" }),
+    "w-fit hover:bg-neutral-200 dark:hover:bg-neutral-800",
+  )}
+>
+  <Github size={20} />
+  <span class="text-neutral-600 dark:text-neutral-400">
+    {stars >= 1000 ? `${(stars / 1000).toFixed(1)}k` : stars.toLocaleString()}
+  </span>
+</a>

src/components/layout/header.svelte

@@ -5,7 +5,6 @@
   import ModeToggle from "@/components/modeToggle.svelte";
 
   import Svgl from "@/components/logos/svgl.svelte";
-  import Github from "@/components/logos/github.svelte";
   import Twitter from "@/components/logos/twitter.svelte";
 
   import { Separator } from "@/components/ui/separator";
@@ -13,13 +12,8 @@
   import SvglVersion from "@/components/svglVersion.svelte";
   import SendIcon from "@/components/ui/moving-icons/send-icon.svelte";
   import SidebarMobileMenu from "@/components/layout/sidebarMobileMenu.svelte";
-  import SettingsMenu from "../settings/settingsMenu.svelte";
-
-  interface HeaderProps {
-    githubStars?: number;
-  }
-
-  let { githubStars }: HeaderProps = $props();
+  import SettingsMenu from "@/components/settings/settingsMenu.svelte";
+  import GithubLink from "@/components/githubLink.svelte";
 </script>
 
 <header
@@ -60,36 +54,7 @@
       </div>
       <div class="hidden h-5 items-center space-x-2 md:flex">
         <Separator orientation="vertical" />
-        {#if githubStars !== undefined}
-          <a
-            target="_blank"
-            title="GitHub Repository"
-            href={globals.githubUrl}
-            class={cn(
-              buttonVariants({ variant: "ghost" }),
-              "w-fit hover:bg-neutral-200 dark:hover:bg-neutral-800",
-            )}
-          >
-            <Github size={20} />
-            <span class="text-neutral-600 dark:text-neutral-400">
-              {githubStars >= 1000
-                ? `${(githubStars / 1000).toFixed(1)}k`
-                : githubStars.toLocaleString()}
-            </span>
-          </a>
-        {:else}
-          <a
-            target="_blank"
-            title="GitHub Repository"
-            href={globals.githubUrl}
-            class={cn(
-              buttonVariants({ variant: "ghost", size: "icon" }),
-              "hover:bg-neutral-200 dark:hover:bg-neutral-800",
-            )}
-          >
-            <Github size={20} />
-          </a>
-        {/if}
+        <GithubLink />
         <Separator orientation="vertical" />
         <a
           target="_blank"

src/globals.ts

@@ -1,6 +1,9 @@
 export const globals = {
   githubUrl: "https://github.com/pheralb/svgl",
-  apiGithubUrl: "https://api.github.com/repos/pheralb/svgl",
+  apiGithub: {
+    url: "https://ungh.cc/repos/pheralb/svgl",
+    fallback: 5000,
+  },
   twitterUrl: "https://x.com/pheralb_",
   submitUrl:
     "https://github.com/pheralb/svgl?tab=readme-ov-file#-getting-started",

src/routes/+layout.server.ts

@@ -1,25 +0,0 @@
-import type { LayoutServerLoad } from "./$types";
-import { globals } from "@/globals";
-
-export const load: LayoutServerLoad = async ({ fetch, setHeaders }) => {
-  try {
-    const response = await fetch(globals.apiGithubUrl);
-
-    const data = await response.json();
-
-    // 1 day cache:
-    setHeaders({
-      "cache-control": "public, max-age=86400",
-    });
-
-    return {
-      stars: data.stargazers_count,
-    };
-  } catch (error) {
-    console.error("Error fetching GitHub data:", error);
-    return {
-      stars: null,
-      error: "Failed to fetch repository data",
-    };
-  }
-};

src/routes/+layout.svelte

@@ -12,13 +12,12 @@
   import Sidebar from "@/components/layout/sidebar.svelte";
   import Sonner from "@/components/ui/sonner/sonner.svelte";
 
-  // SSR Data:
-  let { data, children }: LayoutProps = $props();
+  let { children }: LayoutProps = $props();
 </script>
 
 <ModeWatcher />
 <Sonner />
-<Header githubStars={data?.stars} />
+<Header />
 <Sidebar>
   {@render children?.()}
 </Sidebar>