pr-preview.yml

name: PR Preview Deployment

# Deploy PR branches to GitHub Pages at /pr-{number}/ for testing
# This allows testing changes without merging to master

on:
  workflow_dispatch:  # Allow manual trigger
  pull_request:
    types: [opened, synchronize, reopened]
    branches:
      - master

permissions:
  contents: write
  pages: write
  id-token: write
  pull-requests: write

env:
  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true

jobs:
  deploy-preview:
    name: Deploy PR Preview
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout PR branch
      uses: actions/checkout@v4
      with:
        ref: ${{ github.event.pull_request.head.sha || github.sha }}
        fetch-depth: 1
        token: ${{ github.token }}
    
    - name: Determine preview path
      id: preview
      run: |
        if [ "${{ github.event_name }}" = "pull_request" ]; then
          PR_NUMBER="${{ github.event.pull_request.number }}"
          PREVIEW_PATH="pr-${PR_NUMBER}"
        else
          # Manual trigger - use branch name
          BRANCH_NAME="${GITHUB_REF#refs/heads/}"
          PREVIEW_PATH="pr-${BRANCH_NAME//\//-}"
        fi
        echo "path=${PREVIEW_PATH}" >> $GITHUB_OUTPUT
        echo "url=https://ap0ught.github.io/matrix/${PREVIEW_PATH}/" >> $GITHUB_OUTPUT
        echo "Preview will be deployed to: ${PREVIEW_PATH}"
    
    - name: Checkout gh-pages branch
      uses: actions/checkout@v4
      with:
        ref: gh-pages
        path: gh-pages
        fetch-depth: 0
        token: ${{ github.token }}
      continue-on-error: true
    
    - name: Initialize gh-pages if needed
      run: |
        if [ ! -d "gh-pages/.git" ]; then
          echo "Creating new gh-pages branch"
          rm -rf gh-pages
          mkdir -p gh-pages
          cd gh-pages
          git init
          git config user.name "github-actions[bot]"
          git config user.email "github-actions[bot]@users.noreply.github.com"
          git checkout -b gh-pages
          
          # Set up remote with authentication
          git remote add origin "https://x-access-token:${{ github.token }}@github.com/${{ github.repository }}.git"
          
          echo "# Matrix PR Previews" > README.md
          echo "" >> README.md
          echo "This branch contains PR preview deployments." >> README.md
          echo "Main site: https://ap0ught.github.io/matrix/" >> README.md
          
          git add .
          git commit -m "Initialize gh-pages branch"
          cd ..
        else
          echo "gh-pages branch exists, configuring..."
          cd gh-pages
          git config user.name "github-actions[bot]"
          git config user.email "github-actions[bot]@users.noreply.github.com"
          cd ..
        fi
    
    - name: Prepare preview directory
      run: |
        PREVIEW_PATH="${{ steps.preview.outputs.path }}"
        
        # Create preview directory in gh-pages
        mkdir -p "gh-pages/${PREVIEW_PATH}"
        mkdir -p "gh-pages/previews"
        
        # Copy web application files to preview directory
        cp index.html "gh-pages/${PREVIEW_PATH}/"
        cp -r js "gh-pages/${PREVIEW_PATH}/"
        cp -r lib "gh-pages/${PREVIEW_PATH}/"
        cp -r assets "gh-pages/${PREVIEW_PATH}/"
        cp -r shaders "gh-pages/${PREVIEW_PATH}/"
        
        # Copy gallery directory if it exists, otherwise create empty directory
        if [ -d "gallery" ]; then
          cp -r gallery "gh-pages/${PREVIEW_PATH}/"
        else
          mkdir -p "gh-pages/${PREVIEW_PATH}/gallery"
        fi
        
        # Copy PWA files (service worker, manifest, icons)
        cp service-worker.js "gh-pages/${PREVIEW_PATH}/"
        cp manifest.webmanifest "gh-pages/${PREVIEW_PATH}/"
        cp icon-192.png "gh-pages/${PREVIEW_PATH}/"
        cp icon-512.png "gh-pages/${PREVIEW_PATH}/"
        cp VERSION "gh-pages/${PREVIEW_PATH}/"
        
        # Optional files (don't fail if missing)
        cp README.md "gh-pages/${PREVIEW_PATH}/" 2>/dev/null || true
        cp screenshot.png "gh-pages/${PREVIEW_PATH}/" 2>/dev/null || true
        
        echo "✅ Preview files copied to gh-pages/${PREVIEW_PATH}"
        ls -la "gh-pages/${PREVIEW_PATH}"
    
    - name: Stamp PWA deploy build for preview
      run: |
        PREVIEW_PATH="${{ steps.preview.outputs.path }}"
        VER="matrix-pwa-${PREVIEW_PATH}-${GITHUB_RUN_NUMBER}-$(echo "$GITHUB_SHA" | cut -c1-7)"
        sed -i "s|const VER = \"local\"|const VER = \"${VER}\"|" "gh-pages/${PREVIEW_PATH}/service-worker.js"
        echo "VER=${VER}"
    
    - name: Update gh-pages previews index
      run: |
        cd gh-pages
        
        # Create or update previews/index.html with list of previews
        # Create previews directory if it doesn't exist
        mkdir -p previews
        
        # Create or update previews/index.html with list of PR previews
        # Note: We don't overwrite the root index.html (main site)
        cat > previews/index.html <<'HTMLEOF'
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Matrix PR Previews</title>
            <style>
                body {
                    font-family: 'Courier New', monospace;
                    background: #000;
                    color: #0f0;
                    padding: 20px;
                    max-width: 800px;
                    margin: 0 auto;
                }
                h1 { color: #0f0; text-shadow: 0 0 10px #0f0; }
                a { color: #0f0; text-decoration: none; }
                a:hover { text-decoration: underline; text-shadow: 0 0 5px #0f0; }
                .preview { 
                    margin: 10px 0; 
                    padding: 10px;
                    border: 1px solid #0f0;
                    border-radius: 4px;
                }
                .main-link {
                    font-size: 1.2em;
                    margin-bottom: 30px;
                    padding: 15px;
                    border: 2px solid #0f0;
                    border-radius: 4px;
                }
            </style>
        </head>
        <body>
            <h1>Matrix PR Preview Deployments</h1>
            
            <div class="main-link">
                <strong>Main Site:</strong> <a href="/">https://ap0ught.github.io/matrix/</a><br>
                <strong>All Versions:</strong> <a href="/versions/">Version Archive</a>
            </div>
            
            <h2>Available PR Previews:</h2>
            <div id="previews"></div>
            
            <script>
                const previews = [];
        HTMLEOF
        
        # Add preview paths to the list
        for dir in pr-*/ ; do
          if [ -d "$dir" ]; then
            dir_name="${dir%/}"
            echo "                previews.push('$dir_name');" >> previews/index.html
          fi
        done
        
        cat >> previews/index.html <<'HTMLEOF'
                
                const container = document.getElementById('previews');
                if (previews.length === 0) {
                    container.innerHTML = '<p>No PR previews available yet.</p>';
                } else {
                    previews.sort().reverse().forEach(preview => {
                        const div = document.createElement('div');
                        div.className = 'preview';
                        div.innerHTML = `<strong>${preview}</strong>: <a href="/matrix/${preview}/">View Preview</a>`;
                        container.appendChild(div);
                    });
                }
            </script>
        </body>
        </html>
        HTMLEOF
        
        echo "✅ Updated gh-pages previews/index.html"
    
    - name: Deploy to gh-pages
      run: |
        cd gh-pages
        
        # Ensure git config is set
        git config user.name "github-actions[bot]"
        git config user.email "github-actions[bot]@users.noreply.github.com"
        
        # Set up authentication for push
        git remote set-url origin "https://x-access-token:${{ github.token }}@github.com/${{ github.repository }}.git" || \
          git remote add origin "https://x-access-token:${{ github.token }}@github.com/${{ github.repository }}.git"
        
        # Ensure we're on gh-pages branch (handle case where default branch might be different)
        CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD 2>/dev/null || echo "")
        if [ "$CURRENT_BRANCH" != "gh-pages" ]; then
          echo "Current branch is '$CURRENT_BRANCH', renaming to gh-pages"
          git branch -M gh-pages
        fi
        
        # Stage all changes
        git add .
        
        # Check if there are changes to commit
        if git diff --staged --quiet; then
          echo "No changes to deploy"
        else
          git commit -m "Deploy preview: ${{ steps.preview.outputs.path }}"
          
          # Fetch latest changes from remote to avoid race conditions
          echo "Fetching latest gh-pages from remote..."
          git fetch origin gh-pages
          
          # Rebase our local changes on top of the fetched remote branch
          echo "Rebasing local gh-pages on top of origin/gh-pages..."
          if git rebase origin/gh-pages; then
            echo "✅ Rebase successful, pushing changes with force-with-lease..."
            git push --force-with-lease origin gh-pages
            echo "✅ Successfully deployed to gh-pages via rebase (no force push required)"
          else
            echo "⚠️ Rebase conflict detected - this is rare but can happen with concurrent deployments"
            echo "Aborting rebase and using force push to ensure deployment succeeds..."
            git rebase --abort
            git push origin gh-pages --force
            echo "✅ Successfully deployed to gh-pages via force push after rebase conflict"
          fi
        fi
    
    - name: Comment on PR with preview URL
      if: github.event_name == 'pull_request'
      uses: actions/github-script@v7
      with:
        script: |
          const previewUrl = '${{ steps.preview.outputs.url }}';
          const comment = `## 🎬 PR Preview Deployed!
          
          Your changes are now available for testing:
          
          **Preview URL:** ${previewUrl}
          
          ### Test Links:
          - [Default Matrix](${previewUrl}?suppressWarnings=true)
          - [Gallery Mode](${previewUrl}?effect=gallery&suppressWarnings=true)
          - [Mirror Effect](${previewUrl}?effect=mirror&suppressWarnings=true)
          - [3D Mode](${previewUrl}?version=3d&suppressWarnings=true)
          - [Resurrections](${previewUrl}?version=resurrections&suppressWarnings=true)
          
          The preview will be updated automatically when you push new commits.
          
          ---
          *Preview deployed from commit ${{ github.event.pull_request.head.sha }}*`;
          
          // Find existing preview comment
          const { data: comments } = await github.rest.issues.listComments({
            owner: context.repo.owner,
            repo: context.repo.repo,
            issue_number: context.issue.number,
          });
          
          const botComment = comments.find(comment => 
            comment.user.type === 'Bot' && 
            comment.body.includes('PR Preview Deployed')
          );
          
          if (botComment) {
            // Update existing comment
            await github.rest.issues.updateComment({
              owner: context.repo.owner,
              repo: context.repo.repo,
              comment_id: botComment.id,
              body: comment
            });
          } else {
            // Create new comment
            await github.rest.issues.createComment({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: context.issue.number,
              body: comment
            });
          }
    
    - name: Summary
      run: |
        echo "## 🎉 PR Preview Deployed Successfully!" >> $GITHUB_STEP_SUMMARY
        echo "" >> $GITHUB_STEP_SUMMARY
        echo "**Preview URL:** ${{ steps.preview.outputs.url }}" >> $GITHUB_STEP_SUMMARY
        echo "" >> $GITHUB_STEP_SUMMARY
        echo "### Quick Test Links:" >> $GITHUB_STEP_SUMMARY
        echo "- [Default Matrix](${{ steps.preview.outputs.url }}?suppressWarnings=true)" >> $GITHUB_STEP_SUMMARY
        echo "- [Gallery Mode](${{ steps.preview.outputs.url }}?effect=gallery&suppressWarnings=true)" >> $GITHUB_STEP_SUMMARY
        echo "- [Mirror Effect](${{ steps.preview.outputs.url }}?effect=mirror&suppressWarnings=true)" >> $GITHUB_STEP_SUMMARY
        echo "- [3D Mode](${{ steps.preview.outputs.url }}?version=3d&suppressWarnings=true)" >> $GITHUB_STEP_SUMMARY