Project Alpha

概述

Project Alpha 是一個使用 Astro 和 TypeScript 打造的全端 Web 應用程式。它展示了現代 Web 開發的最佳實踐，包括內容驅動架構、元件化設計和效能優化。

主要功能

• Content Collections — 使用 Astro 內建內容層的型別安全內容管理
• 設計系統 — 使用 CSS 自訂屬性的自製 Neo-Wire 設計系統
• 效能 — 預設零 JavaScript，僅在需要時漸進增強
• 無障礙 — 語義化 HTML、適當的 ARIA 標籤、鍵盤導航

技術棧

技術	用途
Astro	靜態網站生成
TypeScript	型別安全
CSS Custom Properties	主題切換

架構

專案遵循簡單、可維護的架構：

src/
├── components/    # 可重用的 UI 元件
├── content/       # Markdown 內容集合
├── layouts/       # 頁面佈局
└── pages/         # 路由定義

挑戰

最大的挑戰是設計一個能與 Astro 的 scoped styles 搭配使用、同時維持全域一致性的 CSS 架構。解決方案是混合方式：使用 CSS 自訂屬性來共享值，使用 scoped styles 來處理元件特定的規則。