@cedgetec-utils/astro-components 1.8.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedgetec-utils/astro-components",
-  "version": "1.8.0",
+  "version": "1.11.0",
   "keywords": [
     "astro-component"
   ],
@@ -13,19 +13,15 @@
     ".": "./src/components/index.ts",
     "./libs": "./src/libs/index.ts"
   },
-  "scripts": {
-    "lint": "oxlint",
-    "format": "oxfmt"
-  },
   "dependencies": {
-    "astro": "^6.0.2"
+    "astro": "^6.4.7"
   },
   "devDependencies": {
-    "oxfmt": "^0.38.0",
-    "oxlint": "^1.53.0",
-    "typescript": "^5.9.3"
+    "oxfmt": "^0.55.0",
+    "oxlint": "^1.70.0",
+    "typescript": "^6.0.3"
   },
   "peerDependencies": {
-    "astro": "^6.0.2"
+    "astro": "^6.4.7"
   }
 }

package/src/components/Head.astro

@@ -24,19 +24,38 @@ const title =
 
 const ogTitle = slug === "" ? props.siteName : `${props.title}`;
 
-const iconLight = await getImage({
-  src: props.icons.light,
-  width: 48,
-  height: 48,
-  fit: "contain",
-});
-
-const iconDark = await getImage({
-  src: props.icons.dark,
-  width: 48,
-  height: 48,
-  fit: "contain",
-});
+// Common favicon / PWA icon sizes.
+const faviconSizes = [16, 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 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 }];
+  }
+
+  return Promise.all(
+    faviconSizes.map(async (size) => {
+      const image = await getImage({
+        src,
+        width: size,
+        height: size,
+        fit: "contain",
+        format: "png",
+      });
+      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({
@@ -51,9 +70,38 @@ const openGraphImage = props.image
   <meta charset="UTF-8" />
   <title>{title}</title>
 
-  <link rel="icon" href={iconDark.src} />
-  <link rel="icon" href={iconLight.src} media="(prefers-color-scheme:dark)" />
-  <link rel="icon" href={iconDark.src} media="(prefers-color-scheme:light)" />
+  {/* Default fallback icons (used when prefers-color-scheme is unsupported) */}
+  {
+    iconsDark.map(({ type, sizes, href }) => (
+      <link rel="icon" type={type} sizes={sizes} href={href} />
+    ))
+  }
+
+  {/* Light-colored icons for dark UI */}
+  {
+    iconsLight.map(({ type, sizes, href }) => (
+      <link
+        rel="icon"
+        type={type}
+        sizes={sizes}
+        href={href}
+        media="(prefers-color-scheme:dark)"
+      />
+    ))
+  }
+
+  {/* Dark-colored icons for light UI */}
+  {
+    iconsDark.map(({ type, sizes, href }) => (
+      <link
+        rel="icon"
+        type={type}
+        sizes={sizes}
+        href={href}
+        media="(prefers-color-scheme:light)"
+      />
+    ))
+  }
 
   <meta name="generator" content={Astro.generator} />
   <meta name="view-transition" content="same-origin" />
@@ -75,4 +123,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>