Stitchモックzipを展開しNetlifyデプロイ可能な構造に変換する
Stitchで生成したモックのzipファイルを展開し、Netlifyにそのままアップロードできるディレクトリ構造に変換する。
/stitch-deploy [zipファイルパス] [出力先ディレクトリ(省略時: zipと同階層の mock/)]
stitch/
├── p_001/
│ ├── code.html ← ページのHTML
│ └── screen.png ← スクリーンショット
├── p_002/
│ ├── code.html
│ └── screen.png
├── p_032_csv/ ← サフィックス付きもある
│ ├── code.html
│ └── screen.png
└── stitch_precision_blue/
└── DESIGN.md ← デザインシステム文書(そのまま配置)
mock/
├── index.html ← ナビゲーション付きトップページ(自動生成)
├── login/
│ ├── index.html ← code.html をリネーム
│ └── screen.png
├── attendance-list/
│ ├── index.html
│ └── screen.png
├── ...
└── stitch_precision_blue/
└── DESIGN.md
stitch*.zip を探す各 p_XXX/ ディレクトリについて:
code.html から以下の順でページ名を推定:
<title> タグのテキスト(「- Stitch Time」「| Stitch Time」「Stitch Time -」等のアプリ名部分を除去)<h1> タグのテキスト(アプリ名のみの場合はスキップ)<h2> タグのテキストp_032_csv → csv)全ページのマッピング表をユーザーに提示し、出力先ディレクトリも含めて確認を取る。
提示形式:
番号 | Stitchディレクトリ | 推定ページ名 | 変換先ディレクトリ
-----|-------------------|-------------|------------------
1 | p_001 | ログイン | login
2 | p_002 | 打刻実行 | stamp
...
code.html → index.html にリネームして配置screen.png をそのまま配置stitch_precision_blue/ などの非ページディレクトリはそのまま配置index.html を生成(全ページへのナビゲーションリンク付き)ルートの index.html はシンプルなナビゲーションページ:
<h1> やデザインシステムから取得)をタイトルにtree を表示netlify deploy --dir=mock/ でデプロイできます」と案内code.html の中身は一切変更しない(リネームのみ)