Add local image service.

Author: nikoshell

astro.config.mjs

@@ -1,5 +1,5 @@
 import path from "path";
-import { defineConfig, passthroughImageService } from "astro/config";
+import { defineConfig } from "astro/config";
 import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
@@ -11,6 +11,7 @@ import pagefind from "astro-pagefind";
 import deleteUnusedImages from "astro-delete-unused-images";
 import preload from "astro-preload";
 import { execSync } from "node:child_process";
+import safeRemoteService from "./src/services/safe-remote.ts";
 
 let gitVersion = String(process.env.GIT_VERSION ?? "").slice(0, 7);
 
@@ -88,9 +89,6 @@ export default defineConfig({
     metaTags(),
     pagefind(),
     deleteUnusedImages(),
-    (await import("astro-compress")).default({
-      SVG: false,
-    }),
   ],
   output: "static",
   build: {
@@ -99,6 +97,6 @@ export default defineConfig({
   image: {
     remotePatterns: [{ protocol: "https" }],
     domains: ["programme.europython.eu", "placehold.co"],
-    service: passthroughImageService(),
+    service: safeRemoteService,
   },
 });

src/components/sections/speakers.astro

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from "astro:content";
 import type { CollectionEntry } from "astro:content";
-import Image from "@ui/SafeImage.astro";
+import { Image } from "astro:assets";
 import Section from "@ui/Section.astro"
 
 const allSpeakers = await getCollection("speakers");

src/pages/speaker/[slug].astro

@@ -2,7 +2,7 @@
 import { getCollection, getEntries } from "astro:content";
 import Layout from "@layouts/Layout.astro";
 import Prose from "@ui/Prose.astro";
-import Image from "@ui/SafeImage.astro";
+import { Image } from "astro:assets";
 import Markdown from "@ui/Markdown.astro";
 import Headline from "@ui/Headline.astro";
 import Section from "@ui/Section.astro"

src/services/safe-remote.ts

@@ -0,0 +1,124 @@
+import type { LocalImageService, AstroConfig, ImageTransform } from "astro";
+import sharp from "sharp";
+import fs from "node:fs/promises";
+import path from "node:path";
+
+type ImageFormat = "webp" | "png" | "jpeg" | "avif";
+
+const PLACEHOLDER_PATH = path.resolve("public/images/placeholder.png");
+
+async function getPlaceholderImage(): Promise<Uint8Array> {
+  const buffer = await fs.readFile(PLACEHOLDER_PATH);
+  return new Uint8Array(buffer);
+}
+
+async function encodesImages(options: {
+  buffer: Uint8Array;
+  width?: number;
+  height?: number;
+  format?: ImageFormat;
+  quality?: number;
+}): Promise<{ buffer: Uint8Array }> {
+  const { buffer, width, height, format = "webp", quality = 80 } = options;
+
+  const output = await sharp(buffer)
+    .resize(width, height)
+    .toFormat(format, { quality })
+    .toBuffer();
+
+  return {
+    buffer: output as unknown as Uint8Array,
+  };
+}
+
+const service: LocalImageService = {
+  getURL(options: ImageTransform, _imageConfig: AstroConfig["image"]) {
+    const searchParams = new URLSearchParams();
+    searchParams.append(
+      "href",
+      typeof options.src === "string" ? options.src : options.src.src
+    );
+    options.width && searchParams.append("w", options.width.toString());
+    options.height && searchParams.append("h", options.height.toString());
+    options.quality && searchParams.append("q", options.quality.toString());
+    options.format && searchParams.append("f", options.format);
+    return `/_image?${searchParams}`;
+  },
+
+  parseURL(url: URL, _imageConfig) {
+    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,
+      format: params.get("f") as ImageFormat | undefined,
+      quality: params.has("q") ? parseInt(params.get("q")!) : undefined,
+    };
+  },
+
+  async transform(
+    buffer: Uint8Array,
+    options: {
+      src: string;
+      width?: number;
+      height?: number;
+      format?: ImageFormat;
+      quality?: number;
+    },
+    _imageConfig
+  ) {
+    const { width, height, format, quality } = options;
+
+    try {
+      const result = await encodesImages({
+        buffer,
+        width,
+        height,
+        format,
+        quality,
+      });
+
+      return {
+        data: result.buffer,
+        format: format ?? "webp",
+      };
+    } catch (err) {
+      console.error(
+        `Image transform failed for ${options.src}. Returning placeholder.`,
+        err
+      );
+      const fallbackBuffer = await getPlaceholderImage();
+      return {
+        data: fallbackBuffer,
+        format: "png", // Must match actual placeholder format
+      };
+    }
+  },
+
+  getHTMLAttributes(options, _imageConfig) {
+    let targetWidth = options.width;
+    let targetHeight = options.height;
+    if (typeof options.src === "object") {
+      const aspectRatio = options.src.width / options.src.height;
+      if (targetHeight && !targetWidth) {
+        targetWidth = Math.round(targetHeight * aspectRatio);
+      } else if (targetWidth && !targetHeight) {
+        targetHeight = Math.round(targetWidth / aspectRatio);
+      }
+    }
+
+    const { src, width, height, format, quality, ...attributes } = options;
+
+    return {
+      ...attributes,
+      width: targetWidth,
+      height: targetHeight,
+      loading: attributes.loading ?? "lazy",
+      decoding: attributes.decoding ?? "async",
+    };
+  },
+
+  propertiesToHash: ["src", "width", "height", "format", "quality"],
+};
+
+export default service;