作品集 ·
Site Project 展示系統
自架的作品展示站：前台以卡片牆與標籤篩選公開陳列專案，後台登入後維護內容、上傳封面、一鍵上下架，還能用 JSON 批次匯入。
背景與動機
想把做過的作品收攏到一個自己掌控的站台，而不是散在各個 README 與連結裡。於是做了這套展示系統：前台只顯示已發布的專案，後台登入後維護一切；資料與上傳檔都放在本機，一台有持久磁碟的機器就能跑。
做了什麼
- 前台：卡片牆、多選標籤篩選與專案詳情頁；詳情頁的長文以 Markdown 撰寫，側欄列出連結、標籤與目錄，並推薦同標籤的相關專案。
- 後台：新增、編輯、刪除專案，拖放上傳封面或直接填外部圖片網址，設定排序權重，在列表上一鍵上下架；ADMIN 另可管理帳號。
- JSON 批次匯入：貼上或上傳檔案後先預覽每一筆會新增還是更新，確認後才寫入；可選擇依 slug 更新既有專案、把 GitHub 上的截圖下載成本機封面。
- Claude Code skill：讀一個 repo 或專案目錄，自動整理出匯入檔。
技術組成
Next.js 16 App Router 搭配 SQLite 與 Prisma 7。認證自行實作：jose 簽 JWT、argon2 雜湊密碼、httpOnly cookie。UI 建立在自有的 Broadsheet 設計系統上，沒有 Tailwind，圖示用 Phosphor。單元測試用 Vitest，端到端測試用 Playwright 跑正式建置，部署走 Docker Compose。
花心思的地方
- 授權分四層：從 proxy 純導流、layout 查資料庫確認帳號狀態、每個 Server Action 各自再檢查一次，到 Prisma 查詢一律夾帶擁有者條件，讓編輯者只碰得到自己的專案；
tokenVersion讓停用帳號與改密碼能立即讓既有登入失效。 - 上傳安全：圖片以 magic bytes 判斷格式並拒絕 SVG；讀寫都走獨立的 Route Handler，避開正式模式只在啟動時掃一次 public 目錄的限制。
- 登入保護：次數限制放在密碼雜湊之前檢查，並同時綁定 email 與 IP。