shipfolio 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +330 -0
- package/bin/cli.js +2 -0
- package/dist/cli.js +2027 -0
- package/dist/cli.js.map +1 -0
- package/dist/lib/orchestrator/detect.js +33 -0
- package/dist/lib/orchestrator/detect.js.map +1 -0
- package/dist/lib/orchestrator/prompt-builder.js +59 -0
- package/dist/lib/orchestrator/prompt-builder.js.map +1 -0
- package/dist/lib/orchestrator/validator.js +68 -0
- package/dist/lib/orchestrator/validator.js.map +1 -0
- package/dist/lib/scanner/git.js +86 -0
- package/dist/lib/scanner/git.js.map +1 -0
- package/dist/lib/scanner/index.js +457 -0
- package/dist/lib/scanner/index.js.map +1 -0
- package/dist/lib/spec/builder.js +21 -0
- package/dist/lib/spec/builder.js.map +1 -0
- package/dist/lib/spec/diff.js +42 -0
- package/dist/lib/spec/diff.js.map +1 -0
- package/package.json +49 -0
- package/prompts/fresh-build.md +108 -0
- package/prompts/update.md +46 -0
package/README.md
ADDED
|
@@ -0,0 +1,330 @@
|
|
|
1
|
+
# shipfolio
|
|
2
|
+
|
|
3
|
+
[English](#english) | [中文](#中文)
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
<a id="english"></a>
|
|
8
|
+
|
|
9
|
+
## What is shipfolio?
|
|
10
|
+
|
|
11
|
+
A CLI tool that turns your local projects into a personal portfolio website. It scans your git repositories, uses your local AI tools (Claude Code, Codex, or v0) to generate a production-ready site, and deploys it to Cloudflare Pages or Vercel -- all in one command.
|
|
12
|
+
|
|
13
|
+
Built for developers who ship fast and need a way to showcase their work without spending hours on a portfolio.
|
|
14
|
+
|
|
15
|
+
## Quick Start
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npx shipfolio --scan ~/Projects
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
That's it. The tool walks you through everything interactively.
|
|
22
|
+
|
|
23
|
+
## Prerequisites
|
|
24
|
+
|
|
25
|
+
- Node.js >= 18
|
|
26
|
+
- At least one AI engine installed locally:
|
|
27
|
+
|
|
28
|
+
| Engine | Install | Notes |
|
|
29
|
+
|---|---|---|
|
|
30
|
+
| Claude Code | `npm install -g @anthropic-ai/claude-code` | Recommended. Best overall generation quality. |
|
|
31
|
+
| Codex | `npm install -g @openai/codex` | Alternative. |
|
|
32
|
+
| v0 | Set `V0_API_KEY` env var | Best UI design quality. Requires paid v0 plan. Get your key at [v0.dev](https://v0.dev). |
|
|
33
|
+
|
|
34
|
+
## Usage
|
|
35
|
+
|
|
36
|
+
### 1. Generate a New Site
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
# Interactive mode (recommended for first use)
|
|
40
|
+
npx shipfolio --scan ~/Projects
|
|
41
|
+
|
|
42
|
+
# Specify options upfront
|
|
43
|
+
npx shipfolio --scan ~/Projects --engine claude --deploy cloudflare --style dark-minimal
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
The tool will:
|
|
47
|
+
1. Scan your directories for git repositories
|
|
48
|
+
2. Ask you to select which projects to include
|
|
49
|
+
3. Collect your personal info and design preferences
|
|
50
|
+
4. Generate the site using your local AI
|
|
51
|
+
5. Build and preview locally
|
|
52
|
+
6. Export a PDF version
|
|
53
|
+
7. Deploy to your chosen platform
|
|
54
|
+
|
|
55
|
+
Output directory: `./shipfolio-site/` (override with `--output <dir>`)
|
|
56
|
+
|
|
57
|
+
### 2. Update an Existing Site
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
npx shipfolio update --site ./shipfolio-site --scan ~/Projects
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Detects new/changed/removed projects and applies incremental updates. Preserves your existing design, layout, and any custom modifications.
|
|
64
|
+
|
|
65
|
+
### 3. Generate Spec Only (for Use Inside AI Sessions)
|
|
66
|
+
|
|
67
|
+
If you're already inside a Claude Code or Codex session:
|
|
68
|
+
|
|
69
|
+
```bash
|
|
70
|
+
npx shipfolio spec --scan ~/Projects --output ./
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Outputs `shipfolio-spec.json` and `shipfolio-prompt.md`. Feed the prompt to your current AI session to generate the site directly.
|
|
74
|
+
|
|
75
|
+
### 4. Deploy an Existing Site
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
npx shipfolio deploy --site ./shipfolio-site --platform cloudflare
|
|
79
|
+
npx shipfolio deploy --site ./shipfolio-site --platform vercel
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### 5. Export PDF
|
|
83
|
+
|
|
84
|
+
```bash
|
|
85
|
+
npx shipfolio pdf --site ./shipfolio-site
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Requires Playwright browsers: `npx playwright install chromium`
|
|
89
|
+
|
|
90
|
+
### 6. Preview Locally
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
npx shipfolio preview --site ./shipfolio-site
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## All Commands
|
|
97
|
+
|
|
98
|
+
| Command | Description |
|
|
99
|
+
|---|---|
|
|
100
|
+
| `shipfolio` / `shipfolio init` | Generate a new portfolio site (interactive) |
|
|
101
|
+
| `shipfolio update --site <path>` | Update an existing site with new projects |
|
|
102
|
+
| `shipfolio spec --output <dir>` | Generate spec + prompt files only |
|
|
103
|
+
| `shipfolio deploy --site <path>` | Deploy a built site |
|
|
104
|
+
| `shipfolio pdf --site <path>` | Export site to PDF |
|
|
105
|
+
| `shipfolio preview --site <path>` | Start local preview server |
|
|
106
|
+
|
|
107
|
+
## All Flags
|
|
108
|
+
|
|
109
|
+
| Flag | Values | Default |
|
|
110
|
+
|---|---|---|
|
|
111
|
+
| `--scan <dir>` | Any directory path (repeatable) | Current directory |
|
|
112
|
+
| `--engine <name>` | `claude` / `codex` / `v0` | Auto-detect |
|
|
113
|
+
| `--deploy <platform>` | `cloudflare` / `vercel` / `local` | Prompted |
|
|
114
|
+
| `--style <theme>` | `dark-minimal` / `light-clean` / `monochrome` | Prompted |
|
|
115
|
+
| `--accent <hex>` | Hex color, e.g. `#7c3aed` | Prompted |
|
|
116
|
+
| `--output <dir>` | Output directory path | `./shipfolio-site` |
|
|
117
|
+
| `--auto` | Skip all prompts, use defaults | `false` |
|
|
118
|
+
| `--no-pdf` | Skip PDF export | `false` |
|
|
119
|
+
| `--no-preview` | Skip local preview | `false` |
|
|
120
|
+
|
|
121
|
+
## Generated Site
|
|
122
|
+
|
|
123
|
+
The output is a standard Next.js 15 project:
|
|
124
|
+
|
|
125
|
+
- Next.js 15 (App Router) with static export
|
|
126
|
+
- Tailwind CSS v4
|
|
127
|
+
- shadcn/ui components
|
|
128
|
+
- TypeScript
|
|
129
|
+
- Responsive (desktop + tablet + mobile)
|
|
130
|
+
- Print-optimized CSS for PDF export
|
|
131
|
+
|
|
132
|
+
Build output is a static `out/` directory deployable anywhere.
|
|
133
|
+
|
|
134
|
+
## Deployment
|
|
135
|
+
|
|
136
|
+
### Cloudflare Pages
|
|
137
|
+
|
|
138
|
+
The tool runs `wrangler pages deploy` under the hood. On first run it opens a browser for authentication. Your site gets a `<project-name>.pages.dev` URL.
|
|
139
|
+
|
|
140
|
+
Free tier: unlimited sites, 500 builds/month, unlimited bandwidth.
|
|
141
|
+
|
|
142
|
+
### Vercel
|
|
143
|
+
|
|
144
|
+
The tool runs `vercel deploy --prod`. On first run it opens a browser for authentication. Your site gets a `<project-name>.vercel.app` URL.
|
|
145
|
+
|
|
146
|
+
### GitHub Auto-Deploy
|
|
147
|
+
|
|
148
|
+
After initial deployment, the tool optionally sets up a GitHub repo. Connect it to Cloudflare Pages or Vercel for push-to-deploy.
|
|
149
|
+
|
|
150
|
+
## Project Structure
|
|
151
|
+
|
|
152
|
+
```
|
|
153
|
+
shipfolio/
|
|
154
|
+
src/
|
|
155
|
+
scanner/ -- Git repo detection, tech stack extraction
|
|
156
|
+
interviewer/ -- Interactive CLI prompts
|
|
157
|
+
spec/ -- Spec builder, diff computation
|
|
158
|
+
orchestrator/ -- AI engine dispatch (Claude/Codex/v0)
|
|
159
|
+
deployer/ -- Cloudflare Pages, Vercel, GitHub
|
|
160
|
+
pdf/ -- Playwright PDF export
|
|
161
|
+
commands/ -- CLI command handlers
|
|
162
|
+
utils/ -- Logger, exec, fs helpers
|
|
163
|
+
prompts/ -- AI prompt templates
|
|
164
|
+
bin/ -- CLI entry point
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
## Links
|
|
168
|
+
|
|
169
|
+
- GitHub: [github.com/Octo-o-o-o/shipfolio](https://github.com/Octo-o-o-o/shipfolio)
|
|
170
|
+
- npm: `npx shipfolio`
|
|
171
|
+
- Issues: [github.com/Octo-o-o-o/shipfolio/issues](https://github.com/Octo-o-o-o/shipfolio/issues)
|
|
172
|
+
|
|
173
|
+
## License
|
|
174
|
+
|
|
175
|
+
MIT
|
|
176
|
+
|
|
177
|
+
---
|
|
178
|
+
|
|
179
|
+
<a id="中文"></a>
|
|
180
|
+
|
|
181
|
+
## shipfolio 是什么?
|
|
182
|
+
|
|
183
|
+
一个 CLI 工具,将你本地的项目转化为个人作品集网站。它扫描你的 git 仓库,使用你本地的 AI 工具(Claude Code、Codex 或 v0)生成生产级网站,并一键部署到 Cloudflare Pages 或 Vercel。
|
|
184
|
+
|
|
185
|
+
为快速交付项目但没时间做作品集的开发者而建。
|
|
186
|
+
|
|
187
|
+
## 快速开始
|
|
188
|
+
|
|
189
|
+
```bash
|
|
190
|
+
npx shipfolio --scan ~/Projects
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
工具会以交互方式引导你完成所有步骤。
|
|
194
|
+
|
|
195
|
+
## 前置条件
|
|
196
|
+
|
|
197
|
+
- Node.js >= 18
|
|
198
|
+
- 至少安装一个 AI 引擎:
|
|
199
|
+
|
|
200
|
+
| 引擎 | 安装方式 | 说明 |
|
|
201
|
+
|---|---|---|
|
|
202
|
+
| Claude Code | `npm install -g @anthropic-ai/claude-code` | 推荐。综合生成质量最佳。 |
|
|
203
|
+
| Codex | `npm install -g @openai/codex` | 备选。 |
|
|
204
|
+
| v0 | 设置 `V0_API_KEY` 环境变量 | UI 设计质量最佳。需要 v0 付费订阅。在 [v0.dev](https://v0.dev) 获取 API key。 |
|
|
205
|
+
|
|
206
|
+
## 使用方法
|
|
207
|
+
|
|
208
|
+
### 1. 生成新网站
|
|
209
|
+
|
|
210
|
+
```bash
|
|
211
|
+
# 交互模式(首次使用推荐)
|
|
212
|
+
npx shipfolio --scan ~/Projects
|
|
213
|
+
|
|
214
|
+
# 预设参数
|
|
215
|
+
npx shipfolio --scan ~/Projects --engine claude --deploy cloudflare --style dark-minimal
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
工具流程:
|
|
219
|
+
1. 扫描指定目录中的 git 仓库
|
|
220
|
+
2. 让你选择要展示的项目
|
|
221
|
+
3. 收集个人信息和设计偏好
|
|
222
|
+
4. 调用本地 AI 生成网站
|
|
223
|
+
5. 本地构建并预览
|
|
224
|
+
6. 导出 PDF 版本
|
|
225
|
+
7. 部署到选定平台
|
|
226
|
+
|
|
227
|
+
输出目录: `./shipfolio-site/`(可通过 `--output <dir>` 修改)
|
|
228
|
+
|
|
229
|
+
### 2. 更新已有网站
|
|
230
|
+
|
|
231
|
+
```bash
|
|
232
|
+
npx shipfolio update --site ./shipfolio-site --scan ~/Projects
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
检测新增/变更/移除的项目,增量更新。保留现有设计、布局和所有自定义修改。
|
|
236
|
+
|
|
237
|
+
### 3. 仅生成 Spec(在 AI 会话中使用)
|
|
238
|
+
|
|
239
|
+
如果你已经在 Claude Code 或 Codex 会话中:
|
|
240
|
+
|
|
241
|
+
```bash
|
|
242
|
+
npx shipfolio spec --scan ~/Projects --output ./
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
输出 `shipfolio-spec.json` 和 `shipfolio-prompt.md`。将 prompt 输入当前 AI 会话即可直接生成网站。
|
|
246
|
+
|
|
247
|
+
### 4. 部署已有网站
|
|
248
|
+
|
|
249
|
+
```bash
|
|
250
|
+
npx shipfolio deploy --site ./shipfolio-site --platform cloudflare
|
|
251
|
+
npx shipfolio deploy --site ./shipfolio-site --platform vercel
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
### 5. 导出 PDF
|
|
255
|
+
|
|
256
|
+
```bash
|
|
257
|
+
npx shipfolio pdf --site ./shipfolio-site
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
需要 Playwright 浏览器: `npx playwright install chromium`
|
|
261
|
+
|
|
262
|
+
### 6. 本地预览
|
|
263
|
+
|
|
264
|
+
```bash
|
|
265
|
+
npx shipfolio preview --site ./shipfolio-site
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
## 所有命令
|
|
269
|
+
|
|
270
|
+
| 命令 | 说明 |
|
|
271
|
+
|---|---|
|
|
272
|
+
| `shipfolio` / `shipfolio init` | 生成新的作品集网站(交互式) |
|
|
273
|
+
| `shipfolio update --site <path>` | 用新项目更新已有网站 |
|
|
274
|
+
| `shipfolio spec --output <dir>` | 仅生成 spec + prompt 文件 |
|
|
275
|
+
| `shipfolio deploy --site <path>` | 部署已构建的网站 |
|
|
276
|
+
| `shipfolio pdf --site <path>` | 将网站导出为 PDF |
|
|
277
|
+
| `shipfolio preview --site <path>` | 启动本地预览服务器 |
|
|
278
|
+
|
|
279
|
+
## 所有参数
|
|
280
|
+
|
|
281
|
+
| 参数 | 可选值 | 默认值 |
|
|
282
|
+
|---|---|---|
|
|
283
|
+
| `--scan <dir>` | 任意目录路径(可重复) | 当前目录 |
|
|
284
|
+
| `--engine <name>` | `claude` / `codex` / `v0` | 自动检测 |
|
|
285
|
+
| `--deploy <platform>` | `cloudflare` / `vercel` / `local` | 交互选择 |
|
|
286
|
+
| `--style <theme>` | `dark-minimal` / `light-clean` / `monochrome` | 交互选择 |
|
|
287
|
+
| `--accent <hex>` | Hex 颜色值,如 `#7c3aed` | 交互选择 |
|
|
288
|
+
| `--output <dir>` | 输出目录路径 | `./shipfolio-site` |
|
|
289
|
+
| `--auto` | 跳过所有提示,使用默认值 | `false` |
|
|
290
|
+
| `--no-pdf` | 跳过 PDF 导出 | `false` |
|
|
291
|
+
| `--no-preview` | 跳过本地预览 | `false` |
|
|
292
|
+
|
|
293
|
+
## 生成的网站
|
|
294
|
+
|
|
295
|
+
输出是标准的 Next.js 15 项目:
|
|
296
|
+
|
|
297
|
+
- Next.js 15 (App Router) 静态导出
|
|
298
|
+
- Tailwind CSS v4
|
|
299
|
+
- shadcn/ui 组件
|
|
300
|
+
- TypeScript
|
|
301
|
+
- 响应式设计(桌面端 + 平板 + 移动端)
|
|
302
|
+
- 针对 PDF 导出优化的打印样式
|
|
303
|
+
|
|
304
|
+
构建输出为纯静态的 `out/` 目录,可部署到任何静态托管平台。
|
|
305
|
+
|
|
306
|
+
## 部署说明
|
|
307
|
+
|
|
308
|
+
### Cloudflare Pages
|
|
309
|
+
|
|
310
|
+
工具内部调用 `wrangler pages deploy`。首次运行会打开浏览器进行认证。网站获得 `<项目名>.pages.dev` 域名。
|
|
311
|
+
|
|
312
|
+
免费额度: 无限站点,500 次构建/月,无限带宽。
|
|
313
|
+
|
|
314
|
+
### Vercel
|
|
315
|
+
|
|
316
|
+
工具内部调用 `vercel deploy --prod`。首次运行会打开浏览器进行认证。网站获得 `<项目名>.vercel.app` 域名。
|
|
317
|
+
|
|
318
|
+
### GitHub 自动部署
|
|
319
|
+
|
|
320
|
+
初始部署后,工具可选择性地创建 GitHub 仓库。将仓库连接到 Cloudflare Pages 或 Vercel 即可实现 push 自动部署。
|
|
321
|
+
|
|
322
|
+
## 相关链接
|
|
323
|
+
|
|
324
|
+
- GitHub: [github.com/Octo-o-o-o/shipfolio](https://github.com/Octo-o-o-o/shipfolio)
|
|
325
|
+
- npm: `npx shipfolio`
|
|
326
|
+
- 问题反馈: [github.com/Octo-o-o-o/shipfolio/issues](https://github.com/Octo-o-o-o/shipfolio/issues)
|
|
327
|
+
|
|
328
|
+
## 许可证
|
|
329
|
+
|
|
330
|
+
MIT
|
package/bin/cli.js
ADDED