feat(SW-200): Added other options for description and images

components/JsonToHtml/utils.tsx

@@ -113,7 +113,6 @@ export function nodeToHtml(
   if ("type" in node === false) {
     return textNodeToHtml(node, fullRenderOptions)
   } else {
-    console.log({ NODE: node, EMBEDS: embeds })
     if (fullRenderOptions[node.type] !== undefined) {
       if (node.type === RTETypeEnum.doc) {
         return null

lib/graphql/Fragments/MetaData.graphql

@@ -0,0 +1,13 @@
+fragment MetaDataImageConnection on SeoMetadata {
+  imageConnection {
+    edges {
+      node {
+        dimension {
+          height
+          width
+        }
+        url(transform: { width: "1200" })
+      }
+    }
+  }
+}

lib/graphql/Query/AccountPage/MetaData.graphql

@@ -1,11 +1,8 @@
-#import "../../Fragments/Image.graphql"
+#import "../../Fragments/MetaData.graphql"
 #import "../../Fragments/System.graphql"
 
 query GetAccountPageMetaData($locale: String!, $uid: String!) {
   account_page(locale: $locale, uid: $uid) {
-    system {
-      ...System
-    }
     web {
       breadcrumbs {
         title
@@ -13,14 +10,11 @@ query GetAccountPageMetaData($locale: String!, $uid: String!) {
       seo_metadata {
         description
         title
-        imageConnection {
+        ...MetaDataImageConnection
-          edges {
-            node {
-              ...Image
-            }
-          }
       }
     }
+    system {
+      ...System
     }
   }
 }

lib/graphql/Query/CollectionPage/Metadata.graphql

@@ -1,15 +1,8 @@
-#import "../../Fragments/Image.graphql"
+#import "../../Fragments/MetaData.graphql"
 #import "../../Fragments/System.graphql"
 
 query GetCollectionPageMetaData($locale: String!, $uid: String!) {
   collection_page(locale: $locale, uid: $uid) {
-    header {
-      heading
-      preamble
-    }
-    system {
-      ...System
-    }
     web {
       breadcrumbs {
         title
@@ -17,14 +10,16 @@ query GetCollectionPageMetaData($locale: String!, $uid: String!) {
       seo_metadata {
         description
         title
-        imageConnection {
+        ...MetaDataImageConnection
-          edges {
-            node {
-              ...Image
-            }
       }
     }
+    header {
+      heading
+      preamble
     }
+    hero_image
+    system {
+      ...System
     }
   }
 }

lib/graphql/Query/ContentPage/Metadata.graphql

@@ -1,15 +1,8 @@
-#import "../../Fragments/Image.graphql"
+#import "../../Fragments/MetaData.graphql"
 #import "../../Fragments/System.graphql"
 
 query GetContentPageMetaData($locale: String!, $uid: String!) {
   content_page(locale: $locale, uid: $uid) {
-    header {
-      heading
-      preamble
-    }
-    system {
-      ...System
-    }
     web {
       breadcrumbs {
         title
@@ -17,14 +10,25 @@ query GetContentPageMetaData($locale: String!, $uid: String!) {
       seo_metadata {
         description
         title
-        imageConnection {
+        ...MetaDataImageConnection
-          edges {
+      }
-            node {
+    }
-              ...Image
+    header {
+      heading
+      preamble
+    }
+    hero_image
+    blocks {
+      ... on ContentPageBlocksContent {
+        content {
+          content {
+            json
           }
         }
       }
     }
+    system {
+      ...System
     }
   }
 }

lib/graphql/Query/LoyaltyPage/MetaData.graphql

@@ -1,28 +1,33 @@
-#import "../../Fragments/Image.graphql"
+#import "../../Fragments/MetaData.graphql"
 #import "../../Fragments/System.graphql"
 
 query GetLoyaltyPageMetaData($locale: String!, $uid: String!) {
   loyalty_page(locale: $locale, uid: $uid) {
-    heading
-    preamble
-    system {
-      ...System
-    }
     web {
       seo_metadata {
         description
         title
-        imageConnection {
+        ...MetaDataImageConnection
-          edges {
-            node {
-              ...Image
-            }
-          }
-        }
       }
       breadcrumbs {
         title
       }
     }
+    heading
+    preamble
+    hero_image
+    blocks {
+      ... on ContentPageBlocksContent {
+        __typename
+        content {
+          content {
+            json
+          }
+        }
+      }
+    }
+    system {
+      ...System
+    }
   }
 }

server/routers/contentstack/metadata/output.ts

@@ -1,7 +1,10 @@
 import { z } from "zod"
 
+import { tempImageVaultAssetSchema } from "../schemas/imageVault"
 import { getDescription, getImages, getTitle } from "./utils"
 
+import { RTETypeEnum } from "@/types/rte/enums"
+
 export const rawMetaDataDataSchema = z.object({
   web: z.object({
     seo_metadata: z
@@ -14,6 +17,10 @@ export const rawMetaDataDataSchema = z.object({
               z.object({
                 node: z.object({
                   url: z.string(),
+                  dimension: z.object({
+                    width: z.number(),
+                    height: z.number(),
+                  }),
                 }),
               })
             ),
@@ -39,6 +46,36 @@ export const rawMetaDataDataSchema = z.object({
     })
     .optional()
     .nullable(),
+  hero_image: tempImageVaultAssetSchema,
+  blocks: z
+    .array(
+      z.object({
+        content: z
+          .object({
+            content: z
+              .object({
+                json: z.object({
+                  children: z.array(
+                    z.object({
+                      type: z.nativeEnum(RTETypeEnum),
+                      children: z.array(
+                        z.object({
+                          text: z.string().optional().nullable(),
+                        })
+                      ),
+                    })
+                  ),
+                }),
+              })
+              .optional()
+              .nullable(),
+          })
+          .optional()
+          .nullable(),
+      })
+    )
+    .optional()
+    .nullable(),
 })
 
 export const metaDataSchema = rawMetaDataDataSchema.transform((data) => {

server/routers/contentstack/metadata/utils.ts

@@ -1,3 +1,4 @@
+import { RTETypeEnum } from "@/types/rte/enums"
 import { RawMetaDataSchema } from "@/types/trpc/routers/contentstack/metadata"
 
 export const affix = "metadata"
@@ -30,15 +31,42 @@ export function getDescription(data: RawMetaDataSchema) {
   if (data.header?.preamble) {
     return data.header.preamble
   }
+  if (data.blocks?.length) {
+    const jsonData = data.blocks[0].content?.content?.json
+    // Finding the first paragraph with text
+    const firstParagraph = jsonData?.children?.find(
+      (child) => child.type === RTETypeEnum.p && child.children[0].text
+    )
+
+    if (firstParagraph?.children?.length) {
+      return firstParagraph.children[0].text
+    }
+  }
   return ""
 }
 
 export function getImages(data: RawMetaDataSchema) {
-  const metaData = data.web.seo_metadata
+  const metaDataImages = data.web.seo_metadata?.imageConnection?.edges
-  if (metaData?.imageConnection) {
+  const heroImage = data.hero_image
-    return metaData.imageConnection.edges.map((edge) => ({
+
+  if (metaDataImages?.length) {
+    return metaDataImages.map((edge) => {
+      const { width, height } = edge.node.dimension
+      return {
         url: edge.node.url,
-    }))
+        width: 1200,
+        height: Math.round((1200 * height) / width),
+      }
+    })
+  }
+  if (heroImage) {
+    return [
+      {
+        url: heroImage.url,
+        width: heroImage.dimensions.width,
+        height: heroImage.dimensions.height,
+      },
+    ]
   }
   return []
 }

types/trpc/routers/contentstack/metadata.ts

@@ -3,4 +3,4 @@ import { z } from "zod"
 import { rawMetaDataDataSchema } from "@/server/routers/contentstack/metadata/output"
 
 export interface RawMetaDataSchema
-  extends z.input<typeof rawMetaDataDataSchema> {}
+  extends z.output<typeof rawMetaDataDataSchema> {}

utils/generateMetadata.ts

@@ -1,5 +1,7 @@
 import { serverClient } from "@/lib/trpc/server"
 
 export async function generateMetadata() {
-  return await serverClient().contentstack.metaData.get()
+  const data = await serverClient().contentstack.metaData.get()
+
+  return data
 }