stega clean top-level

Author: Alex Patterson

components/avatar.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { CldImage } from "next-cloudinary";
-import { stegaClean } from "@sanity/client/stega";
 import type { Author } from "@/sanity.types";
 import Link from "next/link";
 
@@ -22,17 +21,16 @@ export default function Avatar({
   width,
   height,
 }: Props) {
-  const source = stegaClean(coverImage);
 
-  if (!href && source?.public_id) {
+  if (!href && coverImage?.public_id) {
     return (
       <div className={`${imgSize ? imgSize : "w-12 h-12 mr-4"}`}>
         <CldImage
           className="w-full h-auto"
           width={width || 48}
           height={height || 48}
-          alt={source?.context?.custom?.alt || ""}
-          src={source.public_id}
+          alt={coverImage?.context?.custom?.alt || ""}
+          src={coverImage.public_id}
           config={{
             url: {
               secureDistribution: "media.codingcat.dev",
@@ -43,17 +41,17 @@ export default function Avatar({
       </div>
     );
   }
-  if (href && source?.public_id) {
+  if (href && coverImage?.public_id) {
     return (
       <Link className="flex items-center text-xl" href={href}>
-        {source?.public_id && (
+        {coverImage?.public_id && (
           <div className={`${imgSize ? imgSize : "w-12 h-12 mr-4"}`}>
             <CldImage
               className="w-full h-auto"
               width={width || 48}
               height={height || 48}
-              alt={source?.context?.custom?.alt || ""}
-              src={source.public_id}
+              alt={coverImage?.context?.custom?.alt || ""}
+              src={coverImage.public_id}
               config={{
                 url: {
                   secureDistribution: "media.codingcat.dev",

components/block-image.tsx

@@ -1,6 +1,5 @@
 import { CloudinaryAsset } from "@/sanity.types";
 import CloudinaryImage from "@/components/cloudinary-image";
-import { stegaClean } from "@sanity/client/stega";
 
 import { getCldImageUrl } from "next-cloudinary";
 
@@ -11,11 +10,10 @@ interface CoverImageProps {
 export default async function BlockImage(props: CoverImageProps) {
   const { image: originalImage } = props;
 
-  const source = stegaClean(originalImage);
   let image;
-  if (source?.public_id) {
+  if (originalImage?.public_id) {
     const imageUrl = getCldImageUrl({
-      src: source.public_id,
+      src: originalImage.public_id,
       width: 100,
     });
     const response = await fetch(imageUrl);
@@ -30,8 +28,8 @@ export default async function BlockImage(props: CoverImageProps) {
         width={1920}
         height={1080}
         sizes="100vw"
-        alt={source?.context?.custom?.alt || ""}
-        src={source?.public_id}
+        alt={originalImage?.context?.custom?.alt || ""}
+        src={originalImage?.public_id}
         placeholder="blur"
         blurDataURL={dataUrl}
         config={{

components/cover-image.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { CloudinaryAsset } from "@/sanity.types";
 import CloudinaryImage from "@/components/cloudinary-image";
-import { stegaClean } from "@sanity/client/stega";
 import { getCldImageUrl } from "next-cloudinary";
 import { useEffect, useState } from "react";
 
@@ -23,13 +22,12 @@ export default function CoverImage(props: CoverImageProps) {
     height,
     quality,
   } = props;
-  const source = stegaClean(originalImage);
   const [dataUrl, setDataUrl] = useState("");
 
   useEffect(() => {
-    if (!source?.public_id) return;
-    getImageUrl(source?.public_id);
-  }, [source?.public_id]);
+    if (!originalImage?.public_id) return;
+    getImageUrl(originalImage?.public_id);
+  }, [originalImage?.public_id]);
 
   const getImageUrl = async (src: string) => {
     const imageUrl = getCldImageUrl({
@@ -44,7 +42,7 @@ export default function CoverImage(props: CoverImageProps) {
   };
 
   let image;
-  if (source?.public_id && dataUrl) {
+  if (originalImage?.public_id && dataUrl) {
     image = (
       <CloudinaryImage
         className={className || "w-full h-auto aspect-video"}
@@ -55,8 +53,8 @@ export default function CoverImage(props: CoverImageProps) {
         sizes="(max-width: 768px) 100vw,
           (max-width: 1200px) 50vw,
           33vw"
-        alt={source?.context?.custom?.alt || ""}
-        src={source?.public_id}
+        alt={originalImage?.context?.custom?.alt || ""}
+        src={originalImage?.public_id}
         placeholder="blur"
         blurDataURL={dataUrl}
         config={{

components/cover-video.tsx

@@ -1,6 +1,5 @@
 import { CloudinaryAsset } from "@/sanity.types";
 import CloudinaryVideo from "@/components/cloudinary-video";
-import { stegaClean } from "@sanity/client/stega";
 
 interface CoverImageProps {
   cloudinaryVideo: CloudinaryAsset | null | undefined;
@@ -9,15 +8,13 @@ interface CoverImageProps {
 export default function CoverVideo(props: CoverImageProps) {
   const { cloudinaryVideo } = props;
 
-  const source = stegaClean(cloudinaryVideo);
-
-  const video = source?.public_id ? (
+  const video = cloudinaryVideo?.public_id ? (
     <CloudinaryVideo
       id={cloudinaryVideo?.public_id}
       className="w-full h-auto"
       width={1920}
       height={1080}
-      src={source?.public_id}
+      src={cloudinaryVideo?.public_id}
       config={{
         url: {
           secureDistribution: "media.codingcat.dev",

sanity/lib/client.ts

@@ -12,7 +12,8 @@ export const client = createClient({
     studioUrl,
     // logger: console,
     filter: (props) => {
-      if (props.sourcePath.at(0) !== "content") {
+      const type = props.sourcePath.at(0) as string;
+      if (!["content"].includes(type)) {
         return false;
       } else {
         return props.filterDefault(props);

sanity/lib/fetch.ts

@@ -19,8 +19,7 @@ export async function sanityFetch<QueryResponse>({
    * The Sanity Presentation Tool will enable Draft Mode when loading up the live preview, and we use it as a signal for when to embed source maps.
    * When outside of the Sanity Studio we also support the Vercel Toolbar Visual Editing feature, which is only enabled in production when it's a Vercel Preview Deployment.
    */
-  stega = perspective === "previewDrafts" ||
-  process.env.VERCEL_ENV === "preview",
+  stega = perspective === "previewDrafts" || process.env.VERCEL_ENV === "preview",
 }: {
   query: string;
   params?: QueryParams;