Update SmartImage

focusreactive · Jun 6, 2024 · 45c791b · 45c791b
1 parent 07dd910
commit 45c791b
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 70 deletions.
diff --git a/src/sanity/lib/queries.ts b/src/sanity/lib/queries.ts
@@ -14,27 +14,28 @@ export const pagesBySlugQuery = groq`
             'avatar': image.asset->
           }
         },
-      _type == 'tw-base.blockTemplate' => {
+      _type == 'tw-tw-base.blockTemplate' => {
           ...,
           image{
             ...,
-            'image': asset->{
+            'imageAsset': asset->{
               'src': url,
               'width': metadata.dimensions.width,
               'height': metadata.dimensions.height,
               'alt': altText,
             }
           }
         },
-      _type == 'base.pageBlock' => { // TODO: move it to cms-kit
+      _type == 'tw-base.pageBlock' => { // TODO: move it to cms-kit
         ...,
         blockOptions{
           ...,
           layoutOptions{
             ...,
             secondaryComponent[]{
-              ...,
-              'image': asset->{
+              'ver': '2.0',
+              _type,
+              'imageAsset': asset->{
                   'src': url,
                   'width': metadata.dimensions.width,
                   'height': metadata.dimensions.height,
@@ -46,7 +47,7 @@ export const pagesBySlugQuery = groq`
             ...,
             imageSelector{
               ...,
-              'image': asset->{
+              'imageAsset': asset->{
                   'src': url,
                   'width': metadata.dimensions.width,
                   'height': metadata.dimensions.height,
@@ -57,12 +58,12 @@ export const pagesBySlugQuery = groq`
         },
         components[]{
           ...,
-          _type == 'base.grid' => {
+          _type == 'tw-base.grid' => {
             ...,
             items[]{
               ...,
               imageWithMetadata{
-                'image': asset->{
+                'imageAsset': asset->{
                   'src': url,
                   'width': metadata.dimensions.width,
                   'height': metadata.dimensions.height,
@@ -71,12 +72,12 @@ export const pagesBySlugQuery = groq`
               },
             }
           },
