Trying to make image compression work istg

Makefile

@@ -8,13 +8,17 @@ help:
 	@echo "  publish       Restart Docker Compose (or run 'npx quartz build --serve' with local=True)."
 	@echo "  preview       Run 'npx quartz build --serve' with specific directories."
 
+compress-images:
+	@./scripts/compress_images.sh
+
 # Target-specific variables for the publish target
 publish:
 	@./scripts/publish.sh "$(SOURCE_DIR)" "$(DEST_DIR)"
 	@if [ "$(local)" = "True" ]; then \
 		echo "Running npx quartz build --serve"; \
 		npx quartz build --serve; \
+		@./scripts/compress_images.sh; \
 	else \
 		echo "Restarting Docker Compose"; \
 		docker compose restart; \
-	fi
+	fi

package.json

@@ -78,8 +78,8 @@
     "remark-rehype": "^10.1.0",
     "remark-smartypants": "^2.0.0",
     "rimraf": "^5.0.1",
-    "sharp": "^0.33.2",
     "serve-handler": "^6.1.5",
+    "sharp": "^0.33.2",
     "source-map-support": "^0.5.21",
     "to-vfile": "^7.2.4",
     "toml": "^3.0.0",

quartz/build.ts

@@ -17,25 +17,6 @@ import { glob, toPosixPath } from "./util/glob"
 import { trace } from "./util/trace"
 import { options } from "./util/sourcemap"
 import { Mutex } from "async-mutex"
-import sharp from "sharp"
-
-async function compressImages(inputDir, outputDir) {
-  const files = await glob(`${inputDir}/**/*.{jpg,png}`);
-
-  // Use sharp for image compression
-  await Promise.all(
-    files.map(async (file) => {
-      const outputPath = path.join(outputDir, path.relative(inputDir, file));
-
-      await sharp(file)
-        .jpeg({ quality: 75 }) // Adjust quality as needed for JPEG
-        .png({ quality: 0.6 }) // Adjust quality as needed for PNG
-        .toFile(outputPath);
-    })
-  );
-
-  console.log(`Compressed ${files.length} images.`);
-}
 
 async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
   const ctx: BuildCtx = {
@@ -62,8 +43,6 @@ async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
   await rimraf(output)
   console.log(`Cleaned output directory \`${output}\` in ${perf.timeSince("clean")}`)
 
-  await compressImages(argv.directory, output);
-
   perf.addEvent("glob")
   const allFiles = await glob("**/*.*", argv.directory, cfg.configuration.ignorePatterns)
   const fps = allFiles.filter((fp) => fp.endsWith(".md")).sort()

quartz/plugins/transformers/ofm.ts

@@ -211,9 +211,10 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                   let [width, height] = dims.split("x", 2)
                   width ||= "auto"
                   height ||= "auto"
+                  const webpUrl = "images/" + url.replace(/\.[a-zA-Z]+$/, ".webp");
                   return {
                     type: "image",
-                    url,
+                    url: webpUrl,
                     data: {
                       hProperties: {
                         width,

scripts/compress_images.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+# Set the source and destination directories
+SOURCE_DIR="content/images"
+DESTINATION_DIR="public/images"
+
+# Create the destination directory if it doesn't exist
+mkdir -p "$DESTINATION_DIR"
+
+# Iterate over image files in the source directory
+for IMAGE_PATH in "$SOURCE_DIR"/*.jpg "$SOURCE_DIR"/*.png; do
+  # Check if there are matching files
+  if [ -e "$IMAGE_PATH" ]; then
+    # Extract the filename and extension
+    FILENAME=$(basename -- "$IMAGE_PATH")
+    EXTENSION="${FILENAME##*.}"
+    FILENAME_NOEXT="${FILENAME%.*}"
+
+    # Compress the image using `sharp` (ensure sharp is installed: npm install sharp)
+    npx sharp "$IMAGE_PATH" --webp --quality=75 > "$DESTINATION_DIR/$FILENAME_NOEXT.webp"
+
+    echo "Compressed $IMAGE_PATH to $DESTINATION_DIR/$FILENAME_NOEXT.webp"
+  fi
+done
+
+echo "Image compression complete!"