fix: replace all remaining Cloudinary runtime references with Sanity image URLs

- queries.ts: settingsQuery ogImage projection (secure_url → full image object)
- utils.ts: resolveOpenGraphImage uses urlForImage() instead of secure_url
- layout.tsx: ogImage uses resolveOpenGraphImage() properly
- devto/route.tsx: coverImage + cloudinary.asset serializer → urlForImage()
- hashnode/route.tsx: coverImage + cloudinary.asset serializer → urlForImage()
- rss.ts: coverImage.secure_url → urlForImage()
- package.json: remove next-cloudinary and sanity-plugin-cloudinary

Co-authored-by: builder <builder@miriad.systems>

Author: Miriad

app/(main)/layout.tsx

@@ -13,6 +13,7 @@ import * as demo from "@/sanity/lib/demo";
 import { sanityFetch } from "@/sanity/lib/live";
 import { settingsQuery } from "@/sanity/lib/queries";
 import { cn } from "@/lib/utils";
+import { resolveOpenGraphImage } from "@/sanity/lib/utils";
 import { ThemeProvider } from "@/components/theme-provider";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
@@ -56,8 +57,7 @@ export async function generateMetadata(): Promise<Metadata> {
 	const title = settings?.title || demo.title;
 	const description = settings?.description || demo.description;
 
-	// const ogImage = resolveOpenGraphImage(settings?.ogImage);
-	const ogImage = settings?.ogImage?.secure_url;
+	const ogImage = resolveOpenGraphImage(settings?.ogImage);
 	return {
 		title: {
 			template: `%s | ${title}`,

app/api/devto/route.tsx

@@ -3,6 +3,7 @@ import { podcastQuery, postQuery } from "@/sanity/lib/queries";
 import { isValidSignature, SIGNATURE_HEADER_NAME } from "@sanity/webhook";
 import toMarkdown from "@sanity/block-content-to-markdown";
 import { createClient } from "next-sanity";
+import { urlForImage } from "@/sanity/lib/utils";
 
 const secret = process.env.PRIVATE_SYNDICATE_WEBOOK_SECRET;
 import { apiVersion, dataset, projectId, studioUrl } from "@/sanity/lib/api";
@@ -81,10 +82,7 @@ const formatPodcast = async (_type: string, slug: string) => {
 				title: podcast.title,
 				published: true,
 				tags: ["webdev", "javascript", "beginners"],
-				main_image: podcast?.coverImage?.secure_url?.replace(
-					"upload/",
-					"upload/b_rgb:5e1186,c_pad,w_1000,h_420/",
-				),
+				main_image: urlForImage(podcast?.coverImage)?.width(1000).height(420).url() || "",
 				canonical_url: `https://codingcat.dev/${podcast._type}/${podcast.slug}`,
 				description: podcast?.excerpt || "",
 				organization_id: "1009",
@@ -239,7 +237,12 @@ const serializers = {
 	types: {
 		code: (props: any) =>
 			"```" + props?.node?.language + "\n" + props?.node?.code + "\n```",
-		"cloudinary.asset": (props: any) => `![](${props?.node?.secure_url})`,
+		image: (props: any) => {
+			const url = props?.node?.asset?._ref
+				? urlForImage(props.node)?.url()
+				: "";
+			return `![](${url})`;
+		},
 		codepen: (props: any) => `{% codepen ${props?.node?.url} %}`,
 		codesandbox: (props: any) =>
 			`{% codesandbox ${props?.node?.url?.split("https://codesandbox.io/p/sandbox/")?.at(-1)} %}`,

app/api/hashnode/route.tsx

@@ -3,6 +3,7 @@ import { podcastQuery, postQuery } from "@/sanity/lib/queries";
 import { isValidSignature, SIGNATURE_HEADER_NAME } from "@sanity/webhook";
 import toMarkdown from "@sanity/block-content-to-markdown";
 import { createClient } from "next-sanity";
+import { urlForImage } from "@/sanity/lib/utils";
 import { apiVersion, dataset, projectId, studioUrl } from "@/sanity/lib/api";
 
 const secret = process.env.PRIVATE_SYNDICATE_WEBOOK_SECRET;
@@ -110,7 +111,7 @@ const formatPodcast = async (_type: string, slug: string) => {
 				},
 			],
 			coverImageOptions: {
-				coverImageURL: podcast?.coverImage?.secure_url,
+				coverImageURL: urlForImage(podcast?.coverImage)?.width(1600).height(840).url() || "",
 			},
 			originalArticleURL: `https://codingcat.dev/${podcast._type}/${podcast.slug}`,
 			contentMarkdown: `
@@ -344,7 +345,12 @@ const serializers = {
 	types: {
 		code: (props: any) =>
 			"```" + props?.node?.language + "\n" + props?.node?.code + "\n```",
-		"cloudinary.asset": (props: any) => `![](${props?.node?.secure_url})`,
+		image: (props: any) => {
+			const url = props?.node?.asset?._ref
+				? urlForImage(props.node)?.url()
+				: "";
+			return `![](${url})`;
+		},
 		codepen: (props: any) => `{% codepen ${props?.node?.url} %}`,
 		codesandbox: (props: any) =>
 			`{% codesandbox ${props?.node?.url?.split("https://codesandbox.io/p/sandbox/")?.at(-1)} %}`,

lib/rss.ts

@@ -3,6 +3,7 @@ import { sanityFetch } from "@/sanity/lib/live";
 import type { RssQueryResult } from "@/sanity/types";
 import { rssQuery } from "@/sanity/lib/queries";
 import { toHTML } from "@portabletext/to-html";
+import { urlForImage } from "@/sanity/lib/utils";
 
 const productionDomain = process.env.VERCEL_PROJECT_PRODUCTION_URL;
 const site = productionDomain
@@ -55,7 +56,7 @@ export async function buildFeed(params: {
 				item.content && Array.isArray(item.content) ? toHTML(item.content) : "",
 			link: `${site}/${item._type}/${item.slug}`,
 			description: `${item.excerpt}`,
-			image: item.coverImage?.secure_url || feed.items.at(0)?.image,
+			image: urlForImage(item.coverImage)?.width(1200).height(630).url() || feed.items.at(0)?.image,
 			date: item.date ? new Date(item.date) : new Date(),
 			id: item._id,
 			author: item.author

package.json

@@ -80,7 +80,6 @@
 		"micromark": "^4.0.2",
 		"micromark-extension-gfm-table": "^2.0.0",
 		"next": "^16.1.6",
-		"next-cloudinary": "^6.17.5",
 		"next-sanity": "^12.1.0",
 		"next-themes": "^0.4.6",
 		"nextjs-toploader": "^3.9.17",
@@ -104,7 +103,6 @@
 		"remotion": "^4.0.431",
 		"resend": "^6.9.3",
 		"sanity": "^5.12.0",
-		"sanity-plugin-cloudinary": "^1.4.1",
 		"sanity-plugin-media": "^4.1.1",
 		"server-only": "^0.0.1",
 		"sonner": "^2.0.7",

sanity/lib/queries.ts

@@ -4,9 +4,7 @@ export const docCount = groq`count(*[_type == $type])`;
 
 export const settingsQuery = groq`*[_type == "settings"][0]{
   ...,
-  ogImage{
-    secure_url
-  }
+  ogImage
 }`;
 
 // Partials

sanity/lib/utils.ts

@@ -17,12 +17,12 @@ export const urlForImage = (source: any) => {
 };
 
 export function resolveOpenGraphImage(image: any, width = 1920, height = 1080) {
-	if (!image || !image?.secure_url) return;
-	const url = image?.secure_url;
+	if (!image?.asset?._ref) return;
+	const url = urlForImage(image)?.width(width).height(height).url();
 	if (!url) return;
 	return {
 		url,
-		alt: image?.context?.custom?.alt || "CodingCat.dev Image",
+		alt: image?.alt || "CodingCat.dev Image",
 		width,
 		height,
 	};