deploy-preview.yml

name: Deploy Preview to Cloudflare Pages

on:
  pull_request:
    types: [opened, synchronize, closed]

concurrency:
  group: preview-${{ github.event.pull_request.number }}
  cancel-in-progress: true

jobs:
  build:
    if: github.event.action != 'closed'
    env:
      GH_TOKEN: ${{ github.token }}

    runs-on: ubicloud-standard-2
    timeout-minutes: 10

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "yarn"

      - name: Add LLVM apt Repo
        run: |-
          wget -O - https://apt.llvm.org/llvm-snapshot.gpg.key | sudo apt-key add -
          sudo add-apt-repository "deb http://apt.llvm.org/$(lsb_release -cs)/ llvm-toolchain-$(lsb_release -cs)-21 main"
          sudo apt update

      - name: Install APT dependencies
        run: xargs sudo apt-get install -y --no-install-recommends < Aptfile

      - name: Set up Ruby
        uses: ruby/setup-ruby@v1
        with:
          bundler-cache: true

      - name: bundle install
        run: bundle install

      - name: Render Templates
        run: bundle exec rake templates

      - name: Compile Herb
        run: bundle exec rake make

      - name: Yarn install
        run: yarn install --frozen-lockfile

      - name: Build tailwind-class-sorter package
        run: yarn nx build @herb-tools/tailwind-class-sorter

      - name: Build all JavaScript packages
        run: yarn build

      - name: Build docs site
        run: cd docs && yarn build

      - name: Upload docs artifact
        uses: actions/upload-artifact@v4
        with:
          name: docs-preview
          path: docs/.vitepress/dist
          retention-days: 1

  deploy-preview:
    name: Deploy to Cloudflare Pages
    needs: build
    runs-on: ubuntu-latest

    permissions:
      contents: read
      deployments: write
      pull-requests: write

    steps:
      - name: Download docs artifact
        uses: actions/download-artifact@v4
        with:
          name: docs-preview
          path: dist

      - name: Deploy to Cloudflare Pages
        id: deploy
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: herb-tools
          directory: dist
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

      - name: Add comment with preview URL
        uses: actions/github-script@v7
        with:
          script: |
            const previewUrl = '${{ steps.deploy.outputs.url }}';
            const comment = `## 🌿 Interactive Playground and Documentation Preview

            A preview deployment has been built for this pull request. Try out the changes live in the interactive playground:

            - **[Playground Preview](${previewUrl}/playground)**
            - **[Documentation Preview](${previewUrl})**
            - **[Website Preview](${previewUrl})**

            ---
            <sub>🌱 Grown from commit [\`${context.payload.pull_request.head.sha.substring(0, 7)}\`](https://github.com/${context.repo.owner}/${context.repo.repo}/commit/${context.payload.pull_request.head.sha})</sub>`;

            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('🌿 Interactive Playground and Documentation Preview')
            );

            if (botComment) {
              await github.rest.issues.updateComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                comment_id: botComment.id,
                body: comment
              });
            } else {
              await github.rest.issues.createComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                issue_number: context.issue.number,
                body: comment
              });
            }

  cleanup:
    name: Cleanup preview deployment
    if: github.event.action == 'closed'
    runs-on: ubuntu-latest

    permissions:
      pull-requests: write

    steps:
      - name: Delete Cloudflare Pages deployment
        run: |
          DEPLOYMENTS=$(curl -s -X GET \
            "https://api.cloudflare.com/client/v4/accounts/${{ secrets.CLOUDFLARE_ACCOUNT_ID }}/pages/projects/herb-tools/deployments" \
            -H "Authorization: Bearer ${{ secrets.CLOUDFLARE_API_TOKEN }}" \
            -H "Content-Type: application/json")

          BRANCH_NAME="${{ github.event.pull_request.head.ref }}"
          DEPLOYMENT_ID=$(echo "$DEPLOYMENTS" | jq -r ".result[] | select(.deployment_trigger.metadata.branch == \"$BRANCH_NAME\") | .id" | head -n 1)

          if [ -n "$DEPLOYMENT_ID" ]; then
            echo "Deleting deployment $DEPLOYMENT_ID for branch $BRANCH_NAME"
            curl -X DELETE \
              "https://api.cloudflare.com/client/v4/accounts/${{ secrets.CLOUDFLARE_ACCOUNT_ID }}/pages/projects/herb-tools/deployments/$DEPLOYMENT_ID" \
              -H "Authorization: Bearer ${{ secrets.CLOUDFLARE_API_TOKEN }}" \
              -H "Content-Type: application/json"
          else
            echo "No deployment found for branch $BRANCH_NAME"
          fi

      - name: Update PR comment
        uses: actions/github-script@v7
        with:
          script: |
            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('🌿 Interactive Playground and Documentation Preview')
            );

            if (botComment) {
              const updatedComment = botComment.body + '\n\n---\n\n✅ Preview deployment has been cleaned up.';
              await github.rest.issues.updateComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                comment_id: botComment.id,
                body: updatedComment
              });
            }