-          _type == 'base.logoCloudGrid' => {
+          _type == 'tw-base.logoCloudGrid' => {
             ...,
             items[]{
               ...,
               imageWithMetadata{
-                'image': asset->{
+                'imageAsset': asset->{
                   'src': url,
                   'width': metadata.dimensions.width,
                   'height': metadata.dimensions.height,
@@ -85,7 +86,7 @@ export const pagesBySlugQuery = groq`
               },
             }
           },
-          _type == 'base.featurePoints' => {
+          _type == 'tw-base.featurePoints' => {
             ...,
             features[]{
               ...,
@@ -99,12 +100,12 @@ export const pagesBySlugQuery = groq`
               },
             }
           },
-          _type == 'base.blogSection' => {
+          _type == 'tw-base.blogSection' => {
             ...,
             posts[]{
               ...,
               image{
-                'image': asset->{
+                'imageAsset': asset->{
                   'src': url,
                   'width': metadata.dimensions.width,
                   'height': metadata.dimensions.height,
@@ -124,15 +125,15 @@ export const pagesBySlugQuery = groq`
               }
             }
           },
-          _type == 'base.styledImage' => {
+          _type == 'tw-base.styledImage' => {
             ...,
               imageWithMetadata{
-                'image': asset->{
+                'imageAsset': asset->{
                   'src': url,
                   'width': metadata.dimensions.width,
                   'height': metadata.dimensions.height,
                   'alt': altText,
-              },
+                },
             }
           }
         }

diff --git a/src/sets/tw-base/blocks/PageBlock/Component.tsx b/src/sets/tw-base/blocks/PageBlock/Component.tsx
@@ -11,7 +11,7 @@ import {
 } from '@focus-reactive/cms-kit-sanity/sanity';
 import { classnames } from '@focus-reactive/cms-kit-sanity/common';
 
-import { Image } from './components/Image';
+import { SmartImage } from './components/SmartImage';
 import type { grid } from './components/Grid/sa-schema';
 import type { GridElement } from './components/Grid/Component';
 import { StyledRichText } from './components/StyledRichText';
@@ -165,7 +165,7 @@ const MainContainerSelector = ({
             <div className="lg:ml-auto lg:pl-8 lg:pt-4">{children}</div>
             <div className="order-[-1] flex items-start justify-end">
               {secondary?._type === 'secondaryImage' ? (
-                <Image
+                <SmartImage
                   imageWithMetadata={secondary}
                   className="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem] md:-ml-4 lg:-ml-0"
                 />
@@ -193,7 +193,7 @@ const MainContainerSelector = ({
           >
             <div className="lg:pr-8 lg:pt-4">{children}</div>
             {secondary?._type === 'secondaryImage' ? (
-              <Image
+              <SmartImage
                 imageWithMetadata={secondary}
                 className="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem] md:-ml-4 lg:-ml-0"
               />

diff --git a/src/sets/tw-base/blocks/PageBlock/components/BlogSection/Component.tsx b/src/sets/tw-base/blocks/PageBlock/components/BlogSection/Component.tsx
@@ -1,6 +1,6 @@
 'use client';
 import React from 'react';
-import { Image } from '../Image';
+import { SmartImage } from '../SmartImage';
 
 import { AdapterFn, getCmsKey, withCMS } from '@focus-reactive/cms-kit-sanity';
 import {
@@ -91,7 +91,7 @@ function BlogSection(props: Props) {
               >
                 {style === Style.threeColumnWithImages ? (
                   <div className={'w-full pb-5'}>
-                    <Image
+                    <SmartImage
                       imageWithMetadata={post}
                       className="h-40 w-full rounded-md bg-cover bg-center"
                     />
@@ -148,7 +148,7 @@ function BlogSection(props: Props) {
                       className="relative mt-8 flex items-center gap-x-4"
                       key={index}
                     >
-                      <Image
+                      <SmartImage
                         imageWithMetadata={author.avatar}
                         className="h-10 w-10 rounded-full bg-gray-50"
                       />

diff --git a/src/sets/tw-base/blocks/PageBlock/components/Grid/Component.tsx b/src/sets/tw-base/blocks/PageBlock/components/Grid/Component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image } from '../Image';
+import { SmartImage } from '../SmartImage';
 
 import { AdapterFn, getCmsKey, withCMS } from '@focus-reactive/cms-kit-sanity';
 import { GenericRichText } from '@focus-reactive/cms-kit-sanity/common';
@@ -33,7 +33,7 @@ const Card = ({ item }: { item: GridElement }) => {
     <>
       {item.imageWithMetadata && (
         <div className="sm:aspect-h-1 sm:aspect-w-2 lg:aspect-h-1 lg:aspect-w-1 relative h-80 w-full overflow-hidden rounded-lg bg-white group-hover:opacity-75 sm:h-64">
-          <Image
+          <SmartImage
             imageWithMetadata={item.imageWithMetadata}
             className="h-full w-full object-cover object-center"
           />

diff --git a/src/sets/tw-base/blocks/PageBlock/components/Image/Component.tsx b/src/sets/tw-base/blocks/PageBlock/components/Image/Component.tsx
diff --git a/src/sets/tw-base/blocks/PageBlock/components/Image/index.ts b/src/sets/tw-base/blocks/PageBlock/components/Image/index.ts
diff --git a/src/sets/tw-base/blocks/PageBlock/components/LogoCloud/Component.tsx b/src/sets/tw-base/blocks/PageBlock/components/LogoCloud/Component.tsx
@@ -1,6 +1,7 @@
 'use client';
 import React from 'react';
-import { Image } from '@ns/blocks/PageBlock/components/Image';
+
+import { SmartImage } from '../SmartImage';
 
 import { AdapterFn, getCmsKey, withCMS } from '@focus-reactive/cms-kit-sanity';
 import { SmartLink, SmartLinkProps, ContentBlockGeneric, ContentTypeName } from '@focus-reactive/cms-kit-sanity/sanity';
@@ -31,7 +32,7 @@ const LogoItem = (item: LogoItem) => {
     <div className={'col-span-2 max-h-12 w-full object-contain lg:col-span-1'}>
       <SmartLink {...item.link}>
         {item.imageWithMetadata && (
-          <Image
+          <SmartImage
             imageWithMetadata={item.imageWithMetadata}
             isDarkTheme={false}
           />

diff --git a/src/sets/tw-base/blocks/PageBlock/components/SmartImage/Component.tsx b/src/sets/tw-base/blocks/PageBlock/components/SmartImage/Component.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+// import { Image } from '@ns/types/common';
+
+import { AdapterFn, getCmsKey, withCMS } from '@focus-reactive/cms-kit-sanity';
+import Image from 'next/image';
+
+type Props = {
+  className: string;
+  imageWithMetadata: {
+    imageAsset: { src: string; alt: string; width: string; height: string };
+  };
+  priority: boolean;
+};
+
+function SmartImage({
+  imageWithMetadata,
+  className,
+  priority,
+  ...rest
+}: Props) {
+  const { src, alt, width, height } = imageWithMetadata?.imageAsset || {
+    width: '100',
+    height: '100',
+  };
+  const widthNumber = parseInt(width, 10) || 100;
+  const heightNumber = parseInt(height, 10) || 100;
+
+  return (
+    <Image
+      src={src}
+      alt={alt || 'untitled'}
+      width={widthNumber}
+      height={heightNumber}
+      className={className}
+      priority={priority || false}
+      {...rest}
+    />
+  );
+}
+
+const sa: AdapterFn = (cmsProps) => {
+  return {
+    key: getCmsKey(cmsProps),
+    ...cmsProps,
+  };
+};
+
+const sb: AdapterFn = (cmsProps) => {
+  return {
+    key: getCmsKey(cmsProps),
+    ...cmsProps,
+  };
+};
+
+export default withCMS({ sa, sb })(SmartImage);
diff --git a/src/sets/tw-base/blocks/PageBlock/components/SmartImage/index.ts b/src/sets/tw-base/blocks/PageBlock/components/SmartImage/index.ts
@@ -0,0 +1 @@
+export { default as SmartImage } from './Component';
diff --git a/src/sets/tw-base/blocks/PageBlock/components/StyledImage/Component.tsx b/src/sets/tw-base/blocks/PageBlock/components/StyledImage/Component.tsx
@@ -3,6 +3,7 @@ import type { Image } from '@ns/types/common';
 
 import { AdapterFn, getCmsKey, withCMS } from '@focus-reactive/cms-kit-sanity';
 import { classnames } from '@focus-reactive/cms-kit-sanity/common';
+import { SmartImage } from '../SmartImage';
 
 type Props = {
   isDarkTheme: boolean;
@@ -14,9 +15,8 @@ type Props = {
 function StyledImage({ imageWithMetadata, isDarkTheme }: Props) {
   return (
     <div className="relative overflow-hidden px-6 pt-16 lg:px-8 ">
-      <img
-        src={imageWithMetadata.image.src}
-        alt={imageWithMetadata.image.alt}
+      <SmartImage
+        imageWithMetadata={imageWithMetadata}
         className="ring-grey-100 mx-auto max-w-full rounded-xl shadow-xl ring-1 ring-gray-900/[.1]"
       />
       <div className="relative" aria-hidden="true">
@@ -33,14 +33,14 @@ function StyledImage({ imageWithMetadata, isDarkTheme }: Props) {
   );
 }
 
-const sa: AdapterFn = cmsProps => {
+const sa: AdapterFn = (cmsProps) => {
   return {
     key: getCmsKey(cmsProps),
     ...cmsProps,
   };
 };
 
-const sb: AdapterFn = cmsProps => {
+const sb: AdapterFn = (cmsProps) => {
   return {
     key: getCmsKey(cmsProps),
     ...cmsProps,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as SmartImage } from './Component';