Update image service.

Author: nikoshell

src/image.service.ts

@@ -1,14 +1,192 @@
 import type { LocalImageService, ImageTransform } from "astro";
+import * as fs from "fs/promises";
+import * as path from "path";
+import * as crypto from "crypto";
 
 type OutputFormat = "avif" | "jpeg" | "jpg" | "png" | "webp";
 
+const CACHE_DIR = path.join(process.cwd(), ".cache/images");
+const CACHE_TTL = 7 * 24 * 60 * 60 * 1000;
+const FETCH_TIMEOUT = 5000;
+const MAX_RETRIES = 2;
+
+async function ensureCacheDir(): Promise<boolean> {
+  try {
+    await fs.mkdir(CACHE_DIR, { recursive: true });
+    return true;
+  } catch (err) {
+    console.warn("Failed to create image cache directory:", err);
+    return false;
+  }
+}
+
+function getCacheKey(url: string): string {
+  return crypto.createHash("md5").update(url).digest("hex");
+}
+
+async function getCachedImage(url: string): Promise<Uint8Array | null> {
+  const cacheKey = getCacheKey(url);
+  const cachePath = path.join(CACHE_DIR, cacheKey);
+
+  try {
+    const stats = await fs.stat(cachePath);
+    const age = Date.now() - stats.mtimeMs;
+
+    if (age > CACHE_TTL) {
+      return null;
+    }
+
+    const data = await fs.readFile(cachePath);
+    return new Uint8Array(data);
+  } catch (err) {
+    return null;
+  }
+}
+
+async function cacheImage(url: string, data: Uint8Array): Promise<void> {
+  if (!(await ensureCacheDir())) {
+    return;
+  }
+
+  const cacheKey = getCacheKey(url);
+  const cachePath = path.join(CACHE_DIR, cacheKey);
+
+  try {
+    await fs.writeFile(cachePath, data);
+  } catch (err) {
+    console.warn(`Failed to cache image from ${url}:`, err);
+  }
+}
+
+async function cleanupCache(): Promise<void> {
+  try {
+    const dirExists = await fs
+      .access(CACHE_DIR)
+      .then(() => true)
+      .catch(() => false);
+    if (!dirExists) {
+      await ensureCacheDir();
+      return;
+    }
+
+    const files = await fs.readdir(CACHE_DIR);
+    const now = Date.now();
+
+    for (const file of files) {
+      const filePath = path.join(CACHE_DIR, file);
+      try {
+        const stats = await fs.stat(filePath);
+
+        if (now - stats.mtimeMs > CACHE_TTL) {
+          await fs.unlink(filePath);
+        }
+      } catch (err) {
+        continue;
+      }
+    }
+  } catch (err) {
+    if (err instanceof Error && "code" in err && err.code === "ENOENT") {
+      await ensureCacheDir();
+    } else {
+      console.warn("Error during cache cleanup:", err);
+    }
+  }
+}
+
+async function fetchWithTimeout(
+  url: string,
+  timeout: number,
+  retries = 0
+): Promise<Response> {
+  const controller = new AbortController();
+  const id = setTimeout(() => controller.abort(), timeout);
+
+  try {
+    const response = await fetch(url, {
+      signal: controller.signal,
+      headers: {
+        "User-Agent": "Mozilla/5.0 (compatible; AstroImageFetcher/1.0)",
+        Accept: "image/*",
+      },
+    });
+    clearTimeout(id);
+    return response;
+  } catch (error) {
+    clearTimeout(id);
+
+    if (retries < MAX_RETRIES) {
+      console.log(
+        `Retrying fetch for ${url} (attempt ${retries + 1}/${MAX_RETRIES})...`
+      );
+      const backoff = Math.pow(2, retries) * 1000;
+      await new Promise((resolve) => setTimeout(resolve, backoff));
+      return fetchWithTimeout(url, timeout, retries + 1);
+    }
+
+    throw error;
+  }
+}
+
+async function createPlaceholderImage(
+  width: number = 400,
+  height: number = 300
+): Promise<Uint8Array> {
+  try {
+    const sharp = (await import("sharp")).default;
+    const placeholderBuffer = await sharp({
+      create: {
+        width: width || 400,
+        height: height || 300,
+        channels: 3,
+        background: { r: 230, g: 230, b: 230 },
+      },
+    }).toBuffer();
+
+    return new Uint8Array(placeholderBuffer);
+  } catch (err) {
+    return new Uint8Array([
+      137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 1,
+      0, 0, 0, 1, 8, 6, 0, 0, 0, 31, 21, 196, 137, 0, 0, 0, 10, 73, 68, 65, 84,
+      120, 156, 99, 0, 0, 0, 2, 0, 1, 226, 33, 188, 51, 0, 0, 0, 0, 73, 69, 78,
+      68, 174, 66, 96, 130,
+    ]);
+  }
+}
+
+async function preloadRemoteImage(url: string): Promise<Uint8Array> {
+  try {
+    const cachedImage = await getCachedImage(url);
+    if (cachedImage) {
+      return cachedImage;
+    }
+
+    const response = await fetchWithTimeout(url, FETCH_TIMEOUT);
+    if (!response.ok) {
+      throw new Error(`Failed response: ${response.status}`);
+    }
+
+    const buffer = new Uint8Array(await response.arrayBuffer());
+    await cacheImage(url, buffer);
+    return buffer;
+  } catch (err) {
+    console.warn(`Failed to preload image ${url}:`, err);
+    return createPlaceholderImage();
+  }
+}
+
 const service: LocalImageService = {
   getURL(options: ImageTransform) {
     const searchParams = new URLSearchParams();
-    searchParams.append(
-      "href",
-      typeof options.src === "string" ? options.src : options.src.src
-    );
+    const srcValue =
+      typeof options.src === "string" ? options.src : options.src.src;
+
+    if (typeof srcValue === "string" && /^https?:\/\//.test(srcValue)) {
+      preloadRemoteImage(srcValue).catch(() => {
+        // Silent catch
+      });
+    }
+
+    searchParams.append("href", srcValue);
     if (options.width) searchParams.append("w", options.width.toString());
     if (options.height) searchParams.append("h", options.height.toString());
     if (options.quality) searchParams.append("q", options.quality.toString());
@@ -19,10 +197,10 @@ const service: LocalImageService = {
   parseURL(url: URL) {
     const params = url.searchParams;
     return {
-      src: params.get("href")!,
-      width: params.has("w") ? parseInt(params.get("w")!) : undefined,
-      height: params.has("h") ? parseInt(params.get("h")!) : undefined,
-      quality: params.has("q") ? parseInt(params.get("q")!) : undefined,
+      src: params.get("href") ?? "",
+      width: params.has("w") ? parseInt(params.get("w") ?? "0") : undefined,
+      height: params.has("h") ? parseInt(params.get("h") ?? "0") : undefined,
+      quality: params.has("q") ? parseInt(params.get("q") ?? "0") : undefined,
       format: params.get("f") as OutputFormat | undefined,
     };
   },
@@ -37,49 +215,65 @@ const service: LocalImageService = {
       format?: OutputFormat;
     }
   ) {
+    const MAX_WIDTH = 1280;
+    const MAX_HEIGHT = 720;
     let buffer = inputBuffer;
 
     if (/^https?:\/\//.test(transform.src)) {
       try {
-        const response = await fetch(transform.src);
-        if (!response.ok) {
-          console.warn(
-            `⚠️ Failed to fetch image: ${transform.src} (status ${response.status})`
-          );
-          return {
-            data: buffer, // fallback to original input
-            format: transform.format ?? ("webp" as OutputFormat),
-          };
-        }
-        buffer = new Uint8Array(await response.arrayBuffer());
+        const remoteImage = await preloadRemoteImage(transform.src);
+        buffer = remoteImage;
       } catch (err) {
-        console.warn(`⚠️ Error fetching image from ${transform.src}:`, err);
-        return {
-          data: buffer, // fallback to original input
-          format: transform.format ?? ("webp" as OutputFormat),
-        };
+        buffer = await createPlaceholderImage(
+          transform.width,
+          transform.height
+        );
       }
     }
 
-    const sharp = (await import("sharp")).default;
-    let image = sharp(buffer);
+    const width = transform.width
+      ? Math.min(transform.width, MAX_WIDTH)
+      : undefined;
+    const height = transform.height
+      ? Math.min(transform.height, MAX_HEIGHT)
+      : undefined;
 
-    if (transform.width || transform.height) {
-      image = image.resize(transform.width, transform.height);
-    }
+    try {
+      const sharp = (await import("sharp")).default;
+      let image = sharp(buffer, { failOn: "none" });
+      image = image.resize(width, height);
 
-    if (transform.format) {
-      image = image.toFormat(transform.format, {
-        quality: transform.quality,
-      });
-    }
+      if (transform.format) {
+        image = image.toFormat(transform.format, {
+          quality: transform.quality,
+        });
+      }
 
-    const outputBuffer = await image.toBuffer();
+      const outputBuffer = await image.toBuffer();
+      return {
+        data: outputBuffer,
+        format: transform.format ?? ("webp" as OutputFormat),
+      };
+    } catch (err) {
+      console.warn(`⚠️ Error processing image: ${transform.src}`, err);
 
-    return {
-      data: Uint8Array.from(outputBuffer),
-      format: transform.format ?? ("webp" as OutputFormat),
-    };
+      try {
+        const placeholderBuffer = await createPlaceholderImage(
+          transform.width || 400,
+          transform.height || 300
+        );
+
+        return {
+          data: placeholderBuffer,
+          format: transform.format ?? ("webp" as OutputFormat),
+        };
+      } catch (placeholderErr) {
+        return {
+          data: buffer,
+          format: transform.format ?? ("webp" as OutputFormat),
+        };
+      }
+    }
   },
 
   getHTMLAttributes(options) {
@@ -96,7 +290,6 @@ const service: LocalImageService = {
     }
 
     const { src, width, height, format, quality, ...attributes } = options;
-
     return {
       ...attributes,
       width: targetWidth,
@@ -109,4 +302,16 @@ const service: LocalImageService = {
   propertiesToHash: ["src", "width", "height", "format", "quality"],
 };
 
+ensureCacheDir()
+  .then((success) => {
+    if (success) {
+      return cleanupCache().catch(() => {
+        /* Ignore errors */
+      });
+    }
+  })
+  .catch(() => {
+    /* Ignore errors */
+  });
+
 export default service;

src/pages/speaker/[slug].astro

@@ -22,7 +22,7 @@ let avatar: any;
 
 if (entry.data.avatar){
   try {
-    avatar = getImage({ src: entry.data.avatar , width:600, height:400, alt: 'User avatar' });
+    avatar = getImage({ src: entry.data.avatar , 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' });