chore: refresh docs pages publishing flow

.github/workflows/deploy-gh-pages.yml

@@ -4,11 +4,15 @@ permissions:
   contents: read
   pages: write
   id-token: write
+  actions: read
 
 on:
-  push:
-    branches:
-      - main
+  # Trigger after successful CI workflows complete
+  workflow_run:
+    workflows: ["Storybook and Chromatic CI", "Vitest Tests", "Tests CI"]
+    types: [completed]
+    branches: [main]
+  # Keep manual trigger for debugging
   workflow_dispatch:
 
 concurrency:
@@ -18,9 +22,11 @@ concurrency:
 jobs:
   build:
     runs-on: ubuntu-latest
+    # Only run if the triggering workflow succeeded (or manual dispatch)
+    if: github.event_name == 'workflow_dispatch' || github.event.workflow_run.conclusion == 'success'
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -28,7 +34,7 @@ jobs:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
           node-version: '24'
           cache: 'pnpm'
@@ -36,194 +42,77 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Build Storybook
-        run: pnpm build-storybook --output-dir dist/storybook
-
-      - name: Build Nx Graph
-        run: |
-          mkdir -p dist/nx-graph
-          pnpm nx graph --file=dist/nx-graph/index.html || echo "Nx graph generation skipped"
+      - name: Download Storybook artifact from latest CI run
         continue-on-error: true
-
-      - name: Build Vitest UI
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
-          mkdir -p dist/vitest-ui
-          pnpm test:unit --run --reporter=html --reporter=json --outputFile.html=dist/vitest-ui/index.html --outputFile.json=dist/vitest-ui/results.json || echo "Vitest UI generation skipped"
+          echo "🔍 Downloading latest Storybook artifact..."
+
+          # Get latest successful Storybook workflow run
+          LATEST_RUN=$(gh api "repos/${{ github.repository }}/actions/workflows" \
+            --jq '.workflows[] | select(.name == "Storybook and Chromatic CI") | .id' | head -1)
+
+          if [ -n "$LATEST_RUN" ]; then
+            RUN_ID=$(gh api "repos/${{ github.repository }}/actions/workflows/$LATEST_RUN/runs?status=success&branch=main" \
+              --jq '.workflow_runs[0].id' 2>/dev/null || echo "")
+
+            if [ -n "$RUN_ID" ] && [ "$RUN_ID" != "null" ]; then
+              # Download storybook-static artifact
+              ARTIFACT_ID=$(gh api "repos/${{ github.repository }}/actions/runs/$RUN_ID/artifacts" \
+                --jq '.artifacts[] | select(.name == "storybook-static") | .id' | head -1)
+
+              if [ -n "$ARTIFACT_ID" ]; then
+                gh api "repos/${{ github.repository }}/actions/artifacts/$ARTIFACT_ID/zip" > storybook-static.zip
+                unzip -q storybook-static.zip -d ./storybook-static
+                echo "✅ Downloaded and extracted Storybook artifact"
+              else
+                echo "⚠️  Storybook artifact not found, will build from source"
+              fi
+            else
+              echo "⚠️  No successful Storybook runs found, will build from source"
+            fi
+          else
+            echo "⚠️  Storybook workflow not found, will build from source"
+          fi
+
+      - name: Download Vitest reports from latest CI run
         continue-on-error: true
-
-      - name: Generate test coverage
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
-          mkdir -p dist/coverage
-          pnpm test:unit --run --coverage --coverage.reporter=html --coverage.reportsDirectory=dist/coverage || echo "Coverage generation skipped"
-        continue-on-error: true
+          echo "🔍 Downloading latest Vitest reports..."
 
-      - name: Generate Knip report
-        run: |
-          mkdir -p dist/knip
-          pnpm knip --reporter json > dist/knip/report.json || echo "{}" > dist/knip/report.json
-          echo '<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Knip Report</title><style>body{font-family:monospace;padding:2rem;background:#1a1a1a;color:#f0f0f0}pre{background:#2a2a2a;padding:1rem;border-radius:8px;overflow-x:auto}</style></head><body><h1>Knip Report</h1><pre>' > dist/knip/index.html
-          cat dist/knip/report.json >> dist/knip/index.html
-          echo '</pre></body></html>' >> dist/knip/index.html
-        continue-on-error: true
+          # Get latest successful Vitest workflow run
+          LATEST_RUN=$(gh api "repos/${{ github.repository }}/actions/workflows" \
+            --jq '.workflows[] | select(.name == "Vitest Tests") | .id' | head -1)
 
