Bull 1992

.husky/pre-commit

 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
-commit_error=0
-find -E "./src" "./public" -type f -iregex "^.*\.(png|jpe?g|gif|tiff?|bmp)$" > "./.image_files"
-if [ -s "./.image_files" ]
-   then
-   if [ -s "./.webp_exclusions" ]
-       then
-       cp "./.webp_exclusions" "./.webp_exclusions_escaped"
-       sed -i.bak -e '/^[[:blank:]]*#.*$/d' -e '/^[[:blank:]]*$/d' "./.webp_exclusions_escaped"
-       sed -i.bak -E 's/[^a-zA-Z 0-9]/\\&/g' "./.webp_exclusions_escaped"
-       <"./.webp_exclusions_escaped" tr "\n" "\0" | xargs -0 -I {} sed -i.bak "/^{}$/d" "./.image_files"
-       rm -f "./.image_files.bak" "./.webp_exclusions_escaped" "./.webp_exclusions_escaped.bak"
-   fi
-   git diff --name-only --staged | awk '{print "./" $0;}' > "./.staged_files"
-   cp "./.image_files" "./.image_files_escaped"
-   sed -i.bak -E 's/[^a-zA-Z 0-9]/\\&/g' "./.image_files_escaped"
-   while read -r filepath; do
-       if ! grep -q "$filepath" "./.staged_files"; then
-           sed -i.bak "/^$filepath$/d" "./.image_files"
-       fi
-   done <"./.image_files_escaped"
-  if [ -s "./.image_files" ]
-      then
-      commit_error=1
-       while read -r filepath; do
-           echo "File $filepath needs to be converted to WebP format before committing"
-       done <"./.image_files"
-   fi
-fi
-rm -f "./.image_files" "./.image_files.bak" "./.image_files_escaped" "./.image_files_escaped.bak" "./.staged_files"
-if [ $commit_error -eq 1 ]
-   then
-   exit 1
-fi
 
+npm run check-image-formats
 npx pretty-quick --staged
 npm run lint
 npm run build && npm run generate-search-index

.webp_exclusions

-# Paths must be in the form ./{path to file}/file.ext
-# Paths are case sensitive
-
-./src/assets/images/Uber-Graphic.png

package-lock.json

@@ -35,6 +35,7 @@
         "eslint": "^8.22.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-vue": "^9.3.0",
+        "glob": "^8.0.3",
         "husky": "^7.0.4",
         "jsdom": "^20.0.0",
         "mime": "^3.0.0",

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "build": "vite build",
+    "check-image-formats": "babel-node --presets='@babel/preset-env' scripts/check-image-formats.js",
     "dev": "vite",
     "format": "prettier .  --write",
     "generate-search-index": "babel-node --presets='@babel/preset-env' scripts/generate-search-index.js",
@@ -46,6 +47,7 @@
     "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-vue": "^9.3.0",
+    "glob": "^8.0.3",
     "husky": "^7.0.4",
     "jsdom": "^20.0.0",
     "mime": "^3.0.0",

scripts/check-image-formats.js

+/**
+ * This script checks to see if there are any non-webp images in the codebase.
+ */
+
+import glob from "glob";
+
+/**
+ * Use EXCLUDE_PATHS to allow certain images to not use the webp format.
+ * No error will be thrown if these images exist.
+ */
+const EXCLUDE_PATHS = new Set(["src/assets/images/Uber-Graphic.png"]);
+
+const imagePaths = glob
+  // get image paths
+  .sync("src/**/*.?(png|jpg|jpeg|gif|tif|tiff|bmp)")
+  // filter out excluded images
+  .filter((p) => !EXCLUDE_PATHS.has(p));
+
+// success case - no images to convert
+if (imagePaths.length === 0) {
+  process.exit(0);
+}
+
+console.error(
+  `The following image${
+    imagePaths.length === 1 ? "" : "s"
+  } should be converted to .webp format:`
+);
+for (const imagePath of imagePaths) {
+  console.log("\t", imagePath);
+}
+
+process.exit(1);