|
| 1 | +name: Publish Design System Docs PR Preview |
| 2 | + |
| 3 | +on: |
| 4 | + pull_request: |
| 5 | + types: [opened, synchronize, reopened] |
| 6 | + paths: |
| 7 | + - 'apps/design-system-docs/**' |
| 8 | + - .github/workflows/design-system-docs.yml |
| 9 | + |
| 10 | +# Ensure only one preview build runs per-PR at a time |
| 11 | +concurrency: |
| 12 | + group: pr-${{ github.event.pull_request.number }}-preview |
| 13 | + cancel-in-progress: true |
| 14 | + |
| 15 | +jobs: |
| 16 | + preview: |
| 17 | + # Avoid running this workflow for pull requests from forks, which would fail due to missing secrets |
| 18 | + if: github.event.pull_request.head.repo.full_name == github.event.pull_request.base.repo.full_name |
| 19 | + |
| 20 | + runs-on: ubuntu-latest |
| 21 | + |
| 22 | + steps: |
| 23 | + # 1. Checkout the PR code |
| 24 | + - uses: actions/checkout@v4 |
| 25 | + |
| 26 | + # 2. Set up Node |
| 27 | + - uses: actions/setup-node@v4 |
| 28 | + with: |
| 29 | + node-version-file: .nvmrc |
| 30 | + cache: yarn |
| 31 | + |
| 32 | + # 3. Install dependencies for just the design-system-docs package |
| 33 | + - run: yarn workspaces focus --production @automattic/design-system-docs |
| 34 | + |
| 35 | + # 4. Build the design-system-docs workspace |
| 36 | + - name: Build design system docs |
| 37 | + run: yarn workspace @automattic/design-system-docs build |
| 38 | + |
| 39 | + # 5. Install Wrangler |
| 40 | + - run: npm install -g wrangler |
| 41 | + |
| 42 | + # 6. Upload a new Worker version and capture the preview URL |
| 43 | + - name: Upload Worker version |
| 44 | + id: upload |
| 45 | + env: |
| 46 | + CLOUDFLARE_ACCOUNT_ID: ${{ secrets.DESIGN_SYSTEM_PREVIEW_CLOUDFLARE_ACCOUNT }} |
| 47 | + CLOUDFLARE_API_TOKEN: ${{ secrets.DESIGN_SYSTEM_PREVIEW_CLOUDFLARE_TOKEN }} |
| 48 | + run: | |
| 49 | + # Run the upload and tee output so it's visible in the GitHub Actions log |
| 50 | + OUT=$(wrangler versions upload --cwd apps/design-system-docs 2>&1 | tee /dev/stderr) |
| 51 | +
|
| 52 | + # Extract the preview URL from the output |
| 53 | + URL=$(echo "$OUT" | grep -oE 'https://[a-z0-9-]+-preview\.a8cds\.workers\.dev/?') |
| 54 | +
|
| 55 | + # Output the URL to the GitHub Actions log for debugging |
| 56 | + echo "URL: $URL" |
| 57 | +
|
| 58 | + # Expose it to later steps |
| 59 | + echo "url=$URL" >> "$GITHUB_OUTPUT" |
| 60 | +
|
| 61 | + # 7. Try to find an existing comment with our marker |
| 62 | + - name: Find preview comment |
| 63 | + id: find_comment |
| 64 | + uses: peter-evans/find-comment@v3 |
| 65 | + with: |
| 66 | + issue-number: ${{ github.event.pull_request.number }} |
| 67 | + body-includes: '<!-- cf-preview-comment -->' |
| 68 | + |
| 69 | + # 8. Create or update a comment that shows the preview URL |
| 70 | + - name: Comment (create or update) |
| 71 | + uses: peter-evans/create-or-update-comment@v4 |
| 72 | + with: |
| 73 | + issue-number: ${{ github.event.pull_request.number }} |
| 74 | + comment-id: ${{ steps.find_comment.outputs.comment-id }} |
| 75 | + edit-mode: replace |
| 76 | + body: | |
| 77 | + <!-- cf-preview-comment --> |
| 78 | + **Design System Reference Site Preview:** |
| 79 | +
|
| 80 | + ${{ steps.upload.outputs.url }} |
| 81 | +
|
| 82 | + (Latest commit: ${{ github.event.pull_request.head.sha }}) |
0 commit comments