# Posimai Static App Template

新しい静的 PWA アプリを作るときのボイラープレート。

## 使い方

```bash
# 1. テンプレートをコピー
cp -r _template posimai-[new-app-name]
cd posimai-[new-app-name]

# 2. APP_NAME / APP_ID / APP_DESCRIPTION を置換
#    APP_NAME        → 表示名 (例: "Posimai Timer")
#    APP_ID          → 識別子 (例: "posimai-timer")
#    APP_DESCRIPTION → 説明文

# 3. Git 初期化
git init && git add . && git commit -m "init: APP_NAME"

# 4. Gitea にリポジトリを作成（★ Web UI で先に行う）
#    http://100.76.7.3:3000 にアクセス
#    → 「+」→「新しいリポジトリ」→ 名前: APP_ID → 作成
#    ※ この手順を飛ばすと git push gitea が 404 で失敗する

# 5. GitHub にリポジトリ作成（gh CLI）
gh repo create posimai/APP_ID --private

# 6. リモートを追加して初回 push
git remote add gitea http://100.76.7.3:3000/mai/APP_ID.git
git remote add github https://github.com/posimai/APP_ID.git
npm run deploy   # = git push gitea main && git push github main

# 7. Vercel と GitHub を連携（1アプリにつき1回だけ）
#    --yes では対話が消えないため echo パイプで GitHub を選択させる
echo "https://github.com/posimai/APP_ID.git" | vercel git connect

# 8. 初回本番デプロイをトリガー（1回だけ必要）
#    vercel git connect だけでは本番反映されないため、空コミットで push する
git commit --allow-empty -m "ci: trigger initial Vercel deployment"
npm run deploy
#    Vercel ダッシュボードで "Production" デプロイが完了したら以降は不要
#    ※ 通常運用では vercel --prod は実行しない（GitHub push で自動）
```

以降の更新はすべて：
```bash
git add .
git commit -m "feat/fix/chore: 変更内容"
npm run deploy
```

---

## デプロイフロー（全体像）

```
npm run deploy
  │
  ├─► git push gitea main  →  Synology NAS (ローカルバックアップのみ)
  │
  └─► git push github main →  GitHub
                                  │
                                  │ Webhook (push 検知)
                                  ▼
                              Vercel
                              └─ ビルド → 本番反映
```

- **Gitea** はバックアップ専用。Vercel とは無関係。
- **GitHub push** が Vercel の唯一のトリガー。
- `vercel --prod` の直接実行は禁止（初回トリガー用の空コミット push で代替）。

---

## デザイントークン（変更禁止）

| トークン | 値 | 用途 |
|---------|-----|------|
| `--bg` | `#0D0D0D` | ページ背景 |
| `--surface` | `#1A1A1A` | カード背景 |
| `--surface2` | `#252525` | ネスト要素 |
| `--border` | `#2D2D2D` | ボーダー |
| `--text` | `#F3F4F6` | 主テキスト |
| `--text2` | `#9CA3AF` | 副テキスト |
| `--accent` | `#6EE7B7` | アクセント |
| `--radius` | `12px` | 角丸 |