@cedgetec-utils/astro-components 1.8.0 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cedgetec-utils/astro-components",
3
- "version": "1.8.0",
3
+ "version": "1.10.0",
4
4
  "keywords": [
5
5
  "astro-component"
6
6
  ],
@@ -13,19 +13,15 @@
13
13
  ".": "./src/components/index.ts",
14
14
  "./libs": "./src/libs/index.ts"
15
15
  },
16
- "scripts": {
17
- "lint": "oxlint",
18
- "format": "oxfmt"
19
- },
20
16
  "dependencies": {
21
- "astro": "^6.0.2"
17
+ "astro": "^6.4.7"
22
18
  },
23
19
  "devDependencies": {
24
- "oxfmt": "^0.38.0",
25
- "oxlint": "^1.53.0",
26
- "typescript": "^5.9.3"
20
+ "oxfmt": "^0.55.0",
21
+ "oxlint": "^1.70.0",
22
+ "typescript": "^6.0.3"
27
23
  },
28
24
  "peerDependencies": {
29
- "astro": "^6.0.2"
25
+ "astro": "^6.4.7"
30
26
  }
31
27
  }
@@ -24,19 +24,25 @@ const title =
24
24
 
25
25
  const ogTitle = slug === "" ? props.siteName : `${props.title}`;
26
26
 
27
- const iconLight = await getImage({
28
- src: props.icons.light,
29
- width: 48,
30
- height: 48,
31
- fit: "contain",
32
- });
27
+ // Common favicon / PWA icon sizes.
28
+ const faviconSizes = [16, 32, 48, 96, 192, 512];
33
29
 
34
- const iconDark = await getImage({
35
- src: props.icons.dark,
36
- width: 48,
37
- height: 48,
38
- fit: "contain",
39
- });
30
+ const buildIcons = (src: string | ImageMetadata) =>
31
+ Promise.all(
32
+ faviconSizes.map(async (size) => ({
33
+ size,
34
+ image: await getImage({
35
+ src,
36
+ width: size,
37
+ height: size,
38
+ fit: "contain",
39
+ format: "png",
40
+ }),
41
+ })),
42
+ );
43
+
44
+ const iconsLight = await buildIcons(props.icons.light);
45
+ const iconsDark = await buildIcons(props.icons.dark);
40
46
 
41
47
  const openGraphImage = props.image
42
48
  ? await getImage({
@@ -51,9 +57,43 @@ const openGraphImage = props.image
51
57
  <meta charset="UTF-8" />
52
58
  <title>{title}</title>
53
59
 
54
- <link rel="icon" href={iconDark.src} />
55
- <link rel="icon" href={iconLight.src} media="(prefers-color-scheme:dark)" />
56
- <link rel="icon" href={iconDark.src} media="(prefers-color-scheme:light)" />
60
+ {/* Default fallback icons (used when prefers-color-scheme is unsupported) */}
61
+ {
62
+ iconsDark.map(({ size, image }) => (
63
+ <link
64
+ rel="icon"
65
+ type="image/png"
66
+ sizes={`${size}x${size}`}
67
+ href={image.src}
68
+ />
69
+ ))
70
+ }
71
+
72
+ {/* Light-colored icons for dark UI */}
73
+ {
74
+ iconsLight.map(({ size, image }) => (
75
+ <link
76
+ rel="icon"
77
+ type="image/png"
78
+ sizes={`${size}x${size}`}
79
+ href={image.src}
80
+ media="(prefers-color-scheme:dark)"
81
+ />
82
+ ))
83
+ }
84
+
85
+ {/* Dark-colored icons for light UI */}
86
+ {
87
+ iconsDark.map(({ size, image }) => (
88
+ <link
89
+ rel="icon"
90
+ type="image/png"
91
+ sizes={`${size}x${size}`}
92
+ href={image.src}
93
+ media="(prefers-color-scheme:light)"
94
+ />
95
+ ))
96
+ }
57
97
 
58
98
  <meta name="generator" content={Astro.generator} />
59
99
  <meta name="view-transition" content="same-origin" />
@@ -75,4 +115,4 @@ const openGraphImage = props.image
75
115
  {props.type && <meta property="og:type" content={props.type} />}
76
116
  {openGraphImage && <meta property="og:image" content={openGraphImage.src} />}
77
117
  <slot />
78
- </head>
118
+ </head>