@cedgetec-utils/astro-components 1.12.0 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedgetec-utils/astro-components",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "keywords": [
     "astro-component"
   ],

package/src/components/Head.astro

@@ -29,52 +29,57 @@ const faviconSizes = [32, 48, 96, 192, 512];
 
 type Icon = { type: string; sizes: string; href: string };
 
-const isSvg = (src: string | ImageMetadata) =>
-  typeof src === "string" ? src.endsWith(".svg") : src.format === "svg";
+const isSvg = async (src: string | ImageMetadata): Promise<boolean> => {
+  if (typeof src !== "string") return src.format === "svg";
+  if (src.endsWith(".svg")) return true;
+
+  // Remote / extensionless URLs (e.g. Directus assets) carry no hint in the
+  // path, so probe the response's content type. `getImage` can't tell us:
+  // it only builds the `/_image` URL — the rasterization (and any
+  // UnsupportedImageFormat error) happens later when that URL is requested,
+  // outside this component, so we must detect SVGs up front.
+  try {
+    const res = await fetch(src, { method: "HEAD" });
+    return (res.headers.get("content-type") ?? "").includes("svg");
+  } catch {
+    return false;
+  }
+};
 
 const buildSvgIcon = async (src: string | ImageMetadata): Promise<Icon[]> => {
-  const image = await getImage({ src, format: "svg", quality: "max" });
+  const image = await getImage({ src, format: "svg", inferSize: true});
   return [{ type: "image/svg+xml", sizes: "any", href: image.src }];
 };
 
 const buildIcons = async (src: string | ImageMetadata): Promise<Icon[]> => {
   // An SVG favicon scales to any size, so pass it through unchanged rather
   // than rasterizing it to PNG at every size.
-  if (isSvg(src)) {
+  if (await isSvg(src)) {
     return buildSvgIcon(src);
   }
 
-  try {
-    return await Promise.all(
-      faviconSizes.map(async (size) => {
-        const image = await getImage({
-          src,
-          width: size,
-          height: size,
-          fit: "contain",
-          format: "png",
-          quality: "max",
-        });
-        return { type: "image/png", sizes: `${size}x${size}`, href: image.src };
-      }),
-    );
-  } catch {
-    // `isSvg` only detects SVGs by their `.svg` extension, so a string URL
-    // that points to an SVG without one slips through and fails to
-    // rasterize. Fall back to treating it as an SVG.
-    return buildSvgIcon(src);
-  }
+  return Promise.all(
+    faviconSizes.map(async (size) => {
+      const image = await getImage({
+        src,
+        width: size,
+        height: size,
+        fit: "contain",
+        format: "png",
+        quality: "max",
+      });
+      return { type: "image/png", sizes: `${size}x${size}`, href: image.src };
+    }),
+  );
 };
 
 const iconsLight = await buildIcons(props.icons.light);
 const iconsDark = await buildIcons(props.icons.dark);
 
 const openGraphImage = props.image
-  ? await getImage({
-      src: props.image,
-      width: 1000,
-      height: 500,
-    })
+  ? (await isSvg(props.image))
+    ? await getImage({ src: props.image, format: "svg", quality: "max" })
+    : await getImage({ src: props.image, width: 1000, height: 500 })
   : null;
 ---