Updated Sanity to latest version numbers.

package.json

@@ -16,30 +16,30 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@portabletext/react": "^3.0.4",
-    "@sanity/client": "^6.1.3",
+    "@sanity/client": "^6.1.7",
     "@sanity/dashboard": "^3.1.4",
     "@sanity/icons": "^2.4.1",
     "@sanity/image-url": "^1.0.2",
-    "@sanity/vision": "^3.12.2",
-    "@types/node": "20.3.1",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
+    "@sanity/vision": "^3.14.2",
+    "@types/node": "20.4.2",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
     "class-variance-authority": "^0.6.1",
-    "clsx": "^1.2.1",
+    "clsx": "^2.0.0",
     "country-code-emoji": "^2.3.0",
-    "framer-motion": "^10.12.18",
+    "framer-motion": "^10.12.21",
     "fslightbox-react": "^1.7.6",
-    "next": "13.4.7",
-    "next-sanity": "^5.0.2",
-    "next-sitemap": "^4.1.3",
+    "next": "13.4.10",
+    "next-sanity": "^5.1.2",
+    "next-sitemap": "^4.1.8",
     "phosphor-react": "^1.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-is": "^18.2.0",
     "react-schemaorg": "^2.0.0",
-    "sanity": "^3.12.2",
+    "sanity": "^3.14.2",
     "sanity-plugin-dashboard-widget-document-list": "^1.0.1",
-    "sanity-plugin-media": "^2.0.5",
+    "sanity-plugin-media": "^2.2.1",
     "schema-dts": "^1.1.2",
     "styled-components": "^5.3.11",
     "tailwind-merge": "^1.13.2",
@@ -49,10 +49,10 @@
   "devDependencies": {
     "@types/fslightbox-react": "^1.7.3",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.42.0",
-    "eslint-config-next": "13.4.7",
+    "eslint": "^8.45.0",
+    "eslint-config-next": "13.4.10",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "postcss": "^8.4.25",
-    "tailwindcss": "^3.3.2"
+    "postcss": "^8.4.26",
+    "tailwindcss": "^3.3.3"
   }
 }

src/components/types/ImageBlock.tsx → src/components/types/ImageBlock/ImageBlock.tsx

@@ -1,8 +1,8 @@
-import Image from 'next/image';
 import { FC } from 'react';
 
 import { Section } from '~/components';
-import { getImageProps } from '~/lib/sanityImage';
+
+import { ImageBlockImage } from './ImageBlockImage';
 
 interface ImageBlockProps {
   caption?: string;
@@ -14,12 +14,7 @@ const ImageBlock: FC<ImageBlockProps> = ({ caption, image }) =>
     <Section>
       <figure className="contents">
         <div className="col-span-12 lg:col-start-3">
-          <Image
-            className="w-full h-auto"
-            {...getImageProps(image, 1280)}
-            alt={image.asset?.alt || caption}
-            sizes="100vw"
-          />
+          <ImageBlockImage caption={caption} image={image} />
         </div>
         {caption && (
           <figcaption className="px-5 mt-4 md:mt-0 md:col-span-8 md:col-start-2 lg:col-span-6 lg:col-start-3 md:px-0 c-emphasis">

src/components/types/ImageBlock/ImageBlockImage.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import Image from 'next/image';
+import { FC } from 'react';
+
+import { getImageProps } from '~/lib/sanityImage';
+
+interface ImageBlockImageProps {
+  caption?: string;
+  image: ImageWithMeta;
+}
+
+export const ImageBlockImage: FC<ImageBlockImageProps> = ({
+  caption,
+  image,
+}) => {
+  return (
+    <Image
+      className="w-full h-auto"
+      {...getImageProps(image, 1280)}
+      alt={image.asset?.alt || caption}
+      sizes="100vw"
+    />
+  );
+};

src/components/types/ImageBlock/index.ts

@@ -0,0 +1 @@
+export { default } from './ImageBlock';

src/components/types/InlineImagesBlock.tsx → src/components/types/InlineImagesBlock/InlineImagesBlock.tsx

@@ -1,8 +1,8 @@
-import Image from 'next/image';
 import { FC } from 'react';
 
 import { Section } from '~/components';
-import { getImageProps } from '~/lib/sanityImage';
+
+import { InlineImagesImage } from './InlineImagesImage';
 
 interface ImageGalleryBlockProps {
   images: Array<{
@@ -18,13 +18,7 @@ const ImageGalleryBlock: FC<ImageGalleryBlockProps> = ({ images = [] }) => {
     <Section>
       <div className="flex flex-col items-center col-span-12 gap-8 sm:flex-row md:gap-12 lg:col-start-3">
         {filteredImages.map(({ caption, image }) => (
-          <Image
-            key={image._id}
-            className="object-cover w-full h-auto"
-            {...getImageProps(image, 680)}
-            alt={image.asset.alt || caption || ''}
-            sizes="100vw"
-          />
+          <InlineImagesImage key={image.id} caption={caption} image={image} />
         ))}
       </div>
     </Section>

src/components/types/InlineImagesBlock/InlineImagesImage.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import Image from 'next/image';
+import { FC } from 'react';
+
+import { getImageProps } from '~/lib/sanityImage';
+
+export interface InlineImagesImageProps {
+  caption?: string;
+  image: ImageWithMeta;
+}
+
+export const InlineImagesImage: FC<InlineImagesImageProps> = ({
+  caption,
+  image,
+}) => {
+  return (
+    <Image
+      key={image._id}
+      className="object-cover w-full h-auto"
+      {...getImageProps(image, 680)}
+      alt={image.asset.alt || caption || ''}
+      sizes="100vw"
+    />
+  );
+};

src/components/types/InlineImagesBlock/index.ts

@@ -0,0 +1 @@
+export { default } from './InlineImagesBlock';

src/sanity/env.ts

@@ -15,7 +15,7 @@ export const readToken = process.env.SANITY_API_READ_TOKEN;
 
 export const previewSecretDocumentId: `${string}.${string}` = 'preview.secret';
 
-export const useCdn = false;
+export const useCdn = true;
 
 function assertValue<T>(v: T | undefined, errorMessage: string): T {
   if (v === undefined) {

src/sanity/lib/client.ts

@@ -1,4 +1,5 @@
-import { createClient, groq } from 'next-sanity';
+import { createClient } from '@sanity/client';
+import { groq } from 'next-sanity';
 
 import { apiVersion, dataset, projectId, useCdn } from '../env';