Merge pull request #3084 from balena-io/vipulgupta2048/build-webp

Convert images on deploy time instead at pre-commit

.cspell/computer-terms.txt

@@ -100,6 +100,7 @@ cpuset
 createapikey
 crossbuilding
 cssesc
+cwebp
 CUDA
 Customboard
 decamelize

README.md

@@ -63,7 +63,7 @@ One can open or check existing issues on [GitHub issues](https://github.com/bale
 
 ## Deploying
 
-Shortly after merging a PR to the `master` branch, Flowzone will run on the deploy script `npm run deploy-docs` on master branch and deploy the docs on [balenacloud-docs.pages.dev](https://balenacloud-docs.pages.dev).
+Shortly after merging a PR to the `master` branch, Flowzone will run on the deploy script on the master branch and deploy the docs on [balenacloud-docs.pages.dev](https://balenacloud-docs.pages.dev). The deploy script needs to install `cwebp` to convert images to webp format. At the moment, this command is only available to be run on Linux.
 
 The docs are hosted on Cloudflare Pages as a static site. 
 

config/redirects.txt

@@ -268,10 +268,20 @@
 
 # Important: keep dynamic redirect below the static redirects
 # https://developers.cloudflare.com/pages/platform/redirects/
-# Dynamic redirects
+
+# BREAKING - Redirect all image formats to webp
+# All images must be served in webp format
+# The build script converts images during build time.
 
 /img/*.png/ /img/:splat.webp
 /img/*.png /img/:splat.webp
+/img/*.jpg/ /img/:splat.webp
+/img/*.jpg /img/:splat.webp
+/img/*.jpeg/ /img/:splat.webp
+/img/*.jpeg /img/:splat.webp
+
+# Dynamic redirects
+
 /deployment/network/:version/ /reference/OS/network/
 /deployment/network/:version /reference/OS/network/
 /understanding/understanding-devices/:version/ /reference/OS/overview/

package.json

@@ -14,11 +14,10 @@
     "test:spelling": "cspell lint --gitignore -c cspell.json",
     "build": "./tools/fetch-external.sh && npm run build:fast",
     "build:fast": "./tools/build.sh && webpack --mode production && ./tools/deploy-static-page.sh",
-    "deploy-docs": "npm ci && npm run build",
+    "deploy-docs": "sudo apt install webp && npm ci && npm run build",
     "watch-pages": "watch ./tools/build.sh pages shared templates config",
     "watch-assets": "webpack --mode=development -w",
-    "watch": "npm run watch-pages & npm run watch-assets",
-    "prepare": "husky"
+    "watch": "npm run watch-pages & npm run watch-assets"
   },
   "repository": {
     "type": "git",
@@ -48,7 +47,6 @@
     "cspell": "^8.9.1",
     "css-loader": "5.2.7",
     "file-loader": "6.2.0",
-    "husky": "^9.1.4",
     "mini-css-extract-plugin": "^1.6.2",
     "node-html-markdown": "^1.3.0",
     "node-jq": "^4.4.0",

tools/build.sh

@@ -16,6 +16,9 @@ node ./tools/generate-docs-contracts.js
 # Generate base images docs
 ./tools/build-base-images.sh
 
+# Convert .jpg, .jpeg, .png images to .webp format
+./tools/convert-images-to-webp.sh
+
 # run cd in a subshell so we don't end up in another directory on failure
 (
     cd "$SCRIPT_DIR/.."

tools/convert-images-to-webp.sh

@@ -1,15 +1,15 @@
 #!/bin/bash
 
-# One time script to convert all jpeg, jpg, png image to webp format
+# Script to convert all jpeg, jpg, png image to webp format in the docs
 # Run the script from the docs root directory to convert all image files in the IMAGE_DIR folder
 
 # Define the directory containing the images
 IMAGE_DIR="./static/img"
 
-# Check if cwebp is installed
-if ! command -v cwebp &> /dev/null; then
-    echo "Error: cwebp is not installed. Please install and try again."
-    exit 1
+# Exit 0 if cwebp is not installed
+if ! command -v cwebp >/dev/null 2>&1; then
+  echo "Warning: cwebp is not installed. Can't convert existing images to Webp format. Please install cwebp to use this script."
+  exit 0
 fi
 
 # Find all .jpg, .jpeg, .png files in the directory and its subdirectories