Add image prefetch and cache.

Author: nikoshell

.gitignore

@@ -147,3 +147,4 @@ src/content/days
 src/data/speakers.json
 src/data/sessions.json
 src/data/schedule.json
+src/assets/cache

src/image-cache.ts

@@ -0,0 +1,116 @@
+import fs from "fs";
+import path from "path";
+import Sharp from "sharp";
+import * as crypto from "crypto";
+
+interface CacheOptions {
+  directory?: string;
+  format?: "webp" | "png" | "jpeg";
+  quality?: number;
+  width?: number;
+  height?: number;
+}
+
+/**
+ * Fetches and caches an image from a URL, returning the local path
+ * @param imageUrl The URL of the image to fetch and cache
+ * @param options Configuration options for caching
+ * @returns Path to the cached image
+ */
+export async function getCachedImage(
+  imageUrl: string,
+  options: CacheOptions = {}
+): Promise<string> {
+  if (!imageUrl || typeof imageUrl !== "string") {
+    throw new Error("Invalid image URL provided");
+  }
+
+  // Default options
+  const directory = options.directory || "./src/assets/cache";
+  const format = options.format || "webp";
+  const quality = options.quality || 80;
+
+  // Create hash from URL for the filename
+  const hash = crypto.createHash("md5").update(imageUrl).digest("hex");
+  const filename = `${hash}.${format}`;
+  const cachePath = path.join(directory, filename);
+
+  console.log(`Cache: ${cachePath}`);
+
+  try {
+    // Create cache directory if it doesn't exist
+    if (!fs.existsSync(directory)) {
+      fs.mkdirSync(directory, { recursive: true });
+    }
+
+    // Check if file exists and is valid
+    if (fs.existsSync(cachePath)) {
+      try {
+        // Verify file is valid by trying to read its metadata
+        await Sharp(cachePath).metadata();
+        // If we get here, the file is valid
+      } catch (error) {
+        console.warn(
+          `Invalid cached image detected, will re-download: ${cachePath}`
+        );
+        // Delete the corrupted file
+        fs.unlinkSync(cachePath);
+      }
+    }
+
+    // Download and process the image if needed
+    if (!fs.existsSync(cachePath)) {
+      const response = await fetch(imageUrl);
+
+      if (!response.ok) {
+        throw new Error(
+          `Failed to fetch image: ${response.status} ${response.statusText}`
+        );
+      }
+
+      const buffer = Buffer.from(await response.arrayBuffer());
+
+      // Process with Sharp
+      let sharpInstance = Sharp(buffer);
+
+      // Apply resizing if requested
+      if (options.width || options.height) {
+        sharpInstance = sharpInstance.resize({
+          width: options.width,
+          height: options.height,
+          fit: "inside",
+          withoutEnlargement: true,
+        });
+      }
+
+      // Convert to requested format with quality setting
+      switch (format) {
+        case "webp":
+          sharpInstance = sharpInstance.webp({ quality });
+          break;
+        case "png":
+          sharpInstance = sharpInstance.png({ quality });
+          break;
+        case "jpeg":
+          sharpInstance = sharpInstance.jpeg({ quality });
+          break;
+      }
+
+      // Save to file
+      await sharpInstance.toFile(cachePath);
+
+      // Verify the file was written correctly
+      await Sharp(cachePath).metadata();
+    }
+
+    // Return path relative to project root
+    return cachePath.startsWith("./") ? cachePath.slice(1) : cachePath;
+  } catch (error) {
+    console.error(`Error caching image ${imageUrl}:`, error);
+    if (error instanceof Error) {
+      throw new Error(`Failed to cache image: ${error.message}`);
+    } else {
+      throw new Error(`Failed to cache image: ${String(error)}`);
+    }
+  }
+}

src/pages/speaker/[slug].astro

@@ -6,6 +6,7 @@ import { Picture, getImage } from "astro:assets";
 import Markdown from "@ui/Markdown.astro";
 import Headline from "@ui/Headline.astro";
 import Placeholder from "@assets/placeholder.png";
+import { getCachedImage } from "../../image-cache";
 
 export async function getStaticPaths() {
   const entries = await getCollection("speakers");
@@ -19,9 +20,13 @@ const {entry} = Astro.props;
 
 let avatar: any;
 
+
 if (entry.data.avatar){
+
   try {
-    avatar = await getImage({ src: entry.data.avatar, inferSize: true, format: "webp", alt: 'User avatar' });
+    const url = await getCachedImage(entry.data.avatar);
+    const image = import(/* @vite-ignore */url);
+    avatar = await getImage({ src: image, inferSize: true, format: "webp", alt: 'User avatar' });
   } catch (e) {
     //TODO: improve placeholders and offline
     //avatar = await getImage({ src: 'https://placehold.co/600x400?text=x', width: '600', height:'400', alt: 'Default avatar' });