[refactor] migrate feasible app page components from Client to Server for SEO

.github/workflows/deploy.yml

@@ -3,7 +3,7 @@ name: Deploy to Vercel
 on:
   push:
     branches:
-      - "**"
+      - '**'
 
 permissions:
   contents: write
@@ -18,43 +18,17 @@ jobs:
       - uses: actions/checkout@v6
         if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
 
-      - uses: oven-sh/setup-bun@v2
-        if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
-
       - name: Deploy to Vercel
         id: vercel-deployment
         if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
-        shell: bash
-        run: |
-          set -euo pipefail
-
-          bun install vercel -g
-
-          if [[ "$GITHUB_REF" == 'refs/heads/main' ]]; then
-            DeployOutput=$(vercel -t "$VERCEL_TOKEN" --prod)
-          else
-            DeployOutput=$(vercel -t "$VERCEL_TOKEN")
-          fi
-          echo "$DeployOutput"
-
-          ParsedURL=$(echo "$DeployOutput" | grep -Eo 'https://[^[:space:]]*\.vercel\.app' | tail -n 1)
-
-          if [[ -z "$ParsedURL" ]]; then
-            echo "Failed to parse Vercel URL from deploy output"
-            exit 1
-          fi
-          vercel inspect "$ParsedURL" -t "$VERCEL_TOKEN" -F json > vercel-inspect.json
-
-          InspectURL=$(jq -r '.url // empty' vercel-inspect.json)
-
-          if [[ -z "$InspectURL" ]]; then
-            echo "Failed to parse inspect url from vercel-inspect.json"
-            exit 1
-          fi
-          if [[ "$InspectURL" != http* ]]; then
-            InspectURL="https://$InspectURL"
-          fi
-          echo "preview-url=$InspectURL" >> "$GITHUB_OUTPUT"
+        uses: amondnet/vercel-action@v42.3.0
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+          working-directory: ./
+          vercel-args: ${{ github.ref == 'refs/heads/main' && ' --prod' || '' }}
 
       - name: Lark notification
         uses: Open-Source-Bazaar/feishu-action@v3

.gitignore

@@ -80,3 +80,6 @@ __pycache__/
 
 # Secret environment files (local overrides)
 .env*.local
+
+# Shadcn UI components
+components/ui/*

.npmrc

@@ -0,0 +1 @@
+auto-install-peers = false

app/activities/[id]/page.tsx

@@ -1,15 +1,3 @@
-import { ChinaMapWrapper } from '@/components/ChinaMapWrapper';
-import { CommentBox } from '@/components/CommentBox';
-import { TimelineItem } from '@/components/TimelineItem';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import {
-  ACTIVITIES_API_URL,
-  ExternalDeadlineItem,
-  transformItem,
-} from '@/lib/activities';
-import { formatTimezoneToUTC } from '@/lib/utils';
 import {
   ArrowLeft,
   Calendar,
@@ -23,15 +11,21 @@ import { DateTime } from 'luxon';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 
+import { loadSSRI18nFromRequest } from '@/i18n/server';
+import { ChinaMapWrapper } from '@/components/ChinaMapWrapper';
+import { CommentBox } from '@/components/CommentBox';
+import { TimelineItem } from '@/components/TimelineItem';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { fetchActivitiesCatalog, transformItem } from '@/lib/activities';
+import { formatTimezoneToUTC } from '@/lib/utils';
+
 const DATA_EDIT_URL =
   'https://github.com/GoodAction-Hub/GoodAction-data/edit/main/data/activities.yml';
 
 async function findActivity(id: string) {
-  const res = await fetch(ACTIVITIES_API_URL, { cache: 'force-cache' });
-
-  if (!res.ok) throw new URIError(`Failed to fetch activities: ${res.status}`);
-
-  const externalData = (await res.json()) as ExternalDeadlineItem[];
+  const externalData = await fetchActivitiesCatalog();
 
   for (const raw of externalData) {
     const item = transformItem(raw);
@@ -47,6 +41,8 @@ export default async function EventDetailPage({
   params: Promise<{ id: string }>;
 }) {
   const { id } = await params;
+  const { t } = await loadSSRI18nFromRequest();
+
   const found = await findActivity(id);
   if (!found) notFound();
 
@@ -89,12 +85,13 @@ export default async function EventDetailPage({
           <Link href="/activities">
             <Button variant="outline" size="sm" className="gap-2">
               <ArrowLeft className="w-4 h-4" />
-              返回列表
+              {t('activities_detail_text_back_to_list')}
             </Button>
           </Link>
           <a href={DATA_EDIT_URL} target="_blank" rel="noopener noreferrer">
             <Button variant="outline" size="sm" className="gap-2">
-              <Pencil className="w-4 h-4" />在 GitHub 上编辑
+              <Pencil className="w-4 h-4" />
+              {t('activities_detail_text_edit_on_github')}
             </Button>
           </a>
         </div>
@@ -109,17 +106,17 @@ export default async function EventDetailPage({
                   className={`inline-flex px-4 py-2 rounded-xl text-sm font-bold shadow-lg ${categoryStyle}`}
                 >
                   {item.category === 'conference'
-                    ? '会议'
+                    ? t('activities_detail_text_category_conference')
                     : item.category === 'competition'
-                      ? '竞赛'
-                      : '活动'}
+                      ? t('activities_detail_text_category_competition')
+                      : t('activities_detail_text_category_activity')}
                 </div>
                 <Badge variant="outline" className="text-xs">
                   {event.year}
                 </Badge>
                 {ended && (
                   <Badge variant="secondary" className="text-xs">
-                    已结束
+                    {t('activities_detail_text_ended')}
                   </Badge>
                 )}
               </div>
@@ -178,7 +175,7 @@ export default async function EventDetailPage({
             <div className="space-y-2">
               <div className="flex items-center gap-2 text-sm font-medium">
                 <Clock className="w-4 h-4" />
-                时间轴
+                {t('activities_detail_text_timeline')}
               </div>
               <div className="relative bg-gray-50 rounded-lg border h-16 flex items-center">
                 <div className="absolute left-[10%] right-[10%] h-0.5 bg-gray-300 top-1/2 -translate-y-1/2" />
@@ -207,7 +204,7 @@ export default async function EventDetailPage({
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-lg">
                 <MapPin className="w-5 h-5" />
-                活动地点
+                {t('activities_detail_text_location')}
               </CardTitle>
             </CardHeader>
             <CardContent>
@@ -225,7 +222,7 @@ export default async function EventDetailPage({
           <CardHeader>
             <CardTitle className="flex items-center gap-2 text-lg">
               <MessageSquare className="w-5 h-5" />
-              评论
+              {t('activities_detail_text_comments')}
             </CardTitle>
           </CardHeader>
           <CardContent>