feat(docs): add Github stars component

Author: codybrom

.vscode/settings.json

@@ -1,18 +1,19 @@
 {
   "gpt-context-generator.detectedFileExtensions": [
-    "js",
-    "jsx",
-    "ts",
-    "tsx",
-    "mdx",
     "json",
     "swift",
     "plist",
     "pbxproj",
     "entitlements",
     "md",
     "yml",
-    "html"
+    "html",
+    "astro",
+    "ts",
+    "mjs",
+    "scss",
+    "CNAME",
+    "Dockerfile"
   ],
   "markdownlint.config": {
     "default": true,

docs/src/components/GithubStars.astro

@@ -0,0 +1,49 @@
+---
+// docs/src/components/GithubStars.astro
+const REPO = "codybrom/blankie";
+
+async function getStarCount() {
+  try {
+    const response = await fetch(`https://api.github.com/repos/${REPO}`);
+    const data = await response.json();
+    return data.stargazers_count;
+  } catch (error) {
+    console.error("Error fetching GitHub stars:", error);
+    return null;
+  }
+}
+
+const stars = await getStarCount();
+---
+
+<a
+  href={`https://github.com/${REPO}`}
+  target="_blank"
+  rel="noopener noreferrer"
+  class="inline-flex items-center text-sm group"
+  title="Star us on GitHub"
+>
+  <span
+    class="inline-flex items-center gap-1.5 px-3 py-1 font-medium bg-[#f6f8fa] border border-[#1b1f2426] rounded-l-md hover:bg-[#f3f4f6] text-[#24292f] dark:bg-[#21262d] dark:border-[#f0f6fc1a] dark:text-[#c9d1d9] dark:hover:bg-[#30363d] transition-colors duration-200"
+  >
+    <svg
+      viewBox="0 0 16 16"
+      width="16"
+      height="16"
+      class="inline-block fill-current"
+      aria-hidden="true"
+    >
+      <path
+        d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"
+      ></path>
+    </svg>
+    <span>Github Stars</span>
+  </span>
+  {
+    stars !== null && (
+      <span class="inline-flex items-center px-3 py-1 font-medium bg-[#f6f8fa] border border-l-0 border-[#1b1f2426] rounded-r-md hover:bg-[#f3f4f6] text-[#24292f] dark:bg-[#21262d] dark:border-[#f0f6fc1a] dark:text-[#c9d1d9] dark:hover:bg-[#30363d] transition-colors duration-200">
+        {new Intl.NumberFormat("en-US").format(stars)}
+      </span>
+    )
+  }
+</a>

docs/src/components/Nav.astro

@@ -1,6 +1,7 @@
 ---
 import { Image } from "astro:assets";
 import icon from "../assets/icon.png";
+import GithubStars from "./GithubStars.astro";
 const currentPath = Astro.url.pathname;
 ---
 
@@ -82,6 +83,7 @@ const currentPath = Astro.url.pathname;
         >
           Credits
         </a>
+        <GithubStars />
         <a
           href="/?section=download"
           class="bg-primary-blue text-white py-2 px-6 rounded-full text-sm font-normal transition-all duration-300 hover:bg-deep-blue no-underline"
@@ -121,6 +123,7 @@ const currentPath = Astro.url.pathname;
         >
           Credits
         </a>
+        <GithubStars />
         <a
           href="/?section=download"
           class="bg-primary-blue text-white py-2 px-6 rounded-full text-sm font-normal transition-all duration-300 hover:bg-deep-blue no-underline inline-block text-center"

docs/src/layouts/Layout.astro

@@ -27,7 +27,7 @@ const description = "Ambient sound mixer for macOS.";
 
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; img-src 'self' data: https:; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';"
+      content="default-src 'self'; img-src 'self' data: https:; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; connect-src 'self' api.github.com;"
     />
 
     <link rel="icon" type="image/x-icon" href={favicon} />