chore: reorganize project into monorepo

frontend/src/components/FriendLinkCard.astro

@@ -0,0 +1,70 @@
+---
+import type { FriendLink } from '../lib/types';
+
+interface Props {
+  friend: FriendLink;
+}
+
+const { friend } = Astro.props;
+---
+
+<a 
+  href={friend.url}
+  target="_blank"
+  rel="noopener noreferrer"
+  class="terminal-panel group flex h-full items-start gap-4 p-4 transition-all duration-300 hover:-translate-y-1 hover:border-[var(--primary)]"
+>
+  <div class="shrink-0">
+    {friend.avatar ? (
+      <div class="relative w-12 h-12">
+        <img 
+          src={friend.avatar} 
+          alt={friend.name}
+          class="w-12 h-12 rounded-2xl object-cover border border-[var(--border-color)] bg-[var(--code-bg)]"
+          loading="lazy"
+          decoding="async"
+          onerror="this.style.display='none'; this.parentElement?.querySelector('[data-avatar-fallback]')?.classList.remove('hidden');"
+        />
+        <div
+          data-avatar-fallback
+          class="hidden w-12 h-12 rounded-2xl bg-[var(--code-bg)] border border-[var(--border-color)] items-center justify-center text-sm font-bold text-[var(--primary)]"
+        >
+          {friend.name.charAt(0).toUpperCase()}
+        </div>
+      </div>
+    ) : (
+      <div class="w-12 h-12 rounded-2xl bg-[var(--code-bg)] border border-[var(--border-color)] flex items-center justify-center text-sm font-bold text-[var(--primary)]">
+        {friend.name.charAt(0).toUpperCase()}
+      </div>
+    )}
+  </div>
+
+  <div class="flex-1 min-w-0">
+    <div class="flex items-center gap-2 mb-2">
+      <h4 class="font-bold text-[var(--title-color)] group-hover:text-[var(--primary)] transition-colors truncate text-base">
+        {friend.name}
+      </h4>
+      <i class="fas fa-external-link-alt text-xs text-[var(--text-tertiary)] opacity-0 group-hover:opacity-100 transition-opacity"></i>
+    </div>
+
+    {friend.description && (
+      <p class="text-sm text-[var(--text-secondary)] line-clamp-2 leading-6">{friend.description}</p>
+    )}
+
+    <div class="mt-3 flex items-center justify-between gap-3">
+      {friend.category ? (
+        <span class="terminal-chip text-xs py-1 px-2.5">
+          <i class="fas fa-folder text-[10px]"></i>
+          <span>{friend.category}</span>
+        </span>
+      ) : (
+        <span class="text-xs text-[var(--text-tertiary)] font-mono">external link</span>
+      )}
+
+      <span class="terminal-link-arrow">
+        <span>访问</span>
+        <i class="fas fa-arrow-up-right-from-square text-xs"></i>
+      </span>
+    </div>
+  </div>
+</a>