pr_helper.yml

name: PR Helper

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

permissions:
  pull-requests: write

jobs:
  screenshot:
    runs-on: ubuntu-latest
    name: Screenshot
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version-file: .node-version
          registry-url: 'https://registry.npmjs.org'

      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          run_install: false

      - name: Get pnpm store directory
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - uses: actions/cache@v3
        name: Setup pnpm cache
        with:
          path: ${{ env.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-

      - name: Install dependencies
        run: pnpm install

      - name: Take Screenshot
        id: screenshot
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
        run: |
          sha="$GITHUB_SHA"

          git fetch origin

          networks=$(
            git diff --name-only origin/$GITHUB_BASE_REF \
            | grep db/ \
            | sed -E 's/db\/(.*)[.]json/\1/'
          )

          mkdir -p build

          ./cli build:visual

          pnpm vite preview \
            --host 0.0.0.0 \
            --port 4173 \
            --strictPort \
            -c test/visual/vite.config.js \
            -l silent \
            "test/visual" \
            &
          pid="$!"

          scale=2

          pnpx playwright install

          for network in $networks
          do
            pnpx playwright screenshot \
              --viewport-size="$((850 * $scale)), $((400 * $scale))" \
              "http://localhost:4173?network=$network&knobs=false&scale=$scale" \
              "./build/$network.png"
          done

          pnpx playwright screenshot \
          --full-page \
            "http://localhost:4173?knobs=false&scale=$scale" \
            "./build/index.png"

          kill $pid

          link_networks=""

          for network in $networks
          do
            pnpm wrangler r2 object put \
              -f ./build/$network.png \
              react-social-icons/pr-images/$sha/$network.png

            link_networks="$link_networks,https://static.react-social-icons.com/pr-images/$sha/$network.png"
          done

          pnpm wrangler r2 object put \
            -f ./build/index.png \
            react-social-icons/pr-images/$sha/index.png

          link_index="https://static.react-social-icons.com/pr-images/$sha/index.png"

          echo "link_networks=$link_networks" >> $GITHUB_OUTPUT
          echo "link_index=$link_index" >> $GITHUB_OUTPUT

      - name: Comment on PR with screenshots
        uses: actions/github-script@v6
        with:
          script: |
            const link_networks = '${{ steps.screenshot.outputs.link_networks }}'.split(',');
            const link_index = '${{ steps.screenshot.outputs.link_index }}'

            github.rest.pulls.createReview({
              owner: context.repo.owner,
              repo: context.repo.repo,
              pull_number: context.payload.number,
              event: 'COMMENT',
              body: `
                <h1>Screenshots</h1>
                ${link_networks
                  .filter(link => link.length > 0)
                  .sort((a, b) => a.localeCompare(b))
                  .map(link => {
                    const filename = link.replace(/^.*\//u, '')
                    const network = filename.replace('.png', '')
                    return `
                      <details>
                        <summary>
                          ${network}
                        </summary>
                        <img
                          src="${link}"
                          alt="screenshot of an updated social network"
                        />
                      </details>
                    `;
                  })
                }
                <details>
                  <summary>All Networks</summary>
                  <img
                    src="${link_index}"
                    alt="screenshot of all networks"
                  />
                </details>
              `.replace(/^\s+/gm, '').trim()
            })