Merge pull request cosmicjs#7 from cosmicjs/tony/sdk-updates

edit: sdk props graph, alt text
luvnft · Sep 17, 2024 · 3b0e4fd · 3b0e4fd
2 parents c346f42 + 5f5ab29
commit 3b0e4fd
Show file tree

Hide file tree

Showing 13 changed files with 118 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@
 
 [[Install the template](https://www.cosmicjs.com/templates/podcast-network)]
 
-A podcast network website powered by the [Cosmic CMS](https://www.cosmicjs.com/) and Next.js.
+A podcast network website powered by the [Cosmic CMS](https://www.cosmicjs.com/) and Next.js. NOTE: uses a canary version of the [Cosmic JavaScript SDK](https://www.npmjs.com/package/@cosmicjs/sdk) that includes experimental features including [media data fetching](https://github.com/cosmicjs/cosmic-sdk-js/pull/38) and [props graph syntax](https://github.com/cosmicjs/cosmic-sdk-js/pull/37).
 
 ## Features
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -19,7 +19,14 @@ export async function generateMetadata() {
       type: "settings",
       slut: "settings",
     })
-    .props("metadata.site_title,metadata.description")
+    .props(
+      `{
+      metadata {
+        site_title
+        description
+      }
+    }`
+    )
     .depth(1);
   return {
     title: globalSettings.metadata.site_title,

diff --git a/bun.lockb b/bun.lockb
diff --git a/cosmic/blocks/comments/Comments.tsx b/cosmic/blocks/comments/Comments.tsx
@@ -65,7 +65,16 @@ export async function Comments({
     // Get the id
     const { objects } = await cosmic.objects
       .find(query)
-      .props("title,slug,metadata,created_at")
+      .props(
+        `{
+          title
+          slug
+          metadata {
+            comment
+          }
+          created_at
+        }`
+      )
       .depth(1)
       .sort(sort ? sort : "created_at")
       .limit(limit ? limit : 100)

diff --git a/cosmic/blocks/videos/CategoriesList.tsx b/cosmic/blocks/videos/CategoriesList.tsx
@@ -44,7 +44,16 @@ export async function CategoriesList({
 }) {
   const { objects: categories } = await cosmic.objects
     .find(query)
-    .props("id,slug,title,metadata,created_at")
+    .props(
+      `{
+          id
+          slug
+          title
+          metadata {
+            emoji
+          }
+        }`
+    )
     .depth(1)
     .sort(sort ? sort : "-order")
     .limit(limit ? limit : 100)

diff --git a/cosmic/blocks/videos/ChannelPill.tsx b/cosmic/blocks/videos/ChannelPill.tsx
@@ -7,8 +7,8 @@ export type ChannelType = {
   metadata: {
     thumbnail: {
       imgix_url: string;
+      alt_text: string;
     };
-    image_alt_text: string;
   };
 };
 
@@ -24,7 +24,7 @@ export function ChannelPill({ channel }: { channel: ChannelType }) {
             rounded-full bg-gray-200 dark:bg-gray-800"
       >
         <img
-          alt={channel.metadata.image_alt_text}
+          alt={channel.metadata.thumbnail.alt_text}
           src={`${channel.metadata.thumbnail.imgix_url}?w=80&auto=format,compression`}
           className="h-[40px] w-[40px] rounded-full object-cover"
         />

diff --git a/cosmic/blocks/videos/ChannelsList.tsx b/cosmic/blocks/videos/ChannelsList.tsx
@@ -7,8 +7,24 @@ export async function ChannelsList() {
       .find({
         type: "channels",
       })
-      .props("id,slug,title,metadata")
-      .depth(1);
+      .props(
+        `{
+          id
+          slug
+          title
+          metadata {
+            thumbnail {
+              imgix_url
+            }
+          }
+        }`
+      )
+      .depth(1)
+      .options({
+        media: {
+          props: "alt_text",
+        },
+      });
     return channels?.map((channel: ChannelType) => {
       return <ChannelPill key={channel.id} channel={channel} />;
     });

diff --git a/cosmic/blocks/videos/PlayArea.tsx b/cosmic/blocks/videos/PlayArea.tsx
@@ -12,7 +12,7 @@ export function PlayArea({ video }: { video: VideoType }) {
           <button onClick={() => setIsClicked(true)} className="w-full">
             <img
               src={`${video.metadata.thumbnail.imgix_url}?w=2000&auto=format,compression`}
-              alt={video.title}
+              alt={video.metadata.thumbnail.alt_text}
               className="aspect-video w-full object-cover"
             />
             <div className="absolute top-[50%] justify-center flex w-full">

diff --git a/cosmic/blocks/videos/SingleChannel.tsx b/cosmic/blocks/videos/SingleChannel.tsx
@@ -15,9 +15,21 @@ export async function SingleChannel({
   try {
     const { object: channel } = await cosmic.objects
       .findOne(query)
-      .props("id,slug,title,metadata,created_at")
+      .props(
+        `{
+          id
+          slug
+          title
+          metadata
+        }`
+      )
       .depth(1)
-      .status(status ? status : "published");
+      .status(status ? status : "published")
+      .options({
+        media: {
+          props: "alt_text",
+        },
+      });
     return (
       <div className={className}>
         <div className="mb-6 w-full max-h-[300px] overflow-hidden">
@@ -30,7 +42,7 @@ export async function SingleChannel({
         <section className="px-4 md:px-8 max-w-[1650px] m-auto relative -top-[55px] h-[44px]">
           <div className="flex items-center mb-6 gap-6 pb-4">
             <img
-              alt={channel.title}
+              alt={channel.metadata.thumbnail.alt_text}
               src={`${channel.metadata.thumbnail.imgix_url}?w=400&auto=format,compression`}
               className="h-[100px] w-[100px] rounded-full object-cover border-4 border-white"
             />

diff --git a/cosmic/blocks/videos/SingleVideo.tsx b/cosmic/blocks/videos/SingleVideo.tsx
@@ -20,9 +20,22 @@ export async function SingleVideo({
   try {
     const { object: video }: { object: VideoType } = await cosmic.objects
       .findOne(query)
-      .props("id,slug,title,metadata,created_at")
+      .props(
+        `{
+          id
+          slug
+          title
+          created_at
+          metadata
+        }`
+      )
       .depth(1)
-      .status(status ? status : "published");
+      .status(status ? status : "published")
+      .options({
+        media: {
+          props: "alt_text",
+        },
+      });
 
     return (
       <div className={className}>
@@ -42,7 +55,7 @@ export async function SingleVideo({
                 <img
                   className="mr-2 h-[60px] w-[60px] rounded-full object-cover"
                   src={`${video.metadata.channel.metadata.thumbnail.imgix_url}?w=120&auto=format,compression`}
-                  alt={video.metadata.channel.title}
+                  alt={video.metadata.channel.metadata.thumbnail.alt_text}
                 />
                 <div className="flex flex-col">
                   <span className="font-semibold text-zinc-800 dark:text-zinc-200">

diff --git a/cosmic/blocks/videos/VideoCard.tsx b/cosmic/blocks/videos/VideoCard.tsx
@@ -11,8 +11,8 @@ export type VideoType = {
   metadata: {
     thumbnail: {
       imgix_url: string;
+      alt_text: string;
     };
-    image_alt_text: string;
     video: {
       url: string;
     };
@@ -23,6 +23,7 @@ export type VideoType = {
       title: string;
       metadata: {
         thumbnail: {
+          alt_text: string | undefined;
           imgix_url: string;
         };
       };
@@ -41,7 +42,7 @@ export function VideoCard({
     <div>
       <Link href={`/watch/${video.id}-${video.slug}`}>
         <img
-          alt={video.metadata.image_alt_text}
+          alt={video.metadata.thumbnail.alt_text}
           className="h-[175px] 2xl:h-[250px] w-full object-cover rounded-lg"
           src={`${video.metadata.thumbnail.imgix_url}?w=1200&auto=format,compression`}
         />
@@ -66,7 +67,7 @@ export function VideoCard({
                 rounded-full bg-gray-200 dark:bg-gray-800"
               >
                 <img
-                  alt={video.metadata.channel.title}
+                  alt={video.metadata.channel.metadata.thumbnail.alt_text}
                   src={`${video.metadata.channel.metadata.thumbnail.imgix_url}?w=400&auto=format,compression`}
                   className="h-[40px] w-[40px] rounded-full object-cover"
                 />

diff --git a/cosmic/blocks/videos/VideoList.tsx b/cosmic/blocks/videos/VideoList.tsx
@@ -31,12 +31,41 @@ export async function VideoList({
   try {
     const { objects: videos } = await cosmic.objects
       .find(query)
-      .props("id,slug,title,metadata,created_at")
+      .props(
+        `{
+          id
+          slug
+          title
+          created_at
+          metadata {
+            thumbnail {
+              imgix_url
+            }
+            video {
+              url
+            }
+            channel {
+              slug
+              title
+              metadata {
+                thumbnail {
+                  imgix_url
+                }
+              }
+            }
+          }
+        }`
+      )
       .depth(1)
       .sort(sort ? sort : "-order")
       .limit(limit ? limit : 100)
       .skip(skip ? skip : 0)
-      .status(status ? status : "published");
+      .status(status ? status : "published")
+      .options({
+        media: {
+          props: "alt_text",
+        },
+      });
     if (noWrap) return <Videos videos={videos} />;
     return (
       <div className={className}>

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@cosmicjs/sdk": "^1.0.11",
+    "@cosmicjs/sdk": "1.0.15",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
@@ -32,4 +32,4 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.5"
   }
-}
+}