@cedgetec-utils/astro-components 1.11.0 → 1.13.0

package/package.json

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

package/src/components/Head.astro

@@ -25,19 +25,37 @@ const title =
 const ogTitle = slug === "" ? props.siteName : `${props.title}`;
 
 // Common favicon / PWA icon sizes.
-const faviconSizes = [16, 32, 48, 96, 192, 512];
+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", 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)) {
-    const image = await getImage({ src, format: "svg" });
-    return [{ type: "image/svg+xml", sizes: "any", href: image.src }];
+  if (await isSvg(src)) {
+    return buildSvgIcon(src);
   }
 
   return Promise.all(
@@ -48,6 +66,7 @@ const buildIcons = async (src: string | ImageMetadata): Promise<Icon[]> => {
         height: size,
         fit: "contain",
         format: "png",
+        quality: "max",
       });
       return { type: "image/png", sizes: `${size}x${size}`, href: image.src };
     }),
@@ -58,11 +77,9 @@ 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;
 ---
 
@@ -123,4 +140,4 @@ const openGraphImage = props.image
   {props.type && <meta property="og:type" content={props.type} />}
   {openGraphImage && <meta property="og:image" content={openGraphImage.src} />}
   <slot />
-</head>
+</head>