@levo-so/blocks 0.1.75 → 0.1.77

package/src/blocks/blogs/blog-listing-3.tsx

@@ -1,4 +1,8 @@
+import type { IModuleStudioConfig, IPost } from "@levo-so/core";
 import {
+  Avatar,
+  AvatarFallbackV2,
+  AvatarImageV2,
   Box,
   Button,
   Container,
@@ -8,52 +12,146 @@ import {
   Media,
   Section,
   Typography,
-  useContentEngine,
+  useBlockContext,
+  useContextEngine,
 } from "@levo-so/studio";
 import dayjs from "dayjs";
 
+import { ClientOnly } from "../event/ClientOnly";
 import type { IBlogListing3Content } from "./blog-listing-3.schema";
 
-const BlogListing3: React.FC<ILevoBlockBaseProps<IBlogListing3Content>> = ({}) => {
-  const { data, query, setQuery, meta } = useContentEngine("blogs");
+/** */
+interface IBlogMeta {
+  total: number;
+  pages: number;
+  blog?: {
+    studio_config?: IModuleStudioConfig[];
+  };
+}
+
+const BlogListing3: React.FC<ILevoBlockBaseProps<IBlogListing3Content>> = ({ content }) => {
+  const { response, query, setQuery } = useContextEngine<IPost, IBlogMeta>("blogs");
+  const { isBuilder } = useBlockContext();
 
   const handleNext = () => setQuery({ page: (query?.page || 0) + 1 });
   const handlePrevious = () => setQuery({ page: (query?.page || 0) - 1 });
 
+  const studioConfig = response?.meta?.blog?.studio_config?.find((item) => !item.block_instance_id);
+
   return (
     <Section elementKey="layout">
       <Container elementKey="container">
         <Box elementKey="header-wrapper">
           <Box elementKey="title-wrapper">
             <Icon elementKey="header-icon" />
-            <Heading elementKey="header" />
+            <Box elementKey="header-text-wrapper">
+              <Heading elementKey="header" />
+              <Typography elementKey="description" />
+            </Box>
+          </Box>
+          <Box elementKey="header-ctas_levoGroup" data-levo_group>
+            {content?.["header-ctas"]?.map((v, index: number) => (
+              <Button key={`header-ctas.${index}`} elementKey={`header-ctas.${index}.header-cta`} />
+            ))}
           </Box>
-          <Button elementKey="header-cta" />
         </Box>
         <Box elementKey="blogs_levoGroup" data-levo_group>
-          {(data || [])?.map((item: any, index: number) => (
-            <Box key={`blogs.${index}`} data-levo_group_item elementKey={`blogs.${index}.blog`}>
-              <Media elementKey={`blogs.${index}.media`} alt="Blog Media" />
+          {response?.data?.map((item, index: number) => (
+            <Box
+              key={`blogs.${index}`}
+              data-levo_group_item
+              elementKey={`blogs.${index}.blog`}
+              config={
+                (isBuilder && studioConfig?.preview_url) || (!isBuilder && studioConfig?.live_url)
+                  ? {
+                      action: {
+                        type: "external_link",
+                        value:
+                          isBuilder && studioConfig.preview_url
+                            ? studioConfig.preview_url.replace(/\{[^}]+\}/g, item?.slug)
+                            : !isBuilder && studioConfig.live_url
+                              ? studioConfig.live_url.replace(/\{[^}]+\}/g, item?.slug)
+                              : "",
+                        options: {},
+                      },
+                    }
+                  : {}
+              }
+            >
+              <Media
+                elementKey={`blogs.${index}.media`}
+                alt="Blog Media"
+                media={item?.cover_image ?? undefined}
+              />
               <Box elementKey={`blogs.${index}.blog-info-wrapper`}>
                 <Box elementKey={`blogs.${index}.blog-content`}>
-                  <Box elementKey={`blogs.${index}.blog-header`}>
-                    <Icon elementKey={`blogs.${index}.header-icon`} />
-                    <Typography elementKey={`blogs.${index}.blog-type`}>
-                      {data?.[index]?.["publish-date"] &&
-                      dayjs(data?.[index]?.["publish-date"]).isValid()
-                        ? dayjs(data?.[index]?.["publish-date"]).format("DD MMM, YYYY")
-                        : " "}
+                  <Box elementKey={`blogs.${index}.blog-header-wrapper`}>
+                    {item?.published_at && dayjs(item?.published_at).isValid() && (
+                      <Box elementKey={`blogs.${index}.blog-header`}>
+                        <Icon elementKey={`blogs.${index}.header-icon`} />
+                        <ClientOnly>
+                          <Typography elementKey={`blogs.${index}.publish-date`}>
+                            {dayjs(item?.published_at).format("DD MMM, YYYY")}
+                          </Typography>
+                        </ClientOnly>
+                      </Box>
+                    )}
+                    <Box elementKey={`blogs.${index}.blog-reading-time-wrapper`}>
+                      <Icon elementKey={`blogs.${index}.reading-time-icon`} />
+                      <Typography elementKey={`blogs.${index}.reading-time`}>
+                        {item?.reading_time ? `${item?.reading_time} min read` : "5 min read"}
+                      </Typography>
+                    </Box>
+                  </Box>
+                  <Box elementKey={`blogs.${index}.blog-content-wrapper`}>
+                    <Heading elementKey={`blogs.${index}.title`}>{item?.title}</Heading>
+                    <Typography elementKey={`blogs.${index}.description`}>
+                      {item?.summary}
                     </Typography>
                   </Box>
-                  <Heading elementKey={`blogs.${index}.title`} />
-                  <Typography elementKey={`blogs.${index}.description`} />
+                  <Box elementKey={`blogs.${index}.blog-footer`}>
+                    <Box elementKey={`blogs.${index}.blog-author`}>
+                      <Avatar className="h-10 w-10">
+                        <AvatarImageV2 src={item?.authors?.[0]?.profile_picture?.location} />
+                        <AvatarFallbackV2>
+                          {[item?.authors?.[0]?.first_name, item?.authors?.[0]?.last_name]
+                            ?.map((v) => v?.[0])
+                            .filter(Boolean)
+                            .join("")
+                            .toUpperCase()}
+                        </AvatarFallbackV2>
+                      </Avatar>
+                      <Box elementKey={`blogs.${index}.author-info-wrapper`}>
+                        <Heading elementKey={`blogs.${index}.author-name`}>
+                          {item?.authors?.[0]
+                            ? [item?.authors?.[0]?.first_name, item?.authors?.[0]?.last_name]
+                                .filter(Boolean)
+                                .join(" ")
+                            : "Anonymous"}
+                        </Heading>
+                        <Typography elementKey={`blogs.${index}.author-description`}>
+                          {item?.authors?.[0]?.bio || "Author"}
+                        </Typography>
+                      </Box>
+                    </Box>
+                    {item?.categories?.at(0)?.name && (
+                      <Box elementKey={`blogs.${index}.category_wrapper`}>
+                        <Icon elementKey={`blogs.${index}.category_icon`} />
+                        <ClientOnly>
+                          <Typography elementKey={`blogs.${index}.category`}>
+                            {item?.categories?.at(0)?.name}
+                          </Typography>
+                        </ClientOnly>
+                      </Box>
+                    )}
+                  </Box>
                 </Box>
                 <Button elementKey={`blogs.${index}.cta`} />
               </Box>
             </Box>
           ))}
         </Box>
-        {(meta?.pages || 0) > 1 && (
+        {response?.meta && (
           <Box elementKey="pagination-wrapper">
             <Button
               elementKey="pagination-left"
@@ -61,12 +159,12 @@ const BlogListing3: React.FC<ILevoBlockBaseProps<IBlogListing3Content>> = ({}) =
               onClick={handlePrevious}
             />
             <Typography elementKey="pagination-text">
-              {`${query?.page || 0}/${meta?.pages || 0}`}
+              {`${query?.page || 0}/${response?.meta?.pages || 0}`}
             </Typography>
             <Button
               elementKey="pagination-right"
               onClick={handleNext}
-              disabled={query?.page === meta?.pages}
+              disabled={query?.page === response?.meta?.pages}
             />
           </Box>
         )}

package/src/blocks/blogs/blog-post-1.schema.ts

@@ -19,17 +19,6 @@ const MEDIA = {
   },
 };
 
-const DUMMY_ICON = {
-  kind: "icon",
-  data: {
-    id: "archive-minus",
-    label: "Archive Minus",
-    tags: ["archive", "custom", "directional", "minus"],
-    svgCode:
-      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.5 11.4H9.5C9.09 11.4 8.75 11.06 8.75 10.65C8.75 10.24 9.09 9.90002 9.5 9.90002H14.5C14.91 9.90002 15.25 10.24 15.25 10.65C15.25 11.06 14.91 11.4 14.5 11.4Z" fill="var(--color-icon-primary)"/>\n<path d="M4.92957 22.75C4.50957 22.75 4.11957 22.65 3.76957 22.45C2.99957 22 2.55957 21.09 2.55957 19.96V5.86C2.55957 3.32 4.62957 1.25 7.16957 1.25H16.8196C19.3596 1.25 21.4296 3.32 21.4296 5.86V19.95C21.4296 21.08 20.9896 21.99 20.2196 22.44C19.4496 22.89 18.4396 22.84 17.4496 22.29L12.5696 19.58C12.2796 19.42 11.7096 19.42 11.4196 19.58L6.53957 22.29C5.99957 22.59 5.44957 22.75 4.92957 22.75ZM7.17957 2.75C5.46957 2.75 4.06957 4.15 4.06957 5.86V19.95C4.06957 20.54 4.23957 20.98 4.53957 21.15C4.83957 21.33 5.30957 21.27 5.81957 20.98L10.6996 18.27C11.4396 17.86 12.5596 17.86 13.2996 18.27L18.1796 20.98C18.6896 21.27 19.1596 21.33 19.4596 21.15C19.7596 20.97 19.9296 20.53 19.9296 19.95V5.86C19.9296 4.15 18.5296 2.75 16.8196 2.75H7.17957Z" fill="var(--color-icon-primary)"/>\n</svg>',
-  },
-};
-
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
@@ -42,14 +31,49 @@ const DEFAULT_CONTENT = {
   "meta-info": null,
   "author-container": null,
   "author-image-container": null,
-  "author-image": DUMMY_ICON,
+  "author-image": {
+    kind: "icon",
+    data: {
+      id: "archive-minus",
+      label: "Archive Minus",
+      tags: ["archive", "custom", "directional", "minus"],
+      svgCode:
+        '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.5 11.4H9.5C9.09 11.4 8.75 11.06 8.75 10.65C8.75 10.24 9.09 9.90002 9.5 9.90002H14.5C14.91 9.90002 15.25 10.24 15.25 10.65C15.25 11.06 14.91 11.4 14.5 11.4Z" fill="var(--color-icon-primary)"/>\n<path d="M4.92957 22.75C4.50957 22.75 4.11957 22.65 3.76957 22.45C2.99957 22 2.55957 21.09 2.55957 19.96V5.86C2.55957 3.32 4.62957 1.25 7.16957 1.25H16.8196C19.3596 1.25 21.4296 3.32 21.4296 5.86V19.95C21.4296 21.08 20.9896 21.99 20.2196 22.44C19.4496 22.89 18.4396 22.84 17.4496 22.29L12.5696 19.58C12.2796 19.42 11.7096 19.42 11.4196 19.58L6.53957 22.29C5.99957 22.59 5.44957 22.75 4.92957 22.75ZM7.17957 2.75C5.46957 2.75 4.06957 4.15 4.06957 5.86V19.95C4.06957 20.54 4.23957 20.98 4.53957 21.15C4.83957 21.33 5.30957 21.27 5.81957 20.98L10.6996 18.27C11.4396 17.86 12.5596 17.86 13.2996 18.27L18.1796 20.98C18.6896 21.27 19.1596 21.33 19.4596 21.15C19.7596 20.97 19.9296 20.53 19.9296 19.95V5.86C19.9296 4.15 18.5296 2.75 16.8196 2.75H7.17957Z" fill="var(--color-icon-primary)"/>\n</svg>',
+    },
+  },
   "author-name": "John Doe",
   "publish-date": "2025-05-20T10:23:31.297Z",
   "reading-time": "10 Minutes",
-  "blog-cover": MEDIA.placeholder,
+  "blog-cover": {
+    id: "7141014160938075687",
+    location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+    kind: "image",
+    mimetype: "image/png",
+    srcset: {
+      "1080w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      "1200w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+      "1920w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+      "320w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+      "640w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+      "750w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+      "828w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+      path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+    },
+  },
   "content-section": null,
   content:
     "Experience the difference of professional financial planning with our proven methodologies.",
+  "toc-title": "Table of Contents",
+  "toc-item-icon": {
+    kind: "icon",
+    data: {
+      id: "minus",
+      label: "Minus",
+      tags: ["custom", "essential", "minus"],
+      svgCode:
+        '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M18 12.75H6C5.59 12.75 5.25 12.41 5.25 12C5.25 11.59 5.59 11.25 6 11.25H18C18.41 11.25 18.75 11.59 18.75 12C18.75 12.41 18.41 12.75 18 12.75Z" fill="var(--color-icon-primary)"/>\n</svg>',
+    },
+  },
 };
 
 export type IBlogPost1Content = typeof DEFAULT_CONTENT;
@@ -61,6 +85,7 @@ export const BlogPost1: IBlock = {
   version: "v1",
   prompt_description:
     "Centered layout with a category label above a large headline, author and details underneath, a wide featured image, and a brief supporting text at the bottom left.",
+  source: [{ required: true, module: "blog", type: "page" }],
   content_schema: [
     {
       key: "layout",
@@ -117,6 +142,12 @@ export const BlogPost1: IBlock = {
         min_characters: 7,
         max_characters: 28,
       },
+      options: {
+        module_field: {
+          module: "blog",
+          key: "categories[0].name",
+        },
+      },
     },
     {
       key: "title-section",
@@ -137,6 +168,12 @@ export const BlogPost1: IBlock = {
         min_characters: 28,
         max_characters: 60,
       },
+      options: {
+        module_field: {
+          module: "blog",
+          key: "title",
+        },
+      },
     },
     {
       key: "meta-info",
@@ -157,17 +194,11 @@ export const BlogPost1: IBlock = {
       },
     },
     {
-      key: "author-image",
-      label: "Author Image",
-      field_interface: "IconWidget",
-      hint: {
-        prompt_description:
-          "Square profile photo of the author, small in size, used as an avatar next to the name.",
-        orientation: "square",
-        size: "icon",
-        usecase: "avatar",
-      },
+      key: "author-info-wrapper",
+      label: "Author Info Wrapper",
+      field_interface: "BoxWidget",
     },
+
     {
       key: "author-name",
       label: "Author Name",
@@ -179,6 +210,30 @@ export const BlogPost1: IBlock = {
         min_characters: 5,
         max_characters: 28,
       },
+      options: {
+        module_field: {
+          module: "blog",
+          key: "authors[0]",
+        },
+      },
+    },
+    {
+      key: "author-description",
+      label: "Author Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Author's description. Use proper capitalization, 2–3 words, simple formality.",
+        usecase: "author",
+        min_characters: 5,
+        max_characters: 28,
+      },
+      options: {
+        module_field: {
+          module: "blog",
+          key: "authors[0]",
+        },
+      },
     },
     {
       key: "publish-date",
@@ -191,6 +246,12 @@ export const BlogPost1: IBlock = {
         min_characters: 10,
         max_characters: 20,
       },
+      options: {
+        module_field: {
+          module: "blog",
+          key: "published_at",
+        },
+      },
     },
     {
       key: "reading-time",
@@ -203,6 +264,12 @@ export const BlogPost1: IBlock = {
         min_characters: 6,
         max_characters: 13,
       },
+      options: {
+        module_field: {
+          module: "blog",
+          key: "reading_time",
+        },
+      },
     },
     {
       key: "blog-cover",
@@ -210,11 +277,80 @@ export const BlogPost1: IBlock = {
       field_interface: "MediaWidget",
       hint: {
         prompt_description:
-          "Large, visually engaging banner illustrating the article’s theme. Use abstract, thematic, or relevant imagery. Should be clear and unobtrusive for a blog hero.",
+          "Large, visually engaging banner illustrating the article's theme. Use abstract, thematic, or relevant imagery. Should be clear and unobtrusive for a blog hero.",
         orientation: "landscape",
         size: "large",
         usecase: "hero",
       },
+      options: {
+        module_field: {
+          module: "blog",
+          key: "cover_image",
+        },
+      },
+    },
+    {
+      key: "content-wrapper",
+      label: "Content Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Main body container for the blog content. No direct content needed here.",
+      },
+    },
+    {
+      key: "toc-container",
+      label: "Table of Contents Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description: "Container for the table of contents. No direct content needed here.",
+      },
+    },
+    {
+      key: "toc-title",
+      label: "Table of Contents Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description: "Table of Contents Title",
+      },
+    },
+    {
+      key: "toc-list",
+      label: "Table of Contents List",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description: "Table of Contents List",
+      },
+    },
+    {
+      key: "toc-item-container",
+      label: "Table of Contents Item Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description: "Table of Contents Item Container",
+      },
+    },
+    {
+      key: "toc-item-icon",
+      label: "Table of Contents Item Icon",
+      field_interface: "IconWidget",
+      hint: {
+        prompt_description: "Table of Contents Item Icon",
+      },
+    },
+    {
+      key: "toc-item",
+      label: "Table of Contents Item",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Table of Contents Item",
+      },
+      options: {
+        module_field: {
+          module: "blog",
+          key: "table-of-content",
+        },
+      },
     },
     {
       key: "content-section",
@@ -236,6 +372,12 @@ export const BlogPost1: IBlock = {
         min_characters: 800,
         max_characters: 12000,
       },
+      options: {
+        module_field: {
+          module: "blog",
+          key: "content.html",
+        },
+      },
     },
   ],
   layouts: [
@@ -249,15 +391,13 @@ export const BlogPost1: IBlock = {
           "padding-bottom": "10xl",
           "padding-right": "8xl",
           "padding-left": "8xl",
-          "media:max:768px": {
+          tablet: {
             "padding-top": "5xl",
             "padding-bottom": "5xl",
             "padding-right": "5xl",
             "padding-left": "5xl",
           },
-          "media:max:480px": {
-            // "padding-top": "2xl",
-            // "padding-bottom": "2xl",
+          mobile: {
             "padding-right": "2xl",
             "padding-left": "2xl",
             "padding-top": "7xl",
@@ -285,7 +425,7 @@ export const BlogPost1: IBlock = {
         },
         "tag-container": {
           width: "fit-content",
-          "border-radius": "base",
+          "border-radius": "md",
           border: "1px solid",
           "border-color": "var(--color-border)",
           "background-color": "#E9E9EB",
@@ -320,7 +460,7 @@ export const BlogPost1: IBlock = {
           color: "var(--color-text-2)",
         },
         "author-container": {
-          display: "flex",
+          display: "none",
           "align-items": "center",
           "column-gap": "2xs",
           "row-gap": "2xs",
@@ -331,7 +471,7 @@ export const BlogPost1: IBlock = {
           "border-radius": "100%",
         },
         "author-name": {
-          color: "var(--color-text-2)",
+          "font-size": "base",
         },
         "publish-date": {
           "font-size": "sm",
@@ -355,6 +495,19 @@ export const BlogPost1: IBlock = {
             height: "164px",
           },
         },
+        "content-wrapper": {
+          display: "grid",
+          "grid-template-columns": "256px 1fr",
+          "column-gap": "3xl",
+          "align-items": "start",
+          tablet: {
+            "grid-template-columns": "1fr",
+            "row-gap": "xl",
+          },
+          mobile: {
+            "grid-template-columns": "1fr",
+          },
+        },
         "content-section": {
           display: "flex",
           width: "full",
@@ -371,10 +524,66 @@ export const BlogPost1: IBlock = {
         },
         content: {
           display: "flex",
-          width: "full",
+          width: "100%",
           "flex-direction": "column",
           "row-gap": "xl",
         },
+        "toc-container": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+          "padding-left": "lg",
+          "padding-right": "lg",
+          "padding-top": "lg",
+          "padding-bottom": "lg",
+          "border-radius": "lg",
+          "max-width": "256px",
+          "border-style": "solid",
+          "border-width": "1px",
+          "border-color": "border",
+          position: "sticky",
+          top: "2rem",
+          width: "100%",
+          tablet: {
+            "max-width": "100%",
+            "row-gap": "md",
+          },
+        },
+        "toc-title": {
+          "font-weight": 600,
+          tablet: {
+            "text-align": "center",
+          },
+        },
+        "toc-list": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xs",
+        },
+        "toc-item": {
+          display: "-webkit-box",
+          "-webkit-line-clamp": "3",
+          "-webkit-box-orient": "vertical",
+          overflow: "hidden",
+          _hover: {
+            color: "text-1",
+          },
+        },
+        "toc-item-container": {
+          display: "flex",
+          "column-gap": "sm",
+        },
+        "toc-item-icon": {
+          height: "10px",
+          width: "10px",
+          "font-size": "10px",
+          "min-width": "10px",
+          "margin-top": "4xs",
+          color: "text-2",
+        },
+        "author-description": {
+          "font-size": "sm",
+        },
       },
       content: DEFAULT_CONTENT,
       config: {
@@ -390,6 +599,27 @@ export const BlogPost1: IBlock = {
           selectedVariants: {
             Heading_Level: "H6",
           },
+          heading: {
+            level: "4",
+          },
+        },
+        "toc-title": {
+          heading: {
+            level: "5",
+          },
+          selectedVariants: {
+            Heading_Level: "H6",
+          },
+        },
+        "toc-item": {
+          selectedVariants: {
+            Typography_Variants: "Small",
+          },
+        },
+        "author-description": {
+          selectedVariants: {
+            Typography_Variants: "Small",
+          },
         },
       },
     },