@windstream/react-shared-components 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/components/next-image/index.tsx

@@ -1,7 +1,10 @@
 "use client";
 
 import { forwardRef } from "react";
-import NextJsImage, { type ImageProps as NextImageProps } from "next/image";
+import NextJsImage, {
+  type ImageLoaderProps,
+  type ImageProps as NextImageProps,
+} from "next/image";
 
 import { cx } from "@shared/utils";
 
@@ -9,21 +12,40 @@ export interface NextImageComponentProps extends NextImageProps {
   className?: string;
 }
 
+/**
+ * Image loader that uses Contentful's Image API to serve optimized WebP images
+ * at the requested width and quality, avoiding an extra round-trip through
+ * the Next.js image optimization server.
+ */
+const contentfulImageLoader = ({ src, width, quality }: ImageLoaderProps) => {
+  const url = new URL(src);
+  url.searchParams.set("w", String(width));
+  url.searchParams.set("q", String(quality || 90));
+  url.searchParams.set("fm", "webp");
+  return url.toString();
+};
+
 export const NextImage = forwardRef<HTMLImageElement, NextImageComponentProps>(
   ({ className, ...props }, ref) => {
-    // Only disable optimization for SVG files from Contentful
-    // Remove query params before checking file extension
     const srcString = typeof props.src === "string" ? props.src : "";
     const urlWithoutParams = srcString.toLowerCase().split("?")[0] || "";
+    const isContentfulImage = srcString.includes("images.ctfassets.net");
     const isSvgFromContentful =
-      srcString.includes("images.ctfassets.net") &&
-      urlWithoutParams.endsWith(".svg");
+      isContentfulImage && urlWithoutParams.endsWith(".svg");
+
+    // Use Contentful's Image API for non-SVG Contentful images;
+    // skip optimization entirely for SVGs.
+    const loaderProps =
+      isContentfulImage && !isSvgFromContentful
+        ? { loader: contentfulImageLoader, unoptimized: false }
+        : { unoptimized: isSvgFromContentful };
+
     return (
       <NextJsImage
         ref={ref}
         className={cx(className)}
         {...props}
-        unoptimized={isSvgFromContentful}
+        {...loaderProps}
       />
     );
   }

package/src/contentful/blocks/primary-hero/index.tsx

@@ -147,8 +147,9 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                 src={badgeImage}
                 alt={"Badge"}
                 className="absolute left-5 top-5 aspect-square w-26 object-cover object-center"
-                width={100}
-                height={100}
+                width={104}
+                height={104}
+                quality={90}
                 loading="eager"
               />
             ) : null}
@@ -157,8 +158,10 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                 src={carouselImages[0]}
                 alt={"Hero"}
                 className="aspect-[1.71:1] sm:aspect-[1.41:1] w-full rounded-[40px] object-cover object-center sm:h-[420px]"
-                width={350}
-                height={205}
+                width={1024}
+                height={600}
+                sizes="100vw"
+                quality={90}
                 loading="eager"
               />
             ) : null}
@@ -205,8 +208,9 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
               src={badgeImage}
               alt={"Badge"}
               className="absolute -left-26 top-18 aspect-square w-52 object-cover object-center"
-              width={200}
-              height={200}
+              width={208}
+              height={208}
+              quality={90}
               loading="eager"
             />
           ) : null}
@@ -217,6 +221,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
               className="aspect-square rounded-[40px] object-cover object-center"
               width={600}
               height={600}
+              quality={90}
               loading="eager"
             />
           ) : null}