Skip to content

2.1.8 + Compress images #4037

2.1.8 + Compress images

2.1.8 + Compress images #4037

Workflow file for this run

name: Preview Deployment
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, labeled]
concurrency:
group: netlify-${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
jobs:
image-size-check:
name: Image Size Check
runs-on: ubuntu-latest
steps:
- name: Checkout Repository
uses: actions/checkout@v4
- name: Get changed files
id: changed-files
uses: tj-actions/changed-files@v44
- name: Enforce Image Size Limits on Changed Files
if: steps.changed-files.outputs.all_changed_files
run: |
#!/bin/bash
set -e
# Input from the previous step
CHANGED_FILES="${{ steps.changed-files.outputs.all_changed_files }}"
IMAGE_LIMIT_MB=2
GIF_LIMIT_MB=10
OVERSIZED_IMAGES=""
OVERSIZED_GIFS=""
for file in $CHANGED_FILES; do
if [[ "$file" == *.png || "$file" == *.jpg || "$file" == *.jpeg || "$file" == *.svg ]]; then
size_in_bytes=$(stat -c%s "$file")
limit_in_bytes=$((IMAGE_LIMIT_MB * 1024 * 1024))
if [ "$size_in_bytes" -gt "$limit_in_bytes" ]; then
size_human=$(ls -lh "$file" | awk '{print $5}')
OVERSIZED_IMAGES+=" - $file ($size_human)\n"
fi
elif [[ "$file" == *.gif ]]; then
size_in_bytes=$(stat -c%s "$file")
limit_in_bytes=$((GIF_LIMIT_MB * 1024 * 1024))
if [ "$size_in_bytes" -gt "$limit_in_bytes" ]; then
size_human=$(ls -lh "$file" | awk '{print $5}')
OVERSIZED_GIFS+=" - $file ($size_human)\n"
fi
fi
done
# --- Report errors if any oversized files are found ---
ERROR_MESSAGE=""
if [ -n "$OVERSIZED_IMAGES" ]; then
ERROR_MESSAGE+="Found images exceeding the ${IMAGE_LIMIT_MB}MB limit:\n"
ERROR_MESSAGE+="${OVERSIZED_IMAGES}"
fi
if [ -n "$OVERSIZED_GIFS" ]; then
ERROR_MESSAGE+="Found GIFs exceeding the ${GIF_LIMIT_MB}MB limit:\n"
ERROR_MESSAGE+="${OVERSIZED_GIFS}"
fi
if [ -n "$ERROR_MESSAGE" ]; then
echo -e "::error::Oversized images found in this PR. Please optimize or remove them.\n"
echo -e "--------------------------------------------------"
echo -e "$ERROR_MESSAGE"
echo -e "--------------------------------------------------"
exit 1
else
echo "All changed images are within their size limits. Check passed."
fi
# This job is used to render datasheets, but only if they have changed.
# It's a separate job so we don't have to cleanup the machine afterwards.
render-datasheets:
name: Render Datasheets
if: ${{ contains(github.event.pull_request.labels.*.name, 'preview') || github.ref_name == 'main' }}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 1
- uses: ./.github/actions/generate-datasheets
with:
artifact-name: datasheets
datasheets-path: static/resources/datasheets
preview-build:
if: ${{ contains(github.event.pull_request.labels.*.name, 'preview') || github.ref_name == 'main' }}
runs-on: ubuntu-latest
needs: render-datasheets
concurrency:
group: netlify
cancel-in-progress: false
env:
REPO_ACCESS_TOKEN: ${{ secrets.REPO_ACCESS_TOKEN }}
APP_ENV: staging
BRANCH_NAME: ${{ github.ref_name }}
steps:
- name: Find PR Preview Comment
if: github.event_name == 'pull_request'
uses: peter-evans/find-comment@v1
id: deploy-preview-comment
with:
issue-number: ${{ github.event.pull_request.number }}
comment-author: "github-actions[bot]"
body-includes: "Preview Deployment"
- name: Update Comment if exists
if: github.event_name == 'pull_request' && steps.deploy-preview-comment.outputs.comment-id != 0
uses: peter-evans/[email protected]
with:
comment-id: ${{ steps.deploy-preview-comment.outputs.comment-id }}
edit-mode: replace
body: |
## Preview Deployment
Waiting for deployment to complete...
- uses: actions/checkout@v4
with:
fetch-depth: 1
- name: Cleanup runner disk
uses: ./.github/actions/cleanup-disk
- uses: actions/setup-node@v4
with:
node-version: 18
cache: "npm"
cache-dependency-path: "**/package-lock.json"
- name: Retrieve Datasheets
uses: actions/download-artifact@v4
with:
name: datasheets
path: static/resources/datasheets
- name: Copy Static Files
run: |
mkdir -p static/resources/datasheets static/resources/schematics static/resources/pinouts static/resources/models
find ./content/hardware -type f -name "*-schematics.pdf" -exec cp {} ./static/resources/schematics/ \;
find ./content/hardware -type f -name "*-datasheet.pdf" -exec cp {} ./static/resources/datasheets/ \;
find ./content/hardware -type f -name "*-full-pinout.pdf" -exec cp {} ./static/resources/pinouts/ \;
find ./content/hardware -type f -name "*-pinout.png" -exec cp {} ./static/resources/pinouts/ \;
find ./content/hardware -type f -name "*-step.zip" -exec cp {} ./static/resources/models/ \;
# - name: Fail on Oversized Files
# id: fail_on_oversized_files
# run: |
# #!/bin/bash
# # This script is a stricter check that fails the workflow if files exceed size limits.
# set -e
# # Thresholds in Megabytes (same as the warning step)
# IMAGE_LIMIT_MB=2
# ASSET_LIMIT_MB=10
# # Find oversized files and prepare a detailed report
# OVERSIZED_FILES=$(find content -type f \
# \( \( -name "*.png" -o -name "*.jpg" -o -name "*.jpeg" -o -name "*.svg" -o -name "*.gif" \) -size "+${IMAGE_LIMIT_MB}M" \) -o \
# \( \( -name "*.pdf" -o -name "*.zip" -o -name "*.mp4" \) -size "+${ASSET_LIMIT_MB}M" \) \
# -exec ls -lh {} + | awk '{printf " - %s (%s)\n", $9, $5}')
# # Check if the report is non-empty and fail the job if so
# if [ -n "$OVERSIZED_FILES" ]; then
# echo "::error::Found files exceeding size limits. This new check is failing the build as intended."
# echo "--------------------------------------------------"
# echo "Oversized Files Found:"
# echo "$OVERSIZED_FILES"
# echo "--------------------------------------------------"
# echo "Limits:"
# echo " - Images (PNG, JPG, SVG, GIF): ${IMAGE_LIMIT_MB}MB"
# echo " - Assets (PDF, ZIP, MP4): ${ASSET_LIMIT_MB}MB"
# exit 1
# else
# echo "No oversized files found. New check passed."
# fi
- name: Compress Large Images
run: |
sudo apt-get update && sudo apt-get install -y jpegoptim optipng
echo "Compressing large JPGs..."
find content -type f \( -name "*.jpg" -o -name "*.jpeg" \) -size +2M -print -exec jpegoptim --strip-all {} \;
echo "Compressing large PNGs..."
find content -type f -name "*.png" -size +2M -print -exec optipng -o2 {} \;
- name: Gatsby main cache
uses: actions/cache@v4
id: gatsby-cache-folder
with:
path: .cache
key: ${{ runner.os }}-cache-gatsby-${{ github.ref_name }}
restore-keys: |
${{ runner.os }}-cache-gatsby-main
- name: Gatsby Public Folder
uses: actions/cache@v4
id: gatsby-public-folder
with:
path: public/
key: ${{ runner.os }}-public-gatsby-${{ github.ref_name }}
restore-keys: |
${{ runner.os }}-public-gatsby-main
- run: npm install
- run: GATSBY_HF_CDN_URL="" npm run build
- name: Install Netlify
run: npm install [email protected] -g
- name: Deploy to Netlify Preview
if: github.event_name == 'pull_request'
run: |
netlify deploy \
--dir public \
--site ${{ secrets.NETLIFY_SITE_ID }} \
--auth ${{ secrets.NETLIFY_AUTH_TOKEN }} \
--json \
> deploy_output.json
- name: Deploy to Netlify Prod
if: github.event_name != 'pull_request'
run: |
netlify deploy \
--prod \
--dir public \
--site ${{ secrets.NETLIFY_SITE_ID }} \
--auth ${{ secrets.NETLIFY_AUTH_TOKEN }} \
--json \
> deploy_output.json
- name: Generate URL Preview
if: github.event_name == 'pull_request'
id: url_preview
run: |
NETLIFY_PREVIEW_URL=$(jq -r '.deploy_url' deploy_output.json)
echo "NETLIFY_PREVIEW_URL=$NETLIFY_PREVIEW_URL" >> "$GITHUB_OUTPUT"
- name: Create PR Preview Comment
if: github.event_name == 'pull_request' && steps.deploy-preview-comment.outputs.comment-id == 0
uses: peter-evans/[email protected]
with:
issue-number: ${{ github.event.pull_request.number }}
body: |
## Preview Deployment
🚀 Preview this PR: ${{ steps.url_preview.outputs.NETLIFY_PREVIEW_URL }}
📍 Commit SHA: ${{ github.sha }}
- name: Update PR Preview Comment
if: github.event_name == 'pull_request' && steps.deploy-preview-comment.outputs.comment-id != 0
uses: peter-evans/[email protected]
with:
comment-id: ${{ steps.deploy-preview-comment.outputs.comment-id }}
edit-mode: replace
body: |
## Preview Deployment
🚀 Preview this PR: ${{ steps.url_preview.outputs.NETLIFY_PREVIEW_URL }}
📍 Commit SHA: ${{ github.sha }}