feat: Convert GithubFeed to Astro component

Replaces the React component with an Astro component for better
server-side rendering and performance.

Author: dsnsgithub

src/components/GithubFeed.astro

@@ -0,0 +1,40 @@
+---
+export const prerender = false;
+import type { DisplayEvent } from "../pages/api/github";
+
+const response = await fetch(new URL("/api/github", Astro.url));
+const events: DisplayEvent[] = await response.json();
+---
+
+<div class="flex flex-col space-y-3">
+  {events.map((item) => (
+    <div class="group mx-2 rounded-xl bg-viola-50 p-4 transition-transform hover:scale-[1.01] sm:mx-4 sm:p-5">
+      <a href={item.url} target="_blank" rel="noopener noreferrer" class="flex items-start space-x-3 sm:space-x-4">
+        <img 
+          src={item.actor.avatar_url} 
+          alt={item.actor.login} 
+          class="h-8 w-8 shrink-0 rounded-full border-2 border-white shadow-sm sm:h-10 sm:w-10 bg-viola-100" 
+        />
+
+        <div class="min-w-0 flex-1">
+          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+            <p class="text-sm font-bold text-gray-900">
+              {item.actor.login}
+              <span class="mx-0.5 font-normal text-gray-500"> {item.verb} </span>
+              <span class="text-viola-700">{item.object}</span>
+            </p>
+            <span class="mt-1 text-[10px] text-gray-400 sm:mt-0 sm:text-xs">{item.timestamp}</span>
+          </div>
+
+          {item.description && (
+            <div class="mt-2" style="mask-image: linear-gradient(to bottom, black 70%, transparent); -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent);">
+              <p class="line-clamp-3 whitespace-pre-wrap text-xs text-gray-600">{item.description}</p>
+            </div>
+          )}
+
+          <p class="mt-2 truncate text-[10px] font-semibold tracking-wide text-viola-700/80 sm:text-[11px]">{item.repo}</p>
+        </div>
+      </a>
+    </div>
+  ))}
+</div>

src/components/GithubFeed.tsx

@@ -5,7 +5,7 @@ import scheduliIcon from "../assets/schedule.svg";
 import betterHudIcon from "../assets/betterhud.png";
 import { Icon } from "astro-icon/components";
 import DiscordStatus from "../components/DiscordStatus.tsx";
-import GithubFeed from "../components/GithubFeed.tsx";
+import GithubFeed from "../components/GithubFeed.astro";
 ---
 
 <Layout title="dsns.dev" description="Check out what I do, and explore some of my projects.">
@@ -68,7 +68,7 @@ import GithubFeed from "../components/GithubFeed.tsx";
 
 		<div class="m-2 rounded-lg bg-viola-100 p-6 shadow-lg lg:p-8">
 			<h2 class="mb-6 text-2xl font-bold">GitHub Feed</h2>
-			<GithubFeed client:idle />
+			<GithubFeed />
 		</div>
 	</div>
 </Layout>