SocialLink
連結彙整頁（link-in-bio）
把社群帳號與作品收在一個網址裡的 link-in-bio 服務。公開頁由 Cloudflare Workers 上的 Hono 直接 SSR 成 HTML，後台是 Angular 21 SPA；資料放 D1、圖片放 R2、點擊統計走 Analytics Engine。草稿與已發布是分離的兩份資料，編輯不會動到線上那一頁。整站跑在 Cloudflare 免費方案。
01 問題
Linktree 這類服務要自訂配色、拿到點擊資料多半得付月費，而且編輯就是直接改線上那一頁，改到一半被人看到也沒辦法。自己做又不想為一個個人頁養一台伺服器。Cloudflare Workers 免費方案每次呼叫只有 10 ms CPU，公開頁不能靠前端框架在瀏覽器裡拼畫面，也不能在 Worker 裡做影像處理。
02 解法
公開頁走 Hono 在 Worker 端 SSR，一次 D1 查詢加字串拼接就把 HTML 送出。主題只序列化成一個 style 區塊裡的 CSS 變數，選擇器與規則留在靜態 CSS 檔；那些檔案走 Static Assets，不計入每日請求額度。編輯永遠只動草稿，按發布才把整包拍成快照寫進 page_versions，前台渲染的是快照而不是現行的表。發布狀態一律看 live_version_id，回退之後「最新版本」就不等於「線上版本」了。圖片縮圖放瀏覽器端 Canvas，上傳到 R2。舊檔要等 D1 交易 commit 成功、而且確認沒有版本快照還在引用它才刪。點擊統計寫 Analytics Engine，不佔 D1 額度，查詢結果用 Cache API 快取一小時。後台認證交給 Cloudflare Access，Worker 端再自己驗一次 JWT。
03 成果
上線於 https://links.zinzan.info。公開頁 grep 不到任何 inline style，內建主題的按鈕與 hover 配色實測全數 AAA。13 個測試檔跑在真的 workerd runtime 上，把版本快照、對比度、fractional index、Access JWT、限流這些不變量釘住。上線後踩到兩個只有正式環境才走得到的路徑：Dashboard 加的 Text 變數被下一次部署清掉，後台全面 404；草稿預覽拿不到 Access 注入的標頭，要改讀 cookie 才修好。兩件都補了測試。
04 功能特色
- ▸ 連結分類與拖曳排序（fractional index，一次只更新一列）
- ▸ 10 組內建主題，也可以自己配色
- ▸ 調配色時當場算對比度，Fail / AA / AAA 標出來
- ▸ 編輯只動草稿，發布才拍成版本快照
- ▸ 版本回退：設回線上，或拉回草稿當起點
- ▸ YouTube / Spotify / Vimeo 嵌入播放
- ▸ 瀏覽與逐條點擊統計、趨勢圖、CSV 匯出
- ▸ QR code：印刷用 SVG、貼文用 PNG