65 lines
2.4 KiB
Markdown
65 lines
2.4 KiB
Markdown
|
# Posimai Minimal App Template
|
|||
|
|
|
|||
|
|
シンプルなツール系 PWA アプリ用のボイラープレート。
|
|||
|
|
サイドバーなし・i18n なし・Magic Link なし。ヘッダー + メインコンテンツのみ。
|
|||
|
|
|
|||
|
|
## _template vs _template-minimal の使い分け
|
|||
|
|
|
|||
|
|
| テンプレート | 向いているアプリ |
|
|||
|
|
|------------|----------------|
|
|||
|
|
| `_template/` | 複数ビュー・i18n・Magic Link・設定パネルが必要なアプリ（brain, daily, together 等） |
|
|||
|
|
| `_template-minimal/` | 単機能ツール（diff, clean, timer, lens, ambient 等） |
|
|||
|
|
|
|||
|
|
## 使い方
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 1. テンプレートをコピー
|
|||
|
|
cp -r _template-minimal posimai-[new-app-name]
|
|||
|
|
cd posimai-[new-app-name]
|
|||
|
|
|
|||
|
|
# 2. APP_NAME / APP_ID / APP_DESCRIPTION を置換
|
|||
|
|
# APP_NAME → 表示名 (例: "Posimai Memo")
|
|||
|
|
# APP_ID → 識別子 (例: "posimai-memo")
|
|||
|
|
# APP_DESCRIPTION → 説明文
|
|||
|
|
|
|||
|
|
# 3. 以降は _template/README.md の Step 3〜8 と同じ手順
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
または `create-app.sh` を使う（`--minimal` フラグはまだない。手動コピーで対応）:
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# create-app.sh は _template/ を使う。
|
|||
|
|
# minimal を使いたい場合は先に手動コピーしてから Git セットアップだけ行う:
|
|||
|
|
cd posimai-[new-app-name]
|
|||
|
|
git init -b main && git add . && git commit -m "init: APP_NAME"
|
|||
|
|
gh repo create posimai/APP_ID --private
|
|||
|
|
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
|
|||
|
|
echo "https://github.com/posimai/APP_ID.git" | vercel git connect
|
|||
|
|
git commit --allow-empty -m "ci: trigger initial Vercel deployment"
|
|||
|
|
npm run deploy
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 実装ガイド
|
|||
|
|
|
|||
|
|
`index.html` の中の以下のコメント箇所を編集するだけ：
|
|||
|
|
|
|||
|
|
1. `<!-- ── APP-SPECIFIC HTML ──` → コンテンツ HTML
|
|||
|
|
2. `/* ── APP-SPECIFIC STYLES ──` → CSS
|
|||
|
|
3. `// ── APP-SPECIFIC JS ──` → JavaScript ロジック
|
|||
|
|
4. ヘッダーアイコン（`header-dot`）をアプリに合わせたものに変更可
|
|||
|
|
|
|||
|
|
## デザイントークン（変更禁止）
|
|||
|
|
|
|||
|
|
| トークン | 値 | 用途 |
|
|||
|
|
|---------|-----|------|
|
|||
|
|
| `--bg` | `#0D0D0D` | ページ背景 |
|
|||
|
|
| `--surface` | `#1A1A1A` | カード背景 |
|
|||
|
|
| `--surface2` | `#252525` | ネスト要素 |
|
|||
|
|
| `--border` | `#2D2D2D` | ボーダー |
|
|||
|
|
| `--text` | `#F3F4F6` | 主テキスト |
|
|||
|
|
| `--text2` | `#9CA3AF` | 副テキスト |
|
|||
|
|
| `--accent` | `#6EE7B7` | アクセント |
|
|||
|
|
| `--radius` | `12px` | 角丸 |
|