add projects

Author: Marcus

app/(app)/projects/[slug]/page.tsx

@@ -11,12 +11,13 @@ interface Props {
 export default async function ProjectDetails({ params }: Props) {
   const pet = await getPetBySlug(params.slug);
   if (!pet) return notFound();
+  console.log(pet);
   return (
     <SectionWrapper>
       <article>
-        {pet.coverImage?.asset?.url && (
+        {pet.coverImage?.url && (
           <Image
-            src={pet.coverImage.asset.url}
+            src={pet.coverImage.url}
             alt={pet.coverImage.alt || pet.name}
             width={1000}
             height={600}

components/portable-text.tsx

@@ -5,18 +5,24 @@ import Image from "next/image";
 
 const components: PortableTextComponents = {
   types: {
-    image: ({ value }) =>
-      value?.asset?.url ? (
-        <div className="my-6">
-          <Image
-            src={value.asset.url}
-            alt={value.alt || "Project image"}
-            width={800}
-            height={500}
-            className="rounded-lg object-cover"
-          />
-        </div>
-      ) : null,
+    image: ({ value }) => {
+      console.log(value);
+      return (
+        <>
+          {value?.url ? (
+            <div className="my-6">
+              <Image
+                src={value.url}
+                alt={value.alt || "Project image"}
+                width={800}
+                height={500}
+                className="rounded-lg object-cover"
+              />
+            </div>
+          ) : null}
+        </>
+      );
+    },
 
     // ✅ Sanity Table Renderer
     table: ({ value }) => {
@@ -82,6 +88,7 @@ const components: PortableTextComponents = {
 };
 
 // ✅ Named export
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function PortableBlock({ value }: { value: any }) {
   return (
     <div className="prose dark:prose-invert max-w-none">

sanity/lib/query.ts

@@ -96,17 +96,30 @@ export async function getPetBySlug(slug: string): Promise<Pet | null> {
     groq`*[_type == "pet" && slug.current == $slug][0]{
       _id,
       name,
-      slug,
-      logo { asset-> { url } },
+      "slug": slug.current,
+      "logo": {
+        "url": logo.asset->url,
+        "alt": logo.alt
+      },
+      "coverImage": {
+        "url": coverImage.asset->url,
+        "alt": coverImage.alt
+      },
       projectUrl,
       repository,
-      coverImage { alt, asset-> { url } },
       category,
-      techStack[] {
+      techStack[]{
         name,
         icon
       },
-      description
+      // include all block content (including image/table blocks)
+      description[]{
+        ...,
+        _type == "image" => {
+          ...,
+          "url": asset->url
+        }
+      }
     }`,
     { slug },
   );

types/pet.ts

@@ -6,17 +6,32 @@ export interface Tech {
 export interface Pet {
   _id: string;
   name: string;
-  slug: { current: string };
+  slug: string; // now simplified from slug.current
   logo?: {
-    asset: { url: string };
+    url?: string;
+    alt?: string;
   };
   projectUrl?: string;
   repository?: string;
   coverImage?: {
+    url?: string;
     alt?: string;
-    asset: { url: string };
   };
   category?: "web" | "mobile" | "desktop" | "ai" | "game";
   techStack?: Tech[];
-  description?: any[]; // Portable Text blocks
+  description?: Array<
+    | {
+        _type: "block";
+        children: Array<{ _key: string; text: string; marks?: string[] }>;
+      }
+    | {
+        _type: "image";
+        url: string;
+        alt?: string;
+      }
+    | {
+        _type: "table";
+        rows?: { _key: string; cells: string[] }[];
+      }
+  >;
 }