Skip to content

feat: show mobile and desktop screenshots in PR preview comment#90

Merged
nitrocode merged 5 commits into
mainfrom
copilot/show-screenshots-mobile-desktop
Apr 26, 2026
Merged

feat: show mobile and desktop screenshots in PR preview comment#90
nitrocode merged 5 commits into
mainfrom
copilot/show-screenshots-mobile-desktop

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 26, 2026

  • Upload screenshots to GitHub via Content API (raw URLs in comment)
  • Fix CSS/JS not loading: add .gitignore to exclude_assets so it isn't deployed and doesn't block git add --all in peaceiris temp clone
  • Fix screenshots deleted by deploy: move upload step to AFTER the peaceiris deploy
  • Remove unnecessary rm .gitignore step
  • Also add .gitignore to exclude_assets in deploy.yml for consistency
  • Re-throw non-404 errors in the getContent catch block (review feedback)
  • Add sync note to both exclude_assets comments (review feedback)
  • Resolve merge conflicts with main
  • Fix inconsistent comment in deploy.yml: .gitignore is intentionally excluded in both workflows; only screenshots is preview-only

Summary by CodeRabbit

  • New Features
    • Automated screenshot generation now captures visual previews for pull requests
    • Desktop and mobile screenshots are generated and embedded directly in PR preview comments
    • Screenshots improve code review with quick visual validation of changes

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 26, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 29540c54-12b9-4165-8d12-7763700d0832

📥 Commits

Reviewing files that changed from the base of the PR and between 59658dc and 69de626.

📒 Files selected for processing (1)
  • .github/workflows/deploy.yml
🚧 Files skipped from review as they are similar to previous changes (1)
  • .github/workflows/deploy.yml

📝 Walkthrough

Walkthrough

Adds Playwright-driven screenshot capture to PR previews: installs Chromium deps, runs desktop/mobile captures, uploads PNGs to gh-pages under previews/pr-<number>/screenshots/ via the GitHub Content API, exports raw image URLs, embeds them in the PR preview comment, and prevents screenshots/.gitignore from being published.

Changes

Cohort / File(s) Summary
Preview workflow
.github/workflows/preview.yml
Adds Chromium dependency install and npm run screenshots steps; uploads generated desktop/mobile PNGs to gh-pages via GitHub Content API (create/update); exports raw image URLs as step outputs; extends PR preview comment to include a "Screenshots" table.
Pages deploy workflow
.github/workflows/deploy.yml
Adds .gitignore and notes about screenshots/ to peaceiris/actions-gh-pages exclude_assets to avoid publishing preview-only assets and to align with preview workflow.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant PR as Pull Request
  participant Runner as GitHub Actions Runner
  participant Playwright as Playwright (Chromium)
  participant ContentAPI as GitHub Content API
  participant ghPages as gh-pages branch
  participant PRComment as PR Preview Comment

  PR->>Runner: trigger preview workflow
  Runner->>Runner: install Chromium deps & npm deps
  Runner->>Playwright: run screenshot script (desktop)
  Playwright-->>Runner: desktop.png
  Runner->>Playwright: run screenshot script (mobile)
  Playwright-->>Runner: mobile.png
  Runner->>ContentAPI: upload desktop.png (create/update)
  ContentAPI-->>ghPages: persist desktop.png
  ContentAPI-->>Runner: return raw desktop URL
  Runner->>ContentAPI: upload mobile.png (create/update)
  ContentAPI-->>ghPages: persist mobile.png
  ContentAPI-->>Runner: return raw mobile URL
  Runner->>PRComment: update preview comment with raw desktop & mobile URLs
  Note right of Runner: main gh-pages publish excludes `screenshots/` and `.gitignore`
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • nitrocode

I pity the fool who skips the screenshots review!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat: show mobile and desktop screenshots in PR preview comment' directly reflects the main objective of adding screenshot functionality to PR preview comments, matching the changeset's core purpose.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch copilot/show-screenshots-mobile-desktop

Comment @coderabbitai help to get the list of available commands and usage tips.

@nitrocode nitrocode marked this pull request as ready for review April 26, 2026 18:50
@nitrocode nitrocode self-requested a review as a code owner April 26, 2026 18:50
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 26, 2026

👁️ PR Preview

🚀 Open Preview

Deployed from commit 69de626 · Updates on every push to this PR
(Preview is removed automatically when the PR is closed.)

Screenshots

Desktop Mobile
Desktop Mobile

github-actions Bot added a commit that referenced this pull request Apr 26, 2026
github-actions Bot added a commit that referenced this pull request Apr 26, 2026
@nitrocode
Copy link
Copy Markdown
Owner

@copilot resolve the merge conflicts in this pull request

…ots-mobile-desktop

# Conflicts:
#	.github/workflows/preview.yml

Co-authored-by: nitrocode <7775707+nitrocode@users.noreply.github.com>
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Apr 26, 2026

@copilot resolve the merge conflicts in this pull request

Resolved in 59658dc. The only conflict was in preview.ymlmain had simplified checkout+setup to use the ./.github/actions/setup composite action (PR #91), while this branch had expanded them inline. Kept the composite action and preserved all the screenshot-related changes.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In @.github/workflows/deploy.yml:
- Around line 37-39: The comment and the exclude_assets value are inconsistent:
the workflow comment says ".gitignore and screenshots are additional
preview-only exclusions" but the deploy.yml exclude_assets list includes
".gitignore"; update either the comment or the exclude_assets list so they
match—specifically reconcile the exclude_assets entry (the key named
exclude_assets in deploy.yml) by removing ".gitignore" from the list if it
should be preview-only, or update the comment to reflect that ".gitignore" is
intentionally excluded here.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 0a0a4b17-0e74-4359-a702-581067f3cac9

📥 Commits

Reviewing files that changed from the base of the PR and between 7b68663 and 59658dc.

📒 Files selected for processing (2)
  • .github/workflows/deploy.yml
  • .github/workflows/preview.yml
🚧 Files skipped from review as they are similar to previous changes (1)
  • .github/workflows/preview.yml

Comment thread .github/workflows/deploy.yml
@nitrocode nitrocode enabled auto-merge (squash) April 26, 2026 22:52
github-actions Bot added a commit that referenced this pull request Apr 26, 2026
github-actions Bot added a commit that referenced this pull request Apr 26, 2026
…ly screenshots is preview-only

Agent-Logs-Url: https://github.com/nitrocode/token-deathclock/sessions/fdc540e4-74fa-4572-9140-f2a4eb85da07

Co-authored-by: nitrocode <7775707+nitrocode@users.noreply.github.com>
auto-merge was automatically disabled April 26, 2026 22:53

Head branch was pushed to by a user without write access

github-actions Bot added a commit that referenced this pull request Apr 26, 2026
github-actions Bot added a commit that referenced this pull request Apr 26, 2026
@nitrocode nitrocode merged commit 5470bb0 into main Apr 26, 2026
7 checks passed
@nitrocode nitrocode deleted the copilot/show-screenshots-mobile-desktop branch April 26, 2026 22:56
github-actions Bot added a commit that referenced this pull request Apr 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants