Skip to content

Commit f5fe9b3

Browse files
committed
feat: add AgentFlow official website with demo and docs
- Create complete website with React + Vite + Tailwind CSS - Add bilingual support (Chinese/English) - Implement interactive demo with flow visualization - Add documentation pages with markdown rendering - Add quick start guide with installation commands - Configure GitHub Actions for automatic deployment - Add favicon and responsive design - Optimize UI/UX with glass panels and animations
1 parent f70a409 commit f5fe9b3

40 files changed

Lines changed: 8831 additions & 3 deletions
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
name: Deploy Website to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
paths:
7+
- 'website/**'
8+
- 'docs/**'
9+
- 'builtin/pipelines/**'
10+
- 'logo-*.png'
11+
workflow_dispatch:
12+
13+
permissions:
14+
contents: read
15+
pages: write
16+
id-token: write
17+
18+
concurrency:
19+
group: pages
20+
cancel-in-progress: false
21+
22+
jobs:
23+
build:
24+
runs-on: ubuntu-latest
25+
steps:
26+
- name: Checkout
27+
uses: actions/checkout@v4
28+
with:
29+
fetch-depth: 0
30+
31+
- name: Setup Node
32+
uses: actions/setup-node@v4
33+
with:
34+
node-version: 20
35+
cache: 'npm'
36+
cache-dependency-path: website/package-lock.json
37+
38+
- name: Install dependencies
39+
run: cd website && npm ci
40+
41+
- name: Build website
42+
run: cd website && npm run build
43+
44+
- name: Upload artifact
45+
uses: actions/upload-pages-artifact@v3
46+
with:
47+
path: website/dist
48+
49+
deploy:
50+
environment:
51+
name: github-pages
52+
url: ${{ steps.deployment.outputs.page_url }}
53+
runs-on: ubuntu-latest
54+
needs: build
55+
steps:
56+
- name: Deploy to GitHub Pages
57+
id: deployment
58+
uses: actions/deploy-pages@v4
Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import yaml from 'js-yaml';
2+
import fs from 'fs';
3+
import path from 'path';
4+
import { fileURLToPath } from 'url';
5+
6+
const __filename = fileURLToPath(import.meta.url);
7+
const __dirname = path.dirname(__filename);
8+
9+
const SPACING_X = 320;
10+
const SPACING_Y = 240;
11+
const MIN_GAP = 280;
12+
13+
function calculateNodeSpacing(nodes, edges) {
14+
const graph = {};
15+
16+
nodes.forEach(node => {
17+
graph[node.id] = {
18+
x: node.position.x,
19+
y: node.position.y,
20+
width: 200,
21+
height: 100,
22+
};
23+
});
24+
25+
return graph;
26+
}
27+
28+
function adjustPositions(nodePositions) {
29+
const entries = Object.entries(nodePositions);
30+
31+
if (entries.length === 0) return nodePositions;
32+
33+
const nodes = entries.map(([id, pos]) => ({
34+
id,
35+
x: typeof pos.x === 'number' ? pos.x : parseFloat(pos.x) || 0,
36+
y: typeof pos.y === 'number' ? pos.y : parseFloat(pos.y) || 0,
37+
}));
38+
39+
nodes.sort((a, b) => a.x - b.x || a.y - b.y);
40+
41+
const adjustedNodes = nodes.map((node, index) => {
42+
const col = index % 5;
43+
const row = Math.floor(index / 5);
44+
45+
return {
46+
id: node.id,
47+
x: col * SPACING_X + (row % 2 === 1 ? SPACING_X / 2 : 0),
48+
y: row * SPACING_Y,
49+
};
50+
});
51+
52+
const result = {};
53+
adjustedNodes.forEach(node => {
54+
result[node.id] = {
55+
x: node.x,
56+
y: node.y,
57+
};
58+
});
59+
60+
return result;
61+
}
62+
63+
function processFlowYaml(filePath) {
64+
const content = fs.readFileSync(filePath, 'utf-8');
65+
const flow = yaml.load(content);
66+
67+
if (!flow.ui || !flow.ui.nodePositions) {
68+
console.log(`No node positions found in ${filePath}`);
69+
return;
70+
}
71+
72+
console.log(`\nProcessing: ${filePath}`);
73+
console.log(`Nodes count: ${Object.keys(flow.ui.nodePositions).length}`);
74+
75+
const oldPositions = { ...flow.ui.nodePositions };
76+
flow.ui.nodePositions = adjustPositions(flow.ui.nodePositions);
77+
78+
const backupPath = filePath + '.backup';
79+
fs.writeFileSync(backupPath, content);
80+
console.log(`Backup saved to: ${backupPath}`);
81+
82+
const newContent = yaml.dump(flow, {
83+
indent: 2,
84+
lineWidth: -1,
85+
noRefs: true,
86+
quotingType: '"',
87+
forceQuotes: false,
88+
});
89+
90+
fs.writeFileSync(filePath, newContent);
91+
console.log(`Updated: ${filePath}`);
92+
}
93+
94+
function main() {
95+
const pipelinesDir = path.join(__dirname, '..', '..', 'builtin', 'pipelines');
96+
97+
const flows = [
98+
path.join(pipelinesDir, 'new', 'flow.yaml'),
99+
path.join(pipelinesDir, 'module-migrate', 'flow.yaml'),
100+
];
101+
102+
flows.forEach(flowPath => {
103+
if (fs.existsSync(flowPath)) {
104+
processFlowYaml(flowPath);
105+
} else {
106+
console.log(`File not found: ${flowPath}`);
107+
}
108+
});
109+
110+
console.log('\n✅ Node positions adjusted successfully!');
111+
}
112+
113+
main();

package.json

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@
2525
"license": "MIT",
2626
"repository": {
2727
"type": "git",
28-
"url": "git+https://github.com/bigo-sg/agentflow.git"
28+
"url": "git+https://github.com/pproject-github/agentflow.git"
2929
},
30-
"homepage": "https://github.com/bigo-sg/agentflow#readme",
30+
"homepage": "https://github.com/pproject-github/agentflow#readme",
3131
"bugs": {
32-
"url": "https://github.com/bigo-sg/agentflow/issues"
32+
"url": "https://github.com/pproject-github/agentflow/issues"
3333
},
3434
"publishConfig": {
3535
"access": "public",
@@ -44,6 +44,9 @@
4444
"scripts": {
4545
"postinstall": "node bin/ensure-workspace-reference.mjs",
4646
"build:web-ui": "cd builtin/web-ui && npm install && npm run build",
47+
"build:website": "cd website && npm install && npm run build",
48+
"dev:website": "cd website && npm run dev",
49+
"preview:website": "cd website && npm run preview",
4750
"prepack": "npm run build:web-ui"
4851
},
4952
"dependencies": {

website/.gitignore

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
node_modules/
2+
dist/
3+
*.log
4+
.DS_Store
5+
.env
6+
.env.local
7+
.env.*.local
8+
npm-debug.log*
9+
yarn-debug.log*
10+
yarn-error.log*
11+
.pnpm-debug.log*
12+
13+
# Vite
14+
.vite/
15+
16+
# Build artifacts
17+
dist-ssr
18+
*.local
19+
20+
# Editor directories and files
21+
.vscode/*
22+
!.vscode/extensions.json
23+
.idea
24+
*.suo
25+
*.ntvs*
26+
*.njsproj
27+
*.sln
28+
*.sw?

website/README.md

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
# AgentFlow Website
2+
3+
官方网站和文档站点,部署在 GitHub Pages。
4+
5+
## 快速开始
6+
7+
### 本地开发
8+
9+
```bash
10+
cd website
11+
npm install
12+
npm run dev
13+
```
14+
15+
访问 http://localhost:5174/agentflow/
16+
17+
### 构建
18+
19+
```bash
20+
cd website
21+
npm run build
22+
```
23+
24+
构建产物在 `dist/` 目录。
25+
26+
### 预览构建结果
27+
28+
```bash
29+
cd website
30+
npm run preview
31+
```
32+
33+
## 目录结构
34+
35+
```
36+
website/
37+
├── public/
38+
│ ├── docs/ # Markdown 文档(从 docs/wiki 复制)
39+
│ ├── demo-flow.yaml # Demo Flow 数据
40+
│ └── logo-*.png # Logo 资源
41+
├── src/
42+
│ ├── components/ # React 组件
43+
│ ├── pages/ # 页面组件
44+
│ ├── styles/ # 全局样式
45+
│ ├── i18n.js # 国际化配置
46+
│ ├── main.jsx # 入口文件
47+
│ └── App.jsx # 路由配置
48+
├── index.html
49+
├── vite.config.js
50+
├── tailwind.config.js
51+
└── package.json
52+
```
53+
54+
## 页面说明
55+
56+
### 首页 (/)
57+
- Hero Section:展示核心价值
58+
- Features Section:四大特性卡片
59+
- Demo Preview:交互式演示入口
60+
- CTA Section:引导用户
61+
62+
### 文档页 (/docs)
63+
- 左侧导航:文档目录
64+
- 右侧内容:Markdown 渲染
65+
- 支持中英文切换
66+
67+
### Demo 页 (/demo)
68+
- 只读 Flow 查看器
69+
- 模拟运行功能
70+
- 节点状态动画
71+
72+
## 部署
73+
74+
### GitHub Actions 自动部署
75+
76+
推送到 `main` 分支时自动触发部署:
77+
78+
```yaml
79+
.github/workflows/deploy-website.yml
80+
```
81+
82+
触发条件:
83+
- `website/` 目录变更
84+
- `docs/` 目录变更
85+
- `builtin/pipelines/` 变更
86+
- Logo 文件更新
87+
88+
部署地址:https://pproject-github.github.io/agentflow/
89+
90+
### 手动部署
91+
92+
```bash
93+
# 在 GitHub Actions 页面点击 "Run workflow"
94+
```
95+
96+
## 技术栈
97+
98+
- React 18 + Vite 5
99+
- React Router 6
100+
- Tailwind CSS 3.4
101+
- @xyflow/react 12(Flow 可视化)
102+
- react-markdown + remark-gfm(Markdown 渲染)
103+
- i18next(国际化)
104+
105+
## 设计系统
106+
107+
继承 AgentFlow UI 的设计规范:
108+
109+
### 颜色
110+
- Primary: `#d0bcff`
111+
- Surface: `#0b1326`
112+
- Container: `#171f33` ~ `#2d3449`
113+
114+
### 字体
115+
- Headline: Space Grotesk
116+
- Body: Inter
117+
- Mono: JetBrains Mono(代码)
118+
119+
### 组件
120+
- Glass Panel:半透明玻璃效果
121+
- Card Solid:实色卡片
122+
- Badge:技术标签
123+
- Button:渐变主按钮 / Ghost 按钮
124+
125+
## 国际化
126+
127+
支持语言:
128+
- English (en)
129+
- Chinese (zh)
130+
131+
切换方式:
132+
- 导航栏右侧语言切换按钮
133+
- 自动检测浏览器语言
134+
135+
## 注意事项
136+
137+
### 文档更新
138+
139+
文档从 `docs/wiki/` 复制到 `public/docs/`,需要手动同步:
140+
141+
```bash
142+
cp -r docs/wiki/* website/public/docs/
143+
```
144+
145+
或修改 GitHub Actions 在构建前自动复制。
146+
147+
### Demo Flow 更新
148+
149+
演示 Flow 使用 `builtin/pipelines/new/flow.yaml`
150+
151+
```bash
152+
cp builtin/pipelines/new/flow.yaml website/public/demo-flow.yaml
153+
```
154+
155+
### 构建配置
156+
157+
Vite 配置 `base: '/agentflow/'` 确保资源路径正确。
158+
159+
## 许可证
160+
161+
MIT
162+
163+
## GitHub
164+
165+
仓库地址:https://github.com/pproject-github/agentflow

0 commit comments

Comments
 (0)