preview.yml

name: Deploy Preview to Cloudflare Pages

on:
  pull_request:
    types: [opened, synchronize]

jobs:
  deploy-preview:
    runs-on: ubuntu-latest
    permissions:
      pull-requests: write
    
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Build project
        run: npm run build
        
      - name: Deploy preview to Cloudflare Pages
        id: deploy
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        run: |
          OUTPUT=$(npx wrangler pages deploy ./out \
            --project-name=learn-semver \
            --commit-hash=${{ github.event.pull_request.head.sha }} \
            --commit-message="PR #${{ github.event.pull_request.number }}: ${{ github.event.pull_request.title }}" \
            --branch=pr-${{ github.event.pull_request.number }})
          
          # Extract deployment URL from output
          DEPLOYMENT_URL=$(echo "$OUTPUT" | grep -oP 'https://[a-z0-9]+\.learn-semver\.pages\.dev' | head -1)
          echo "deployment_url=$DEPLOYMENT_URL" >> $GITHUB_OUTPUT
          
      - name: Comment on PR
        uses: actions/github-script@v7
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          script: |
            const deployment_url = '${{ steps.deploy.outputs.deployment_url }}';
            const comment = `### 🚀 Preview Deployment Ready!
            
            Your changes have been deployed to Cloudflare Pages:
            
            🔗 **Preview URL**: ${deployment_url}
            
            This preview will be updated automatically as you push new commits to this PR.`;
            
            // Find existing 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('Preview Deployment Ready')
            );
            
            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
              });
            }