feat: add GitHub projects page

Co-authored-by: Cursor <cursoragent@cursor.com>

.env.local.example

@@ -33,3 +33,9 @@ NEXT_PUBLIC_TWITTER_CARD_TYPE="summary_large_image"
 
 # Analytics (public ID only)
 NEXT_PUBLIC_ANALYTICS_ID=""
+
+# Server-side only (NOT exposed to browser)
+# Used to fetch GitHub repositories for the /projects page.
+# Copy these into your local `.env.local` and fill in real values.
+GITHUB_USERNAME="your-github-username"
+GITHUB_TOKEN="your-github-token"

app/projects/page.tsx

@@ -0,0 +1,77 @@
+import Link from 'next/link';
+import { fetchPublicRepos } from '@/lib/github';
+import { SidebarLayout } from '@/components/sidebar-layout';
+
+export const revalidate = 3600;
+
+export const metadata = {
+  title: 'GitHub 專案',
+};
+
+export default async function ProjectsPage() {
+  const repos = await fetchPublicRepos();
+
+  return (
+    <section className="space-y-4">
+      <SidebarLayout>
+        <header className="space-y-1">
+          <h1 className="type-title font-semibold text-slate-900 dark:text-slate-50">
+            GitHub 專案
+          </h1>
+          <p className="type-small text-slate-500 dark:text-slate-400">
+            從我的 GitHub 帳號自動抓取公開的程式庫與專案。
+          </p>
+        </header>
+
+        {repos.length === 0 ? (
+          <p className="mt-4 type-small text-slate-500 dark:text-slate-400">
+            目前沒有可顯示的 GitHub 專案，或暫時無法連線到 GitHub。
+          </p>
+        ) : (
+          <ul className="mt-4 grid gap-4 sm:grid-cols-2">
+            {repos.map((repo) => (
+              <li
+                key={repo.id}
+                className="flex h-full flex-col rounded-lg border border-slate-200 bg-white p-4 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md dark:border-slate-800 dark:bg-slate-900"
+              >
+                <div className="flex items-start justify-between gap-2">
+                  <Link
+                    href={repo.htmlUrl}
+                    prefetch={false}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="type-base font-semibold text-slate-900 transition-colors hover:text-accent dark:text-slate-50"
+                  >
+                    {repo.name}
+                  </Link>
+                  {repo.stargazersCount > 0 && (
+                    <span className="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
+                      ★ {repo.stargazersCount}
+                    </span>
+                  )}
+                </div>
+
+                {repo.description && (
+                  <p className="mt-2 flex-1 type-small text-slate-600 dark:text-slate-300">
+                    {repo.description}
+                  </p>
+                )}
+
+                <div className="mt-3 flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
+                  <span>{repo.language ?? '其他'}</span>
+                  <span suppressHydrationWarning>
+                    更新於{' '}
+                    {repo.updatedAt
+                      ? new Date(repo.updatedAt).toLocaleDateString('zh-TW')
+                      : '未知'}
+                  </span>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </SidebarLayout>
+    </section>
+  );
+}
+

components/site-header.tsx

@@ -57,6 +57,7 @@ export function SiteHeader() {
 
   const navItems: NavLinkItem[] = [
     { key: 'home', href: '/', label: '首頁', iconKey: 'home' },
+    { key: 'projects', href: '/projects', label: '作品', iconKey: 'pen' },
     {
       key: 'about',
       href: aboutChildren[0]?.href,

lib/github.ts

@@ -0,0 +1,74 @@
+export type RepoSummary = {
+  id: number;
+  name: string;
+  fullName: string;
+  htmlUrl: string;
+  description: string | null;
+  language: string | null;
+  stargazersCount: number;
+  updatedAt: string;
+};
+
+const GITHUB_API_BASE = 'https://api.github.com';
+
+function getGithubHeaders() {
+  const headers: Record<string, string> = {
+    Accept: 'application/vnd.github+json',
+    'User-Agent': 'blog-nextjs-app',
+  };
+
+  const token = process.env.GITHUB_TOKEN;
+  if (token && token.trim() !== '') {
+    headers.Authorization = `Bearer ${token}`;
+  }
+
+  return headers;
+}
+
+/**
+ * Fetch all public repositories for the configured GitHub user.
+ * Returns an empty array on error instead of throwing, so the UI
+ * can render a graceful fallback.
+ */
+export async function fetchPublicRepos(usernameOverride?: string): Promise<RepoSummary[]> {
+  const username = usernameOverride || process.env.GITHUB_USERNAME;
+
+  if (!username) {
+    console.error('GITHUB_USERNAME is not set; cannot fetch GitHub repositories.');
+    return [];
+  }
+
+  const url = `${GITHUB_API_BASE}/users/${encodeURIComponent(
+    username
+  )}/repos?type=public&sort=updated`;
+
+  try {
+    const res = await fetch(url, {
+      headers: getGithubHeaders(),
+      // Use Next.js App Router caching / ISR
+      next: { revalidate: 3600 },
+    });
+
+    if (!res.ok) {
+      console.error('Failed to fetch GitHub repositories:', res.status, res.statusText);
+      return [];
+    }
+
+    const data = (await res.json()) as any[];
+
+    return data.map((repo) => ({
+      id: repo.id,
+      name: repo.name,
+      fullName: repo.full_name,
+      htmlUrl: repo.html_url,
+      description: repo.description,
+      language: repo.language,
+      stargazersCount: repo.stargazers_count,
+      updatedAt: repo.updated_at,
+    }));
+  } catch (error) {
+    console.error('Error while fetching GitHub repositories:', error);
+    return [];
+  }
+}
+