deploy.yml

name: Deploy to GitHub Pages

on:
  push:
    branches: ['*']
  pull_request:
    branches: ['*']

# Add concurrency settings
concurrency: 
  group: ${{ github.workflow }}
  cancel-in-progress: false

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

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    environment:
      name: 'preview-${{ github.ref_name }}'
      url: 'https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/${{ steps.preview.outputs.deploy_path }}'
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install Dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Prepare preview directory
        id: preview
        run: |
          # Replace slashes with dashes in branch name
          if [ "${{ github.event_name }}" == "pull_request" ]; then
            BRANCH_NAME="${{ github.head_ref }}"
          else
            BRANCH_NAME="${GITHUB_REF_NAME}"
          fi
          
          # Replace slashes with dashes for safety
          DEPLOY_PATH="${BRANCH_NAME//\//-}"
          echo "deploy_path=${DEPLOY_PATH}" >> $GITHUB_OUTPUT
          
          # Create preview directory structure
          mkdir -p "preview-out/${DEPLOY_PATH}"
          cp -r dist/* "preview-out/${DEPLOY_PATH}/"
          
          # Copy 404.html to root for routing
          cp dist/404.html preview-out/

      - name: Deploy to gh-pages
        id: deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: preview-out
          keep_files: true
          publish_branch: gh-pages

      - name: Wait for Pages
        id: wait-for-pages
        if: github.event_name == 'pull_request' && steps.deploy.conclusion == 'success'
        uses: actions/github-script@v7
        with:
          script: |
            const MAX_ATTEMPTS = 30;
            for (let i = 0; i < MAX_ATTEMPTS; i++) {
              const deployments = await github.rest.repos.listDeployments({
                owner: context.repo.owner,
                repo: context.repo.repo,
                environment: 'github-pages'
              });
              
              if (deployments.data.length > 0) {
                const status = await github.rest.repos.listDeploymentStatuses({
                  owner: context.repo.owner,
                  repo: context.repo.repo,
                  deployment_id: deployments.data[0].id
                });
                
                if (status.data[0]?.state === 'success') {
                  console.log('Deployment complete!');
                  break;
                }
              }
              
              if (i === MAX_ATTEMPTS - 1) {
                throw new Error('Deployment timeout');
              }
              
              console.log(`Waiting for deployment... (Attempt ${i + 1}/${MAX_ATTEMPTS})`);
              await new Promise(r => setTimeout(r, 10000));
            }

      - name: Comment on PR
        if: |
          github.event_name == 'pull_request' && 
          steps.deploy.conclusion == 'success' && 
          steps.wait-for-pages.conclusion == 'success'
        uses: actions/github-script@v7
        with:
          script: |
            github.rest.issues.createComment({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: context.issue.number,
              body: `🎉 **Preview Deployed!**
              👉 <a href="https://${context.repo.owner}.github.io/${context.repo.repo}/${{ steps.preview.outputs.deploy_path }}" target="_blank">View Preview</a>`
            })