Skip to content
Screenshots

Improve reports #5

Sign in to view logs

Improve reports

Improve reports #5

Workflow file for this run

.github/workflows/screenshots.yml at 4b8f1c9
# Makes screenshots of the project and publishes them as comment
name: Screenshots
on:
# Runs on pushes targeting the default branch
pull_request:
branches: ["main"]
# Default to bash
defaults:
run:
shell: bash
jobs:
# Check on PR
screenshots:
runs-on: ubuntu-latest
env:
HUGO_VERSION: 0.108.0
permissions:
# Required to upload/save artifact, otherwise you'll get
# "Error: Resource not accessible by integration"
contents: write
# Required to post comment, otherwise you'll get
# "Error: Resource not accessible by integration"
pull-requests: write
steps:
- name: Install Hugo CLI
run: |
wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
&& sudo dpkg -i ${{ runner.temp }}/hugo.deb
- name: Install Dart Sass Embedded
run: sudo snap install dart-sass-embedded
- name: Checkout
uses: actions/checkout@v4
with:
submodules: recursive
- name: Install Node.js dependencies
run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
- name: Build with Hugo
working-directory: ./src
env:
# For maximum backward compatibility with Hugo modules
HUGO_ENVIRONMENT: production
HUGO_ENV: production
run: |
hugo \
--minify
- name: Make screenshots
run: npm run screenshot
- name: Upload files as artifacts
id: upload-files-artifacts
uses: actions/upload-artifact@master
with:
name: Screenshots
path: |
src/public/index.html
./*.jpg
- name: Upload files to Imgbb
id: upload-files-imgbb
uses: McCzarny/upload-image@v1.2.5
with:
# Device viewport sizes https://blisk.io/devices
path: |
320x568.jpg
568x320.jpg
360x780.jpg
780x360.jpg
375x812.jpg
812x375.jpg
390x844.jpg
844x390.jpg
430x932.jpg
932x430.jpg
768x1024.jpg
1024x768.jpg
810x1080.jpg
1080x810.jpg
834x1112.jpg
1112x834.jpg
1024x1366.jpg
1366x1024.jpg
1440x900.jpg
1280x800.jpg
2560x1440.jpg
1920x1080.jpg
3200x1800.jpg
2048x1152.jpg
uploadMethod: imgbb
apiKey: '${{ secrets.IMGBB_API_KEY }}'
- name: Publish the images
uses: peter-evans/create-or-update-comment@v4
with:
issue-number: ${{ github.event.pull_request.number }}
body: |
#### Screenshots
<details>
<summary>Smartphones</summary>
#### iPhone 5 (320x568)
| Portrait Mode | Landscape Mode |
|----|----|
| ![iPhone 5 portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[0]}}) | ![iPhone 5 portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[1]}}) |
#### Honor 20 Pro (360x780)
| Portrait Mode | Landscape Mode |
|----|----|
| ![Honor 20 Pro portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[2]}}) | ![Honor 20 Pro portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[3]}}) |
#### iPhone X (375x812)
| Portrait Mode | Landscape Mode |
|----|----|
| ![iPhone X portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[4]}}) | ![iPhone X portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[5]}}) |
#### iPhone 12/13 Pro (390x844)
| Portrait Mode | Landscape Mode |
|----|----|
| ![iPhone 12 Pro portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[6]}}) | ![iPhone 12 Pro portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[7]}}) |
#### iPhone 14/15 Pro Max (430x932)
| Portrait Mode | Landscape Mode |
|----|----|
| ![iPhone 14 Pro Max portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[8]}}) | ![iPhone 14 Pro Max portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[9]}}) |
</details>
<details>
<summary>Tablets</summary>
#### iPad Mini 4 / Pro 9 (768x1024)
| Portrait Mode | Landscape Mode |
|----|----|
| ![iPad Mini portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[10]}}) | ![iPad Mini portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[11]}}) |
#### iPad 10 (810x1080)
| Portrait Mode | Landscape Mode |
|----|----|
| ![iPad 10 portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[12]}}) | ![iPad 10 portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[13]}}) |
#### iPad Pro 10 (834x1112)
| Portrait Mode | Landscape Mode |
|----|----|
| ![iPad Pro 10 portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[14]}}) | ![iPad Pro 10 portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[15]}}) |
#### iPad Pro 12 (1024x1366)
| Portrait Mode | Landscape Mode |
|----|----|
| ![iPad Pro 12 portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[16]}}) | ![iPad Pro 12 portrait mode screenshot](${{steps.upload-files-imgbb.outputs.url[17]}}) |
</details>
<details>
<summary>Notebooks</summary>
| MacBook Air 13.3"/15.4" (1440x900) | MacBook 12" (2304x1440) |
|----|----|
| ![MacBook Air 13.3" screenshot](${{steps.upload-files-imgbb.outputs.url[18]}}) | ![MacBook 12" screenshot](${{steps.upload-files-imgbb.outputs.url[19]}}) |
| Laptop-S 1280x800 | Laptop-M 1366x768 |
|----|----|
| ![Laptop-S 1280x800 screenshot](${{steps.upload-files-imgbb.outputs.url[20]}}) | ![Laptop-M 1366x768 screenshot](${{steps.upload-files-imgbb.outputs.url[21]}}) |
</details>
<details>
<summary>Desktop</summary>
| 2560x1440 | 1920x1080 |
|----|----|
| ![2560x1440 screenshot](${{steps.upload-files-imgbb.outputs.url[22]}}) | ![1920x1080 screenshot](${{steps.upload-files-imgbb.outputs.url[23]}}) |
| iMac Pro Retina 5K 27" (3200x1800) | iMac Retina 4K 21.5" (2048x1152) |
|----|----|
| ![iMac Pro Retina 5K 27" screenshot](${{steps.upload-files-imgbb.outputs.url[24]}}) | ![iMac Retina 4K 21.5" screenshot](${{steps.upload-files-imgbb.outputs.url[25]}}) |
</details>
[Full ZIP](${{ steps.upload-files-artifacts.outputs.artifact-url }})