mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-02 19:49:58 +00:00
feat(branch-reports)!: feat(branch-reports): migrate docs/pages to .pages and update CI for Git\n\n- Remove and replace CI workflow for deploying GitHub Pages: deleted .github/workflows/deploy-gh-pages.yml; added .github/workflows/release-pages.yml to deploy to GitHub Pages and Vercel.\n- Reorganize docs assets: move docs/pages to .pages, renaming index.html, knip.html, and Vite config to .pages, and updating README accordingly.\n- Update Knip configuration to include new .pages path and adjust excludes.\n- Update build tooling and scripts to target the new .pages folder: add pages:dev and pages:build scripts, and adjust scripts/build-pages.sh to output to .pages.\n- Update package.json and TS/Vitest configs: include .pages in tsconfig; adjust vitest coverage settings to output under .vitest; add required reporters.\n- Remove legacy docs/pages ignores and tsconfig pointing at docs/pages; replace with .pages equivalents.\n- Note breaking changes: All generated docs/pages outputs are now under .pages. Existing paths, and GitHub Actions workflows expecting docs/pages are replaced by new .pages structure and the release-pages workflow.\n- New Knip HTML wrapper is now placed at .pages/knip.html.
This commit is contained in:
snomiao
14
docs/pages/.gitignore
vendored
14
docs/pages/.gitignore
vendored
@@ -1,14 +0,0 @@
|
||||
*
|
||||
!/.gitignore
|
||||
!/README.md
|
||||
!/index.html
|
||||
!/knip/
|
||||
!/knip/index.html
|
||||
knip/report.md
|
||||
!/vite.config.ts
|
||||
!/tsconfig.json
|
||||
/storybook/
|
||||
/nx-graph/
|
||||
/coverage/
|
||||
/vitest-ui/
|
||||
/playwright-reports/
|
||||
@@ -1,160 +0,0 @@
|
||||
# GitHub Pages Deployment
|
||||
|
||||
This document describes the GitHub Pages deployment setup for ComfyUI Frontend development tools.
|
||||
|
||||
## Overview
|
||||
|
||||
The project automatically deploys the following development tools to GitHub Pages on every merge to the `main` branch:
|
||||
|
||||
- **Storybook** - Interactive component library and design system documentation
|
||||
- **Nx Dependency Graph** - Visual representation of project dependencies
|
||||
- **Test Coverage Reports** - Code coverage from Vitest unit tests
|
||||
- **Vitest Results** - Interactive test results and reports
|
||||
- **Knip Report** - Unused code and dependency analysis
|
||||
|
||||
## Accessing the Tools
|
||||
|
||||
Once deployed, all tools are accessible from a single landing page at:
|
||||
```
|
||||
https://comfy-org.github.io/ComfyUI_frontend/
|
||||
```
|
||||
|
||||
## Primary Use Case: Storybook for Design Team
|
||||
|
||||
The primary motivation for this deployment is to provide the design team with a consistent, bookmarkable URL to reference the latest component system state. Instead of sharing PR-specific Storybook builds, the design team can always access the latest approved components from the main branch.
|
||||
|
||||
## Deployment Workflow
|
||||
|
||||
The deployment is managed by the `.github/workflows/deploy-gh-pages.yml` workflow, which:
|
||||
|
||||
1. **Triggers on**:
|
||||
- Push to `main` branch
|
||||
- Manual workflow dispatch
|
||||
|
||||
2. **Build Process**:
|
||||
- Installs dependencies with pnpm
|
||||
- Runs `scripts/build-pages.sh` to generate Storybook, Nx dependency graph, Vitest reports, coverage, and Knip analysis
|
||||
- Creates a landing page with links to all tools
|
||||
|
||||
3. **Deployment**:
|
||||
- Uses GitHub Pages deploy action
|
||||
- Deploys to `gh-pages` branch
|
||||
- Available at the GitHub Pages URL
|
||||
|
||||
## Workflow Details
|
||||
|
||||
### Build Steps
|
||||
|
||||
The build script handles optional tooling gracefully—if an individual tool fails to build, the remainder of the deployment still proceeds and the failure is logged as a warning.
|
||||
|
||||
#### Storybook (Required)
|
||||
```bash
|
||||
pnpm build-storybook --output-dir dist/storybook
|
||||
```
|
||||
|
||||
#### Nx Graph (Optional)
|
||||
```bash
|
||||
pnpm nx graph --file=dist/nx-graph/index.html
|
||||
```
|
||||
|
||||
#### Test Coverage (Optional)
|
||||
```bash
|
||||
pnpm exec vitest --run --coverage --coverage.reporter=html
|
||||
```
|
||||
|
||||
#### Vitest Results (Optional)
|
||||
```bash
|
||||
pnpm exec vitest --run --reporter=html --outputFile dist/vitest-ui/index.html
|
||||
```
|
||||
|
||||
#### Knip Report (Optional)
|
||||
```bash
|
||||
pnpm knip --reporter json
|
||||
```
|
||||
|
||||
### Permissions
|
||||
|
||||
The workflow requires the following permissions:
|
||||
```yaml
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
```
|
||||
|
||||
## Manual Deployment
|
||||
|
||||
You can manually trigger a deployment from the GitHub Actions tab:
|
||||
|
||||
1. Go to Actions → Deploy to GitHub Pages
|
||||
2. Click "Run workflow"
|
||||
3. Select the `main` branch
|
||||
4. Click "Run workflow"
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Storybook Build Fails
|
||||
|
||||
If the Storybook build fails:
|
||||
1. Check that all Storybook stories are syntactically correct
|
||||
2. Verify that all components can be imported
|
||||
3. Run `pnpm build-storybook` locally to reproduce the issue
|
||||
|
||||
### Other Tools Fail
|
||||
|
||||
Since all tools except Storybook are marked with `continue-on-error: true`, they will not prevent deployment. If a tool consistently fails:
|
||||
|
||||
1. Check the GitHub Actions logs for the specific error
|
||||
2. Test the build command locally
|
||||
3. Consider adjusting the build command in the workflow
|
||||
|
||||
### GitHub Pages Not Updating
|
||||
|
||||
If changes aren't reflected on the live site:
|
||||
|
||||
1. Check the workflow run in the Actions tab
|
||||
2. Verify that the deployment step succeeded
|
||||
3. GitHub Pages can take a few minutes to update
|
||||
4. Clear your browser cache or try an incognito window
|
||||
|
||||
## Maintenance
|
||||
|
||||
### Adding New Tools
|
||||
|
||||
To add a new development tool to the deployment:
|
||||
|
||||
1. Add a new build step in `.github/workflows/deploy-gh-pages.yml`
|
||||
2. Ensure the output goes to a subdirectory of `dist/`
|
||||
3. Add `continue-on-error: true` if the tool is optional
|
||||
4. Update the landing page `dist/index.html` with a link to the new tool
|
||||
|
||||
### Removing Tools
|
||||
|
||||
To remove a tool from deployment:
|
||||
|
||||
1. Remove the build step from the workflow
|
||||
2. Remove the corresponding link from the landing page
|
||||
|
||||
## Cost Considerations
|
||||
|
||||
GitHub Pages is free for public repositories and includes:
|
||||
- 1 GB storage
|
||||
- 100 GB bandwidth per month
|
||||
- 10 builds per hour
|
||||
|
||||
This should be more than sufficient for the development tools deployment.
|
||||
|
||||
## Security
|
||||
|
||||
The deployment only includes static, built artifacts:
|
||||
- No source code is directly exposed
|
||||
- No secrets or credentials are included
|
||||
- All content is publicly accessible (appropriate for public repo)
|
||||
|
||||
## Related Documentation
|
||||
|
||||
- [GitHub Pages Documentation](https://docs.github.com/en/pages)
|
||||
- [Storybook Documentation](https://storybook.js.org/docs)
|
||||
- [Nx Documentation](https://nx.dev)
|
||||
- [Vitest Documentation](https://vitest.dev)
|
||||
- [Knip Documentation](https://knip.dev)
|
||||
@@ -1,215 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ComfyUI Frontend - Development Tools</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
/* bg: gray + white lines net */
|
||||
background: #909090;
|
||||
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 2px, transparent 2px), radial-gradient(circle, rgba(255, 255, 255, 0.05) 2px, transparent 2px);
|
||||
background-position: 0 0, 25px 25px;
|
||||
background-size: 50px 50px;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
.header {
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.header p {
|
||||
font-size: 1.125rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
p,h1,h2,h3,h4,h5,h6 {
|
||||
transform: matrix(1, 0, -0.25, 1, 0, 0);
|
||||
}
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.card-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #1a202c;
|
||||
}
|
||||
.card-description {
|
||||
color: #718096;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.card-status {
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.status-available {
|
||||
background: #c6f6d5;
|
||||
color: #22543d;
|
||||
}
|
||||
.status-loading {
|
||||
background: #e9d8fd;
|
||||
color: #44337a;
|
||||
}
|
||||
.status-unavailable {
|
||||
background: #fed7d7;
|
||||
color: #742a2a;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-top: 3rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.footer a {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>🎨 ComfyUI Frontend</h1>
|
||||
<p>Development Tools & Documentation</p>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<a href="./storybook/index.html" class="card" data-status="storybook" data-fetch="./storybook/index.html">
|
||||
<div class="card-icon">📚</div>
|
||||
<h2 class="card-title">Storybook</h2>
|
||||
<p class="card-description">Interactive component library and design system documentation</p>
|
||||
<span class="card-status status-loading" data-status-indicator>Checking…</span>
|
||||
</a>
|
||||
|
||||
<a href="./nx-graph/index.html" class="card" data-status="nx-graph" data-fetch="./nx-graph/index.html">
|
||||
<div class="card-icon">🔗</div>
|
||||
<h2 class="card-title">Nx Dependency Graph</h2>
|
||||
<p class="card-description">Visual representation of project dependencies and build structure</p>
|
||||
<span class="card-status status-loading" data-status-indicator>Checking…</span>
|
||||
</a>
|
||||
|
||||
<a href="./coverage/index.html" class="card" data-status="coverage" data-fetch="./coverage/index.html">
|
||||
<div class="card-icon">📊</div>
|
||||
<h2 class="card-title">Test Coverage</h2>
|
||||
<p class="card-description">Code coverage reports from Vitest unit tests</p>
|
||||
<span class="card-status status-loading" data-status-indicator>Checking…</span>
|
||||
</a>
|
||||
|
||||
<a href="./playwright-reports/index.html" class="card" data-status="playwright" data-fetch="./playwright-reports/index.html">
|
||||
<div class="card-icon">🎭</div>
|
||||
<h2 class="card-title">Playwright E2E</h2>
|
||||
<p class="card-description">Browser end-to-end test reports generated by Playwright</p>
|
||||
<span class="card-status status-loading" data-status-indicator>Checking…</span>
|
||||
</a>
|
||||
|
||||
<a href="./vitest-ui/index.html" class="card" data-status="vitest-ui" data-fetch="./vitest-ui/index.html">
|
||||
<div class="card-icon">🧪</div>
|
||||
<h2 class="card-title">Vitest Results</h2>
|
||||
<p class="card-description">Interactive test results and reports</p>
|
||||
<span class="card-status status-loading" data-status-indicator>Checking…</span>
|
||||
</a>
|
||||
|
||||
<a href="./knip/index.html" class="card" data-status="knip" data-fetch="./knip/report.md">
|
||||
<div class="card-icon">🔍</div>
|
||||
<h2 class="card-title">Knip Report</h2>
|
||||
<p class="card-description">Unused code and dependency analysis</p>
|
||||
<span class="card-status status-loading" data-status-indicator>Checking…</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>
|
||||
Built from the <strong>main</strong> branch •
|
||||
<a href="https://github.com/Comfy-Org/ComfyUI_frontend" target="_blank">GitHub Repository</a> •
|
||||
<a href="https://docs.comfy.org" target="_blank">Official Documentation</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const cards = Array.from(document.querySelectorAll('.card[data-status]'))
|
||||
|
||||
const setStatus = (card, variant, text) => {
|
||||
const indicator = card.querySelector('[data-status-indicator]')
|
||||
if (!indicator) return
|
||||
indicator.classList.remove('status-loading', 'status-available', 'status-unavailable')
|
||||
indicator.classList.add(`status-${variant}`)
|
||||
indicator.textContent = text
|
||||
}
|
||||
|
||||
const absoluteUrl = (href) => new URL(href, window.location.href).toString()
|
||||
|
||||
const controller = new AbortController()
|
||||
const timeout = setTimeout(() => controller.abort(), 10000)
|
||||
|
||||
cards.forEach((card) => {
|
||||
const href = card.dataset.fetch || card.getAttribute('href')
|
||||
if (!href) {
|
||||
setStatus(card, 'unavailable', 'No link configured')
|
||||
return
|
||||
}
|
||||
|
||||
fetch(absoluteUrl(href), { cache: 'no-store', signal: controller.signal })
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
setStatus(card, 'available', 'Available')
|
||||
} else {
|
||||
setStatus(card, 'unavailable', `Unavailable (${response.status})`)
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
const reason = error.name === 'AbortError' ? 'Timed out' : 'Unavailable'
|
||||
setStatus(card, 'unavailable', reason)
|
||||
})
|
||||
})
|
||||
|
||||
window.addEventListener('beforeunload', () => {
|
||||
clearTimeout(timeout)
|
||||
controller.abort()
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,9 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"composite": false
|
||||
},
|
||||
"include": [
|
||||
"./vite.config.ts"
|
||||
]
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
import fs from 'node:fs'
|
||||
import { resolve } from 'node:path'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
const rootDir = __dirname
|
||||
const outDir = resolve(rootDir, '../pages-dist')
|
||||
|
||||
const discoverHtmlEntries = () => {
|
||||
const entries = new Map<string, string>()
|
||||
const topLevel = resolve(rootDir, 'index.html')
|
||||
if (fs.existsSync(topLevel)) entries.set('index', topLevel)
|
||||
|
||||
for (const dirent of fs.readdirSync(rootDir, { withFileTypes: true })) {
|
||||
if (!dirent.isDirectory() || dirent.name.startsWith('.')) continue
|
||||
const candidate = resolve(rootDir, dirent.name, 'index.html')
|
||||
if (fs.existsSync(candidate)) entries.set(dirent.name, candidate)
|
||||
}
|
||||
|
||||
return entries.size > 0 ? Object.fromEntries(entries) : undefined
|
||||
}
|
||||
|
||||
export default defineConfig({
|
||||
root: rootDir,
|
||||
base: '/ComfyUI_frontend',
|
||||
appType: 'mpa',
|
||||
logLevel: 'info',
|
||||
publicDir: false,
|
||||
server: {
|
||||
open: '/index.html',
|
||||
fs: {
|
||||
allow: [rootDir],
|
||||
strict: false
|
||||
}
|
||||
},
|
||||
preview: {
|
||||
open: '/index.html'
|
||||
},
|
||||
build: {
|
||||
emptyOutDir: false,
|
||||
outDir,
|
||||
copyPublicDir: false,
|
||||
rollupOptions: {
|
||||
input: discoverHtmlEntries()
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user