Load content collections from json files.

Author: nikoshell

astro.config.mjs

@@ -78,6 +78,11 @@ export default defineConfig({
   },
   image: {
     experimentalLayout: "responsive",
+    remotePatterns: [{ protocol: "https" }],
+    domains: ["programme.europython.eu", "placehold.co"],
+    service: {
+      entrypoint: "src/image.service.ts",
+    },
   },
   experimental: {
     responsiveImages: true,

src/assets/placeholder.png

@@ -0,0 +1,99 @@
+import type { LocalImageService, ImageTransform, AstroConfig } from "astro";
+
+type OutputFormat = "avif" | "jpeg" | "jpg" | "png" | "webp";
+
+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
+    );
+    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());
+    if (options.format) searchParams.append("f", options.format);
+    return `/_image/?${searchParams.toString()}`;
+  },
+
+  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,
+      quality: params.has("q") ? parseInt(params.get("q")!) : undefined,
+      format: params.get("f") as OutputFormat | undefined,
+    };
+  },
+
+  async transform(
+    inputBuffer: Uint8Array,
+    transform: {
+      src: string;
+      width?: number;
+      height?: number;
+      quality?: number;
+      format?: OutputFormat;
+    },
+    imageConfig
+  ) {
+    let buffer = inputBuffer;
+
+    if (/^https?:\/\//.test(transform.src)) {
+      const response = await fetch(transform.src);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch image from ${transform.src}`);
+      }
+      buffer = new Uint8Array(await response.arrayBuffer());
+    }
+
+    const sharp = (await import("sharp")).default;
+    let image = sharp(buffer);
+
+    if (transform.width || transform.height) {
+      image = image.resize(transform.width, transform.height);
+    }
+
+    if (transform.format) {
+      image = image.toFormat(transform.format, {
+        quality: transform.quality,
+      });
+    }
+
+    const outputBuffer = await image.toBuffer();
+
+    return {
+      data: outputBuffer,
+      format: transform.format ?? "webp",
+    };
+  },
+
+  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;

src/assets/placeholder.svg

@@ -2,10 +2,10 @@
 import { getCollection, getEntries } from "astro:content";
 import Layout from "../../layouts/Layout.astro";
 import Prose from "../../components/prose/prose.astro";
-import { Picture } from "astro:assets";
-import { getEntry, render } from 'astro:content';
+import { Picture, getImage } from "astro:assets";
 import Markdown from "@ui/Markdown.astro";
 import Headline from "@ui/Headline.astro";
+import Placeholder from "@assets/placeholder.png";
 
 export async function getStaticPaths() {
   const entries = await getCollection("speakers");
@@ -18,6 +18,19 @@ export async function getStaticPaths() {
 const {entry} = Astro.props;
 console.log(entry.data.avatar);
 
+let avatar: any;
+
+try {
+
+avatar = getImage({ src: entry.data.avatar , width:'600', htight: '400', 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' });
+  //avatar = await getImage({ src: '@assets/prague.png', width: '600', height:'400', alt: 'Default avatar' });
+  avatar = Placeholder;
+}
+
+
 const sessions = await getEntries(entry.data.submissions);
 
 // Get @username from Twitter URL
@@ -75,7 +88,7 @@ function ensureHttps(str: string): string {
       (entry.data.avatar &&
         <div class="border-4 border-white rounded-lg shadow-lg inline-block mb-10">
           <Picture
-            src={entry.data.avatar}
+            src={avatar}
             alt={entry.data.name}
             inferSize={true}
             widths={[400, 800, 1200]}