-      - name: Create index page
-        run: |
-          cat > dist/index.html << 'EOF'
-          <!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;
-                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-                min-height: 100vh;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                padding: 2rem;
-              }
-              .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;
-              }
-              .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-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>
+          if [ -n "$LATEST_RUN" ]; then
+            RUN_ID=$(gh api "repos/${{ github.repository }}/actions/workflows/$LATEST_RUN/runs?status=success&branch=main" \
+              --jq '.workflow_runs[0].id' 2>/dev/null || echo "")
 
-              <div class="grid">
-                <a href="./storybook/index.html" class="card">
-                  <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-available">Available</span>
-                </a>
+            if [ -n "$RUN_ID" ] && [ "$RUN_ID" != "null" ]; then
+              # Download vitest-reports artifact
+              ARTIFACT_ID=$(gh api "repos/${{ github.repository }}/actions/runs/$RUN_ID/artifacts" \
+                --jq '.artifacts[] | select(.name == "vitest-reports") | .id' | head -1)
 
-                <a href="./nx-graph/index.html" class="card">
-                  <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-available">Available</span>
-                </a>
+              if [ -n "$ARTIFACT_ID" ]; then
+                mkdir -p ./.gh-pages-cache
+                gh api "repos/${{ github.repository }}/actions/artifacts/$ARTIFACT_ID/zip" > vitest-reports.zip
+                unzip -q vitest-reports.zip -d ./.gh-pages-cache/vitest-reports
+                echo "✅ Downloaded and extracted Vitest reports"
+              else
+                echo "⚠️  Vitest reports not found, will generate from source"
+              fi
+            else
+              echo "⚠️  No successful Vitest runs found, will generate from source"
+            fi
+          else
+            echo "⚠️  Vitest workflow not found, will generate from source"
+          fi
 
-                <a href="./coverage/index.html" class="card">
-                  <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-available">Available</span>
-                </a>
-
-                <a href="./vitest-ui/index.html" class="card">
-                  <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-available">Available</span>
-                </a>
-
-                <a href="./knip/index.html" class="card">
-                  <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-available">Available</span>
-                </a>
-              </div>
-
-              <div class="footer">
-                <p>
-                  Built from the <strong>main</strong> branch &bull;
-                  <a href="https://github.com/Comfy-Org/ComfyUI_frontend" target="_blank">GitHub Repository</a> &bull;
-                  <a href="https://docs.comfy.org" target="_blank">Official Documentation</a>
-                </p>
-              </div>
-            </div>
-          </body>
-          </html>
-          EOF
+      - name: Build static assets (with artifact reuse)
+        run: ./scripts/build-gh-pages.sh
 
       - name: Setup Pages
         uses: actions/configure-pages@v4
@@ -231,8 +120,21 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: './dist'
+          path: './docs/pages'
 
+  deploy-for-sno-deploy-ghpage-branch:
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.ref == 'refs/heads/sno-deploy-ghpage'
+    steps:
+      - name: Debug deployment
+        run: |
+          echo "Contents of ./docs/pages:"
+          ls -la ./docs/pages
+          echo "Contents of ./docs/pages/vitest-reports (if exists):"
+          ls -la ./docs/pages/vitest-reports || echo "No vitest-reports directory"
+          echo "Preview URL: https://comfyorg-comfyui-frontend.vercel.app"
+          
   deploy:
     environment:
       name: github-pages

.github/workflows/storybook-and-chromatic-ci.yaml

@@ -5,7 +5,7 @@ name: Storybook and Chromatic CI
 on:
   workflow_dispatch: # Allow manual triggering
   pull_request:
-    branches: [main]
+    branches: [main, sno-deploy-ghpage]
 
 jobs:
   # Post starting comment for non-forked PRs

.github/workflows/vitest-tests.yaml

@@ -46,3 +46,20 @@ jobs:
 
       - name: Run Vitest tests
         run: pnpm test:unit
+
+      - name: Generate test reports (on main branch)
+        if: github.ref == 'refs/heads/main'
+        run: |
+          mkdir -p ./vitest-reports
+          pnpm exec vitest \
+            --reporter=json --outputFile.json="./vitest-reports/results.json" \
+            --reporter=html --outputFile.html="./vitest-reports/index.html" \
+            --run
+
+      - name: Upload Vitest reports artifact (on main branch)
+        if: github.ref == 'refs/heads/main'
+        uses: actions/upload-artifact@v4
+        with:
+          name: vitest-reports
+          path: vitest-reports/
+          retention-days: 7