Fix styling, update deps

Author: spetz

docusaurus.config.ts

@@ -10,15 +10,13 @@ async function getGitHubStars(): Promise<string> {
     return stars >= 1000 ? `${(stars / 1000).toFixed(1)}K` : stars.toString();
   } catch (error) {
     console.error("Failed to fetch GitHub stars:", error);
-    return "3.1K";
+    return "3.2K";
   }
 }
 
 export default async function createConfig(): Promise<Config> {
   const githubStars = await getGitHubStars();
 
-  // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
-
   const config: Config = {
     title: "Hyper-Efficient Message Streaming at Laser Speed.",
     tagline:
@@ -132,9 +130,9 @@ export default async function createConfig(): Promise<Config> {
             position: "left",
           },
           {
-            href: "https://github.com/apache/iggy",
-            label: `GitHub ⭐ ${githubStars}`,
+            type: "html",
             position: "right",
+            value: `<a href="https://github.com/apache/iggy" target="_blank" rel="noopener noreferrer" class="navbar__link">GitHub ⭐ <span id="github-stars">${githubStars}</span></a>`,
           },
           {
             type: "dropdown",

package-lock.json

@@ -0,0 +1,22 @@
+import React, { useEffect, useState } from 'react';
+
+export default function GitHubStars(): JSX.Element {
+  const [stars, setStars] = useState('3.2K'); // fallback
+
+  useEffect(() => {
+    fetch('https://api.github.com/repos/apache/iggy')
+      .then(res => res.json())
+      .then(data => {
+        const count = data.stargazers_count;
+        const formatted = count >= 1000
+          ? `${(count / 1000).toFixed(1)}K`
+          : count.toString();
+        setStars(formatted);
+      })
+      .catch(() => {
+        // Keep fallback value on error
+      });
+  }, []);
+
+  return <>{stars}</>;
+}