feat: migrate to sanity-image, enhance page builder, update next-sanity

frontend/app/[slug]/page.tsx

@@ -65,9 +65,9 @@ export default async function Page(props: Props) {
         <div className="container">
           <div className="pb-6 border-b border-gray-100">
             <div className="max-w-3xl">
-              <h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-7xl">
+              <h1 className="text-4xl text-gray-900 sm:text-5xl lg:text-7xl">
                 {page.heading}
-              </h2>
+              </h1>
               <p className="mt-4 text-base lg:text-lg leading-relaxed text-gray-600 uppercase font-light">
                 {page.subheading}
               </p>

frontend/app/client-utils.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import {isCorsOriginError} from 'next-sanity'
+import {isCorsOriginError} from 'next-sanity/live'
 import {toast} from 'sonner'
 
 export function handleError(error: unknown) {

frontend/app/components/Avatar.tsx

@@ -1,7 +1,5 @@
-import {Image} from 'next-sanity/image'
-
-import {urlForImage} from '@/sanity/lib/utils'
-import DateComponent from '@/app/components/Date'
+import Image from "@/app/components/SanityImage";
+import DateComponent from "@/app/components/Date";
 
 type Props = {
   person: {
@@ -21,25 +19,22 @@ export default function Avatar({person, date, small = false}: Props) {
       {picture?.asset?._ref ? (
         <div className={`${small ? 'h-6 w-6 mr-2' : 'h-9 w-9 mr-4'}`}>
           <Image
-            alt={picture?.alt || ''}
-            className="h-full rounded-full object-cover"
+            id={picture.asset._ref}
+            alt={picture?.alt || ""}
+            className="h-full rounded-full"
             height={small ? 32 : 48}
             width={small ? 32 : 48}
-            src={
-              urlForImage(picture)
-                ?.height(small ? 64 : 96)
-                .width(small ? 64 : 96)
-                .fit('crop')
-                .url() as string
-            }
+            hotspot={picture.hotspot}
+            crop={picture.crop}
+            mode="cover"
           />
         </div>
       ) : (
         <div className="mr-1">By </div>
       )}
       <div className="flex flex-col">
         {firstName && lastName && (
-          <div className={`font-bold ${small ? 'text-sm' : ''}`}>
+          <div className={`${small ? "text-sm" : ""}`}>
             {firstName} {lastName}
           </div>
         )}

frontend/app/components/BlockRenderer.tsx

@@ -1,24 +1,20 @@
 import React from 'react'
 
-import Cta from '@/app/components/Cta'
-import Info from '@/app/components/InfoSection'
-import {dataAttr} from '@/sanity/lib/utils'
+import Cta from "@/app/components/Cta";
+import Info from "@/app/components/InfoSection";
+import { dataAttr } from "@/sanity/lib/utils";
+import { PageBuilderSection } from "@/sanity/lib/types";
 
 type BlocksType = {
   [key: string]: React.FC<any>
 }
 
-type BlockType = {
-  _type: string
-  _key: string
-}
-
 type BlockProps = {
-  index: number
-  block: BlockType
-  pageId: string
-  pageType: string
-}
+  index: number;
+  block: PageBuilderSection;
+  pageId: string;
+  pageType: string;
+};
 
 const Blocks: BlocksType = {
   callToAction: Cta,
@@ -44,6 +40,8 @@ export default function BlockRenderer({block, index, pageId, pageType}: BlockPro
           key: block._key,
           block: block,
           index: index,
+          pageId: pageId,
+          pageType: pageType,
         })}
       </div>
     )

frontend/app/components/Cta.tsx

@@ -1,37 +1,91 @@
-import {Suspense} from 'react'
+import { Suspense } from "react";
+import { PortableTextBlock } from "next-sanity";
 
-import ResolvedLink from '@/app/components/ResolvedLink'
-import {CallToAction} from '@/sanity.types'
+import ResolvedLink from "@/app/components/ResolvedLink";
+import PortableText from "@/app/components/PortableText";
+import Image from "@/app/components/SanityImage";
+import { stegaClean } from "@sanity/client/stega";
+import { ExtractPageBuilderType } from "@/sanity/lib/types";
 
 type CtaProps = {
-  block: CallToAction
-  index: number
-}
+  block: ExtractPageBuilderType<"callToAction">;
+  index: number;
+  // Needed if you want to createDataAttributes to do non-text overlays in Presentation (Visual Editing)
+  pageType: string;
+  pageId: string;
+};
+
+export default function CTA({ block }: CtaProps) {
+  const {
+    heading,
+    eyebrow,
+    body = [],
+    button,
+    image,
+    theme,
+    contentAlignment,
+  } = block;
+
+  const isDark = theme === "dark";
+  const isImageFirst = stegaClean(contentAlignment) === "imageFirst";
 
-export default function CTA({block}: CtaProps) {
   return (
-    <div className="container my-12">
-      <div className="bg-gray-50 border border-gray-100 rounded-2xl max-w-3xl">
-        <div className="px-12 py-12 flex flex-col gap-6">
-          <div className="max-w-xl flex flex-col gap-3">
-            <h2 className="text-3xl font-bold tracking-tight text-black sm:text-4xl">
-              {block.heading}
-            </h2>
-            <p className="text-lg leading-8 text-gray-600">{block.text}</p>
+    <section
+      className={
+        isDark ? "relative dark dark:bg-black" : "relative dark:bg-black"
+      }
+    >
+      <div className="absolute inset-0 bg-size-[5px] bg-[url(/images/tile-1-black.png)] dark:bg-[url(/images/tile-1-white.png)] opacity-25" />
+      <div className="container relative">
+        <div className="grid lg:grid-cols-2 gap-12 py-12">
+          <div
+            className={`${isImageFirst && image ? "row-start-2 lg:row-start-1 lg:col-start-2" : ""} flex flex-col gap-2 `}
+          >
+            {eyebrow && (
+              <span className="text-sm uppercase dark:text-white font-mono tracking-tight opacity-70">
+                {eyebrow}
+              </span>
+            )}
+            {heading && (
+              <h2 className="text-2xl md:text-3xl lg:text-4xl dark:text-white">
+                {heading}
+              </h2>
+            )}
+            {body && (
+              <div className="lg:text-left">
+                <PortableText
+                  value={body as PortableTextBlock[]}
+                  className="dark:prose-invert"
+                />
+              </div>
+            )}
+
+            <Suspense fallback={null}>
+              {button?.buttonText && button?.link && (
+                <div className="flex mt-4">
+                  <ResolvedLink
+                    link={button?.link}
+                    className="rounded-full flex gap-2 font-mono text-sm whitespace-nowrap items-center bg-black dark:bg-white hover:bg-blue focus:bg-blue py-3 px-6 text-white dark:text-black dark:hover:text-white transition-colors duration-200"
+                  >
+                    {button?.buttonText}
+                  </ResolvedLink>
+                </div>
+              )}
+            </Suspense>
           </div>
 
-          <Suspense fallback={null}>
-            <div className="flex items-center gap-x-6 lg:mt-0 lg:flex-shrink-0">
-              <ResolvedLink
-                link={block.link}
-                className="rounded-full flex gap-2 mr-6 items-center bg-black hover:bg-blue focus:bg-blue py-3 px-6 text-white transition-colors duration-200"
-              >
-                {block.buttonText}
-              </ResolvedLink>
-            </div>
-          </Suspense>
+          {image?.asset?._ref && (
+            <Image
+              id={image.asset._ref}
+              alt="Demo image"
+              width={704}
+              crop={image.crop}
+              mode="cover"
+              className="rounded-sm"
+            />
+          )}
         </div>
       </div>
-    </div>
-  )
+    </section>
+  );
 }

frontend/app/components/InfoSection.tsx

@@ -4,16 +4,19 @@ import PortableText from '@/app/components/PortableText'
 import {InfoSection} from '@/sanity.types'
 
 type InfoProps = {
-  block: InfoSection
-  index: number
-}
+  block: InfoSection;
+  index: number;
+  // Needed if you want to createDataAttributes to do non-text overlays in Presentation (Visual Editing)
+  pageId: string;
+  pageType: string;
+};
 
 export default function CTA({block}: InfoProps) {
   return (
     <div className="container my-12">
       <div className="max-w-3xl">
         {block?.heading && (
-          <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold">{block.heading}</h2>
+          <h2 className="text-2xl md:text-3xl lg:text-4xl">{block.heading}</h2>
         )}
         {block?.subheading && (
           <span className="block mt-4 mb-8 text-lg uppercase font-light text-gray-900/70">

frontend/app/components/PageBuilder.tsx

@@ -1,23 +1,19 @@
 'use client'
 
-import {SanityDocument} from 'next-sanity'
-import {useOptimistic} from 'next-sanity/hooks'
-import Link from 'next/link'
+import { createDataAttribute, SanityDocument } from "next-sanity";
+import { useOptimistic } from "next-sanity/hooks";
+import Link from "next/link";
 
-import BlockRenderer from '@/app/components/BlockRenderer'
-import {GetPageQueryResult} from '@/sanity.types'
-import {dataAttr} from '@/sanity/lib/utils'
-import {studioUrl} from '@/sanity/lib/api'
+import BlockRenderer from "@/app/components/BlockRenderer";
+import { GetPageQueryResult } from "@/sanity.types";
+import { dataAttr } from "@/sanity/lib/utils";
+import { studioUrl } from "@/sanity/lib/api";
+import { PageBuilderSection } from "@/sanity/lib/types";
 
 type PageBuilderPageProps = {
   page: GetPageQueryResult
 }
 
-type PageBuilderSection = {
-  _key: string
-  _type: string
-}
-
 type PageData = {
   _id: string
   _type: string
@@ -28,7 +24,13 @@ type PageData = {
  * The PageBuilder component is used to render the blocks from the `pageBuilder` field in the Page type in your Sanity Studio.
  */
 
-function renderSections(pageBuilderSections: PageBuilderSection[], page: GetPageQueryResult) {
+function RenderSections({
+  pageBuilderSections,
+  page,
+}: {
+  pageBuilderSections: PageBuilderSection[];
+  page: GetPageQueryResult;
+}) {
   if (!page) {
     return null
   }
@@ -40,7 +42,7 @@ function renderSections(pageBuilderSections: PageBuilderSection[], page: GetPage
         path: `pageBuilder`,
       }).toString()}
     >
-      {pageBuilderSections.map((block: any, index: number) => (
+      {pageBuilderSections.map((block: PageBuilderSection, index: number) => (
         <BlockRenderer
           key={block._key}
           index={index}
@@ -53,12 +55,19 @@ function renderSections(pageBuilderSections: PageBuilderSection[], page: GetPage
   )
 }
 
-function renderEmptyState(page: GetPageQueryResult) {
+function RenderEmptyState({ page }: { page: GetPageQueryResult }) {
   if (!page) {
     return null
   }
+
+  const attr = createDataAttribute({
+    id: page._id,
+    type: "page",
+    path: "pageBuilder",
+  }).toString();
+
   return (
-    <div className="container">
+    <div className="container" data-sanity={attr}>
       <h1 className="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
         This page has no content!
       </h1>
@@ -102,11 +111,7 @@ export default function PageBuilder({page}: PageBuilderPageProps) {
     return currentSections
   })
 
-  if (!page) {
-    return renderEmptyState(page)
-  }
-
   return pageBuilderSections && pageBuilderSections.length > 0
-    ? renderSections(pageBuilderSections, page)
-    : renderEmptyState(page)
+    ? <RenderSections pageBuilderSections={pageBuilderSections} page={page} />
+    : <RenderEmptyState page={page} />;
 }