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` | 角丸 |
|